Difference between Var, Let and Const in JavaScript

Saturday, January 15, 2022

Overview

Although Var, Let, and Const all are ways of declaring variables in JavaScript. There are some differences between them in terms of scope, modification, and re-declaration of the variable.

var a = 1;
let b = 1;
const c = 1;

Note: Scope essentially means where these variables are available for use.

Comparison Table

	Var	Let	Const
Scope Type	Global or Local Scoped	Block Scoped	Block Scoped
Update existing value	True	True	False
Re-declaration of variable	_True _	False	False
Hoisting Behavior	initialized with undefined in global scope	initialized in block scope	initialized in block scope

Var

Users can:

1. Update the variable declared by var.
2. Re-declare the variable declared by var.

Example 1

var a = 1; // First declaration
console.log(a);

a = 5; // Updating the variable
console.log(a);

var a = 2; // Re-declaring the variable
console.log(a);

Output:
1
2
3

Let

Users can:

1. Update the variable declared by var.

Example 1

Example 1

let a = 5;
console.log(a);

a = 2; // Updating the variable
console.log(a);

Output:
5
2

Users cannot:

1. Re-declare the variable declared by let.

Example 2

let b = 5;
let b = 3; // This is throw an error

Output:
Cannot redeclare block-scoped variable 'b'

Const

Users cannot:

1. Update the variable declared by const.
2. Re-declare the variable declared by const.

Example 1

const a = 5;
a = 10; // This will throw an error

Output:
Uncaught TypeError: invalid assignment to const 'a'

Example 2

const b = 5;
const b = 3; // This will throw an error

Output:
Cannot redeclare block-scoped variable 'b'

One additional point to remember about const is that:
Every const declaration must be initialized at the time of declaration.

Example 3

const c;
// This is an error because 'const' declarations must be initialized.

Output:
Uncaught SyntaxError: missing = in const declaration

---

Scope of Var is either Global or Local

Global Scoped variable is any variable that is declared with var outside of a function block. And it is available for use in the whole program.

var a = 10; // Globally scoped variable 'a'

function f1() {
  console.log(a); // Accessing ‘a’ inside the function
}

f1();

console.log(a); // Accessing ‘a’ outside the function

Output:
10
10

Local Scoped variable is any variable that is declared with var within the function block. And it is available and can be accessed only within that function.

function f2() {
  var b = 10; // Function or Locally scoped variable 'b'

  console.log(b);
}

console.log(b); // Uncaught ReferenceError: b is not defined

Output:
10
Uncaught ReferenceError: b is not defined

Scope of Let and Const is Block

A block is a chunk of code bounded by .

Block Scoped variable is any variable that is declared with let or const within the block. And it is only available for use within that block.

Var Examples Example 1

if (true) {
  let a = 15;
}
console.log(a); // Uncaught ReferenceError: a is not defined

Output:
Uncaught ReferenceError: a is not defined

Example 2

let b = 33;
if (true) {
  let b = 44; // Different b from outside of this block
  console.log(b); // ‘b’ which is declared inside this block
}
console.log(b); // ‘b’ which is declared outside of if block

Output:
44
33

Example 3 Since we again declare 'c' inside the if block, the console.log(c) will throw Uncaught ReferenceError: can't access lexical declaration 'c' before initialization.
This is because of the block-scoped and hoisting nature of the let variables.

let c = 33;
if (true) {
  console.log(c); // Will throw an error
  let c = 44;
}

Output:
Uncaught ReferenceError: can't access lexical declaration 'c' before initialization

Example 4

let d = 33;
if (true) {
  console.log(d);
  d = 44; // This ‘d’ variable is same ‘d’ from outside of this block
  console.log(d);
}
console.log(d);

Output:
33 44 44

Const Examples

Example 1

if (true) {
  const a = 15;
}
console.log(a); // Uncaught ReferenceError: a is not defined

Output:
Uncaught ReferenceError: a is not defined

Example 2

const b = 33;
if (true) {
  const b = 44; // Different b from outside of this block
  console.log(b); // ‘b’ which is declared inside this block
}
console.log(b); // ‘b’ which is declared outside of if block

Ouput:
44 33

Example 3

Since we again declare 'c' inside the if block, the console.log(c) will throw Uncaught ReferenceError: can't access lexical declaration 'c' before initialization.
This is because of the block-scoped and hoisting nature of the const variables.

const c = 33;
if (true) {
  console.log(c); // Will throw an error
  const c = 44;
}

Output:
Uncaught ReferenceError: can't access lexical declaration 'c' before initialization

---

Hoisting of Var, Let, and Const

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

All declarations (function, var, let, const and class) are hoisted in JavaScript, while the var declarations are initialized with undefined, but let, and const declarations remain uninitialized.

Hoisting of Var variables

console.log(a); // outputs 'undefined'
var a = 3;

Output:
undefined

Hoisting of Let variables

console.log(b); // Will throw error
let b = 3;

Output:
Uncaught ReferenceError: can't access lexical declaration 'b' before initialization

Hoisting of Const variables

console.log(c); // Will throw error
const c = 3;

Output: Uncaught ReferenceError: can't access lexical declaration 'c' before initialization

Note: Please refer to the Hoisting in JavaScript Articles for more information.