DEV Community: Sagar Kumar Shrivastava

Closure in JavaScript

Sagar Kumar Shrivastava — Sun, 28 Dec 2025 14:26:27 +0000

What is Closure?

To truly understand closures in JavaScript, we first need to understand how JavaScript executes code under the hood.

Closures are not a separate feature, they are a natural result of how Execution Contexts and Lexical Environments work.

Let's break this down step by step.

Execution Context

Whenever a function is invoked, JavaScript creates a new Execution Context for that function.

An Execution Contexts fundamentally consists of two main components:

Variable Environment (Memory Component)
Lexical Environment (Scope Resolution Component)

1. Variable Environment (Memory Component)

This is where the function's local data is stored.

Before a single line of code is executed, the JavaScript engine scans the function and allocates memory for:

Variables declared using var, let, and const
Function declarations (entire function definitions)
Arguments object, which contains all values passed to the function

This setup happens during the Creation Phase of the Execution Context.

2. Lexical Environment (Scope Resolution Component)

This component is responsible for executing the code line by line and resolving variables.

It contains:

Scope Chain
A reference to the parent's Lexical Environment. This is how JavaScript looks up variables that are not present in the current scope.
this binding
The value of this, determined by how the function is called.

The Two Phases of Execution Context

Every Execution Context is created in two phases:

1️⃣ Creation Phase

Memory is allocated
Variables are hoisted
Functions are stored entirely
let and const exist in the Temporal Dead Zone

2️⃣ Execution Phase

Code runs line by line
Variables receive their actual values

Let's Understand This with an Example

Step 1: Global Execution Context (GEC)

Before any code runs, JavaScript creates the Global Execution Context.

Memory Phase

outer → stored as a function
fn → initialized as undefined

Execution Phase

The engine reaches const fn = outer()
This triggers the creation of a new Execution Context for outer()

Step 2: `outer()` Execution Context

When outer() is called, its Execution Context is pushed onto the Call Stack.

Memory Phase

count is allocated (in TDZ because it’s declared with let)
inner function is created and stored entirely

Execution Phase

count is assigned the value 0
The inner function is returned

Termination

The outer() Execution Context is popped off the Call Stack

⚠️ Crucial Detail (This is the key to Closure)
Even though the outer() Execution Context is destroyed, its Lexical Environment is NOT garbage collected.

Why?

Because the returned function inner still holds a reference to it.

👉 This preserved reference is what we call a Closure.

Step 3: fn() Execution Context (First Call)

At this point:

const fn = outer();

fn now holds a reference to the inner function along with its hidden [[Environment]] link to outer’s Lexical Environment.

When we call:

fn();

Memory Phase

No local variables
Empty arguments object

Execution Phase

count++ is executed
JavaScript looks for count in fn’s local scope → not found
It follows the Scope Chain to outer’s Lexical Environment
count is found with value 0
It is incremented to 1
1 is returned

So, What is a Closure?

A Closure is formed when a function "remembers" the variables from its lexical scope even after that scope's execution context has finished.

Closures happen because:

Functions carry a hidden reference ([[Environment]])
This reference points to the Lexical Environment where the function was created
As long as the function exists, that environment stays alive

Mental Model 🧠

🔑 Closure is not about function execution, it's about function creation.
A function remembers the lexical environment where it was defined, even after that environment's execution context is gone.

Higher Order Function in JavaScript

Sagar Kumar Shrivastava — Thu, 25 Dec 2025 12:44:58 +0000

In my last post, we solved the "pain of the century" by using parameters as placeholders for our data. We learned that we don't need a fiveSquared and a sixSquared function; we just need one calculateSquare(num) function where num acts as a placeholder for any value.

But we are still facing a tiny bit of "pain."

Right now, our function is a specialist. It only knows how to square a number. But what if we want a function that is a generalist? What if we want to pass in a number and then decide if we want to square it, cube it, or even just double it?

