Var vs Let vs Const in Javascript

With ES6 there have been many useful additions to JavaScript like the Promises, async/await, ES6 destructuring, and more. let and const is one of those additions.

Today in this blog we will discuss the difference between var, let, and const in Javascript. So let's get started.

let vs var in Javascript

Before the ES6 javascript use var keyword which only has a global scope and has some drawbacks. with let, javascript added block-level scope.

Let's discuss the difference with some examples.

// ES5 Code
var x = 10;
console.log(x) // 10
var x = "Hello Reader"
console.log(x) // Hello Reader
var x = 12.2
console.log(x) // 12.2

As you can see above use have re-declared the variable x with var keyword multiple times.

with var keyword, we were able to re-declare a variable that had already been declared. This creates confusion when the code gets bigger. what if we already had a variable declared with the same name somewhere else and we’re re-declaring it without realizing it? Then we might override the variable value, causing some difficult to debug issues.

But when we use let in javascript, we will get an error when we try to re-declare a variable that has already been declared - which is a good thing.

// ES6 Code
let x = 10;
console.log(x); // 10
let x = "Hello Reader"
// Uncaught SyntaxError: Identifier 'x' has already been declared

See Instead of what we can do, we can re-assigning a new value to the variable x. Take a look below

// ES6 Code
let x= 10;
console.log(x); // 10

x = "Hello Reader";
console.log(x); // Hello Reader

Now take a look at below code

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

As you can see above code. we have declared the number inside the if block but it is still accessible outside. This is because var has a global scope.

Now take a look at the below code.

// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); 
// Uncaught ReferenceError: number is not defined

As you see in the above code. when we use the let keyword we can only access the number variable inside the if block. This is because the let keyword has a block-level scope.

But what if we declare let outside the if block? Let see.

// ES6 Code
let isValid = true;
let number = 10;
if(isValid) {
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // 10

As you can see we can access the number variable inside the if block. Block-level scope works like a hierarchy where we can access the variables in child blocks but not the parent block. If you want to learn more about block-level scope vs global scope I will highly recommend you to check this video from Namaste JavaScript by Akshay Saini.

let vs const in Javascript

The const keyword works exactly the same as the let keyword. It also has a block-level scope. then how they differ from each other? let's take a look

When we declare a variable as const, it's considered a constant variable whose value will never change.

Take a look at the below code

// ES6 Code
let x = true;
x = "Hello Reader";
console.log(x) // Hello Reader

When we use let keyword to declare a variable we can, later on, assign a new value to the variable. but this is not possible with const.

// ES6 Code
const x = true;
x = "Hello; 
// Uncaught TypeError: Assignment to constant variable.

See, when we try to declare a new value to a variable declared as const we’ll get a TypeError.

But this behavior of const is different when it comes to objects and arrays. while const object can’t be updated but its properties can be updated. This is because objects are reference types in javascript.

Take a look at below code

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};

person.age = 22;

We can do this with objects.

// ES6 Code
const person= {
 name: 'Taran',
 age: 18
};
person = {
 firstName: "Taran",
 lastName: "Arora"
}

but we can’t do this with objects declared as const

var, let, and const wrap-up

1. The keywords let and const add block scoping in JavaScript.
2. var variables can be updated and re-declared within its scope
3. let variables can be updated but not re-declared const variables can neither be updated nor re-declared.