The Not-so-commonly Covered JS Topics

In this blog, I would discuss some of the most important Javascript Questions, often asked in the interviews I appeared for.

---

Immediately Invoked Function Expression (IIFE)

---

An Immediately Invoked Function Expression (IIFE) is a common JavaScript design pattern that involves defining and invoking a function immediately after its creation. This pattern is often used to create a private scope for variables, avoiding polluting the global namespace and preventing variable collisions.

(function () {
    // code to be executed immediately
})();

Components:

1. Enclosure in Parentheses:

(function() { ... }) creates an anonymous function expression. Wrapping the function in parentheses is necessary because in JavaScript, function declarations cannot be immediately invoked.

1. Function Declaration:

function() { ... } is an anonymous function declaration. It can also be a named function if you want to refer to it within its own scope.

1. Invocation:

The final pair of parentheses () immediately invokes the function. This execution happens right after the function is defined.

---

1. Basic IIFE

(function () {
    var localVar = "I am local to the IIFE";
    console.log(localVar);
})();
// localVar is not accessible here

1. Passing Parameters

(function (param) {
    console.log("Parameter value: " + param);
})("Hello, IIFE!");
// Output: Parameter value: Hello, IIFE!

1. Returning Values

var result = (function (a, b) {
    return a + b;
})(5, 10);
console.log(result);
// Output: 15

---

Hoisting

---

Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context.

getName(); // Namaste
console.log(x); // undefined
var x = 7;
function getName() {
  console.log("Namaste");
}

getName(); // Uncaught TypeError: getName is not a function
console.log(getName);
var getName = function () {
  console.log("Namaste");
};
// The code won't execute as the first line itself throws an TypeError.

1. Variable hoisting:

When you declare a variable (like giving a name to a new toy), the robot takes note of it and puts a label on it.
This label goes to the top of your play area, so you know it's there.
But the actual toy (the value) is put in the right place only when you decide.

1. Function Hoisting:

Imagine you want to play a game (function) like hide and seek.
You say, "I want to play hide and seek!"
The super-smart robot listens and says,
"Sure! I know how to play hide and seek. Let's play!"
You can start playing before you even tell the robot all the rules because it already knows the game.

1. Function Expressions:

Function expressions, such as arrow functions and anonymous functions, are not hoisted in the same way as function declarations.
They behave more like variable declarations.

Imagine we want to play another game, like "Simon Says." But this time, we don't have a rule book ready.
Instead, we have a friend named "Simon" who knows the rules and is ready to lead the game.

---

Temporal Dead Zone

---

console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // prints undefined as expected
let a = 10;
console.log(a); // 10
var b = 15;
console.log(window.a); // undefined
console.log(window.b); // 15

---

It looks like let isn't hoisted, but it is

---

Both a and b are actually initialized as undefined in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory object called script, where it can be accessed only after assigning some value to it first ie. one can access 'a' only if it is assigned. Thus, it throws error.

---

Temporal Dead Zone: Time since when the let variable was hoisted until it is initialized some value.

So any line till before "let a = 10" is the TDZ for a
Since a is not accessible on global, its not accessible in window/this also. window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere)

Reference Error are thrown when variables are in temporal dead zone.

Syntax Error doesn't even let us run single line of code.

---

Currying

Follow this link to have an in-depth understanding

---

Closures

Function bundled along with it's lexical scope is closure.

JavaScript has a lexcial scope environment. If a function needs to access a variable, it first goes to its local memory. When it does not find it there, it goes to the memory of its lexical parent. See Below code, Over here function y along with its lexical scope i.e. (function x) would be called a closure.

function x() {
  var a = 7;
  function y() {
    console.log(a);
  }
  return y;
}
var z = x();
console.log(z); // value of z is entire code of function y.

In above code, When y is returned, not only is the function returned but the entire closure (fun y + its lexical scope) is returned and put inside z. So when z is used somewhere else in program, it still remembers var a inside x()

A closure is a function that has access to its outer function scope even after the function has returned. Meaning, A closure can remember and access variables and arguments reference of its outer function even after the function has returned.

Closures can impact memory management, as they can prevent variables from being garbage collected when they are no longer needed.
To avoid memory leaks, it's essential to be mindful of retaining closures and to clean up references when they are no longer required.

---

Cookies

Get an detailed view about cookies

---

LocalStorage and SessionStorage

Checkout this comprehensive URL

---

If you are stuck till here , I would like to give you a goldmine
Deep Dive !!! Cheers