DEV Community: Abimanyu P

React useEffect Hook

Abimanyu P — Fri, 25 Sep 2026 17:31:27 +0000

What is useEffect?

useEffect is a React Hook used to perform side effects in a component. A side effect is an operation that happens outside the normal React rendering process. Some common examples are using setInterval, adding an event listener, fetching data from an API, or changing the browser document title.

The basic syntax of useEffect is:

useEffect(() => {
    // side effect code
}, []);

The second parameter is called the dependency array. An empty array means the effect runs after the component is initially rendered.

For example, we can use useEffect to change the browser title:

import { useEffect, useState } from "react";

function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <h1>{count}</h1>

            <button onClick={() => setCount(count + 1)}>
                Increase
            </button>
        </div>
    );
}

Here, whenever count changes, the component renders again and the useEffect runs because count is included in the dependency array.

useEffect with setInterval and Event Listener

useEffect is useful with setInterval because an interval keeps running until we stop it. We can create the interval inside useEffect and use the cleanup function to stop it.

useEffect(() => {
    const timer = setInterval(() => {
        console.log("Hello");
    }, 1000);

    return () => {
        clearInterval(timer);
    };
}, []);

The setInterval runs every one second. When the component is removed, the cleanup function runs and clearInterval() stops the timer.

The same idea can be used with an event listener.

useEffect(() => {
    function handleKeyDown(event) {
        console.log(event.key);
    }

    window.addEventListener("keydown", handleKeyDown);

    return () => {
        window.removeEventListener("keydown", handleKeyDown);
    };
}, []);

Here, the event listener waits for the user to press a keyboard key. When a key is pressed, handleKeyDown runs and prints the key in the console.

The cleanup function removes the event listener when the component is no longer needed.

Without useEffect, an event listener could be added again every time the component re-renders. This can cause unnecessary or duplicate listeners. useEffect helps us control when the listener is added and the cleanup function helps us remove it.

So the general pattern is:

useEffect(() => {
    // start or add something

    return () => {
        // stop or remove something
    };
}, []);

For example, setInterval() can be cleaned with clearInterval(), and addEventListener() can be cleaned with removeEventListener().

In simple terms, useEffect is used when we need React to perform an operation after rendering and when necessary clean up that operation later.

React Hooks And useState

Abimanyu P — Thu, 24 Sep 2026 16:47:08 +0000

React Hooks

Hooks are special functions in React that allow functional components to use React features such as state. Before hooks were introduced, state and other React features were mainly used with class components. Hooks made it possible to use these features inside functional components in a simpler way.

A hook is usually a function that starts with the word use. Some commonly used hooks are useState, useEffect, and useContext. Each hook has a specific purpose. useState is used to store and update data that can change inside a component.

useState

useState is a React hook used to create a state variable in a functional component. It returns two values: the current state value and a function used to update that value.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>

      <button onClick={() => setCount(count + 1)}>
        +
      </button>
    </div>
  );
}

Here, count stores the current value and setCount changes the value. The 0 passed to useState is the initial value.

useState can also be used with different types of data. For example:

const [name, setName] = useState("");
const [isVisible, setIsVisible] = useState(false);
const [likes, setLikes] = useState(0);

When the state is updated, React re-renders the component and displays the updated value.

For input fields, useState can store the value entered by the user:

const [name, setName] = useState("");

<input
  value={name}
  onChange={(event) => setName(event.target.value)}
/>

event.target.value gets the current value from the input and setName updates the state.

State can also control whether something is displayed:


const [isVisible, setIsVisible] = useState(false);

<button onClick={() => setIsVisible(!isVisible)}>
  Show / Hide
</button>

{isVisible && <p>Hello!</p>}

Here, the boolean state controls the visibility of the paragraph.

Think of it as:
If isVisible is true, show <p>Hello!</p>. Otherwise, show nothing.

Ex:
{false && <p>Hello!</p>} The paragraph is not displayed.
{true && <p>Hello!</p>} React displays: Hello!

This is called conditional rendering using the "&&" operator.

useState is useful whenever a component needs to remember changing information, such as counters, input values, likes, messages, or whether an element should be visible.

React Basics: Library, SPA, Rendering, Components, JSX and Props.

Abimanyu P — Wed, 23 Sep 2026 16:51:28 +0000

React as a JavaScript Library

React is a JavaScript library mainly used for building user interfaces. A library provides reusable code that we can use whenever we need it. The main difference between a library and a framework is control. In a library, we call the library when we need it, but in a framework, the framework provides the overall structure and controls the flow of the application.

For example, Axios is a library used for making HTTP requests. We decide when to call it:

axios.get("https://example.com/users");

A real-world example is a toolbox. We take a particular tool whenever we need it. A framework is more like a construction company that follows a predefined process and structure for building a house.

React and Single Page Applications

React is commonly used to build Single Page Applications (SPA). In a traditional website, clicking a link can request a new HTML page from the server and reload the browser page. In a React SPA, different parts of the UI can be updated without requiring a full browser page reload.

For example, in an online shopping application, when the user adds a product to the cart, React can update the cart count without refreshing the complete page. This makes the application feel more like a desktop or mobile application.

React Components

A component is a reusable building block of a React application's UI. Instead of creating the complete website in one large file, we can divide it into smaller components such as Navbar, ProductCard, Sidebar and Footer.

function Welcome() {
    return <h1>Welcome to my website</h1>;
}

function App() {
    return (
        <div>
            <Welcome />
        </div>
    );
}

Here, Welcome is a component. We can reuse it wherever we need it.

Components are useful because the same UI structure can be reused with different data. For example, a ProductCard component can be used for many different products.

JSX Expressions

JSX allows us to write HTML-like code inside JavaScript. A JSX expression is JavaScript code written inside curly braces {}.

