Table of content

var Vs let Vs const

A lot of new concepts were introduced in ES6. One of them is let and const.

Why you should prefer let/const instead of var for declaring variables?

To answer this question, we need to look at the following aspects for all 3 of them –

  • Scope: Scope is mainly of two types — function scope and block scope.
  • Behaviour: Redeclaration and Updation
  • Hoisting: It is a concept that allows you to use the variable early and declare it later.

var

Before ES6 var was the only available way to declare variables.

Scope

It is a function scoped which means variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function.

If declared outside of a function, the scope is the global scope.

example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function solve() {
	var a  = 10;
	console.log(a);    // 10
	if(true) {
		var a = 20;
		console.log(a);  // 20
	}
	console.log(a);  // 20
}

solve();
console.log(a); // a is not defined

/*
variable `a` on line 2 is declared inside function `solve`
and will only be accessible inside solve().

on line 12, error is printed because `a` can only be accessed
inside the scope of a function in which it is declared
*/

Behaviour

var can be redeclared and update. It mainly leads to confusion and causes an error in the application. That is why new methods to declare a variable were introduced in ES6.

example:

1
2
3
4

var myName = "foo";
var myName = "bar";

console.log(myName);    // bar

Hoisting

var works with hoisting, which means you can use the variable early and declare it at a later stage and your code will work fine.

example:

1
2
3
4
5
6
7
8

// actual code
console.log(myName);    // undefined
var myName = "foo"; 

// (interpreted by compiler as)
var myName;
console.log(myName);
myName = "foo";

This code won’t break, you will just see undefined as an output.

let

let is a new way of declaring a variable in javaScript. It was introduced in the ES6 version launched in 2015.

Scope

let creates a block-scoped variable, that is their scope is limited to the {}(curly braces) only.

example:

1
2
3
4
5
6
7
8
9

function solve() {
	let a  = 10;
	console.log(a);    // 10
	if(true) {
		let a = 20;
		console.log(a);  // 20
	}
	console.log(a);  // 10
}

Behaviour

It can be updated but can not be redeclared.

example:

1
2
3
4
5
6
7
8
9

// SyntaxError: Identifier 'myName' has already been declared
let myName = "foo";
let myName = "bar";

// Updation is allowed
let myName = "foo";
myName = "bar";
console.log(myName);    // bar

Hoisting

Hoisting also works with let, it also get hoisted to the top of its scope but in this instead of getting undefined, you will get a reference error.

example:

1
2
3
4
5

if (true) {
  console.log(a);   // Uncaught ReferenceError: Cannot access 'a' before initialization

  let a = 5;
}

const

const is a new way of declaring a variable in javaScript. It was introduced in the ES6 version launched in 2015.

Scope

const creates a block-scoped variable, that is their scope is limited to the {}(curly braces) only.

example:

1
2
3
4
5
6
7
8
9

function solve() {
	const a  = 10;
	console.log(a);    // 10
	if(true) {
		const a = 20;
		console.log(a);  // 20
	}
	console.log(a);  // 10
}

Behaviour

It can not be either updated or redeclared.

example:

1
2
3
4
5
6
7
8

// error
const myName = "foo";
const myName = "bar";

// error
const myName = "foo";
myName = "bar";

const with primitives

But there is a caveat here. If you declare an object using const, it can be updated.

example:

1
2
3
4
5
6
7

const obj = {
  a: 5
}

obj['a'] = 6;

console.log(obj);   // { a: 6 }

This is because in the case of object update, the object’s memory reference does not change, and const only throws an error if the reference changes.

const with objects

Hoisting

Hoisting also works with const, it also get hoisted to the top of its scope but in this instead of getting undefined, you will get a reference error.

example:

1
2
3
4
5

if (true) {
  console.log(a);   // Uncaught ReferenceError: Cannot access 'a' before initialization

  const a = 5;
}

Summary

