let, const and var in Javascript

Recently, I started taking a course ES6 For Everyone by Wes Bos to brush up my ES6. I will be posting about ES6 as I go through the course.

Today, I am going to talk about let, const and var. Before ES6, we only had var and variables declared using var are function scoped. Let's see an example:

function setHeight() {
  var height = 100;
  console.log(height);
}

setHeight(); // logs 100
console.log(height); // gives a Reference Error saying height is not defined

Above, we can see that variables declared with var inside a function cannot be used outside a function. But what if I declare a variable inside a block (say if block).

var age = 50;
if (age > 12) {
  var dogYears = age * 7;
  console.log(`You are ${dogYears} dog years old!`);
}

console.log(dogYears); // logs 350!!!

So, variables declared with var inside a block can be accessed outside the block. The dogYears variable is not needed outside the if block and it should not be accessible outside it. To solve this problem, we can use either let or const.

var age = 50;
if (age > 12) {
  let dogYears = age * 7; // notice the 'let'
  console.log(`You are ${dogYears} dog years old!`);
}

console.log(dogYears); // ReferenceError: dogYears is not defined

We can see that variables declared by let and const are block scoped. The only difference between let and const is that variables declared with const cannot be reassigned.

let person = {
  name: 'Anku',
  age: 100
};

// Reassigning is allowed with 'let'
person = {
  name: 'Elliot',
  age: 36
};

const rectangle = {
  height: 10,
  width: 20
};

// Reassigning is not allowed with 'const'
// It will give an error
rectangle = {
  height: 40,
  width: 100
};

Although, variables declared with const cannot be reassigned but their properties can be changed. In other words, they are mutable.

const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]

arr[0] = 100;
console.log(arr); // [100, 2, 3]

var inside a for loop

We often run into problems when using a for loop with var. Let's start with simple code.

for (var i = 0; i < 10; i++) {
  console.log(i); // logs from 1 to 9
}

console.log(i); // logs 10

Above, we encounter the same variable 'leaking' problem. i can be accessed outside the for loop. We can fix this using let instead of var. If you think that this was not a big deal then you have not run into a situation where you have to call an asynchronous function inside a for loop. Let's see an example with setTimeout function.

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The value of i is ' + i);
  }, 1000); // runs after a second.
}

// Prints
// 'The value of i is 10'
// 10 times

This is not what we wanted. We had called setTimeout with different values of i so it must have printed different values. If we change var to let, we will get the desired result.

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log('The value of i is ' + i);
  }, 1000); // runs after a second.
}

// Prints
// The value of i is 0
// The value of i is 1
// The value of i is 2 and so on

Temporal Dead Zone

// age is not declared yet, but it won't give us an error.
console.log(age); // prints 'undefined'

var age = 100;

// same behaviour as
let height;
console.log(height); // undefined

Variables declared with var can be accessed even before they are declared. But, what happens when doing the same with let?

console.log(age); // Ref Error: age is not defined
let age = 100;

Variables declared with let and const cannot be accessed before their declaration.This is called Temporal Dead Zone.

Now, that we know about let, const, and var, what should we use? Well, that does depend on your personal choice but I like to use const by default and when I need to reassign variables I use let. var should not be used in ES6.

This is it for this post. Thanks for reading. I will post more about ES6 in future.