Modern JavaScript – Let, var, Const in ES6+

Over the past few years, there have been many updates to the JavaScript language. And these updates are very useful if you want to improve your coding. Recently, there have been many useful additions to JavaScript like the optional chaining, Nullish coalescing operator, Promises, async/await, ES6 destructuring, and more.

So today, we will look at Let and var concepts which every JavaScript developer should be aware of. Let’s get started and dive into the things you need to know about JS.

Let and var in ES6 JavaScript

Before ES6(ECMAScript), JavaScript used the var keyword which only used global and function scope. There was no block-level scope. With the addition of let and const JavaScript added block scoping.

let in ES6 JavaScript

When we declare a variable using the let keyword, we can assign a new val to that variable later but we cannot re-declare it with the same name.

// ES5 Code
var val = 10;
console.log(val); // 10

var val = "hello piyush";
console.log(val); // hello piyush

var value = 30;
console.log(value); // 30

As you can see above, we have re-declared the variable val using the var keyword multiple times.

Before ES6(ECMAScript), we were able to re-declare a variable that had already been declared before if it wasn’t used meaningfully and was instead causing confusion.

But 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.

So when you use the let keyword, you will get an error when you try to re-declare the variable with the same name – which is a good thing.

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

let val = "hello piyush"; // Uncaught SyntaxError: Identifier 'val' has already been declared

But, the following code is valid:

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

val = "hello piyush";
console.log(val); // hello piyush

We don’t get an error in the above code because we’re re-assigning a new value to the val variable. But we’re not re-declaring val again. Now, take a look at the below code:

var in ES6 Javascript

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

As you can see in this code, when we declare a variable with the var keyword, it’s available outside the if block also. Now take a look at the below code:

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

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

As you can see, the num variable when declared using the let keyword is only accessible inside the if block. Outside the block it’s not available, so we got a reference error when we tried to access it outside the if block. But if there is a num variable outside the if block, then it will work as shown below:

// ES6 Code
let isValid = true;
let num = 20;

if(isValid) {
  let num = 10;
  console.log('inside:', num); // inside: 10
}

console.log('outside:', num); // outside: 20

Here, we have two num variables in a separate scope. So outside the if block, the value of num will be 20. Take a look at the below code:

// ES5 Code
for(var i = 0; i < 10; i++){
 console.log(i);
}
console.log('outside:', i); // 10

When using the var keyword, i is available even outside the for loop.

// ES6 Code
for(let i = 0; i < 10; i++){
 console.log(i);
}

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

But when using the let keyword, it’s not available outside the loop. So as you can see from the above code samples, using let makes the variable available only inside that block and it’s not accessible outside the block.

We can also create a block by a pair of curly brackets like this:

let i = 10;
{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

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

If you remember, I said we cannot re-declare a let based variable in the same block but we can re-declare it in another block. As you can see in the above code, we have re-declared i and assigned a new value of 20 inside the block. Once declared, that variable value will be available only in that block.

Outside the block, when we printed that variable, we got 10 instead of the previously assigned value of 30 because outside the block, the inside i variable does not exist. If we don’t have the variable i declared outside, then we’ll get an error as you can see in the below code:

{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

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

How to use const in JavaScript we will learn in the new Post.

Keep reading this space for more articles on the upcoming updates. We hope to deliver the right information on time to our readers. Do explore other pages for more such articles.