JavaScript Interview Questions

In JavaScript, 'var', 'let', and 'const' are keywords used to declare variables. While they all serve the purpose of variable declaration, they differ significantly in terms of scope, hoisting behavior, and mutability, which can impact how your code behaves and is structured.

The Evolution of Variable Declarations

Before ECMAScript 2015 (ES6), 'var' was the only way to declare variables in JavaScript. ES6 introduced 'let' and 'const', providing more robust and predictable ways to manage variables within different scopes.

var Keyword

Variables declared with 'var' are function-scoped. This means they are only accessible within the function where they are declared, or globally if declared outside any function. They are also hoisted to the top of their scope, meaning they can be referenced before their declaration point without throwing an error, though their value will be 'undefined'.

'var' allows re-declaration and re-assignment of variables without any issues, which can sometimes lead to unexpected behavior or bugs, especially in larger codebases.

function exampleVar() {
  var x = 10;
  if (true) {
    var x = 20; // Same variable, re-declared and re-assigned
    console.log(x); // 20
  }
  console.log(x); // 20 (function-scoped)
}
exampleVar();

console.log(y); // undefined (hoisted, but not initialized)
var y = 30;

let Keyword

'let' declares block-scoped local variables. A block is typically defined by curly braces ({}), such as those in 'if' statements, 'for' loops, or standalone blocks. Variables declared with 'let' are not accessible outside their block.

While 'let' variables are hoisted, they are placed in a 'temporal dead zone' until their declaration. Accessing them before declaration will result in a 'ReferenceError'. Unlike 'var', 'let' does not allow re-declaration within the same scope, but it does allow re-assignment.

function exampleLet() {
  let x = 10;
  if (true) {
    let x = 20; // Different variable (block-scoped)
    console.log(x); // 20
  }
  console.log(x); // 10 (outer block's x)
}
exampleLet();

// console.log(z); // ReferenceError: Cannot access 'z' before initialization (temporal dead zone)
let z = 40;

const Keyword

'const' also declares block-scoped variables, similar to 'let'. The key difference is that 'const' variables must be initialized at the time of declaration and their value cannot be re-assigned afterward. This makes them ideal for values that should remain constant throughout the program's execution.

Like 'let', 'const' variables are also in a temporal dead zone and cannot be re-declared within the same scope. It's important to note that for objects and arrays declared with 'const', while the variable itself cannot be re-assigned to a new object/array, the properties or elements of the object/array can still be modified.

function exampleConst() {
  const x = 10;
  // x = 20; // TypeError: Assignment to constant variable.
  if (true) {
    const x = 20; // Different variable (block-scoped)
    console.log(x); // 20
  }
  console.log(x); // 10 (outer block's x)
}
exampleConst();

const obj = { name: 'Alice' };
obj.name = 'Bob'; // This is allowed
console.log(obj); // { name: 'Bob' }

// const y; // SyntaxError: Missing initializer in const declaration

Summary of Key Differences