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