function App() {
    let name = "Abimanyu";

    return <h1>Hello {name}</h1>;
}

Here {name} is a JSX expression. React evaluates the JavaScript expression and displays its value.

We can also use calculations and conditions:

function App() {
    let a = 10;
    let b = 20;

    return (
        <div>
            <h1>{a + b}</h1>
            <p>{a > b ? "A is bigger" : "B is bigger"}</p>
        </div>
    );
}

Expressions produce values, so they can be used inside JSX. Statements such as normal if statements cannot be directly placed inside JSX. A ternary operator can be used when a condition needs to produce a value.

Rendering in React

Rendering means React takes a component and creates or updates the UI displayed in the browser.

For example:

function App() {
    return <h1>Hello World</h1>;
}

React renders this component and the browser displays Hello World.

In a modern React application, we commonly use createRoot():

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(
    <App />
);

The .render() method tells React which component should be displayed inside the root DOM element.

When the state of a component changes, React renders the component again and determines which parts of the UI need to be updated.

Props

Props, short for properties, are used to pass data from a parent component to a child component.

function Student(props) {
    return <h2>Name: {props.name}</h2>;
}

function App() {
    return (
        <Student name="Abimanyu" />
    );
}

Here, name="Abimanyu" is a prop passed from App to Student.

Props are similar to arguments passed to a JavaScript function:

function student(name) {
    console.log(name);
}

student("Abimanyu");

In React, we can pass different types of data through props, such as strings, numbers, arrays, objects and even functions.

Props Destructuring

Instead of accessing every value through props, we can use JavaScript destructuring.

Without destructuring:

function Student(props) {
    return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.age}</p>
        </div>
    );
}

With destructuring:

function Student({ name, age }) {
    return (
        <div>
            <h2>{name}</h2>
            <p>{age}</p>
        </div>
    );
}

Both examples work in the same way. Destructuring simply makes the code shorter and easier to read.

Props Children

children is a special prop in React. It contains the content placed between the opening and closing tags of a component.

For example:

function Box(props) {
    return <div>{props.children}</div>;
}

function App() {
    return (
        <Box>
            <h1>Hello</h1>
            <p>Welcome to my website</p>
        </Box>
    );
}

The content inside <Box>...</Box> becomes props.children.

We can also destructure children:

function Box({ children }) {
    return (
        <div className="box">
            {children}
        </div>
    );
}

This is useful when creating reusable components such as cards, boxes, buttons, layouts and modal components.

For example:

function Card({ title, children }) {
    return (
        <div className="card">
            <h2>{title}</h2>
            {children}
        </div>
    );
}

We can use the same component with different content:

<Card title="Profile">
    <p>Name: Abimanyu</p>
    <p>Age: 21</p>
</Card>

<Card title="Contact">
    <p>Email: example@gmail.com</p>
    <button>Contact Me</button>
</Card>

Here, title is a normal prop, while children contains the content written inside the Card component.

Tic-Tac-Toe

Abimanyu P — Wed, 09 Sep 2026 15:25:00 +0000

Understanding the Flow of a Tic-Tac-Toe Game in JavaScript

A Tic-Tac-Toe game is a good project for understanding how JavaScript works with the DOM, event listeners, functions, conditions, and arrays. In this example, two players, X and O, take turns clicking on a 3×3 board. After every move, JavaScript checks whether a player has won or whether the game has ended in a tie.

Setting Up the Players

const players = ["X", "O"];
let currentPlayer = players[0];

The players array stores the two players. Since array indexing starts from 0, players[0] is "X".

Therefore, the game starts with:

currentPlayer = "X";

The currentPlayer variable keeps track of whose turn it is.

Getting the Game Squares

let cells = document.getElementsByClassName("square");

This gets all the HTML elements that have the class square.

For example, a Tic-Tac-Toe board can have nine squares:

0 | 1 | 2
---------
3 | 4 | 5
---------
6 | 7 | 8

The cells collection contains these nine squares so that JavaScript can work with them.

Defining the Winning Combinations

const winningCombinations = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

There are eight possible ways to win in Tic-Tac-Toe.

For example:

[0, 1, 2]

represents the first row, while:

[0, 3, 6]

represents the first column.

The diagonal is represented by:

[0, 4, 8]

These combinations are later used by the calculateWin() function.

Handling a Player's Click

The handleEvents() function is responsible for adding a click event to every square.

const handleEvents = () => {
    for (let i of cells) {
        i.addEventListener("click", () => {
            // game logic
        });
    }
}

The for...of loop goes through every square in cells. An event listener is then attached to each square.

This means whenever a player clicks a square, the code inside the click event runs.

Checking Whether the Square Is Already Filled

The first thing the click event checks is whether the square already contains a player.

if (i.textContent === "X" || i.textContent === "O") {
    return alert("This cell is already filled!");
}

If the square contains either "X" or "O", the function stops using return.

This prevents a player from replacing an existing move.

Placing the Player's Symbol

If the square is empty, the current player's symbol is placed inside it.

i.textContent = currentPlayer;

If it is X's turn:

currentPlayer = "X";

clicking a square changes it to:

After the move, the game needs to check whether X has won or whether the board is full.

Checking for a Winner

The code calls:

const iswin = calculateWin();

The calculateWin() function checks every winning combination.

