Difference Between const, let And var

12 July 2019 - 31 views
Understanding the difference between const, let and var can help you write better code and avoid errors. In this quick tutorial, I will explain the differences between each of the keywords with examples. Let's first take a lot at the const keyword.

const


A variable declared as a const implies two things. First that a variable can not be re-declared and second that it's value is a one time assignment, that is its value cannot be changed. To demonstrate this, let's take a look at a sample code.

Listing 1

const pi = 3.14;

var pi = 3.14;

// throws SyntaxError, Identifier 'pi' has already been declared

If you run the code in listing 1, Nodejs will throw a SyntaxError with the error Identifier 'pi' has already been declared. This clears up the fact that a variable declared as const cannot be re-declared. If you tried to assign a new value to pi as shown in listing 2, Nodejs will throw a TypeError with the error Assignment to constant variable..

Listing 2

const pi = 3.14;

pi = 3.14;

// throws TypeError, Assignment to constant variable.

The definition of the word constant means "something that does not change" and so in JavaScript, the value of a variable declared as a const cannot change. Or can it? Well it turns out that this is primarily true for primitive types such as strings, integers etc. But not so true when it come to complex types such as objects and arrays. Take a look at the following example.

Listing 3

const user = { first_name : "John", last_name : "Smith" };
user.first_name = "Will";

console.log(user.first_name, user.last_name);

Listing 3 above shows a const variable that has been assigned an object. The object can be modified by assigning new values or even adding new properties. The same applies to arrays as shown in listing 4.

Listing 4

const users = [];

users.push("John");
users.push("Suzan");

console.log(users.toString());

Although you can modify the data structure, you still can't assign a new value to a const variable.

let


Variables that are declared as let are block scope local variables and unlike const variables, they can be re-declared. Listing 5 below shows the x variable declared as let and assigned the value 10. Notice that it is then re-declared within the if statement block and assigned a new value. This value will only be available within the ifstatement block. This is whats called block scope. The output of the code will produce 10 and 100.

Listing 5

let x = 100;

if(true){
  let x = 10;
  console.log(x);
  // outputs 10
}

console.log(x);
// outputs 100

We can demonstrate this further by simply removing the first initialization of the x variable as shown in listing 6.

Listing 6

if(true){
  let x = 10;
  console.log(x);
}

console.log(x);

What do you expect the output of the code above to be? If you said 10 followed by a ReferenceError, you would be correct because x is only available within the if statement block.

var


Probably the most used keyword in JavaScript (Don't quote me on that), var is what was used before const and let were introduced. Like the let keyword, var variables can be re-declared and re-assigned a value. The difference between var and let is that var variables are executed within the context they were defined. Either a function scope or a global scope. To understand this better, let's take a look at an example. Listing 7 below is similar to listing 6 above with the notable difference being that the variable x is declared as var.

Listing 7

if(true){
  var x = 10;
}

console.log(x);
// outputs 10

The code above will output 10 because the x variable is defined globally.