Difference between var and let in JavaScript

1. Introduction

In JavaScript, var and let are two different ways to declare variables, which are like containers for storing data. The var keyword has been around since the beginning of JavaScript and declares a variable with function scope. This means the variable is available throughout the function where it's declared. The let keyword was introduced in ES6 (ECMAScript 2015) and declares a variable with block scope, which restricts its access to the block of code where it's used, much like variables in most other programming languages.

2. Key Points

1. Scope: var is function-scoped, and let is block-scoped.

2. Hoisting: Variables declared with var are hoisted and automatically initialized as undefined, while let variables are hoisted but not initialized.

3. Re-declaration: You can re-declare the same variable with var in the same scope, but doing so with let in the same block will throw an error.

4. Temporal Dead Zone: Accessing a let variable before its declaration will result in a ReferenceError, something that does not happen with var.

3. Differences

Feature	var	let
Scope	Function-scoped	Block-scoped
Hoisting	Hoisted and initialized as undefined	Hoisted but not initialized
Re-declaration	Allows re-declaration in the same scope	Does not allow re-declaration in the same block
Temporal Dead Zone	No Temporal Dead Zone	Accessing before declaration results in ReferenceError

4. Example

// Step 1: Declare a variable with 'var' and attempt to use it before its actual declaration.
function testVar() {
  console.log(oldSchool); // Due to hoisting, this will output 'undefined'.
  var oldSchool = 'Declared with var!';
  console.log(oldSchool); // This will output 'Declared with var!'.
}

// Step 2: Declare a variable with 'let' and attempt to use it before its actual declaration.
function testLet() {
  // Uncommenting the line below will throw a ReferenceError due to the Temporal Dead Zone.
  // console.log(newWave); // ReferenceError: Cannot access 'newWave' before initialization
  let newWave = 'Declared with let!';
  console.log(newWave); // This will output 'Declared with let!'.
}

testVar();
testLet();

Output:

undefined
Declared with var!
Declared with let!

Explanation:

1. var declarations are processed before any code is executed, so the variable exists as undefined initially.

2. let declarations are also hoisted, but accessing them before the declaration is encountered in the executing code results in a ReferenceError.

3. You can re-declare a var variable multiple times, which can be problematic as it may lead to confusion or unexpected behavior in your code.

4. let variables are contained within the block they are declared in, which makes them more predictable and avoids the issue of re-declaration within the same scope.

5. When to use?

- Use var if you're working with older code or need a variable to be available throughout a function regardless of block scope.

- Use let for more predictable behavior and to prevent errors associated with hoisting and re-declaration, especially if you are working on a modern codebase where block-scoped variables are the norm.