for (let i of winningCombinations) {
    const [a, b, c] = i;

Suppose the current combination is:

[0, 1, 2]

Array destructuring assigns:

a = 0;
b = 1;
c = 2;

The function then gets the three corresponding squares:

const square1 = document.getElementById(`square${a}`);
const square2 = document.getElementById(`square${b}`);
const square3 = document.getElementById(`square${c}`);

It checks whether all three contain the same player:

if (
    square1.textContent &&
    square1.textContent === square2.textContent &&
    square1.textContent === square3.textContent
) {
    return true;
}

The first condition:

square1.textContent

makes sure the square isn't empty.

The other two conditions check whether all three squares contain the same symbol.

If a winning combination is found, calculateWin() returns true. Otherwise, after checking all combinations, it returns false.

Checking for a Tie

After checking for a winner, the game checks whether the board is full.

const isTie = gameTie();

The gameTie() function goes through every square:

const gameTie = () => {
    for (let i of cells) {
        if (i.textContent === "") {
            return false;
        }
    }

    return true;
}

If even one square is empty, the game is not a tie, so it returns false.

If every square is filled, it returns true.

Handling the Winner or Tie

After placing a symbol, two checks are made:

if (iswin) {
    return alert(`${currentPlayer} wins!`);
}

if (isTie) {
    return alert("It's a tie!");
}

If iswin is true, the game displays the winner.

For example:

X wins!

If nobody has won but the board is full, the game displays:

It's a tie!

The return stops the rest of the click function from running.

Switching Between Players

If there is no winner and no tie, the game switches to the other player.

currentPlayer =
    currentPlayer === players[0]
        ? players[1]
        : players[0];

This uses the ternary operator.

It can be understood as:

if (currentPlayer === "X") {
    currentPlayer = "O";
} else {
    currentPlayer = "X";
}

So the flow becomes:

X's turn
   ↓
X clicks
   ↓
Check winner
   ↓
Check tie
   ↓
Switch to O
   ↓
O's turn
   ↓
O clicks
   ↓
Check winner
   ↓
Check tie
   ↓
Switch to X

Starting the Game

At the bottom of the code, we have:

document.addEventListener("DOMContentLoaded", handleEvents);

DOMContentLoaded runs when the HTML document has been loaded.

Only after the page has loaded does JavaScript call:

handleEvents();

This is important because handleEvents() needs to find the HTML elements containing the square class.

Complete Game Flow

The overall flow of the program is:

HTML loads
    ↓
DOMContentLoaded
    ↓
handleEvents()
    ↓
Add click events to all squares
    ↓
Player clicks a square
    ↓
Check if square is already filled
    ↓
Place X or O
    ↓
calculateWin()
    ↓
gameTie()
    ↓
Is there a winner?
    ├── Yes → Show winner → Stop
    └── No
         ↓
    Is it a tie?
         ├── Yes → Show tie → Stop
         └── No
              ↓
        Switch player
              ↓
        Wait for next click

Restart Function

There is also a restartButton() function:

const restartButton = () => {
    for (let i of cells) {
        i.textContent = "";
    }
}

It removes the contents of all squares, effectively clearing the board.

However, in the current code, this function is only defined and is not connected to a button or called anywhere. Also, if you use it as a real restart function, you would normally reset currentPlayer as well.

Promises In JS

Abimanyu P — Tue, 08 Sep 2026 15:38:03 +0000

Promises in JavaScript

When JavaScript performs an operation that takes some time, such as fetching data from a server, it does not want to wait and block the rest of the program. Instead, JavaScript can handle the operation asynchronously.

A Promise is an object that represents the eventual result of an asynchronous operation. In simple words, a Promise means "I don't have the result right now, but I will give you the result later."

Creating a Promise

We can create a Promise using the built-in Promise constructor:

const result = new Promise((resolve, reject) => {

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

});

Here, Promise is a built-in JavaScript constructor, and new Promise() creates a new Promise object.

The function passed to new Promise() is called the executor function:

(resolve, reject) => {
    // code
}

resolve and reject are parameters of this executor function. The Promise constructor provides functions as arguments for these parameters.

We call resolve() when the operation is successful and reject() when the operation fails.

resolve("You are eligible to vote");

means the operation was successful.

reject("You are not eligible to vote");

means the operation failed.

Promise States

A Promise has three possible states:

State	Meaning
Pending	The operation is still in progress
Fulfilled	The operation completed successfully
Rejected	The operation failed

In our example, when the Promise is created, it is initially pending.

After 3 seconds, the age is checked. Since the age is 10, the condition is false and reject() is called.

So the Promise changes from:

Pending
   ↓
Rejected

If the age were 18 or above, resolve() would be called instead:

Pending
   ↓
Fulfilled

Handling a Promise

After creating the Promise, we can use .then() to handle a successful result and .catch() to handle an error.

const result = new Promise((resolve, reject) => {

    const age = 10;

    setTimeout(() => {

        if (age >= 18) {
            resolve("You are eligible to vote");
        }

        else {
            reject("You are not eligible to vote");
        }

    }, 3000);

})

.then((message) => {

    console.log(message);

})

.catch((error) => {

    console.log(error);

});

When resolve() is called, the value passed to it is received by .then():

resolve("You are eligible to vote");

The value "You are eligible to vote" becomes the argument passed to the .then() callback.

In:

.then((message) => {
    console.log(message);
})

message is a parameter. It receives the value provided by the fulfilled Promise.

So the flow is:

resolve("You are eligible to vote")
              ↓
           .then()
              ↓
message = "You are eligible to vote"
              ↓
       console.log(message)

Similarly, when reject() is called:

reject("You are not eligible to vote");

the value is passed to .catch():

.catch((error) => {
    console.log(error);
});

Here, error is a parameter that receives the rejected value.

The flow is:

reject("You are not eligible to vote")
              ↓
          .catch()
              ↓
error = "You are not eligible to vote"
              ↓
       console.log(error)

Why Promises Are Useful

Promises are especially useful for handling asynchronous operations. For example, an application might need to:

Get a user
Get the user's orders
Get the details of an order
Make a payment

When many asynchronous operations depend on each other, using callbacks can result in deeply nested code called callback hell.

Promises allow us to chain these operations using .then():

getUser()
    .then(user => getOrders(user))
    .then(orders => getOrderDetails(orders[0]))
    .then(order => makePayment(order))
    .catch(error => {
        console.log(error);
    });

Each .then() receives the result from the previous Promise and can return another Promise for the next operation.

This allows asynchronous operations to be written as a chain instead of deeply nested callbacks.

Conclusion

A Promise represents the eventual result of an asynchronous operation. It starts in a pending state and eventually becomes either fulfilled or rejected.

The important things to remember are:

Promise is a built-in constructor.
new Promise() creates a Promise object.
The function passed to new Promise() is called the executor function.
resolve and reject are parameters that receive functions from the Promise constructor.
resolve() is used when the operation succeeds.
reject() is used when the operation fails.
.then() handles a fulfilled Promise.
.catch() handles a rejected Promise.
Promises can be chained to make asynchronous code easier to manage.

The basic idea is:

        Promise
           ↓
       Pending
        ↙     ↘
   resolve   reject
      ↓         ↓
 Fulfilled   Rejected
      ↓         ↓
   .then()   .catch()

CallBack In JS

Abimanyu P — Mon, 07 Sep 2026 15:55:45 +0000

Callback in JavaScript

A callback is a function that is passed as an argument to another function. The receiving function can then call that function when it needs to. In simple words, a callback allows us to say, "Here is a function; call it when you are ready."

What is a Callback?

JavaScript allows us to pass functions as values. This means a function can be stored in a variable, passed as an argument, or returned from another function. When we pass a function to another function and that function later calls it, the passed function is called a callback function.

function greet() {
    console.log("Hello!")
}

function execute(callback) {
    callback()
}

execute(greet)

Here, greet is passed to execute() as an argument. Inside execute(), the callback() parameter refers to the greet function, so calling callback() executes greet().

greet()
   ↓
passed to
   ↓
execute(greet)
   ↓
callback()
   ↓
greet() executes

Why Do We Need Callbacks?

Callbacks are useful when we want one function to perform some work and then execute another function at a particular point. They are especially important when working with asynchronous operations, where we may want something to happen after an operation finishes.

For example, setTimeout() accepts a callback:

setTimeout(function () {
    console.log("2 seconds passed")
}, 2000)

Here, the function passed to setTimeout() is the callback. JavaScript calls this function after the timer finishes.

Passing a Function vs Calling a Function

When passing a callback, we usually pass the function without parentheses.

execute(greet)

This means:

"Pass the greet function to execute."

But:

execute(greet())

means:

"Call greet now and pass its returned value to execute."

So these two are not the same.

What is Callback Hell in JavaScript?

In JavaScript, a callback is a function that is passed to another function and executed later. Callbacks are commonly used when working with asynchronous operations such as fetching data, reading files, or waiting for a task to complete.

The problem starts when we have many asynchronous operations that depend on each other. We may put one callback inside another callback, and then another callback inside that. This creates a deeply nested structure called Callback Hell.

Example of Callback Hell

Imagine we need to perform these tasks one after another:

Get user data
Get the user's orders
Get the details of the first order
Make a payment

Using callbacks, the code might look like this:

getUser(function(user) {
    getOrders(user, function(orders) {
        getOrderDetails(orders[0], function(order) {
            makePayment(order, function(result) {
                console.log("Payment completed")
            })
        })
    })
})

Here, each operation depends on the previous operation. Because of this, each callback is placed inside another callback.

As the number of asynchronous operations increases, the code becomes more deeply nested. This makes the code harder to read, understand, debug, and maintain.

This deeply nested callback structure is what we commonly call Callback Hell.

Closure in javascript

Abimanyu P — Mon, 07 Sep 2026 15:36:51 +0000

Closures in JavaScript

Closures are one of the most important concepts in JavaScript. They can look confusing at first because they involve functions, lexical scope, and lexical environments together. But once we understand how these concepts are connected, closures become much easier to understand.

A simple definition of closure is:

A closure is a function that remembers and can access variables from its surrounding lexical environment even after the outer function has finished executing.

The word "remembers" here doesn't mean that JavaScript literally copies the variables into the function. Instead, the function maintains a connection to the lexical environment in which it was created.

Let's understand it with an example

Consider the following code:

function outer() {
    let name = "Abimanyu"

    function inner() {
        console.log(name)
    }

    return inner
}

let myFunction = outer()

myFunction()

When outer() is called, JavaScript creates a lexical environment for it. That environment contains the variable name:

Outer Lexical Environment
    name → "Abimanyu"

The inner() function is created inside outer(), so it has access to that surrounding environment. When outer() returns inner, the function is stored in myFunction.

Now outer() has finished executing, but myFunction still refers to inner().

myFunction
    ↓
  inner()
    ↓
Outer Lexical Environment
    ↓
name → "Abimanyu"

When we call:

myFunction()

inner() needs the value of name. Since name is not inside its own environment, JavaScript looks through its surrounding environment and finds name in the environment created by outer().

This is the important part of a closure: the function retains access to the environment where it was created, even though the outer function has already finished executing.

Why doesn't `name` disappear?

This is where closures are often misunderstood.

You might think that once outer() finishes, everything created inside it should disappear. But inner() still has a reference to the environment containing name. Since that environment is still reachable through the function, JavaScript cannot simply remove it.

So conceptually, after outer() has finished, we can still think of the relationship like this:

myFunction
    ↓
inner()
    ↓
remembered lexical environment
    ↓
name → "Abimanyu"

The function and its connection to the surrounding environment together form the idea of a closure.

The word "closure" therefore describes the behavior where a function closes over the variables available in its surrounding lexical scope and continues to access them later.

Closure is connected to lexical scope

To understand closures properly, it is useful to remember what lexical scope means.

Lexical scope means that the scope of a function is determined by where the function is written in the code, not where the function is called.

For example, inner() was written inside outer(), so its surrounding lexical scope includes outer().

function outer() {
    let message = "Hello"

    function inner() {
        console.log(message)
    }

    return inner
}

Because of where inner() is written, it can access message.

This relationship exists before we even call the function. The function's position in the source code determines its lexical surroundings.

Closures can maintain state

One of the most useful things about closures is that they allow a function to maintain state between calls.

function createCounter() {
    let count = 0

    return function() {
        count++
        return count
    }
}

let counter = createCounter()

console.log(counter()) // 1
console.log(counter()) // 2
console.log(counter()) // 3

Here, createCounter() finishes executing after returning the function. However, the returned function still has access to count.

Each time counter() is called, it accesses the same count variable and changes its value.

So the value isn't recreated from scratch on every call. The closure keeps the connection to the environment where count was created.

This ability to preserve state is one reason closures are so useful in JavaScript.

Closures can also provide data privacy

Closures can be used to keep certain variables inaccessible directly from outside code.

For example:

function createAccount() {
    let balance = 1000

    return {
        deposit(amount) {
            balance += amount
        },

        getBalance() {
            return balance
        }
    }
}

let account = createAccount()

account.deposit(500)

console.log(account.getBalance()) // 1500

Here, balance cannot be accessed directly through account.balance. However, deposit() and getBalance() can access it because both functions were created inside the environment containing balance.

The closure therefore allows those functions to work with the private state without exposing the variable directly.

Lexical Scope

Abimanyu P — Sun, 06 Sep 2026 07:21:14 +0000

What is Lexical Scope?

Lexical scope is the rule that determines where a variable can be accessed based on where the code is written.

The word lexical basically means that JavaScript determines the scope by looking at the structure of the code. It does not matter where a function is called from; what matters is where that function was defined.

For example:

let name = "John";

function greet() {
  console.log(name);
}

greet();

Here, name is declared outside the greet() function. Since greet() is written in the global scope, it can access name from that outer scope.
This relationship is decided by the way the code is written. This is what we mean by lexical scope.

Nested Scopes

Scopes can exist inside other scopes. This is called nested scope.

For example:

function outer() {
  let name = "John";

  function inner() {
    console.log(name);
  }

  inner();
}

outer();

Here, inner() is written inside outer(). Because of this, inner() can access variables that belong to outer().
We can visualize the scopes like this:

Global Scope
    │
    └── outer() Scope
            │
            └── inner() Scope

The inner scope can access variables from its outer scope, but the outer scope cannot access variables that exist only inside the inner scope.

For example:

function outer() {
  function inner() {
    let age = 25;
  }

  console.log(age); // ReferenceError
}

age belongs to inner()'s scope. Therefore, outer() cannot directly access it.
This idea also applies to blocks. A block created with { } can have its own scope when using let and const.
This is called block scope, and it is also part of JavaScript's lexical scoping system.

Lexical Scope and Lexical Environment

Lexical scope and lexical environment are closely related, but they are not the same thing.
Lexical scope describes the rules of accessibility. It tells us which variables a particular piece of code is allowed to access based on where that code is written.

A lexical environment, on the other hand, is the internal structure JavaScript uses to keep track of variables and functions in a scope and their relationship with outer environments.

So, a simple way to remember the difference is:

Lexical scope is about where variables can be accessed, while a lexical environment is the internal structure that keeps track of those variables and their connection to outer scopes.

Understanding lexical scope is important because it forms the foundation for understanding closures, where a function can continue to access variables from its surrounding scope even after the outer function has finished executing.

Lexical Environment in JavaScript

Abimanyu P — Sat, 05 Sep 2026 17:41:10 +0000

Lexical Environment in JavaScript:

A Lexical Environment in JavaScript is a place where JavaScript keeps track of the variables and functions available in a particular scope. It also keeps a reference to the outer scope, so JavaScript can find variables that are not available in the current scope.

In simple words, you can think of a lexical environment as a storage area for variables and functions along with a link to the outer scope.

When is a Lexical Environment created?

A lexical environment is created for a scope. For example, when a function is called, JavaScript creates a new lexical environment for that function. This environment contains its parameters and local variables.

Consider this example:

function outer() {
  var x = 10;

  function inner() {
    console.log(x);
  }

  inner();
}

outer();

Here, outer() has its own lexical environment, which contains x.
The inner() function has its own lexical environment, but it can also access the lexical environment of outer() because inner() was written inside outer().
So, inner() can find x even though x is not declared inside inner().

How does JavaScript find a variable?

When JavaScript sees a variable name, it first looks in the current lexical environment.
If it doesn't find the variable there, it looks in the outer lexical environment.
It continues moving outward until it finds the variable or reaches the global scope.

For example:

var name = "John";

function greet() {
  console.log(name);
}

greet();

When JavaScript tries to find name inside greet(), it first checks greet()'s environment.
name is not there, so JavaScript looks in the outer environment. It finds name in the global environment.
If JavaScript cannot find the variable anywhere, it throws a ReferenceError.

The lookup works roughly like this:

greet() environment
       ↓
outer environment
       ↓
global environment

DOM In JavaScript

Abimanyu P — Thu, 03 Sep 2026 16:05:04 +0000

DOM in JavaScript

When we create a webpage using HTML, the browser needs a way to understand and manage all the elements on that page. For this, the browser creates a structure called the DOM.

DOM stands for Document Object Model. It represents an HTML document as a tree of objects, where elements like <html>, <body>, <h1>, <p>, and <button> become nodes that JavaScript can access and modify.

What is the DOM?

Consider this HTML:

<!DOCTYPE html>
<html>
<body>
    <h1>Hello</h1>
    <p>This is a paragraph.</p>
</body>
</html>

The browser represents it approximately like this:

Document
│
└── html
    │
    └── body
        ├── h1
        │   └── "Hello"
        │
        └── p
            └── "This is a paragraph."

This tree-like representation is called the DOM tree.

JavaScript can interact with this tree to select elements, change their content, modify their styles, create new elements, remove elements, and respond to user actions.

The basic process is:

HTML
 ↓
Browser
 ↓
DOM
 ↓
JavaScript modifies DOM
 ↓
Webpage gets updated

The `document` Object

The main way JavaScript interacts with the DOM is through the document object.

console.log(document);

The document object represents the current HTML document and provides many methods for finding and manipulating elements.

For example:

let heading = document.getElementById("title");

Here, JavaScript uses the document object to find an element from the DOM.

Selecting Elements

Before modifying an element, we usually need to select it.

`getElementById()`

It selects an element using its id.

<h1 id="title">Hello</h1>

let heading = document.getElementById("title");

The heading variable now refers to the <h1> element.

`querySelector()`

querySelector() selects the first element that matches a CSS selector.

let heading = document.querySelector("h1");

It can also be used with classes and IDs:

let box = document.querySelector(".box");

let title = document.querySelector("#title");

`querySelectorAll()`

querySelectorAll() selects all elements matching a CSS selector.

<p>Hello</p>
<p>World</p>
<p>JavaScript</p>

let paragraphs = document.querySelectorAll("p");

Now paragraphs contains all three <p> elements.

You can access individual elements using their index:

console.log(paragraphs[0]);
console.log(paragraphs[1]);

Changing Content

After selecting an element, JavaScript can change its content.

<h1 id="title">Hello</h1>

let heading = document.getElementById("title");

heading.textContent = "Hello JavaScript";

The heading on the webpage changes from Hello to Hello JavaScript.

`textContent` and `innerHTML`

textContent treats the assigned value as plain text.

heading.textContent = "<b>Hello</b>";

The browser displays:

<b>Hello</b>

It does not create a bold element.

innerHTML interprets the value as HTML:

heading.innerHTML = "<b>Hello</b>";

Now the <b> element is created inside the heading.

For plain text, textContent is generally the safer and simpler choice.

Changing CSS

JavaScript can also modify an element's inline styles.

heading.style.color = "red";
heading.style.fontSize = "40px";

This changes the heading's color and font size.

For larger styling changes, it is often better to use CSS classes:

heading.classList.add("active");

This allows CSS to control the actual styling while JavaScript controls which class is applied.

Changing Attributes

HTML elements can have attributes such as src, href, id, and class.

JavaScript can read and modify these attributes.

For example:

<img id="photo" src="old.jpg">

We can change the image source:

let image = document.getElementById("photo");

image.setAttribute("src", "new.jpg");

We can also read the value:

console.log(image.getAttribute("src"));

Creating Elements

The DOM isn't only used to modify existing elements. JavaScript can also create completely new elements.

let paragraph = document.createElement("p");

paragraph.textContent = "This paragraph was created using JavaScript.";

The paragraph has been created, but it is not yet attached to the webpage.

We can add it to the page using appendChild():

document.body.appendChild(paragraph);

Now the new paragraph appears inside the <body>.

Removing Elements

JavaScript can also remove elements from the DOM.

let paragraph = document.querySelector("p");

paragraph.remove();

The selected paragraph is removed from the webpage.

DOM and Events

Another important use of the DOM is handling user actions.

For example, we can listen for a button click:

<button id="btn">Click Me</button>

let button = document.getElementById("btn");

button.addEventListener("click", function () {
    console.log("Button clicked");
});

addEventListener() tells JavaScript to listen for a particular event.

In this example, when the button is clicked, the function runs.

We can also use the event to modify the webpage:

button.addEventListener("click", function () {
    document.body.style.backgroundColor = "lightblue";
});

Now clicking the button changes the background color of the page.

JS Functions & Its Hoisting Rules

Abimanyu P — Wed, 02 Sep 2026 16:23:39 +0000

JavaScript Hoisting and Types of Functions

Functions are one of the most important parts of JavaScript. They allow us to group a block of code into a reusable unit that can be executed whenever it is needed.

JavaScript provides different ways to create functions. Some common types are function declarations, function expressions, arrow functions, and IIFEs. Although all of them are functions, they behave differently in some situations, especially when hoisting is involved.

What is Hoisting in JavaScript?

Hoisting is the behavior of JavaScript where certain declarations are processed before the code is executed line by line.

For example:

console.log(name);

var name = "Abimanyu";

The output is:

undefined

This happens because the var declaration is processed before execution. Conceptually, it is similar to:

var name;

console.log(name);

name = "Abimanyu";

The important thing to notice is that only the declaration is processed early. The assignment happens at its original position.

Hoisting does not mean JavaScript physically moves the code to the top. It describes what happens during the creation phase of the execution context before the code starts executing.

The same idea applies to functions, but the behavior depends on how the function is defined.

What is a Function?

A function is a reusable block of code that performs a particular task.

function greet() {
    console.log("Hello");
}

greet();

Here, greet() is a function. Once defined, it can be called whenever required.

JavaScript allows us to create functions in different ways. The way we define a function also affects how hoisting works.

1. Function Declaration

A function declaration is the traditional way of defining a function.

greet();

function greet() {
    console.log("Hello");
}

This works even though greet() is called before the function declaration.

The output is:

Hello

This happens because function declarations are fully hoisted. During the creation phase, JavaScript makes the entire function available, including its function body.

So, conceptually, JavaScript already has access to:

function greet() {
    console.log("Hello");
}

before it starts executing the code.

Hoisting rule

Function declarations are fully hoisted, so they can normally be called before their declaration.

This is one of the biggest differences between a function declaration and the other function types discussed below.

2. Function Expression

A function expression is a function assigned to a variable.

const greet = function() {
    console.log("Hello");
};

Here, greet is not a function declaration. It is a variable that stores a function.

This distinction is important for hoisting.

For example:

greet();

const greet = function() {
    console.log("Hello");
};

This results in a:

ReferenceError

The reason is that const declarations are hoisted, but they remain in the Temporal Dead Zone (TDZ) until execution reaches their declaration.

The function expression itself is also not available before that point.

If var is used instead:

greet();

var greet = function() {
    console.log("Hello");
};

the result is:

TypeError: greet is not a function

This time, var greet is initialized with undefined during hoisting. The function is assigned to greet only when execution reaches the assignment.

Hoisting rule

A function expression is not hoisted as a callable function. Its behavior depends on the variable used to store it.

var   → undefined before assignment
let   → TDZ
const → TDZ

3. Arrow Function

An arrow function provides a shorter syntax for creating functions.

const add = (a, b) => {
    return a + b;
};

console.log(add(10, 20));

Output:

Arrow functions are also commonly stored inside variables. Because of this, they do not receive the same function hoisting behavior as a function declaration.

For example, if an arrow function is stored in a const variable and accessed before its declaration, JavaScript produces a ReferenceError.

add(10, 20);

const add = (a, b) => {
    return a + b;
};

The reason is not that arrow functions have some completely separate hoisting rule. The important point is that add is a const variable containing a function.

Therefore, the variable's rules apply:

const arrow function → TDZ → ReferenceError
let arrow function   → TDZ → ReferenceError
var arrow function   → undefined → TypeError

Hoisting rule

Arrow functions themselves are not hoisted as callable functions. Their behavior depends on the variable declaration used to store them.

This is why:

function greet() {}

and:

const greet = () => {};

should not be treated as identical when discussing hoisting.

4. IIFE

IIFE stands for Immediately Invoked Function Expression.

It is a function expression that is executed immediately after it is created.

(function() {
    console.log("Hello");
})();

Output:

Hello

Normally, a function is defined first and called separately:

function greet() {
    console.log("Hello");
}

greet();

With an IIFE, the function is executed immediately as part of the expression.

The final () invokes the function:

(function() {
    console.log("Hello");
})();

IIFEs were commonly used to create a separate scope for variables and prevent them from interfering with other parts of a program.

Hoisting rule

An IIFE is a function expression, not a function declaration. Therefore, it does not receive the full hoisting behavior of a function declaration.

It executes when JavaScript reaches the expression:

(function() {
    console.log("Hello");
})();

There is normally no separate function name that you can call before the IIFE.

The key idea is:

IIFE → function expression → executes when the expression is reached.

Conclusion:

The most important distinction is between a function declaration and a function stored in a variable.

// Function declaration
function greet() {}

The function itself is hoisted.

Whereas:

// Function expression
const greet = function() {};

and:

// Arrow function
const greet = () => {};

store the function in a variable, so the variable's declaration rules determine what happens before the declaration is reached.

Arrays in JavaScript

Abimanyu P — Tue, 01 Sep 2026 16:56:57 +0000

Arrays and its methods in JavaScript

An array in JavaScript is a data structure used to store multiple values in a single variable. we can store different data types and even can store a functions and objects in an array. It is useful when we have a collection of related data that needs to be stored and accessed together.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

In this example, fruits is an array containing four values. Every element in an array has an index, and indexing starts from 0. Therefore, Apple is at index 0, Banana is at index 1, and so on.

console.log(fruits[0]); // Apple
console.log(fruits[2]); // Mango

We can also change an element by accessing its index.

fruits[1] = "Grapes";

console.log(fruits);
// ["Apple", "Grapes", "Mango", "Orange"]

The length property is used to find the number of elements in an array.

console.log(fruits.length);
// 4

`forEach()`

forEach() is used to execute a function once for every element in an array. It is useful when we want to perform an action on each element without creating a new array.

let numbers = [10, 20, 30];

numbers.forEach(function(number) {
    console.log(number);
});

The function passed to forEach() runs three times because the array contains three elements. During each execution, number contains the current element.

10
20
30

We can also get the index of the current element by adding a second parameter to the function.

numbers.forEach(function(number, index) {
    console.log(index, number);
});

Output:

0 10
1 20
2 30

The first parameter represents the current value and the second parameter represents its index.

`map()`

map() is used when we want to transform every element of an array and create a new array from the results.

For example, suppose we have an array of numbers and want to double every number.

let numbers = [10, 20, 30];

let doubled = numbers.map(function(number) {
    return number * 2;
});

console.log(doubled);
// [20, 40, 60]

The function is executed for every element. For 10, it returns 20; for 20, it returns 40; and for 30, it returns 60. Those returned values are collected into a new array.

The original array is not changed:

console.log(numbers);
// [10, 20, 30]

This is the main idea behind map():

Original array → transform each element → new array

`filter()`

filter() is used to create a new array containing only the elements that satisfy a particular condition.

For example, suppose we want to get only the numbers greater than 20.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(function(number) {
    return number > 20;
});

console.log(result);
// [25, 30]

The function is executed for every element. If the condition returns true, that element is added to the new array. If it returns false, the element is ignored.

For example, 10 > 20 is false, so 10 is not included. 25 > 20 is true, so 25 is included.

Like map(), filter() creates a new array and does not modify the original array.

`find()`

find() is used to find the first element that satisfies a condition.

let numbers = [10, 15, 20, 25, 30];

let result = numbers.find(function(number) {
    return number > 20;
});

console.log(result);
// 25

Here, JavaScript checks the elements one by one. 10 and 15 do not satisfy the condition, and 20 is also not greater than 20. When it reaches 25, the condition becomes true, so find() returns 25 and stops searching.

Even though 30 also satisfies the condition, it is not returned because find() returns only the first matching element.

If no element matches the condition, find() returns undefined.

`push()` and `pop()`

push() and pop() are commonly used when adding or removing elements from the end of an array.

push() adds one or more elements to the end.

let fruits = ["Apple", "Banana"];

fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

Here, "Mango" is added after "Banana". push() modifies the original array.

pop() does the opposite. It removes the last element.

let removedFruit = fruits.pop();

console.log(removedFruit);
// Mango

console.log(fruits);
// ["Apple", "Banana"]

An important point is that pop() returns the element that it removed. This can be useful when we need to store or use the removed value.

push() → adds to the end
pop()  → removes from the end

Similarly, unshift() adds an element at the beginning and shift() removes the first element.


fruits.unshift("Orange");
// ["Orange", "Apple", "Banana"]

fruits.shift();
// ["Apple", "Banana"]

`slice()`

slice() is used to get a portion of an array. It returns a new array and does not modify the original array.

let fruits = ["Apple", "Banana", "Mango", "Orange"];

let result = fruits.slice(1, 3);

console.log(result);
// ["Banana", "Mango"]

console.log(fruits);
// ["Apple", "Banana", "Mango", "Orange"]

The first argument is the starting index, while the second argument is the ending index. The starting index is included, but the ending index is not.

So slice(1, 3) takes the elements at indexes 1 and 2.

Index:  0        1         2         3
       Apple    Banana    Mango     Orange
                 ↑---------↑
                 1         3

This is why the result contains "Banana" and "Mango" but not "Orange".

`splice()`

splice() is used to add, remove, or replace elements in an array. Unlike slice(), it modifies the original array.

For example, we can remove elements using splice().

let fruits = ["Apple", "Banana", "Mango", "Orange"];

fruits.splice(1, 2);

console.log(fruits);
// ["Apple", "Orange"]

The first argument, 1, tells JavaScript where to start. The second argument, 2, tells it how many elements to remove.

Therefore, starting from index 1, JavaScript removes two elements: "Banana" and "Mango".

We can also use splice() to add elements.

let fruits = ["Apple", "Banana", "Orange"];

fruits.splice(2, 0, "Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango", "Orange"]

Here, 2 is the starting position, 0 means that no elements should be removed, and "Mango" is the element we want to add.

The important difference between slice() and splice() is:

slice()  → gets/copies a portion without changing the original
splice() → adds/removes elements and changes the original

`reduce()`

reduce() is used when we want to process all the elements of an array and produce one final value.

For example, we can use it to calculate the total of numbers.

let numbers = [10, 20, 30, 40];

let total = numbers.reduce(function(sum, number) {
    return sum + number;
}, 0);

console.log(total);
// 100

Here, sum stores the accumulated result, while number represents the current element. The 0 at the end is the initial value of sum.

The calculation happens like this:

0 + 10 = 10
10 + 20 = 30
30 + 30 = 60
60 + 40 = 100

Finally, reduce() returns 100.

So while map() generally produces a new array and filter() produces a smaller array, reduce() is commonly used when we want to combine the elements into a single result.

Important Array Methods

Method	Purpose
`forEach()`	Performs an action for each element
`map()`	Transforms elements and creates a new array
`filter()`	Creates a new array with matching elements
`find()`	Returns the first matching element
`push()`	Adds elements to the end
`pop()`	Removes the last element
`slice()`	Copies a portion of an array
`splice()`	Adds or removes elements
`reduce()`	Combines elements into a single result

DEV Community: Abimanyu P

React useEffect Hook

What is useEffect?

useEffect with setInterval and Event Listener

React Hooks And useState

React Hooks

useState

React Basics: Library, SPA, Rendering, Components, JSX and Props.

React as a JavaScript Library

React and Single Page Applications

React Components

JSX Expressions

Rendering in React

Props

Props Destructuring

Props Children

Tic-Tac-Toe

Understanding the Flow of a Tic-Tac-Toe Game in JavaScript

Setting Up the Players

Getting the Game Squares

Defining the Winning Combinations

Handling a Player's Click

Checking Whether the Square Is Already Filled

Placing the Player's Symbol

Checking for a Winner

Checking for a Tie

Handling the Winner or Tie

Switching Between Players

Starting the Game

Complete Game Flow

Restart Function

Promises In JS

Promises in JavaScript

Creating a Promise

Promise States

Handling a Promise

Why Promises Are Useful

Conclusion

CallBack In JS

Callback in JavaScript

What is a Callback?

Why Do We Need Callbacks?

Passing a Function vs Calling a Function

What is Callback Hell in JavaScript?

Example of Callback Hell

Closure in javascript

Closures in JavaScript

Let's understand it with an example

Why doesn't name disappear?

Closure is connected to lexical scope

Closures can maintain state

Closures can also provide data privacy

Lexical Scope

What is Lexical Scope?

Nested Scopes

Lexical Scope and Lexical Environment

Lexical Environment in JavaScript

Lexical Environment in JavaScript:

When is a Lexical Environment created?

How does JavaScript find a variable?

DOM In JavaScript

DOM in JavaScript

What is the DOM?

The document Object

Selecting Elements

getElementById()

querySelector()

querySelectorAll()

Changing Content

textContent and innerHTML

Changing CSS

Changing Attributes

Creating Elements

Removing Elements

DOM and Events

JS Functions & Its Hoisting Rules

JavaScript Hoisting and Types of Functions

What is Hoisting in JavaScript?

What is a Function?

1. Function Declaration

Why doesn't `name` disappear?

The `document` Object

`getElementById()`

`querySelector()`

`querySelectorAll()`

`textContent` and `innerHTML`

`forEach()`

`map()`

`filter()`

`find()`

`push()` and `pop()`

`slice()`

`splice()`

`reduce()`