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

Block Example

{
 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 Example

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.

Block Example

• 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 Example

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.

Example

{
 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"

• Note that these variables defined by const cannot be re-assigned
  

{
 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

---

Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

If you are Instagram person, follow me here

Comments

[Arvind Padmanabhan]

The keywords also differ when it comes to JavaScript hoisting. Learn more here: devopedia.org/hoisting