Understanding var, let, and const in JavaScript

Introduction

JavaScript is one of the most popular programming languages today, and it has changed a lot over time. When JavaScript was first introduced, var was the only way to declare variables. While it served its purpose, var had some tricky parts that often led to confusing bugs, especially in larger codebases. To fix these issues, let and const is introduced in ES6. These newer keywords brought significant improvements, particularly in terms of scope management and immutability. In this blog post, we’ll explore what makes each of these keywords different, when to use them, and the best ways to use them.

var: The Original Variable Declaration

var was the original way to declare variables in JavaScript, and it’s still in use today. However, it comes with a few important characteristics that can sometimes lead to unexpected behavior.

1. Function Scope

Variables declared with var are function-scoped, meaning they are only accessible within the function they are declared in. If declared outside of a function, they are globally scoped.

1function example() {
2  var x = 10;
3  if (true) {
4    var x = 20; // same variable
5    console.log(x); // 20
6  }
7  console.log(x); // 20
8}
9example();

1function example() {
2  var x = 10;
3  if (true) {
4    var x = 20; // same variable
5    console.log(x); // 20
6  }
7  console.log(x); // 20
8}
9example();

2. Hoisting

var variables are hoisted to the top of their scope, meaning they are accessible even before their declaration in the code. However, the value is not hoisted—only the declaration.

1console.log(y); // Output: undefined
2var y = 5;

1console.log(y); // Output: undefined
2var y = 5;

3. Redeclaration

A variable declared with var can be redeclared within the same scope without throwing an error. This can sometimes lead to unintentional overwriting of variables.

1var z = 20;
2var z = 30; // No error, z is now 30

1var z = 20;
2var z = 30; // No error, z is now 30

let: Block-Scoped Variables

let was introduced to address some of the issues associated with var. It is now the preferred way to declare variables that might need to change.

1. Block Scope

Unlike var, variables declared with let are block-scoped. This means they are only accessible within the block (denoted by {}) in which they are declared.

1if (true) {
2  let a = 10;
3  console.log(a); // Output: 10
4}
5console.log(a); // Error: a is not defined

1if (true) {
2  let a = 10;
3  console.log(a); // Output: 10
4}
5console.log(a); // Error: a is not defined

2. No Hoisting

While let is technically hoisted, it’s not initialized until the variable’s declaration is encountered in the code. This means accessing a let variable before its declaration will result in a ReferenceError.

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

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

3. No Redeclaration

Variables declared with let cannot be redeclared in the same scope, which helps prevent accidental overwriting of variables.

1let c = 15;
2let c = 25; // Error: Identifier 'c' has already been declared

1let c = 15;
2let c = 25; // Error: Identifier 'c' has already been declared

const: Immutable Variable Declaration

const is another block-scoped variable declaration introduced in ES6, designed for variables that should not be reassigned after their initial declaration.

1. Block Scope

Like let, const is block-scoped and is only accessible within the block it is declared in.

1if (true) {
2  const d = 10;
3  console.log(d); // Outputs: 10
4}
5console.log(d); // Error: d is not defined

1if (true) {
2  const d = 10;
3  console.log(d); // Outputs: 10
4}
5console.log(d); // Error: d is not defined

2. Immutability

Variables declared with const cannot be reassigned. However, it’s important to note that while the variable identifier itself is immutable, if the const variable refers to an object or array, the contents of the object or array can still be changed.

1const e = 10;
2e = 20; // Error: Assignment to constant variable
3
4const f = [1, 2, 3];
5f.push(4); // This is allowed
6console.log(f); // Outputs: [1, 2, 3, 4]

1const e = 10;
2e = 20; // Error: Assignment to constant variable
3
4const f = [1, 2, 3];
5f.push(4); // This is allowed
6console.log(f); // Outputs: [1, 2, 3, 4]

3. No Redeclaration and No Hoisting

Just like let, const variables cannot be redeclared in the same scope, and accessing them before their declaration will result in a ReferenceError.

1const g = 50;
2const g = 60; // Error: Identifier 'g' has already been declared
3
4console.log(h); // Error: Cannot access 'h' before initialization
5const h = 5;

1const g = 50;
2const g = 60; // Error: Identifier 'g' has already been declared
3
4console.log(h); // Error: Cannot access 'h' before initialization
5const h = 5;

When to Use var, let, or const

• Use var if you are working on legacy code or if you require function-scoped variables (though this is rare in modern JavaScript).
• Use let when you need a variable that might need to be reassigned. let is ideal for loop counters, variables that will be updated, or situations where block scope is required.
• Use const when you want to declare a variable that should not be reassigned. This is the best choice for constants, fixed configurations, or values that should remain unchanged throughout the program.

Best Practices

• Use const by default. It's a signal that the variable won't be reassigned.
• Use let when you know the variable will be reassigned.
• Avoid var in modern JavaScript, unless you're working with older codebases or need function-scoped variables.

Conclusion

By understanding and properly using var, let, and const, you can write cleaner, more predictable JavaScript code. Remember, choosing the right variable declaration is not just about functionality, but also about communicating your intentions to other developers who might read your code.