Understanding JavaScript Variables: var, let, and const

Did you know that JavaScript is powering over 97% of websites right now?

What’s up, my digital builders? let’s talk JavaScript today!
JavaScript is one of the most popular programming languages right now, and as a Javascript Engineer or coder, understanding how to declare variables is key for writing clean, efficient, and bug-free code in the language.

Here, we’ll break down the three ways to declare variables in JavaScript.
Which basically are: var, let, and const.

We’ll also explore the differences between each of them, best practices, and when you can use each of them.

The Evolution of JavaScript Variables

Before ES6 (ECMAScript 2015), var was the only way to declare variables in JavaScript. However, it had some quirks that made code harder to manage. With ES6, let and const were introduced to provide better scoping and reduce common pitfalls. Let’s dive into each one in detail.

var – The Old Way

Using the var keyword is the original way to declare variables in JavaScript. While it still works, it comes with some limitations and issues that can lead to unexpected behavior.

Characteristics of var:

1. Function-scoped: A var variable is only limited to the function where it’s declared, not the block.

2. Hoisting: var variables are hoisted to the top of their scope, meaning they are declared before execution but there are not initialized.

3. Can be re-declared and updated: You can declare the same variable multiple times using var without any sort of errors.

Example Of Var Being Used:

function example() {
    console.log(name); // undefined (hoisting effect)
    var name = "John";
    console.log(name); // "John"
}
example();

Here, the variable ‘name’ is declared with the var keyword, and it is hoisted to the top, but it remains undefined until it is assigned a value.

Why Avoid var?

• It can lead to unexpected behaviors in your code and this is due to hoisting.

• Variables declared with var can be accessed outside of block scopes, which might cause bugs.

let – The Modern Way

With ES6, let was introduced to address the scoping issues of var.

Characteristics of let:

1. Block-scoped: Variables declared with let are limited to the block {} in which they are defined.

2. Hoisted but not initialized: Unlike var, let is hoisted but not given a default value of undefined.

3. Can be updated but not re-declared in the same scope.

Example:

function example() {
    if (true) {
        let age = 25;
        console.log(age); // 25
    }
    console.log(age); // Error: age is not defined
}
example();

Since let is block-scoped, trying to access age outside of the if block could lead us to an error.\

When to Use let?

• When you need a mutable variable (variables that can change).

• When working inside loops and conditional blocks.

const – The Immutable Choice

The const keyword is used to declare variables that should not be reassigned.

Characteristics of const:

1. Block-scoped: Like let, const is limited to the block {} it is declared in.

2. Cannot be re-assigned: Once a value is assigned, it cannot be changed.

3. Must be initialized: Unlike var and let, const requires an initial value.

Example:

const PI = 3.1416;
console.log(PI); // 3.1416

PI = 3.14; // Error: Assignment to constant variable

However, const does not make objects or arrays immutable. You can still modify their contents.

const person = { name: "Alice", age: 30 };
person.age = 31; // Works fine
console.log(person.age); // 31

When to Use const?

• When you don’t want the variable to be reassigned.

• When working with objects and arrays that won’t change reference.

Best Practices for Using Variables

1. Use const by default – This prevents accidental reassignments and makes the code more predictable.

2. Use let when reassignment is needed – When a variable’s value needs to change, use let.

3. Avoid var unless necessary – The introduction of let and const makes var mostly obsolete.

Conclusion

Understanding the differences between var, let, and const is crucial for writing clean and maintainable JavaScript code.

With modern best practices, let and const should be preferred over var to ensure better scoping and fewer bugs.