Description Scope Behaviour Hoisting
var Before ES6 var was the only available way to declare variables Function scoped.
 Can be redeclared

Can be updated		 Hoisted
let Introduced in ES6 Block scoped Can not be redeclared

Can be updated		 Hoisted, but throws reference error
const Introduced in ES6 Block scoped Can not be redeclared

Can not be updated		 Hoisted, but throws reference error

Interview questions

Theory questions

  • What is the difference between let, var and const? Explaination
  • Why let and const were introduced in ES6, when var was already present to declare variables? Explaination
  • Can we declare read-only objects and arrays using const keyword? If not, why? Explaination

var Input/Output

Question 1

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  var foo = 10;
  console.log("foo 1 : ", foo);   // ?
}

solve();
console.log("foo 2 : ", foo);   // ?

Solution 1

Question 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// What will get printed in console?
function solve() {
  var foo = 10;
  console.log("foo 1 : ", foo);   // ?

  if(true) {
    var foo = 30;
    console.log("foo 2 : ", foo);   // ?
  }

  function solve2() {
    var foo = 40;
    console.log("foo 3 : ", foo);   // ?    
  }

  solve2();
  console.log("foo 4 : ", foo);   // ?    
}

solve();

Solution 2

Question 3

1
2
3
4
5

// What will get printed in console?
var foo = 10;

console.log("foo 1 : ", foo);   // ?
console.log("window foo : ", window.foo);   // ?

Solution 3

Question 4

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  var foo = 10;
  var foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 4

Question 5

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  var foo = 10;
  foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 5

Question 6

1
2
3
4
5
6

// What will get printed in console?
function solve() {
  console.log("foo : ", foo);   // ?
  var foo = 10;
}
solve();

Solution 6

let Input/Output

Question 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// What will get printed in console?
function solve() {
  let foo = 10;
  console.log("foo 1 : ", foo);   // ?

  if(true) {
    let foo = 30;
    console.log("foo 2 : ", foo);   // ?
  }

  function solve2() {
    let foo = 40;
    console.log("foo 3 : ", foo);   // ? 
  }

  solve2();
  console.log("foo 4 : ", foo);   // ?    
}

solve();

Solution 1

Question 2

1
2
3
4
5

// What will get printed in console?
let foo = 10;

console.log("foo 1 : ", foo);   // ?
console.log("window foo : ", window.foo);   // ?

Solution 2

Question 3

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  let foo = 10;
  let foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 3

Question 4

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  let foo = 10;
  var foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 4 Question 5

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  let foo = 10;
  foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 5

Question 6

1
2
3
4
5
6

// What will get printed in console?
function solve() {
  console.log("foo : ", foo);   // ?
  let foo = 10;
}
solve();

Solution 6

const Input/Output

Question 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// What will get printed in console?
function solve() {
  const foo = 10;
  console.log("foo 1 : ", foo);   // ?

  if(true) {
    const foo = 30;
    console.log("foo 2 : ", foo);   // ?
  }

  function solve2() {
    const foo = 40;
    console.log("foo 3 : ", foo);   // ? 
  }

  solve2();
  console.log("foo 4 : ", foo);   // ?    
}

solve();

Solution 1

Question 2

1
2
3
4
5

// What will get printed in console?
const foo = 10;

console.log("foo 1 : ", foo);   // ?
console.log("window foo : ", window.foo);   // ?

Solution 2

Question 3

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  const foo = 10;
  const foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 3

Question 4

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  const foo = 10;
  var foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 4

Question 5

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  const foo = 10;
  foo = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 5

Question 6

1
2
3
4
5
6
7
8

// What will get printed in console?
function solve() {
  const foo = {a: 10};
  foo['a'] = 20;

  console.log("foo : ", foo);   // ?
}
solve();

Solution 6

Question 7

1
2
3
4
5
6

// What will get printed in console?
function solve() {
  console.log("foo : ", foo);   // ?
  const foo = 10;
}
solve();

Solution 7

-->