DEV Community

Cover image for JAVASCRIPT : Hard to understand Concepts

Posted on • Updated on

JAVASCRIPT : Hard to understand Concepts

We web developers either hate or love JAVASCRIPT.
I am here to make you fall in love with it again.
GOAL: To make you understand few concepts in an easy way.



JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

In Simple words -
you just need to remember two GOLDEN rules here-

  1. Variable declarations are scanned and made undefined.
  2. Function declarations are scanned and are made available.

Elaboration -
Every time a JS code is executed a Global execution context is created.
This Global execution context scans our code and assigns variables(i.e var) as undefined and when it comes across a function it stores the whole function definition before even the function is executed. And for each function a separate execution context is created.

var hey = "Hey!"; 
function sayHey(){
Enter fullscreen mode Exit fullscreen mode

Here, the output will be as we imagine it to be.

But what confuses a lot of people is -

var hey = "Hey!"; 
function sayHey(){
var hello;
Enter fullscreen mode Exit fullscreen mode

here, the first will after executing of code will say "undefined";
Javascript is executed line by line and surprisingly the function sayHey() works perfectly.

one more point to note here is that as the last line of code is initializing a variable without declaring it.

yes its completely possible in variable initialization but not recommended as good practices.

Remember the two Golden rules from above and you are good to go.

Before ES6 there was no other way to declare variables other than var.
ES6 brought us let and const.
Now lets talk about let and const.

Every developer says let and const is Blocked scoped.
But few get it.
so lets clear the confusion.
The scope in javascript is defined as -


Enter fullscreen mode Exit fullscreen mode

And now the second important point here is let and const are not stored in global execution context and are stored separately(i.e in Temporal Dead Zone)

let a = 2;
Enter fullscreen mode Exit fullscreen mode

Here, you will get an error "Uncaught ReferenceError: a is not defined"

And trust me its better than "undefined".

Another side note here-
const cannot be initialized without assigned to a value.


To understand this concept lemme tell you a short story and you will never forget the concept.

Image description

var a = 1;
function x(){
var b = 2;

Enter fullscreen mode Exit fullscreen mode

So now lets begin - considering a ice-cream is being eaten by a kid now as per society norms we don't ask it from a kid rather if a grand father is eating it can be asked by his child or grand child as they will pass it but a grand father or father won't ask it from his child for ice-cream.
So, in scope-chain runs in a similar way you can ask for the value of var/let/const from a bigger child to pass it to you but not from a smaller child.
Here in our case Global Execution Context is a Grand Father and everything precedes in a similar fashion.

Definition(MDN) - A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

function makeAdder(x) {
  return function(y) {
    return x + y;

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

Enter fullscreen mode Exit fullscreen mode

After placing a debugger in line 2 & 3 we see in scope a closure is formed.
Closure in simple terms is the lexical environment of its parent function.

Image description

To understand event loop lets take a piece a code.

setTimeout(() => {function cb(){
    console.log("when will i execute")

}, 0);
Enter fullscreen mode Exit fullscreen mode

here, if i ask what will be the output majority will say - as the setTimeout() has a delay of 0 ms.
the supposed output would be-
when will i execute

but that's not the case this is not how the callback works.
as js code is executed line by line.
as the js v8 engine see setTimout() it automatically goes to the next line and will execute it at the end.
now after every executing the whole code now as the setTimeout func is a web API and the func inside it will go to callback queue and the event loop will now pass this func to the execution context only when the execution context gets empty.

If you learned anything even a little bit.
Drop a like and for any queries related to the post do drop a comment i will answer it.
Thank you. :)

Top comments (0)