When JavaScript was first created, developers relied on var to declare variables. While functional, var had limitations that often led to bugs and confusion. With the introduction of ES6, let and const replaced var as the preferred way to declare variables. Here's why.

The Problem with var

The var keyword comes with two major issues:

1) Function Scope vs. Block Scope: Variables declared with var are scoped to the nearest function, not the nearest block (e.g inside an if or for statement). This can lead to unexpected behavior.

if (true) {
    var name = "John"
}
console.log(name); // Output: "John"

Even though the name variable is declared inside the if block, it is accessible outside the block because var does not support block scope.

2) Hoisting: is a behavior where variable and function declarations are moved to the top of their scope. However, variables declared with var are initialized as undefined, while let and const remain in a 'temporal dead zone' until their declaration is encountered. This can cause confusion:

console.log(age); // Output: undefined
var age = 5;

The declaration is moved to the top, but the assignment happens later.

The Solution: let and const

ES6 (ECMAScript 2015) introduced let and const to address these issues.

1) Block Scope
Both let and const are block-scoped, meaning they are only accessible within the block where they are declared:

if(true) {
   let name = "John";
   console.log(name); // Output: "John"
}
console.log(name); // Error: name is not defined

This behavior prevents unintended variable access outside their intended scope.

2) No Hoisting Confusion
While let and const are technically hoisted, they remain in a "temporal dead zone" until the declaration is encountered:

console.log(age); // Error: Cannot access 'age' before initialization
let age = 5;

This ensures variables cannot be accessed before they are declared, reducing bugs.

3) const for Constants
Use const for values that should not be reassigned:

const PI = 3.14;
PI = 4.15; // Error: Assignment to constant variable.

Note: While const prevents reassignment, it does not make objects immutable. You can still modify object properties.

const person = {name: "John"};
person.name = "Peter"; // This works fine

console.log(person); // Output {name: "Peter"}

When to Use let vs. const

  • Use const by default. It signals that a variable should not change, making your code easier to understand.
  • Use let only when you know the value will change.

Example:

const username = "Bob"; // This will never change
let age = 10; // This can be updated later

Conclusion

Switching from var to let and const helps you write cleaner, more predictable code. These new keywords eliminate common pitfalls and align with modern JavaScript best practices. Start using them today to level up your JavaScript skills.

About Me

Hi! I'm Golden Okeama, a budding frontend developer passionate about JavaScript, React, and exploring the world of modern web development. As I learn, I enjoy sharing insights and breaking down concepts to help other beginners. Follow me on my journey as I continue to grow and build awesome projects!

Author Of article : Golden Okeama Read full article