Skip to content

JavaScript language basics

JavaScript is a language that looks very similar to languages that you have used in the past, such as Java, C++ or Racket. As you'll see, some concepts are indeed very similar, although some things are a bit different.

Variables: let vs const vs var

In JavaScript there are three ways to declare a variable:

  • let x = 'hello'
  • const y = "I won't change"
  • var z = 'never use me like this'

JavaScript doesn't have types - this means that a variable can take a value of any type, and can change types at will. This gives us a great deal of flexibility when working with the language. For example, the following is a valid JavaScript code:

1
2
let x = 'I am a string'
x = 5 + 5

In the list above we also see the const variable type. As you might expect, this type of variable is a constant, and its value won't change. For example, this code will fail:

1
2
const x = 5
x = 6 // Uncaught TypeError: Assignment to constant variable.

Constants are very useful when we want to ensure that a certain variable won't change (like in C, where we declare global constants) or when we want to maintain the answer from a certain function untouched.

Semicolons are optional

JavaScript does something called Automatic Semicolon Insertion. This feature means that we don't have to worry about semicolons, as the JavaScript interpreter will insert them automatically, but we can also use them if we feel like it.

Why is var so introverted ?

You may have noticed that var above isn't the most friendly type. This is because var isn't scope-limited, and this can cause some nasty things. For example, var allows you to declare the same variable twice:

1
2
3
var x = 5
var x
console.log(x) // Prints 'undefined'

var also does some nasty things such as not being block scoped, which can cause a whole lot of problems, but we won't deal with those as they are not our focus here.

The moral here is simple:

Don't use var!

Special values

As in any language, there are a couple of values that you might see around and that have a special meaning to them:

  • undefined - this means that the variable has been declared but not initialized (let x)
  • NaN - stands for not a number. This is set when doing invalid conversion operations:
1
2
3
let x = 'hello'
x.toString() 
console.log(x) //NaN
  • null - returned from some functions when no response can be given.

Functions

Functions in JavaScript have a couple of interesting properties:

  • they can take any number of arguments
  • they can be passed around as variables
  • they can be declared as variables
  • they can be called asynchronously

Functions are usually declared in one of two ways:

  • With the function keyword:
1
2
3
function add (a, b) {
  return a + b
}
  • As an arrow function:
1
let sum = (a, b) => a + b

Arrow functions are a more compact form of writing a function, without declaring it explicitly. They have some interesting properties:

  • if they have only one argument, the parantheses can be omitted:
1
let inc = a => a + 1
  • they return anything that's after the arrow if there are no brackets:
1
2
3
4
5
6
let withoutBrackets = (a, b) => a + b
let withBrackets = (a, b) => { let sum = a + b }

console.log(withoutBrackets(1,2)) // logs 3
console.log(withBrackets(1,2)) // logs undefined because we 
                               // don't return anything

Callbacks

A function that is passed as a parameter is usually called a callback. This is because that function is usually called back at a later time. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function sayHi () {
  console.log('Hi!')
}

function iHaveACallback(callback) {
  setTimeout(
    () => callback(), // The function we want to call
    1000 // Miliseconds to wait before calling the function
  )
}

iHaveACallback(sayHi) // Will print 'Hi!' after 1 second

Try running the code above in your browser's developer console and see what happens 😊

Network requests using fetch

In order to do network requests, we're going to use the Fetch API. This API is based on Promises. It looks weird at first, but promises are just another way to write callback functions. For example, a simple Fetch request looks like this:

1
2
3
4
fetch('https://jsonplaceholder.typicode.com/posts/1') // Make a GET request
  .then(response => response.json()) // Treat the response as JSON
  .then(json => console.log(json)) // Prints a JSON object
  .catch(e => console.log('Uh oh! An error occured'))

You can see that the Fetch promise has three parts:

  • fetch('https:...') - This is the main call of the function. It specifies the URL we want to request
  • .then(...) - This function specifies what we do after the request is done. We can have multiple chained then calls, and each function sent as a parameter will get the previous function's return value
  • .catch - This function will run whenever an error occurs