In this article, we are diving into Higher-Order Functions. This is where we stop just passing data (like numbers and strings) into functions and start passing operations (other functions) as placeholders.

And if you're wondering how a function can be passed as a parameter in JavaScript

The short answer:

In JavaScript, functions are first-class citizens.
That means a function is just a value, like a number or a string, so it can be passed as a parameter to another function.
The function being passed as an argument is often called a "Callback Function"

In this article, we are diving into Higher-Order Functions. This is where we stop just passing data (like numbers and strings) into functions and start passing operations (other functions) as placeholders.

Quick Analogy:

Think of it like this: If a standard parameter is a placeholder for the ingredients, a Higher-Order Function allows us to leave a placeholder for the recipe itself!

The "Master Machine" Example

Check out this code. Notice how doMath doesn't know if it's adding or multiplying yet, it waits for us to tell it what to do!

// 1. We define our "Mini-Machines" (Operations)
const square = (n) => n * n;
const double = (n) => n * 2;

// 2. We define our "Master Machine" (The Higher-Order Function)
// 'operation' is the placeholder for the logic we want to use!
function doMath(num, operation) {
    return operation(num);
}

// 3. Now we can change the logic on the fly!
console.log(doMath(5, square)); // Output: 25
console.log(doMath(5, double)); // Output: 10

Why this is a game-changer:

Do you see what happened there? We didn't have to write a doSquare function and a doDouble function. Instead, we wrote one Master Function (doMath) and left a placeholder for the operation.

This is the ultimate level of the DRY principle. Now, we aren't just reusing data; we are reusing the entire structure of our code and simply swapping out the logic whenever we feel like it. No more "pain of the century", just clean, flexible code!

The concept of Higher-Order Function is very important in JavaScript and its most popular frameworks like React

If you haven't understood it yet or want to understand what problem Higher-Order Function is solving by analogy, then read further:

The Power Tool Analogy: Attachments vs. Machines

Imagine you are working on a construction project.

If you followed the "old way" (our fixed functions), you would have to buy a completely different, heavy machine for every single task. - You'd have one machine that only drills,

one machine that only sands, and
one machine that only saws.

If you ran out of room in your truck, that would be the "pain of the century!"

Higher-Order Functions are like a Power Drill.

The drill itself doesn't know what it's going to do yet. It just provides the power and the rotation. To make it useful, you plug in an attachment:

Plug in a drill bit, and you're making holes.
Plug in a sanding disc, and you're smoothing wood.
Plug in a screwdriver head, and you're fixing a cabinet.

In this scenario:

The Drill is your Higher-Order Function. It’s the "Master Machine" that handles the work.
The Attachment is the Callback Function (the operation). It's the specific logic you swap in and out.
The Wood is your Data. It's the material you are working on.

By using this approach, you don't need to reinvent the "power" every time. You just change the attachment to change the operation!

Conclusion: From Manual Labor to Master Engineering

We've come a long way from the "pain of the century." We started with functions that were stuck doing one thing forever, moved to functions that could handle different data, and now we've mastered Higher-Order Functions, the power drills of the JavaScript world.

By using placeholders for both your data and your logic, you are no longer just writing code; you are building systems. You've learned that:

Parameters make your data flexible.
Callbacks make your operations flexible.
Higher-Order Functions bring it all together to keep your code DRY and professional

The next time you find yourself writing the same logic over and over, stop and ask yourself: "Can I turn this into a power tool?" If the answer is yes, you're well on your way to mastering JavaScript.

Happy coding!

Core Premise of Function in JavaScript

Sagar Kumar Shrivastava — Thu, 25 Dec 2025 11:39:39 +0000

Is this a function in JavaScript?

function fiveSquared() {
    return 5 * 5
}

Technically, yes.
fiveSquared, instead of technically being a function, it doesn't have all the characteristics of a real-world function: reusability. No matter how many times you call fiveSquared(), it will always return 25. If you suddenly need to calculate the square of 6, you're stuck. You would have to write a brand new function called sixSquared just to do 6 * 6. This is the "pain of the century", doing the same work over and over again!

