Differentiating Between var, let, and const in JavaScript

1. Introduction

ES6 (short for ECMAScript 6) is a set of advanced JavaScript techniques. ECMAScript is a standard proposed by the European Computer Manufacturers Association to standardize the JavaScript language. With the emergence of various browsers, if each browser ran JavaScript differently, web pages wouldn't work across all browsers. Hence, a common standard is necessary for browsers to develop accordingly.

One of the notable features of ES6 is the addition of let and const for variable declarations. So why do we need let and const when we already had var for declaring variables? In this article, we'll explore the reasons for each type of variable declaration.

2. Differentiation

2.1. The var Variable

As known in vanilla JavaScript, with the var keyword, we can declare various types of variables such as numbers, strings, booleans, etc. Unless declared inside a function (where the variable will be function/local scoped), var will have a global scope. Additionally, var has the hoisting property: meaning that no matter where it's declared, the variable will be brought to the top of its scope before the code is executed.

Example:

console.log(greeting);

var greeting = "say hello";

This will be compiled as:

var greeting;

console.log(greeting); // greeting is undefined

greeting = "say hello";

However, there is an issue with var. Consider the following example:

var greeting = "hey hi";

var times = 4;

if (times > 3) {

    var greeting = "say Hello instead"; 

}

console.log(greeting); //"say Hello instead"

Since the condition is met, the value of greeting will be "say Hello instead" and will remain this way after exiting the if block. This might not be an issue in small snippets, but in larger codebases, with hundreds or thousands of lines of code, or when we don't know where the variable's value might have changed, debugging becomes very difficult. To solve this, ES6 introduces two other ways to declare variables: let and const.

2.2. The let Variable

One reason let can replace var to handle the above problem is that variables declared with let have block scope, rather than global or local scope.

let greeting = "say Hi";

let times = 4;

if (times > 3) {

    let hello = "say Hello instead";

    console.log(hello); // "say Hello instead"

}

console.log(hello); // hello is not defined

We can see that for a variable with block scope, once outside the declared scope, it cannot be used anymore.

let allows us to update the value of a variable but does not allow us to redeclare it.

let greeting = "say Hi";

console.log(greeting); //"say Hi"

greeting = "say Hello instead";

console.log(greeting); //"say Hello instead"

-----------------------------------------------------

let greeting = "say Hi";

let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

However, in different blocks, redeclaring variables does not cause an error because each scope treats the variable as distinct.

let greeting = "say Hi";

if (true) {

    let greeting = "say Hello instead";

    console.log(greeting); // "say Hello instead"

}

console.log(greeting); // "say Hi"

Like var, let also has the hoisting property but differs in that instead of being initialized with undefined, let has no initial value. This means if we use a let variable before its declaration, a Reference Error will occur.

2.3. The const Variable

Similar to let, const also has block scope and hoisting. However, with const, if the variable is of a primitive type (including string, number, boolean, null, and undefined), we cannot redeclare or update the value of the variable.

const greeting = "say Hi";

greeting = "say Hello instead"; // error: Assignment to constant variable.

------------------------------------------------

const greeting = "say Hi";

const greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

For reference types (including object, array, and function), although we cannot redeclare or update the variable's value, we can still update the variable's properties.

const greeting = {

    message: "Hello",

    number: "five"

};

greeting.message = "say Hello instead";

console.log(greeting); // {message:"say Hello instead", number:"five"}

By understanding the differences and proper use cases for var, let, and const, you can write more efficient and maintainable JavaScript code.