Quiz 1109: JavaScript Variables

What are the key differences between var, let, and const in JavaScript?

Quick Answer

var, let, and const are all keywords used to declare variables in JavaScript, but they differ in their scope, hoisting behavior, and mutability.

var has function scope, let and const have block scope, and only const declares immutable variables.

Explain in Depth

In JavaScript, var, let, and const are keywords used to declare variables, but they have distinct characteristics regarding scope, hoisting, and mutability.

1. var (Function Scope):

• Scope: Variables declared with var are scoped to the function they are declared within. This means they are accessible anywhere within that function, including nested blocks.
• Hoisting: var variables are hoisted to the top of their scope. This means that you can access a var variable before its declaration in the code. However, its value will be undefined until the declaration is reached.
• Mutability: Variables declared with var are mutable, meaning their values can be changed after declaration.

Example:

function myFunction() {
  var a = 10; // Variable declared with var
  if (true) {
    var a = 20; // Redeclaring a within the block, but still has function scope
    console.log(a); // Output: 20
  }
  console.log(a); // Output: 20
}

myFunction();

2. let (Block Scope):

• Scope: Variables declared with let are scoped to the block they are declared within (including if, for, while, etc.). They are only accessible within that block.
• Hoisting: let variables are also hoisted, but they are not initialized to undefined. Trying to access a let variable before its declaration results in a ReferenceError.
• Mutability: let variables are mutable, meaning their values can be changed after declaration.

Example:

if (true) {
  let b = 10; // Variable declared with let
  console.log(b); // Output: 10
}
console.log(b); // Output: ReferenceError (b is not defined)

3. const (Block Scope, Immutable):

• Scope: Similar to let, const variables are scoped to the block they are declared within.
• Hoisting: Like let, const variables are hoisted but not initialized. Trying to access a const variable before its declaration results in a ReferenceError.
• Immutability: The key difference with const is that it declares immutable variables. Once a value is assigned to a const variable, it cannot be changed.

Example:

const c = 10; // Variable declared with const
console.log(c); // Output: 10

c = 20; // Output: TypeError (Assignment to constant variable)

Key Differences:

Feature	var	let	const
Scope	Function Scope	Block Scope	Block Scope
Hoisting	Hoisted, initialized to undefined	Hoisted, not initialized	Hoisted, not initialized
Mutability	Mutable	Mutable	Immutable

Modern JavaScript:

In modern JavaScript, let and const are preferred over var because:

• Block Scope: Provides better control over variable visibility and prevents accidental re-declarations within blocks.
• Immutability: const encourages the use of immutable variables, promoting more predictable and reliable code.
• Error Prevention: let and const help prevent ReferenceErrors by not initializing variables to undefined before declaration.

By understanding the differences between var, let, and const, you can write cleaner, more maintainable, and error-free JavaScript code.