Even though this code is a function, it defeats the fundamental principle of DRY (Don’t Repeat Yourself). A function's true purpose isn't just to hold a calculation; it’s to provide a flexible logic that saves you from writing the same code twice.

The Cure for the "Pain of the Century"

So, how do we fix a function like fiveSquared so it doesn't break the DRY principle? We use Parameters.

Instead of hardcoding the number 5 inside the logic, we create a "placeholder" (an input variable). This allows the function to stay the same, while the numbers we give it can change. Here is the better way to do it:

function calculateSquare(num) {
    return num * num;
}

By adding num inside the parentheses, we’ve just saved ourselves a lifetime of work! Now, we don't need to write fiveSquared, sixSquared, or sevenSquared. We have one single function that can handle any number in the world.

When we call the function like this:

calculateSquare(5) returns 25
calculateSquare(6) returns 36
calculateSquare(100) returns 10,000

This is the true power of JavaScript functions. We wrote the logic once, and now we can reuse it forever. We finally moved away from the "pain" of repeating ourselves and started writing smart, scalable code.

Final Conclusion

Writing functions is one of the first big steps in your coding journey. It’s the difference between doing manual labor and building a machine that works for you.

Remember: A great function doesn't just do a task, it provides a flexible logic that you can use over and over again without ever having to rewrite it. By using parameters and avoiding hardcoded values, you move away from the "pain of the century" and toward becoming a clean, efficient developer.

Keep practicing, keep your code DRY, and most importantly, stop repeating yourself!

Test Your Knowledge: The Function Challenge!

Write a function called multiplyByTen that takes one parameter and returns that number multiplied by 10.
What happens if you create a function with a parameter but forget to use that parameter inside the logic? Does it still follow the DRY principle?
Can you write a function that takes two different parameters (like num1 and num2) and adds them together?

What is next?

In this article, we discovered that we can leave a placeholder for data (a parameter). This allows us to pass different numbers into calculateSquare later on, finally making our code reusable.

But what if we could go even deeper?

In the next article, we are going to learn how to leave a placeholder for the operation itself. Just like we passed in a different number, we can actually pass in a different action(operation). Right now, our function is stuck doing multiplication, but what if we could tell it to multiply one day and add the next, without changing the core function?

Get ready, because we're about to learn how to make our logic just as flexible as our data by using something called Higher Order Function (HOF for short).

Arrays in Javascript

Sagar Kumar Shrivastava — Thu, 27 Oct 2022 13:53:20 +0000

Note - If the only argument passed to the Array constructor is an integer between 0 and 232 - 1 (inclusive), this returns a new JavaScript array with its length property set to that number. MDN

😇 Still scratching your head then use Array.of() Static method. Remember these are alternative method so don't worry much about it.

3. Array.of()

const arr1 = Array.of(); // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = Array.of(10, 20, 32); // Creating an array with values
console.log(arr2.length); // 3

4. Array.fill()

Array.fill() will let us create the array at the same time include a value that will be in every single position/index.

For example :-

const arr1 = Array.(5).fill(1); // [1, 1, 1, 1, 1]

We can also use fill() method on already created arrays.
For example :-

const arr2 = [1, 2, 3, 4,,,,].fill(2); // [2, 2, 2, 2, 2, 2, 2]

We can pass 3 arguments to fill() method.

fill(value) -
fill(value, start)
fill(value, start, end)

value to fill the array with

start and end index is optional arguments.

start is inclusive. Default 0

end is exclusive, Default array.length

For example :-

const arr3 = [1, 2, 3, 4, 5,,,,].fill(6, 0, 3); // [6, 6, 6, 4, 5, empty × 3]

Reading and Writing Array Elements

1.Reading elements from an array

Array Literal

const arr = [22, 32, 42, 92, 52]
console.log(arr[2]); // 42

