DEV Community

Samuel K.M
Samuel K.M

Posted on

An Overview of Let, Const, and Var: Key Differences Explained

There was a time when I used and understood the practical use of let, const, and var in JavaScript, but explaining it in words was challenging. If you find yourself in a similar predicament the key points to focus on are the differences in scope, hoisting, reinitialization, and reassignment.

Scoping:

  • var is function-scoped or globally scoped if declared outside any function.

Example with var (Function and Global Scope)

function varExample() {
    if (true) {
        var x = 10; // x is function-scoped
    }
    console.log(x); // Outputs: 10
}
varExample();

if (true) {
    var y = 20; // y is globally scoped because it's outside a function
}
console.log(y); // Outputs: 20
Enter fullscreen mode Exit fullscreen mode
  • let and const are block-scoped, meaning they are only accessible within the block (delimited by {}) they are declared in.

Example with let (Block Scope)

function letExample() {
    if (true) {
        let x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
letExample();

if (true) {
    let y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined

Enter fullscreen mode Exit fullscreen mode

Example with const (Block Scope)

function constExample() {
    if (true) {
        const x = 10; // x is block-scoped
        console.log(x); // Outputs: 10
    }
    console.log(x); // ReferenceError: x is not defined
}
constExample();

if (true) {
    const y = 20; // y is block-scoped
    console.log(y); // Outputs: 20
}
console.log(y); // ReferenceError: y is not defined
Enter fullscreen mode Exit fullscreen mode

Hoisting

Hoisting is like setting up a workspace before you start a task. Imagine you’re in a kitchen, preparing to cook a meal. Before you start cooking, you place all your ingredients and tools on the counter so they're within reach.

In programming, when you write code, the JavaScript engine goes through your code before actually running it and sets up all the variables and functions at the top of their scope. This means that you can use functions and variables before you've declared them in your code.

  • All three (var, let, and const) are indeed hoisted. However, the difference lies in how they are initialized during the hoisting process.

  • var is hoisted and initialized with undefined.

console.log(myVar); // Outputs: undefined
var myVar = 10;

Enter fullscreen mode Exit fullscreen mode
  • let and const are hoisted but not initialized. This means they are in a "temporal dead zone" from the start of the block until the declaration is encountered.
console.log(myLet);
// ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;
Enter fullscreen mode Exit fullscreen mode
console.log(myConst); 
// ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

Enter fullscreen mode Exit fullscreen mode

Reassignment and Reinitialization:

  • var can be reinitialized (declared again) and reassigned (assigned a new value). ### Example with var
var x = 10;
x = 20; // Reassignment
console.log(x); // Outputs: 20

var x = 30; // Reinitialization
console.log(x); // Outputs: 30

Enter fullscreen mode Exit fullscreen mode
  • let cannot be reinitialized within the same scope but can be reassigned.
let y = 10;
y = 20; // Reassignment
console.log(y); // Outputs: 20

let y = 30; // SyntaxError: Identifier 'y' has already been declared
Enter fullscreen mode Exit fullscreen mode
  • const cannot be reassigned; it must be initialized at the time of declaration. However, if the const is an object or array, the contents (properties or elements) of the object or array can be modified. ### Example with const
const z = 10;
z = 20; // TypeError: Assignment to constant variable.

const z = 30; // SyntaxError: Identifier 'z' has already been declared

Enter fullscreen mode Exit fullscreen mode

Example with const Object

const obj = { a: 1 };
obj.a = 2; // Allowed, modifies the property
console.log(obj.a); // Outputs: 2

obj = { a: 3 }; // TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Example with const Array

const arr = [1, 2, 3];
arr[0] = 4; // Allowed, modifies the element
console.log(arr); // Outputs: [4, 2, 3]

arr = [5, 6, 7]; // TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

Top comments (0)