Var, let and const In JavaScript. What Is The Difference?

Important note: We are not taking into account hoisting in this article as it is a more advanced JavaScript concept.

You Probably Know The "var" Keyword

During a long time, var keyword was a king in JavaScript world. You didn't yet have to bother about how to declare a variable, but how to choose the perfect name for it.

var userName = "John";

But using var keyword sometimes leads to unexpected issues especially if you are not familiar with all pitfalls.

#1 Pitfall

You should always remember that var is globally scoped in case if it is declared outside of the function and locally/function scoped if it is declared inside of the function body.

Scope in JavaScript refers to the current context of code, which determines the accessibility of variables to JavaScript. The two types of scope are local and global: Global variables are those declared outside of a block. Local variables are those declared inside of a block.

Globally scoped variable is accessible in the whole window. Locally/function scoped variable is accessible only within the function body it was declared in.

Local scope is also called function scope because local scope is created by functions in JavaScript.

In the following example, we will create both global and local variable and point out differences between them:

var globalVariable = "global";

function doSomething() {
  var localVariable = "local";
  
  console.log(localVariable); // Prints "local"
  
  console.log(globalVariable); // Prints "global"
}

// Not available outside of the function ;(
console.log(localVariable); // ReferenceError: localVariable is not defined

console.log(globalVariable); // Prints "global"

#2 Pitfall

Variables declared using var keyword can be re-declared and updated.

You can unintentionally redeclare variable and get an unexpected result when accessing it in your code. Don't you feel like you should receive the following error in the next example: Duplicate declaration "userName"?

var userName = "John";

var userName = "Andrew";

console.log(userName); // Prints "Andrew"

var variable can be re-declared in the same scope:

var userName = "John";

userName = "Andrew";

console.log(userName); // Prints "Andrew"

It can be re-declared in another scope as well. While it is not a problem if you are doing it intentionally, sometimes you do not realize that this variable has been declared before:

var userName = "John";

function changeUserName() {
  userName = "Andrew";
};

changeUserName();

console.log(userName); // Prints "Andrew"

"Let" To Rescue

let comes as an improvement for var since ES2015(ES6) came out. It is block-scoped, which means that the variable declared in a block is only available within that block.

A block scope is the area within if, switch conditions or for and while loops. Generally speaking, whenever you see {curly brackets}, it is a block. In ES6, const and let keywords allow developers to declare variables in the block scope, which means those variables exist only within the corresponding block.

var userName = "John";

if(userName === "John") {
  let age = 30;
  console.log(age); // Prints "30"
};

console.log(age); // Prints "ReferenceError: age is not defined"

As you can see, block-scoped age is not available outside of the if block.

Variables, created using let keyword can be updated:

let userName = "John";

userName = "Andrew";

console.log(userName); // Prints "Andrew"

But not re-declared:

let userName = "John";

let userName = "Andrew"; // Duplicate declaration "userName"

However, if you declare variables with the same name but in different scopes, no error will be returned, because both variables are treated as different:

let userName = "John";

function changeUserName() {
  let userName = "Andrew";
  
  console.log(userName); // Prints "Andrew"
};

changeUserName();

console.log(userName); // Prints "John"

"Const" As An Improvement

Just like variables declared using let keyword, const variables are block-scoped.

The only difference between them is that const variables maintain constant values and can not be updated or re-declared (We are not taking into account hoisting yet). It means we are not allowed to do this:

const userName = "John";

userName = "Andrew"; // TypeError: Assignment to constant variable

And this:

const userName = "John";

const userName = "Andrew"; // Duplicate declaration "userName"

And actually this is awesome. Once you declared your variable as const you are sure that it will not be updated anywhere in the code.

But... wait. Really? What about objects?

#3 Pitfall

Consider the following example:

const user = {
  name: "John",
  car: "Audi",
};

user.car = "Volvo";

console.log(user.car); // Prints "Volvo"

The main thing you should remember when using const is that properties of objects declared using this keyword CAN BE UPDATED.

Consider using Object.freeze() in case you want to disable possibility to add new/change existing properties.

Summary

To sum up, avoid using var keyword in favor of let and const. Use them wisely and know what and when each of them should be used.

Just in case you missed something:

var:

• globally or locally/function scoped
• can be updated and re-declared
• hoisted to the top (more about hoisting)
• initialized with undefined

let:

• block scoped
• can be updated, but NOT re-declared
• hoisted to the top
• NOT initialized

const:

• block scoped
• can NOT be updated and re-declared
• hoisted to the top
• NOT initialized