at() method (ECMAScript 2022)

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

const arr1 = [22, 32, 42, 92, 52]
console.log(arr1.at(0)); // 22
console.log(arr1.at(-1)); // 52

2. Writing elements in an array

Within the length of the array.

const arr1 = [22, 32, 42, 92, 52]

arr1[3] = "javascript";

console.log(arr1); // [22, 32, 42, "javascript", 52];
console.log(arr1.length); // 5;

arr1[5] = "tom";

console.log(arr1); // [22, 32, 42, "javascript", 52, "tom"];
console.log(arr1.length); // 6;

Beyond the length of the array - It creates an empty array in between.

arr1[8] = 67;

console.log(arr1); // [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9

Sparse Array

What is Sparse Array?

A sparse array is an an array with empty elements, we can call it holes in the array.
index of the empty element will log undefined in Chrome because as Javascript doesn't have a value for the hole.

Ways to create Sparse Array

Example 1

In the below example, we are assigning a value to an index number of 8 and there was nothing assigned to the index numbers between 5 and 8 which 6 and 7.

So 6 and 7 became empty elements and therefore we have sparse array right now.

arr1[8] = 67;

console.log(arr1); 
// [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9
console.log(arr1[6]) // undefined
console.log(arr1[7]) // undefined

Example 2

We can create a sparse array by simply putting commas(,). Every time there is a comma that creates a new element but there is nothing in those element so it creates holes in the array.

let arr2 = [,,,,,,]; 
console.log(arr2); // [empty × 6]
console.log(arr2.length); // 6
console.log(arr2[2]) // undefined

Example 3

Assigning value(as number) to the length of an array and if that value is greater than the actual length of the array can create a sparse array.

let arr2 = [2,3,5,8]; 
console.log(arr2.length); // 4

// Setting a new length which is greater than actual 
// length of the array which is 4 in our case
arr2.length = 10;

console.log(arr2) // [2, 3, 5, 8, empty × 6]
console.log(arr2.length); // 10

Example 4 (using delete operator on Arrays)

delete doesn't modify the length of the array, it just creates the sparse array(hole in the array).

let arr1 = [1,2,3,4,5,6,7]; 
delete arr1[5];

console.log(arr1); // [1, 2, 3, 4, 5, empty, 7]

Empty Array

Two simple ways to empty and array.

1. - Reassigning original array to an empty array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr1 = [];

This technique is not emptying the array but assigns a new empty array to it.

See the below example where arr2 still references the original array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1 = [];

console.log(arr1); // []
console.log(arr2); // [1, 2, 3, 4, 5, 6]

Notice - The above approach will not work with const keyword because variables assigned with const keyword can not be re-assigned.

2. Setting array length property to zero.

With this technique, we will empty the original array and we can see in the below example that even arr2 is logging as an empty array.

let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1.length = 0;

console.log(arr1); // []
console.log(arr2); // []

This is it, now you can go for a coffee break. If I have missed something along the way, do point it out in the comment box.

Upcoming articles on Javascript Arrays:

How to iterate Arrays
Working with Array-like collections
Array Methods
Multidimensional Arrays

Till then, Keep Learning! 🤘

Javascript for Absolute Beginners #01

Sagar Kumar Shrivastava — Wed, 12 Aug 2020 22:14:43 +0000

Note: I will put reference links or explain the Jargons used in this article at the bottom of the article.

This is my first article for absolute beginners who wanted to learn Javascript from scratch, in these articles I will try to cover every tiny bit of javascript.

What is Javascript?

Javascript is a dynamic programming language.¹ Javascript enables interactivity in Web pages.

Javascript Syntax

Case Sensitive
Identifiers
Comments
Statements
Expressions

Case Sensitive

Javascript is a case-sensitive language. It means apple & Apple is not the same variable.²

let apple = "This is a lowercase apple";
let Apple = "This is an uppercase apple";

