[ES2015] let and const Explained

In recent times, JavaScript has undergone significant changes, bringing in major updates such as new ways of declaring variables, modules, classes, arrow functions and many more. But today we will focus just on new ways of declaring variables.

Problem

Let’s begin with a question! So, what output do you expect from the following code?

function feeling(happy) {
 if(happy) {
  var feelHappy = "Yay, I am feeling very happy today!";
 } else{
  var feelSad = "I am feeling sad";
  console.log(feelHappy);
 }
}
feeling(true);

Yes, you got it right. It will return undefined. No worries if didn’t get it right. Stop scratching your head and keep reading.

Hoisting

Hoisting in nutshell is setting up the memory space for functions and variables. So, the above code that we wrote, during runtime will appear as

function feeling(happy) {
 if(happy) {
  var feelHappy, feelSad;
  feelHappy = "Yay, I am feeling very happy today!";
 } else{
  feelSad = "I am feeling sad";
  console.log(feelHappy);
 }
}
feeling(true);

Here the all the variables are hoisted meaning they are raised to the top of function scope. Since var lets the variables to be re-declared and reassigned. So, in the lexical environment of else statement feelHappy is not defined or is undefined. That’s it. This was the reason behind the coming up of so called undefined.

let and const

I want to overcome this Hoisting thing quickly! Okay. Fine. Let’s do it. But first of all we need to look at one very important concept.

Scope

Scope is basically where a variable is available in your code. var allowed variables either to be globally scoped or locally scoped to entire function scope.

So, the code that we wrote above had the variables that were scoped to the function. So we need to change that. This is where the let and const comes to our rescue.

If a variable is declared using let or const inside a block of code (denoted by curly braces {} ), then the variable is stuck in what is known as the temporal dead zone until the variable’s declaration is processed. This behavior prevents variables from being accessed only until after they’ve been declared.

How to Use

It’s dead simple.

When we declare using let — the variable can be reassigned but can’t be re-declared in same scope.

When we declare using const — the variable must be assigned initial value, but can’t be re-declared in same scope and also can’t be reassigned.

Now guess the output of the following code.

function feeling(happy) {
 if(happy) {
  const feelHappy = "Yay, I am feeling very happy today!"
 } else{
  const feelSad = "I am feeling sad";
  console.log(feelHappy);
 }
}
feeling(true);

Oh come on! you are again right. Sure, it will throw a ReferenceError. Because feelHappy is not defined this time in the else block of code.

When to Use:

We use let when we plan to reassign new values to a variable. We use const when values of the variables are not going to be reassigned.

So, what about var?

Just abandon it. Just do it. There is no longer any reason to use it.

Congratulations, you have just learnt one of the biggest improvement JavaScript has ever seen — new and better ways to declare a variable! Cheers!