What is the difference between var, let, and const

Understanding the differences between var, let, and const is crucial for writing modern JavaScript. Each of these keywords serves a specific purpose in variable declaration and has unique characteristics that can affect the behavior of your code. Below, we will explore these differences in detail, including their scope, hoisting behavior, and mutability.

Variable Declarations

JavaScript provides three ways to declare variables: var, let, and const. Each of these has its own scope and behavior.

1. var

The var keyword is function-scoped or globally-scoped, meaning that if you declare a variable with var inside a function, it is only accessible within that function. If declared outside of any function, it becomes a global variable.

function example() {
    var x = 10;
    if (true) {
        var x = 20; // Same variable
        console.log(x); // 20
    }
    console.log(x); // 20
}
example();

In the example above, the variable x is redeclared within the same function, leading to unexpected results. This is a common mistake when using var.

2. let

The let keyword, introduced in ES6, is block-scoped. This means that a variable declared with let is only accessible within the block it is defined in, such as within an if statement or a loop.

function example() {
    let y = 10;
    if (true) {
        let y = 20; // Different variable
        console.log(y); // 20
    }
    console.log(y); // 10
}
example();

In this case, the two y variables are distinct, avoiding the confusion seen with var. This block-scoping feature of let helps prevent variable collisions and makes the code easier to understand.

3. const

The const keyword is also block-scoped like let, but it is used to declare variables that cannot be reassigned. However, it is important to note that const does not make the variable immutable; if the variable holds an object or an array, the contents of that object or array can still be modified.

const z = 10;
// z = 20; // This will throw an error

const obj = { key: 'value' };
obj.key = 'newValue'; // This is allowed
console.log(obj.key); // newValue

In the above example, attempting to reassign z will result in an error, while modifying the properties of obj is perfectly valid.

Hoisting Behavior

All three keywords exhibit different hoisting behavior, which is the mechanism by which variable declarations are moved to the top of their containing scope during compilation.

• var: Variables declared with var are hoisted and initialized with undefined. This means you can reference them before their declaration without throwing an error.
• let and const: Both are hoisted but remain uninitialized until their declaration is encountered in the code. Attempting to access them before their declaration will result in a ReferenceError.

console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 10;

console.log(c); // ReferenceError
const c = 15;