Var, let and const in JavaScript

Var, let and const in JavaScript

sunsetDo not declare variables in JavaScript with var. Use let or const instead. A natural question is what is the difference? All of this can be explained with a few examples.

var

JavaScript specification called ECMAScript 2015 introduced two new keywords: let and const. The main difference to var is a scope of declared variable or a constant. Before ECMAScript 2015 JavaScript had only two scopes: global and function. It means that a variable declared in a block like if statement as available outside of it as well.

"use strict";

if (3 === 3) {
   
var a = 2;

   
console.log("inside the block");
   
console.log("a=" + a);      // a=2
}

console.log("outside the block");
console.log("a=" + a);          // a=2

It is very unnatural for Java developers and not only for them.

 

let

Now developers can use let and const to make their code to look and behave more like other languages.

"use strict";

if (3 === 3) {
   
let a = 2;

   
console.log("inside the block");
   
console.log("a=" + a);      // a=2
}

console.log("outside the block");
console.log("a=" + a);          // Uncaught ReferenceError: a is not defined

A variable declared in a block is not visible outside of this block.

If for some reasons a variable with the same name is declared in the block and outside of the block, they are two different variables.

"use strict";

let a = 6;
if (3 === 3) {
   
let a = 2;

   
console.log("inside the block");
   
console.log("a=" + a);      // a=2
}

console.log("outside the block");
console.log("a=" + a);          // a=6

 

const

Const is very similar to let with a simple exception - it is used to declare constants not variables.

"use strict";

const a = 6;
if (3 === 3) {
   
const a = 2;

   
console.log("inside the block");
   
console.log("a=" + a);      // a=2
}

console.log("outside the block");
console.log("a=" + a);          // a=6

A constant cannot change a value that was assigned once.

"use strict";

const a = 6;
a = 3;      // Uncaught TypeError: Assignment to constant variable.

You may wonder how it works with arrays and objects. Here is the answer - similarly to Java, it is more like inability to reassign the value but the array/object can be modified.

"use strict";

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

 

Best practice

JavaScript allowed a lot of dangerous practices in the past. For the last few versions we see more and more restrictions like "use strict" mode which is positive in my opinion. These changes are especially important when the code is maintained by more than one developer. It is just easier to understand it when it follows some common rules.

Use let and const instead of var if the browsers you need support them.

If you like what I do, consider buying me a coffee :)

Buy me a coffeeBuy me a coffee