© 2026 Blog. All rights reserved.

HomeBlogs

Latest Blogs

Stay updated with our newest blogs, tutorials, and insights.

Immediately Invoked Function Expressions(IIFE)
Javascript

Immediately Invoked Function Expressions(IIFE)

(() => { … })()


IIFE is a technique where we create a function and execute it immediately in one step, instead of defining it first and then calling it separately. Since the whole function is inside the first set of brackets, it becomes an expression rather than a statement.


We can write the inside function with or without a name. We can also create a private function this way. Using an IIFE, we can avoid creating global variables or functions. In an IIFE, defined functions or variables do not conflict with other variables or functions, even if they have the same name. Other pros are maintaining and organizing code in JavaScript.


const sumAB = (function sumAB(a, b) {
return a + b;
})(10, 2); //12


If you console.log(sumAB), you will get the result immediately.

Also, even though the function is named sumAB, using the same variable name sumAB outside does not cause any error because the function name is scoped only inside the IIFE.


const hello = (function getHello() {
return 'Hello';
})();


In this example, you cannot access getHello from outside. It is only available inside this IIFE function.


for (var i = 1; i <= 5; i++) {
setTimeout(() => console.log(i), 1000);
}


Here, you will get the value 6 for all logs because var is function-scoped. When the timeout runs after 1000 ms, the loop has already finished, and the value of i is 6.


for (var i = 1; i <= 5; i++) {
(function (i) {
setTimeout(() => console.log(i), 1000);
})(i);
}


We can solve the problem by using an IIFE to “lock” or capture the current value of i. If we use let in the for loop instead of var, it will also solve the problem because let is block-scoped.

Md TareqMd Tareq
27/12/2025
A Story of Closures in JavaScript
Javascript

A Story of Closures in JavaScript

In JavaScript, a function can always remember values from the place where it was created — even after that outer code has finished running. This behavior is called a closure.


Closure is the default behavior in Javascript, where an inner function can access variables, functions or objects from its outer function. Even after the outer function finishes execution, the inner function still has access to the outer function scope. This is called lexical scoping. Variables inside a function are private and can only be accessed through the functions it returns.


function counter() {
let count = 0;
return () => ++count;
}

const inc = counter();

console.log(inc()); // 1
console.log(inc()); // 2


Here we have a function with a variable count. It returns another function that increments and uses the parent variable count. Each time you call the inc function, it updates the parent variable and returns the new value on the next call.


function outer() {
const x = 2;
function inner() {
const y = 3;
return x + y;
}
return inner;
}

const oneLineExec = outer()();
console.log(oneLineExec); //5

const outerExec = outer();
const innerExec = outerExec();
console.log(innerExec); //5


In the above example, outer is the parent function and inner is the child function. The parent function returns the child function. Even after the parent function finishes execution, the child function can still access the parent’s variable.

We can run it directly in one line using outer()().


Or, we can store the returned function in a variable and call it later — since functions in JavaScript can be stored in variables. Both ways give the same result.


function multiply(x) {
return function (y) {
return x * y;
};
}

const multiplyBySeven = multiply(7);
const multiplyByFive = multiplyBySeven(5);
const multiplyBySix = multiplyBySeven(6);
const multiplyByFourAndSix = multiply(4)(6);

console.log(multiplyByFive); //35
console.log(multiplyBySix); //42
console.log(multiplyByFourAndSix); //24;


In this example, we create a multiply function that returns another function. When we store multiply(7) in multiplyBySeven, it remembers the value 7. We can then call it with different numbers like 5 and 6 to get new results (35 and 42).


We can also call it directly in one line like multiply(4)(6) which gives 24.

This shows how closures let a function “remember” values from its parent function, even after the parent has finished running.


And that’s it for today. I think this clears up the confusion about what a closure does.

Md TareqMd Tareq
22/12/2025
What is Hoisting in JavaScript?
Javascript

What is Hoisting in JavaScript?

Hoisting is one of JavaScript’s most interesting behaviors. Conceptually, it looks like JavaScript moves variable and function declarations to the top of their scope before the code runs, but in reality this happens behind the scenes during code processing.


JavaScript processes your code in two main phases. First comes the Creation Phase, where it scans through your code and sets up memory space for all variables and functions it finds. For variables declared with var, JavaScript creates them in memory and initializes them with undefined. For function declarations, it stores the entire function definition in memory.


Next is the Execution Phase, where JavaScript runs your code line by line. When it reaches the actual assignment line in your code, it replaces the initial undefined value with the assigned one. When it encounters function calls, it executes those functions using the definitions stored during the creation phase.


This two-phase process explains why variables declared with var can be accessed before their declaration appears in your code. If you try to use a var variable before declaring it, you’ll get undefined instead of an error. This happens because the variable exists in memory (it was hoisted), but its value hasn’t been assigned yet.


Variables declared with let and const are also hoisted, but they stay in a "Temporal Dead Zone" (TDZ) from the start of the scope until the actual line of declaration. Accessing them during this period throws a ReferenceError.


