DEV Community: Kush

Introduction to Closure

Kush — Wed, 03 Jul 2024 16:14:54 +0000

In simple words, you can remember closure as:

A closure gives you access to an outer function's scope from an inner function.

Closure is considered as the most powerful in all of Javascript programming.
You don't believe me yet? Let's see:

Imagine when you're in a good mood and talking to a friend. Everything seems right and you just greet everyone nicely because you feel like it to be there until someone pisses you off and then imagine talking to that friend or just imagine feeling about the friend. Everything seems falling off and you decide to blurt out.

Just like our code here:

const greet = x => {

  const name = y => {
    // x is an outer variable
    // inner function name has closure over it
    return x + ' ' + y + '!';
  }
  return name;

}


const goodMood = greet('Hello');
// goodMood gets a reference to the inner 'name' function
// because we're returning 'name' function in 'greet' function
// with closure over the 'x' parameter of the outer function 'greet'
const badMood = greet('Get lost');
// badMood gets a reference to the inner 'name' function
// with closure over the 'x' parameter of the outer function 'greet'

let greetDavid = goodMood('David');

console.log(greetDavid); // Hello David!

greetDavid = badMood('David');

console.log(greetDavid); // Get lost David!

goodMood and badMood remember the variable 'Hello' or 'Get Lost' even when we thought the function has stopped running.

That's the power of 'Closure'.

Hey, I was doing just fine before I met you 🎶 🎶 🎶

Source

Hoisting

Kush — Tue, 25 Jun 2024 20:42:52 +0000

Hoisting is a behaviour in JavaScript when a declaration is moved to the top of it's enclosing scope no matter where in the scope you've declared it.

Var

Let's understand this with a simple example:

var x = 11;

callMeAnytime();

function callMeAnytime() {
  x = 9;                     
  console.log(x);
  var x;
};

console.log(x);

Many/Some of us would think this block of code will throw an error on execution but that's not what going to happen. What's exactly going to happen is:

var x = 11;

callMeAnytime();             //function declaration is 'hoisted'

function callMeAnytime() {
  x = 9;                     
  console.log(x);            //9
  var x;                     // variable declaration is 'hoisted' to
};                           // the top of the callMeAnytime function

console.log(x);              // 11

You can think declaration as a flag and Javascript as the one who hoist the flag. On hoisting, flag reaches top. Isn't it?

Source

Let and Const

When it comes to let and const, hoisting is bit confusing and I'll tell you why?

Consider below examples.

console.log(x);

let x = 11;               // or, const x = 11;

On executing, you get ReferenceError: Cannot access 'x' before initialization and you going to think hoisting doesn't happen in let and const but that's not all. Let me clear this up in the next example:

console.log(y);
let x = 11;

You get ReferenceError: y is not defined on executing and that's what makes the difference.

Here, JavaScript has no idea about the y variable is because it is not defined and isn't it obvious that we didn't define it? We've only defined x.

In the first code snippet, it says "cannot access before initialization" and not "is not defined" and that means Javascript has considered hoisting of let/const without a default initialization.

The state between execution where let/const variables are hoisted and its existence is known but not accessible as it's not initialized yet, is called TEMPORAL DEAD ZONE** (Sounds fancy.. Isn't it?).

Source

let/const are hoisted WITHOUT a default initialization and var is hoisted WITH default initialization of undefined.

NaN is neither greater than nor less than any value

Kush — Mon, 24 Jun 2024 19:13:15 +0000

Have you ever been in a situation where you're expecting something and you get something unexpected in return?
Well, I'm not talking about "the mysteries of life" but "the mysteries of Javascript".

Consider we've something like this below:

let x = 9;
let y = "11";
let z = "14";

x < y; // true
y < z; // true
z < x; // false

x < y
So, what's exactly happening here is, if either of the values or both are strings i.e, when x < y, then both the values are coerced to be numbers and a typical numerical comparison happens.

y < z
But if both the values in the < comparison are strings, the comparison is made lexicographically same as the order you find in any dictionary.

Let's look at another case when one of the values can't be made into a valid number.

let x = 11;
let y = 'z';

x < y; // false
x > y; // false
x == y; // false

Most of us should be confused, how all the three comparisons be false? but it's okay to be confused here. The thing to catch here is value y is being coerced to 'Not a Number' (NaN) in the equality comparisons and NaN is neither greater than nor less than any other value.

Ref: YDKJS