What’s the difference between var, let, and const keywords?

JavaScript has three ways to declare variables.

var width = 100;
let height = 200;
const key = "Tech Talks";

var

  • The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined.
  • If it is defined outside any function, the scope of the variable is global.
  • var is function scoped
{
var a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
  • We are using the keyword var to define the variable a, the scope of a is limited to the function within which it is defined.
  • Since a is not defined within any function, the scope of the variable a is global, which means that a is recognized within block 2
function fun1() {
var a = 10;
console.log(a);
} //function scope of fun1
function fun2() {
a++;
console.log(a);
} //function scope of fun2
  • Since we have enclosed fun1 and fun2, within separate functions, the scope of var a=10, is limited to fun1 and a is not recognized in fun2.

let:

  • The let keyword was introduced as part of ES6 syntax, as an alternative to var to define variables in Javascript.
  • The scope of a variable defined with the keyword let or const is limited to the block defined by curly braces i.e. {}
  • let is block scoped.
  • Let us rewrite the code using the keyword let
{
let a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
  • Since we are using let a=10, scope of a is limited to block 1 and a is not recognized in block 2
function fun1() {
let a = 10;
console.log(a);
} //function scope of fun1
function fun2() {
a++;
console.log(a);
} //function scope of fun2
  • Since we have enclosed fun1 and fun2, within separate functions, the scope of let a=10, is limited to fun1, and "a" is not recognized in fun2.

const:

  • If a variable is defined with keyword const, it cannot be reassigned.
  • If a variable is defined using the const keyword, its scope is limited to the block scope
  • It is important to understand that const does NOT mean that the value is fixed and immutable.
  • It CAN be mutated.
{
const a = 10;
console.log(a);
} //block 1
{
a++;
console.log(a);
} //block 2
  • Since we are using const a=10, scope of "a" is limited to block 1 and "a" is not recognized in block 2.
  • Example to show that the value of the variable defined within the const keyword is mutable, i.e. it can be changed
{
const a = [1, 2, 3];
const b = { name: "hello" };
a.push(4, 5); //mutating the value of constant "a"
b.name = "World"; //mutating the value of constant "b"
console.log(a); //this will show [1,2,3,4,5]
console.log(b); //this will show {name: "World"}
}
  • This code will run without any errors, and shows that we CAN mutate the values that are defined by “const”
{
const name = "Tech Talks";
const PI = 3.14;
const a = [1, 2, 3];
const b = { name: "Hello" };
name = "Ankit Kumar"; //Throws an error, since we are attempting to re-assign "name” to a different value.
PI = PI + 1; //Throws an error, since we are attempting to re-assign PI to a different value.
a = [1, 2, 3, 4, 5]; //Throws an error, since we are attempting to re-assign "a" to a different value.
b = { name: "Hello Ankit" }; //Throws an error, since we are attempting to re-assign "b" to a different value.
}

Summary

var:

  • function scoped
  • undefined when accessing a variable before it’s declared

let:

  • block scoped
  • ReferenceError when accessing a variable before it’s declared

const:

  • block scoped
  • ReferenceError when accessing a variable before it’s declared
  • can’t be reassigned