I would like to cover one of the important concepts of JavaScript - let, const, and var. Although these concepts may seem simple, can you really explain the difference...? For those that struggle to explain the difference (like me!), I wrote this post to help your understanding.

let

First, let's have a look at let. Here is the MDN definition :

The let statement declares a block-scoped local variable, optionally initializing it to a value.

Use let when you want to declare a variable that the value might change later. Take a look at this example:

let fruit = 'apple';
console.log(apple); //apple

fruit = 'banana';
console.log(fruit); //banana

let is block-scoped

let has its scope in the declared block. This is the difference between var (explained more in the var section, along with why var isn't recommended).

function changeFruitName(){
  let fruit = 'apple';
  console.log(fruit); //apple

  fruit ='banana'; 
  console.log(fruit); //banana
}

changeFruitName();
console.log(fruit); //ReferenceError fruit is not defined

As you can see in the example above, you cannot access variable fruit from outside the function (outside the declared block), since it is declared inside the function block.

let requires declaration (initial value optional)

let needs to be declared before execution (initialization happens when declared).

console.log(fruit2); //ReferenceError
let fruit2;

If you declare but no initial value is set, the variable is initialized with a value of undefined.

let fruit;
console.log(fruit); //undefined

const

MDN defines const as the following:

Constants are block-scoped, much like variables declared using the let keyword. The value of a constant can't be changed through reassignment, and it can't be redeclared.

Use const when the value would not change afterward.

const is block-scoped

Same as let, const has its scope in the declared block. Variables cannot be accessed from outside the block.

function changeFruitName(){
  const fruit = 'apple';
  console.log(fruit); //apple
}

changeFruitName();
console.log(fruit); //ReferenceError

const requires declaration & initial value

Same as let, const requires declaration before execution.

console.log(fruit1); //ReferenceError
const fruit1 = 'apple';

const fruit2 = 'apple';
console.log(fruit2); //apple

For const, both declaration & specifying initial value is required. This is different from let when the initial value is optional.

const fruit; //doesn't work
const fruit = 'apple'; //works

const can be used with objects and arrays. If there are declared, you can do like below. This is not re-assigning or re-declaring.

const object = {};
object.fruit = 'apple';
console.log(object); //{fruit: "apple"}

const array = [];
array.push('apple');
console.log(array); //["apple"]

Below would be an error since it is re-assigning.

const object = {};
object = {fruit: 'apple'};
console.log(object); //Error

const array = [];
array = ['apple'];
console.log(array); //Error

var

According to MDN , var defines as below:

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.

var is function-scoped or globally-scoped

var is not block-scoped, it is function-scoped or globally-scoped. Unlike let, var is processed first before anything gets executed and can be accessed before it is declared. This is called hoisting. In other words, declaring a variable anywhere in the code is the same as declaring it at the top. The initial value is undefined.

console.log(fruit1); //undefined
var fruit1 = 'apple';

console.log(fruit2); //ReferenceError
let fruit2 = 'apple';

var can be declared anywhere (confusion point 1)

Let's see another example. Here is a code using let, which is declared at the end. let needs initialization before execution. Therefore, the below will not work.

fruit = 'apple';

function changeFruitName(){
  console.log(fruit); 
  fruit ='banana'; 
  console.log(fruit); 
}

changeFruitName(); 
let fruit;
console.log(fruit);

However, this would work with var because of hoisting. In the code below, let is replaced with var.

fruit = 'apple';

function changeFruitName(){
  console.log(fruit); //apple
  fruit ='banana'; 
  console.log(fruit); //banana
}

changeFruitName();
var fruit;
console.log(fruit); //banana

To avoid confusion, you should avoid using var and use what requires an initial declaration, such as let and const.

Same var can be declared multiple times (confusion point 2)

Another reason you should avoid var is that you can re-declare the same variable many times. In the example below, let cannot declare the same fruit variable but var can. This is confusing and should be avoided.

let fruit = 'apple';
let fruit = 'banana';
console.log(fruit); //Error 'fruit' has already been declared

var fruit = 'apple';
var fruit = 'banana';
console.log(fruit); //banana

Further Info: The difference between var and let

Summary

In your code, it is better to avoid unnecessary changes to the variables. Personally, I use the rule below:

Use const whenever you can.
If you need to change the value of the variable, replace const with let.
Avoid using var since it is function-scoped or globally-scoped, enables variable declaration after initialization, and accepts the same declaration multiple times. Use block-scope declarations like let and const.

Thank you for reading! I hope you enjoyed it!

Aya Takamura