console.log(apple)
> This is a lowercase apple
console.log(Apple)
> This is an uppercase apple

Identifiers

The identifier is the name given to a variable, function³, parameter⁴ by the programmer who wrote that program.

let varName = "This is an identifier";

// In the above example, varName is the Identifier

Rules for writing an identifier name.

The first character of the identifier name must start with a letter (a-z, A-Z) / (_ underscore) / ($ dollar sign)
The other character of the identifier name can be a letter (a-z, A-Z) / (0-9) / (_ underscore) / ($ dollar sign).
JavaScript defines a list of keywords that have special uses. You cannot use the keywords as the identifiers. See Full List of keywords

Comments

Comments are common practice in all programming languages for leaving notes or explaining your code to yourself and others.

There are two kinds of comments in javascript.

Single-line comment
Multi-line comment or Block comment

Example:

// this is a single-line comment


/*
* This is a block comment that can
* span multiple lines
*/

Statements

Statements are a sequence of commands that needs to be executed. Statements should end with a semicolon(;), strongly recommended but not required.

Semicolon(;) is required for the readability of the code and also to avoid syntax errors⁵ after minifying⁶ javascript code.

Expressions

An expression is a block of code that evaluated to a value.

Below are the types of Expressions in Javascript. I will explain these in the next article.

Arithmetic expressions - Ex. 2 + 3
String expressions - Ex. 'sagar' + 'sinha'
Primary expressions - Ex. true, false
Array and object initializers expressions - Ex.[], {}
Logical expressions - Ex. &&, ||
Left-hand-side expressions - Ex. new, super
Property access expressions - Ex. object.property
Object creation expressions - Ex. new object()
Function definition expressions - Ex. function() {}
Invocation expressions - Ex. f(0)

Cheers! See you again in the next article. (Next article will be about expressions in detail.)

Jargons Explained

Dynamic programming language - In computer science, a dynamic programming language is a class of high-level programming languages, which at runtime execute many common programming behaviors that static programming languages perform during compilation. Source - Wikipedia

Related Links for more informatiion - mdn , wikipedia , sitepoint

Variable - Variables are named reference to a value. Further details on the variables in the coming articles.
Function - A function is a block of statements that are used to perform a specific task. Further details on the variables in the coming articles.
Parameter - Will learn in detail in an upcoming article.
Syntax errors - An incorrect use of pre-defined syntax cause a syntax error. For example, if you leave off a closing brace (}) when defining a JavaScript function, you trigger a syntax error.
Minifying - Minifying the code means removing whitespaces, comments, and other unnecessary stuff that is not needed for the execution of the code. This process is used for reducing the file size.

If you guys have any doubt or anything you haven't understood, please feel free to ask in the comment.

DEV Community: Sagar Kumar Shrivastava

Closure in JavaScript

What is Closure?

Execution Context

1. Variable Environment (Memory Component)

2. Lexical Environment (Scope Resolution Component)

The Two Phases of Execution Context

Let's Understand This with an Example

Step 1: Global Execution Context (GEC)

Step 2: outer() Execution Context

Step 3: fn() Execution Context (First Call)

So, What is a Closure?

Mental Model 🧠

Higher Order Function in JavaScript

The "Master Machine" Example

Why this is a game-changer:

The Power Tool Analogy: Attachments vs. Machines

Conclusion: From Manual Labor to Master Engineering

Core Premise of Function in JavaScript

Is this a function in JavaScript?

The Cure for the "Pain of the Century"

Final Conclusion

Test Your Knowledge: The Function Challenge!

What is next?

Arrays in Javascript

TOC

What is an Array?

Nature of Javascript Arrays

Creating Arrays

Reading and Writing Array Elements

Sparse Array

Empty Array

Javascript for Absolute Beginners #01

What is Javascript?

Javascript Syntax

Case Sensitive

Identifiers

Comments

Statements

Expressions

Jargons Explained

Step 2: `outer()` Execution Context