console.log(a); // undefined
console.log(c); // ReferenceError: Cannot access 'c' before initialization

var a = 10;
let c = 20;

console.log(a); // 10
console.log(b); // ReferenceError: b is not defined

function demonstrateVarHoisting() {
console.log(message); // undefined (hoisted but not initialized)
var message = "Hello, world!";
console.log(message); // "Hello, world!" (after assignment)
}

demonstrateVarHoisting();

function demonstrateLetConstHoisting() {
try {
console.log(name); // ReferenceError: Cannot access 'name' before initialization
} catch (error) {
console.log("Error caught: accessing variable in TDZ");
}
let name = "John";
}

demonstrateLetConstHoisting();


Regular function declarations (written as function myFunction(){}) are fully hoisted with their implementation. This means you can call these functions before they appear in your code, and they’ll work perfectly.


sayHello(); // Works because function declarations are fully hoisted
function sayHello() {
console.log("Hello from hoisted function!");
}


Function expressions (e.g., var myFunction = function(){}) are different. Only the variable name (myFunction) is hoisted and initialized with undefined. The function itself isn’t assigned until execution reaches that line. If you try to call such a function before its definition, you’ll get an error saying it’s not a function.


try {
sayGoodbye(); // Error: sayGoodbye is not a function
} catch (error) {
console.log("Error caught: function expression not hoisted");
}

var sayGoodbye = function () {
console.log("Goodbye!");
};


Understanding hoisting helps you avoid unexpected bugs and write more predictable code.

Md TareqMd Tareq
16/12/2025
Scope in JavaScript
Javascript

Scope in JavaScript

Scope is the area where variables and functions can be accessed in your code. Think of it as the “reach” of your variables — where they can be seen and used. Outside this scope, you cannot access them.


There are three main types of scope in JavaScript. The first one is global scope. The second one is function scope. The third one is block scope.


The global scope is like a public area that everyone can access. Variables and functions defined here can be used anywhere in your code.


let message = "Hello World"; // Global variable

function sayHello() {
console.log(message); // Can access the global variable
}


Function scope means variables created inside a function can only be used within that function. They are born when the function runs and disappear when it finishes.


function createMessage() {
let message = "Hello from function"; // Function-scoped variable
console.log(message); // Works fine
}

createMessage();
// console.log(message); // Error! Cannot access outside the function


Block scope refers to variables that only exist inside code blocks (anything inside curly braces {} like if statements, loops, etc.). Only variables declared with let and const have block scope. Variables declared with var do not have block scope.


if (true) {
let blockVariable = "I'm in a block"; // Block-scoped
var notBlockVariable = "I'm not limited to the block";
}

// console.log(blockVariable); // Error! Cannot access
console.log(notBlockVariable); // Works fine


JavaScript also has lexical scoping, which describes how nested functions can access variables from their parent functions. Child functions can access their parent’s variables, but parent functions cannot access their children’s variables.


function parent() {
let parentVar = "I'm the parent";

function child() {
console.log(parentVar); // Child can access parent's variable
let childVar = "I'm the child";
}

child();
// console.log(childVar); // Error! Parent cannot access child's variable
}


Understanding scope helps you write better code and avoid unexpected behavior in your programs.

Md TareqMd Tareq
14/12/2025
Scope in JavaScript
Javascript

Scope in JavaScript

Scope is the area where variables and functions can be accessed in your code. Think of it as the “reach” of your variables — where they can be seen and used. Outside this scope, you cannot access them.


There are three main types of scope in JavaScript. The first one is global scope. The second one is function scope. The third one is block scope.


The global scope is like a public area that everyone can access. Variables and functions defined here can be used anywhere in your code.


let message = "Hello World"; // Global variable

function sayHello() {
console.log(message); // Can access the global variable
}


Function scope means variables created inside a function can only be used within that function. They are born when the function runs and disappear when it finishes.


function createMessage() {
let message = "Hello from function"; // Function-scoped variable
console.log(message); // Works fine
}

createMessage();
// console.log(message); // Error! Cannot access outside the function


Block scope refers to variables that only exist inside code blocks (anything inside curly braces {} like if statements, loops, etc.). Only variables declared with let and const have block scope. Variables declared with var do not have block scope.


if (true) {
let blockVariable = "I'm in a block"; // Block-scoped
var notBlockVariable = "I'm not limited to the block";
}

// console.log(blockVariable); // Error! Cannot access
console.log(notBlockVariable); // Works fine


JavaScript also has lexical scoping, which describes how nested functions can access variables from their parent functions. Child functions can access their parent’s variables, but parent functions cannot access their children’s variables.


function parent() {
let parentVar = "I'm the parent";

function child() {
console.log(parentVar); // Child can access parent's variable
let childVar = "I'm the child";
}

child();
// console.log(childVar); // Error! Parent cannot access child's variable
}


Understanding scope helps you write better code and avoid unexpected behavior in your programs.

Md TareqMd Tareq
14/12/2025
2 mins
29

Explore Blog by Categories

Find your favorite topics and start reading

React

React

Typescript

Typescript

Javascript

Javascript