JavaScript let vs const

In JavaScript, variables can be declared using three different keywords: var, let, and const.
These keywords have some differences in terms of how they behave and can affect the behaviour of your code.

var is the oldest way of declaring variables in JavaScript.
It has a function scope, meaning that it is accessible anywhere within the function it is declared in.
However, if var is declared outside of any function, it will have a global scope,
meaning that it can be accessed anywhere in the code.
One thing to note with var is that it is hoisted1 to the top of its scope, which means that it can be accessed before it is declared.

It is recommended to use let instead of var in order to avoid mistakes.

let

1. let variables are block-scoped. They are only visible within the block in which they are declared, such as loops, conditions, or functions.


function letBlockScopeExample() {
  let ifConditionBoolean = true;
  if (ifConditionBoolean) {
      let foo = 4;
      console.log(foo); // Output: 4 (visible within the block)
  }
  console.log(ifConditionBoolean) // Output: true (visible within the function block)
  console.log(foo); // Uncaught ReferenceError: foo is not defined
}

letBlockScopeExample();

2. let variables are hoisted1 to the top of their block scope but are not initialized. Accessing a let variable before its declaration results in a ReferenceError.


function letHoistingExample1() {
  console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
  let foo = "hey";
  // console.log(foo);
}

function letHoistingExample2() {
  // console.log(foo);
  let foo = "hey";
  console.log(foo); // Output: "hey"
}

letHoistingExample1();
letHoistingExample2();

3. let variables can be reassigned within their scope, but they cannot be redeclared in the same scope.


function letReassignedExample() {
  let foo = "hey";
  console.log(foo); // Output: "hey"
  foo = "hey there";
  console.log(foo); // Output: "hey there"
}

function letRedeclaredExample() {
  let foo = "hey";
  console.log(foo);
  let foo = "Hello"; // SyntaxError: Identifier 'foo' has already been declared
}

letReassignedExample();

const

1. const variables are block-scoped, similar to let.


function constBlockScopeExample() {
  const ifConditionBoolean = true;
  if (ifConditionBoolean) {
      const foo = 4;
      console.log(foo); // Output: 4 (visible within the block)
  }
  console.log(ifConditionBoolean) // Output: true (visible within the function block)
  console.log(foo); // Uncaught ReferenceError: foo is not defined
}

constBlockScopeExample();

2. Like let, const variables are hoisted1 to the top of their block scope but are not initialized.

Accessing a const variable before its declaration results in a ReferenceError.


function constHoistingExample1() {
  console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
  const foo = "hey const";
  // console.log(foo);
}

function constHoistingExample2() {
  // console.log(foo);
  const foo = "hey const";
  console.log(foo); // Output: "hey const"
}

constHoistingExample1();
constHoistingExample2();

3. const variables cannot be reassigned once they are initialized. However, the value they hold can still be mutable if it’s an object or an array.


function testConst() {
  const x = 4;
  x = 44; // Uncaught TypeError: Assignment to constant variable.
}

closing note ->

Use const for variables that won’t be reassigned and let for all other variables and variables that will be reassigned.

  1. JavaScript hoisting moves variable and function declarations to the top of their scope during compilation, regardless of their original position in the code. read more ↩ ↩2 ↩3

Read more blogs | random articles | experiments