'Why is this variable returning undefined ?'

'Why am I not able to access these variables ?'

'Why does ES6 bring let / const declarations ?'

These questions used to haunt me while starting my web development journey. I know few of these concepts can be daunting at first but it is essential to have a good understanding of these concepts to progress as a frontend developer.

While starting my JavaScript journey I encountered a code snippet that was written using the var declaration. Then a few chapters later, the declarations were done using let and const.

This took me a while to understand why, when, and how to use let and const in your codebase and why to let and const is superior to var.

Hoisting

Guess the output

console.log(foo)
var foo = 'foo'

If you guessed undefined, pat yourself on the back. Now, for those who are wondering 'We can not access a variable before declaring', 'How did we get undefined ?'. I got one word for you HOISTING.

Hoisting is your JavaScript engine skimming through your code and assigning a special spatial keyword called undefined to all your variable initialization using var. The JavaScript engine does not move your code to the top of the file. That would be a sign of a bad engine Why would we as programmers let the computer alter our code ?.

So know that you know about hoisting, we will move ahead to know more about let and const.

Temporal Dead Zone

Guess the output

//line of code
//code
console.log(bar);
console.log(foo);
let bar = 'bar';
const foo = 'foo';

The output given by this code will be an error, more specifically a ReferenceError saying bar is not defined. Hold up, all variables are hoisted, right? Yes, they are, so why are they not given undefined. The reason we do not get undefined is Temporal dead zone. So from line number 1 to line number 5 both bar and foo are in a temporal dead zone meaning they are hoisted but in a separate namespace called script where we can not access them.

It is OK to be confused at this point just play around with the examples or even better make up different examples to understand better.

let and const are block-scoped

Guess the output

let foo = 'foo'
{
    console.log(foo)
    let foo = 'FOO'
}

The output given by this code is also a ReferenceError. We are getting this error because let and const are block-scoped. But.... but there is foo outside the block why is it not printing 'foo'.

We are declaring foo inside the block so it is hoisted again when the JavaScript engine runs through the code. Hence we get an error.

var bar = 'bar'
{
    console.log(bar);  // 'bar'
    var bar = 'BAR'
    console.log(bar)   // 'BAR'
}
console.log(bar)       // 'BAR'

But in the case of var, it is globally scoped so it will print as expected.

Conclusion

While writing clean and readable code using let and const is important. Tips to effectively use let and const

• Use const more than let, unless that variable requires a certain change in the future.
• Move all your variable declarations to the top to avoid errors