What Is the Difference Between var, let and const in JavaScript?

"What's the difference between using var, let, and const in JavaScript?" is a common question in front-end and JavaScript interviews.

During the interview, you can first talk about the similarities and differences in general, and then explain each point in depth.

var, let, and const are all reserved key words used for variable declaration in JavaScript. In the early days of JavaScript, there was only var. And let and const were not added until ES2015 (ES6). There are several main differences between them.

• In terms of scope, var can be global scope or function scope; let and const are block scope.
• In terms of declarations, var can be re-declared, but let and const cannot.
• In terms of hoisting, the variable declared by var will be automatically initialized to undefined, so if the variable is used before the declaration, there will be no error, but undefined.

On the other hand, let and const will not be automatically initialized, but will enter the temporary dead zone (TDZ), so using the variable before declaring with let and const will cause an error.

• let and const are the same in most aspects, the big difference between the two is that variables declared with let can be reassigned, but variables declared with const cannot.

Differences in scope

In terms of scope, var can be global or function scope, while let and const are block scope. When we using var to declare variables at the outermost of a file, its scope will be the whole document. Thus, when we enter

var greeting = "hello";

in the console, and then enter

windonw.greeting; // 'hello'

the result will be hello. However, let and const declaration will not have the same effect. In addition to the global scope, the scope of var in a function is that function.

var can be declared repeatedly

In terms of declarations, var can be re-declared, but let and const cannot. So when using var, you can do something like this:

var greeting = "Hello";
var greeting = "Hello, hello, everyone";

let can be reassigned, but it cannot be declared repeatedly, so it will be as follows:

// there will be SyntaxError: Identifier 'greeting' has already been declared
let greeting = "Hello";
let greeting = "Hello, hello, everyone";

// it works like this for let declaration
let greeting = "Hello";
greeting = "Hello, hello, everyone";

Hoisting

In terms of hoisting, the variable declared by var will be initialized automatically, so if the variable is used before declaration, there will be no error, but it will be undefined, such as the following

console.log(greeting); // undefined
var greeting = "hi there";

But let and const will not. Instead, they will enter the temporary dead zone (TDZ), So using the variable before let and const declares the variable, an error will occur:

console.log(greeting); // Uncaught ReferenceError: greeting is not defined
let greeting = "hi there";

let can be reassigned, but const cannot

let and const are the same in most respects. The big difference between the two is that variables declared with let can be reassigned, but variables declared with const cannot.

The difference here refers to "assignment", not changing a variable. If a variable is a primitive type, such as string or number, neither let nor const can change the value itself. let can only re-assign a different value to the variable. Nevertheless, if a variable is an object, regardless of let or const, after declaring, it is still possible to change the value of the object.

That's why the following example actually works

const user = { name: "John" };
user.name = "Mary";
console.log(user); // {name: 'Mary'}

Bonus questions: When should I use let? When should I use const?

The current general opinion in the industry is that const should be used in most cases, and let is used only when reassignment is necessary. There is even an ESLint rule prefer-const helps you write code in this way.

But there is another point of view. For example, Dan Abramov, a React core team member, said that he decides which one to use based on his mood. In other words, there is no fixed rule. Of course, he also mentioned that if the team already has a certain convention, he will respect the convention set by the team to keep the consistency of the code.

Here is a clip of Dan Abramov sharing his opinion on this topic