DEV Community: Ezhil Abinaya K

React useEffect() Hook Made Easy

Ezhil Abinaya K — Wed, 22 Jul 2026 08:47:14 +0000

useEffect Hooks
The useEffect Hook allows you to perform side effects in your components.Some examples of side effects are: fetching data, directly updating the DOM, and timers.useEffect accepts two arguments. The second argument is optional.useEffect(<function>, <dependency>)
Syntax:

useEffect(() => {
    // Code to run on each render
    return () => {
        // Cleanup function (optional)
    };
}, [dependencies]);

Effect function: This is where your side effect code runs.
Cleanup function: This optional return function cleans up side effects like subscriptions or timers when the component unmounts.
Dependencies array: React re-runs the effect if any of the values in this array change.
Types of React Hook
1. Runs after every render(No dependency array)

useEffect(() => {
  console.log("Runs after every render");
});

2. Runs only once (on initial render)(Empty dependency array [])

useEffect(() => {
  console.log("Runs only once");
}, []);

3. Runs when a specific value changes (Dependency array [value])

useEffect(() => {
  console.log("Count changed");
}, [count]);

Component Lifecycle (Functional Components)
1. Mounting (Component is Created)
The component is created and added to the DOM.It renders for the first time.We usually fetch API data or initialize values here.

useEffect(() => {
  console.log("Component Mounted");
}, []);

2. Updating (Component Re-renders)
It Happens when state or props change.React updates the UI with the latest data.useEffect() can run again if its dependencies change.
Example: In a Counter App, clicking the button updates the count and the UI.

useEffect(() => {
  console.log("Count Updated");
}, [count]);

3. Unmounting (Component is Removed)
The component is removed from the DOM. It is Used to clean up timers, event listeners, or subscriptions.

import { useState } from "react";
import UseEffectDemo from "./UseEffectDemo";

function App() {
  const [show, setShow] = useState(true);

  return (
    <>
      <button onClick={() => setShow(!show)}>
        Toggle Component
      </button>

      {show && <UseEffectDemo />}
    </>
  );
}

export default App;
//API calling...
Interval function...
Interval function...
Interval function...
When you remove the component, you'll see:
Component unmounted...

References
https://www.w3schools.com/react/react_useeffect.asp
https://www.geeksforgeeks.org/reactjs/reactjs-useeffect-hook/

Model Context Protocol (MCP): The Universal Bridge Between AI and External Tools

Ezhil Abinaya K — Tue, 21 Jul 2026 07:52:59 +0000

AI models like ChatGPT are powerful, but they have limitations.They cannot automatically access your files, databases, GitHub, or Slack.This is where Model Context Protocol (MCP) comes in. Think of MCP as a USB-C port for AI one standard connection that works with many tools.
Model Context Protocol (MCP)
Model Context Protocol (MCP) is an open standard introduced by Anthropic that allows AI assistants to securely communicate with external tools and data sources using one common protocol.

No separate integrations
Easier development
Secure communication

Without MCP

ChatGPT - GitHub Integration
Claude - GitHub Integration
Gemini - GitHub Integration

Every AI needs a separate integration.

With MCP

AI
   │
 MCP
   │
GitHub
Slack
Database
Files

One integration works for many AI assistants.

Real-Life Analogy
Use your coffee shop analogy or USB analogy.
Example:
Imagine every mobile phone needed a different charger.MCP is like USB-C.
One cable connects many devices.Similarly,One MCP server connects many AI assistants.
Real-World Applications

1. GitHub – Create Issues & Review Code
Developers use GitHub to manage their projects. With MCP, an AI assistant can access GitHub and perform tasks such as creating bug reports, reviewing code, checking pull requests, or summarizing code changes without manually opening GitHub.
Example:I can simply ask, 'Create a bug report for the login page,' and the AI creates the GitHub issue automatically.
2. Google Drive – Read & Summarize Documents
Companies store reports, meeting notes, and documents in Google Drive. MCP allows AI to securely read those files and summarize them.
Example:If I ask, 'Summarize this 50-page project report,' the AI reads the document from Google Drive and gives me a short summary in seconds.

3. Slack – Send & Receive Messages
Slack is widely used for team communication. Through MCP, AI can send messages, notify teams, or even answer questions using Slack.
Example:I can say, 'Send today's meeting summary to the development team,' and the AI posts the message directly in the Slack channel.

4.Databases – Retrieve Information
Many companies store customer and sales data in databases. MCP enables AI to query databases safely and retrieve information.
Example:I can ask, 'What were the sales last month?' Instead of searching manually, the AI gets the data directly from the database and provides the answer.

5. File Systems – Access Project Files
Developers work with many local files. MCP allows AI to access project folders, read files, or organize documents.
Example:If I ask, 'Find all React files containing the word useState,' the AI searches my project files and shows the results.

6. Developer Tools – Run Code & Automate Tasks
MCP can also connect AI with development tools.
Example:The AI can run tests, execute scripts, build projects, or check for errors automatically. This saves developers a lot of time.

Master React useState()

Ezhil Abinaya K — Mon, 20 Jul 2026 13:51:05 +0000

useState()
useState() is a React Hook that allows functional components to store and manage state.State represents information that can change while the application is running, such as:

Counter value
User input
Theme (Light/Dark)
Login status
Like button count Without useState(), these values cannot update the UI dynamically. Syntax

const [state, setState] = useState(initialValue);

state → Stores the current value.
setState → Updates the value.
initialValue → The default value when the component loads.
Why do we use useState() in React?
We use useState() to store and update data that can change inside a React component. When the state changes, React automatically updates the UI without refreshing the entire page.Without useState(), variables don't make React re-render the component when their values change.
Using a normal variable

function App() {
  let count = 0;

  const increment = () => {
    count++;
    console.log(count);
  };

  return (
    <>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
    </>
  );
}

Even though count increases in the console, the UI still shows 0 because React doesn't know the variable changed.
Using useState()

import { useState } from "react";

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

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </>
  );
}

Now, every time you click the button:

setCount() updates the state.
React detects the change.
The component re-renders.
The UI shows the latest value.

Re-rendering
Re-rendering means React runs the component again and updates the UI whenever its state or props change.React re-renders when:
State changes (useState)
Props change
Parent component re-renders (its child components may also re-render)

Build a Digital Clock Using HTML, CSS, and JavaScript

Ezhil Abinaya K — Sun, 19 Jul 2026 14:16:54 +0000

The HTML contains a heading and a container where the current time will be displayed.

<div class="clock-container">
    <h1>Digital Clock</h1>
    <div id="clock">00:00:00</div>
</div>

<h1> displays the title.
<div id="clock"> initially shows 00:00:00.
JavaScript updates this element every second. Style the Clock with CSS We use Flexbox to center the clock on the page and give it a clean card design.

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0f172a;
}

Display the Current Time

function showTime() {

    let date = new Date();

    let hours = String(date.getHours()).padStart(2,'0');
    let minutes = String(date.getMinutes()).padStart(2,'0');
    let seconds = String(date.getSeconds()).padStart(2,'0');

    let time = `${hours}:${minutes}:${seconds}`;

    document.getElementById("clock").innerHTML = time;
}

new Date()Creates a Date object containing the current date and time.
(Fri Jul 17 2026 14:35:42).
getHours() Returns the current hour.
getMinutes() Returns the current minutes.
getSeconds() Returns the current seconds.
padStart() Ensures every value contains two digits.
Without padStart(): 5:7:9
With padStart(): 05:07:09 Syntax

string.padStart(targetLength, padString)

padStart(2,'0')

2 Make the total length 2 characters.'0' If needed, add 0 on the left.
Template Literals

let time = `${hours}:${minutes}:${seconds}`;

Combines the values into a time string.

09:15:42

Update the HTML

document.getElementById("clock").innerHTML = time;

Updates the content of the <div id="clock"> element with the latest time.
Update Every Second

setInterval(showTime,1000);

setInterval() repeatedly executes a function.
Syntax:

setInterval(functionName,timeInMilliseconds);

Since 1000 milliseconds equals 1 second, the clock refreshes every second.
Show the Time Immediately

showTime();

Without this line, the page would display:

00:00:00

until the first second passes.Calling showTime() immediately displays the correct time as soon as the page loads.

React Props: Passing Data Between Components

Ezhil Abinaya K — Fri, 17 Jul 2026 06:59:59 +0000

React Props
Props are arguments passed into React components.Props are passed to components via HTML attributes.props stands for properties.
The component receives the argument as a props object:

import { createRoot } from 'react-dom/client'

function Car(props) {
  return (
    <h2>I am a {props.brand}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);
//I am a Ford!

You can use myobj instead of props in the component:

import { createRoot } from 'react-dom/client'

function Car(myobj) {
  return (
    <h2>I am a {myobj.brand}!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car brand="Ford" />
);
//I am a Ford!

function App() {
  return <Greeting name="Alice" />;
}

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default App;
//Hello, Alice!

props obj
Parent Component (App.jsx)

function App() {
  return <Student name="Ezhil" age={22} city="Chennai" />;
}

export default App;

Child Component (Student.jsx)

function Student(props) {
  console.log(props);

  return (
    <>
      <h2>Name: {props.name}</h2>
      <h2>Age: {props.age}</h2>
      <h2>City: {props.city}</h2>
    </>
  );
}

export default Student;
//Name: Ezhil
Age: 22
City: Chennai

Passing an Array as Props
Parent

function App() {
  const fruits = ["Apple", "Mango", "Orange"];

  return <FruitList fruits={fruits} />;
}

Child

function FruitList(props) {
  console.log(props);

  return <h1>{props.fruits[0]}</h1>;
}
//Apple

function FruitList(props) {
  return (
    <>
      {props.fruits.map((fruit) => (
        <h2>{fruit}</h2>
      ))}
    </>
  );
}
//Apple
Mango
Orange

Reference
https://www.w3schools.com/react/react_props.asp

Mastering React.js Fundamentals

Ezhil Abinaya K — Thu, 16 Jul 2026 10:25:30 +0000

ReactJS is a component-based JavaScript library used for building dynamic and interactive user interfaces. It enables developers to create reusable UI components and develop fast, scalable single-page applications (SPAs) with efficient rendering and updates. It Uses reusable components for better code organization.It Improves performance with a virtual DOM.

import React from "react";

function App()
{
    return (<div><h1>Hello, World!</h1>
    </div>);
}
export default App;

import React from 'react': Imports React to create components and use JSX.
function App() { ... }: Defines a functional component called App.
return ( ... ): Returns JSX that represents the UI (a div with an h1 tag displaying "Hello, World!").
export default App: Exports the App component so it can be used elsewhere. Working of React React operates by creating an in-memory Virtual DOM rather than directly manipulating the browser’s DOM. It processes and compares changes within this virtual representation before updating the actual browser DOM.

Actual DOM and Virtual DOM: Initially, there is an Actual DOM(Real DOM) containing a div with two child elements: h1 and h2. React maintains a previous Virtual DOM to track the UI state before any updates.

Detecting Changes: When a change occurs (e.g., adding a new h3 element), React generates a New Virtual DOM. React compares the previous Virtual DOM with the New Virtual DOM using a process called reconciliation.
React.JS History
Latest version of React.JS is 19.2.Initial release to the Public (version 0.3.0) was in July 2013.React.JS was first used in 2011 for Facebook's Newsfeed feature.Facebook Software Engineer, Jordan Walke, created it.

React JSX
JSX stands for JavaScript XML.JSX allows us to write HTML in React.JSX makes it easier to write and add HTML in React.JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.JSX converts HTML tags into react elements.

main.jsx

const myElement = <h1>I Love JSX!</h1>;

createRoot(document.getElementById('root')).render(
  myElement
);
//localhost:5173
I Love JSX!

Expressions in JSX
With JSX you can write expressions inside curly braces { }.The expression can be a React variable, or property, or any other valid JavaScript expression.

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
//React is 10 times better with JSX

Elements Must be Closed
JSX follows XML rules, and therefore HTML elements must be properly closed.JSX will throw an error if the HTML is not properly closed.

const myElement = <input type="text" />;

Attribute class = className
The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.Use attribute className instead.

const myElement = <h1 className="myclass">Hello World</h1>;

Comments in JSX are written with {/* */}.

JSX in React Components
React uses components to build UIs. Components are independent and reusable bits of code.React components are like JavaScript functions, and return HTML.JSX works perfect inside React components.
Props
Arguments can be passed into a component as props, which stands for properties.You send the arguments into the component as HTML attributes.

import { createRoot } from 'react-dom/client'

function Car(props) {
  return (
    <h2>I am a {props.color} Car!</h2>
  );
}

createRoot(document.getElementById('root')).render(
  <Car color="red"/>
);
//I am a red Car!

React Hooks
Hooks allow functions to have access to state and other React features without using classes.
React useState Hook
The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.
Reference
https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_jsx.asp

React.js Introduction: A Beginner's Guide to Modern Web Development

Ezhil Abinaya K — Tue, 14 Jul 2026 14:26:46 +0000

React.js
React.js is an open-source JavaScript library developed by Meta (Facebook) for building user interfaces, especially Single Page Applications (SPAs).
Instead of updating an entire webpage, React updates only the parts that change, making applications much faster and more efficient.React is widely used because it simplifies the development of large applications.
Key Features

Component-Based Architecture
Virtual DOM
Declarative UI
One-Way Data Binding
Reusable Components
Strong Community Support
Rich Ecosystem

Component-Based Architecture
React applications are built using components.
Example:
Header
Sidebar
Content
Footer
Each component:
Can be reused
Has its own logic
Can receive data
Can manage its own state

Master JavaScript APIs:Connecting Your App to the Real World

Ezhil Abinaya K — Sun, 12 Jul 2026 06:23:30 +0000

API (Application Programming Interface)
An API (Application Programming Interface) is a set of rules that allows different software applications to communicate and exchange data with each other. It acts as a bridge between systems, enabling one application to request services or information from another in a structured way.

APIs help different applications connect and work together smoothly.
They allow data sharing and communication without exposing internal system logic.
APIs are widely used in web applications, mobile apps, payment systems, and cloud services.

Example: A mobile banking app requests account details through an API. The API verifies the request, fetches data from the banking server, and returns the account information to the app.
This is exactly how APIs work in software the API takes a request, sends it to the server, retrieves the data, and returns the response.

Most Important APIs
The most important APIs in HTML/JavaScript development are.

The DOM API for HTML and XML documents
The Fetch API for networking
The Web Storage API for client-side data These APIs are fundamental to nearly all modern web development.

The DOM API
The DOM (Document Object Model) is the core API for HTML and XML documents. It provides a structured representation of a webpage, allowing JavaScript to access and manipulate elements, attributes, and content dynamically, creating interactive user interfaces.

The Fetch API
The modern standard for making network requests to servers and retrieving resources (like data from a database or a third-party service). It provides a more robust and flexible alternative to older methods like XMLHttpRequest.

Web Storage API
Offers mechanisms (localStorage and sessionStorage) to store key/value pairs of data in the browser more intuitively than cookies, allowing data to persist across sessions or page reloads.

References
https://www.w3schools.com/js/js_api_intro.asp
https://www.geeksforgeeks.org/software-testing/what-is-an-api/

Async/Await in JavaScript: Ordering Food at a Busy Fast-Food Restaurant

Ezhil Abinaya K — Thu, 09 Jul 2026 09:52:20 +0000

Advanced Promise Methods
Promise.allSettled() Method
Waits for all promises to settle (fulfilled or rejected) and returns results.

Promise.allSettled([
    Promise.resolve("Task 1 completed"),
    Promise.reject("Task 2 failed"),
    Promise.resolve("Task 3 completed")
])
    .then((results) => console.log(results));
//[{"status":"fulfilled","value":"Task 1 completed"},{"status":"rejected","reason":"Task 2 failed"},{"status":"fulfilled","value":"Task 3 completed"}]

Promise.race() Method
Promise.race() Method resolves or rejects as soon as the first promise settles.

Promise.race([
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task 1 finished"), 1000)),
    new Promise((resolve) =>
        setTimeout(() =>
            resolve("Task 2 finished"), 500)),
]).then((result) =>
    console.log(result))
.catch(err => console.error(err));
//Task 2 finished

Async and Await in JavaScript
Async/Await in JavaScript allows you to write asynchronous code in a clean, synchronous-like manner, making it easier to read, understand, and maintain while working with promises.

async functions always return a Promise.
await pauses execution until the Promise is resolved or rejected.
Improves readability compared to .then() and .catch() chaining.
Makes error handling simpler using try...catch.
Ideal for managing complex asynchronous flows in a structured way. Syntax:

async function functionName() {
  try {
    const result = await someAsyncFunction();
    console.log(result);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

Await Keyword
The await keyword pauses the execution of an async function until a Promise is resolved or rejected. It can only be used inside an async function, making asynchronous code easier to read and manage.

Used to wait for a Promise to settle.
Can only be used inside async functions.
Prevents callback and .then() chaining.
Makes asynchronous code cleaner and more readable.
Supports error handling with try...catch.

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Data Loaded");
        }, 2000);
    });
}

async function displayData() {
    const result = await fetchData();
    console.log(result);
}

displayData();
//Data Loaded

Explanation
fetchData() returns a Promise.await fetchData() waits until the Promise resolves.Once resolved, the value is stored in result.The remaining code executes.
Use try...catch with async/await.

function divide(a, b) {
    return new Promise((resolve, reject) => {
        if (b === 0) {
            reject("Cannot divide by zero");
        } else {
            resolve(a / b);
        }
    });
}

async function calculate() {
    try {
        const result = await divide(10, 2);
        console.log(result);
    } catch (error) {
        console.log(error);
    }
}

calculate();
//5

Should we always use resolve() first?
No. There is no rule that resolve() must come first. We call either resolve() or reject() based on the condition. If the operation succeeds, we use resolve(). If it fails, we use reject(). Only one of them can be called for a Promise.
References
https://www.geeksforgeeks.org/javascript/javascript-promise/
https://www.geeksforgeeks.org/javascript/async-await-function-in-javascript/

Callback Hell in JavaScript: Escape the Pyramid of Doom

Ezhil Abinaya K — Wed, 08 Jul 2026 07:19:34 +0000

Callbacks in Javascript
In JavaScript, callbacks are functions that are passed as arguments from one function to another and are executed after the completion of a certain task. They are commonly used in asynchronous operations, such as reading files, making HTTP requests, or handling user input.

A function can accept another function as a parameter.
Callbacks allow one function to call another at a later time.
A callback function can execute after another function has finished.

How Do Callbacks Work in JavaScript?
JavaScript executes code line by line (synchronously), but sometimes we need to delay execution or wait for a task to complete before running the next function. Callbacks help achieve this by passing a function that is executed later.
Syntax:

function myFunction(param1, param2, callback) {
    // Do some work...
    // Call the callback function
    callback(result);
}

Example

console.log("Start");

setTimeout(function () {
    console.log("Task Completed");
}, 2000);

console.log("End");
//Start
End
Task Completed

Explanation:
Start is printed first. setTimeout sets times first .Javascript doesnt wait for the timer.End is printed immediately.After 2 seconds. the callback function runs and prints Task Completed.The function inside setTimeout is callback function because it is called later after the asynchronous task(timer) completes.

function greet(name, callback) {
    console.log("Hello " + name);
    callback();
}

function sayBye() {
    console.log("Goodbye!");
}

greet("Ezhil", sayBye);
//Hello Ezhil
Goodbye!

sayBye is passed as callback. After greet() finishes printing"Hello Ezhil"it calls callback(), which executes sayBye().
Callback Hell
Callback Hell in JavaScript can be defined as the situation where we have nested callbacks(functions passed as arguments to other functions) which makes the code difficult to read and debug. The term "callback hell" describes the deep nesting of functions that can result in poor code readability and difficulty in debugging, especially when handling multiple asynchronous operations.
Problem with Callbacks
Callback Hell (Pyramid of Doom)
When multiple asynchronous operations depend on each other, callbacks get deeply nested, making the code hard to read and maintain.

const userId=101;
getUser(userId, (user) => {
    getOrders(user, (orders) => {
        processOrders(orders, (processed) => {
            sendEmail(processed, (confirmation) => {
                console.log("Order Processed:", confirmation);
            });
        });
    });
});

Explanation
First get the user details from userId.Then, we get the user orders.orders is processed. When processed is ready we sent an confirmation through email/phone.
The indentation increases with each level, making the code difficult to follow.
Error Handling in Nested Callbacks
Handling errors in nested callbacks is complex, as you must check for errors at each level manually.

function divide(a, b, callback) {
    if (b === 0) {
        callback(new Error("Cannot divide by zero"), null);
    } else {
        callback(null, a / b);
    }
}

function result(error, result) {
    if (error) {
        console.log("Error:", error.message);
    } else {
        console.log("Result:", result);
    }
}

divide(10, 2, result);
divide(10, 0, result);
//Result:5
Error:Cannot divide by zero

Handling errors inside callbacks can complicate code readability.
Solution to Callback Hell

Promises
Async/await

Promises
Promises can help in avoiding the callback hell by providing the structured way to handle the asynchronous operations using the .then() method. Due to which the code becomes more readable by avoiding the deeply neseted callbacks.

Pending: The task is in the initial state.
Fulfilled: The task was completed successfully, and the result is available.
Rejected: The task failed, and an error is provided.

let checkEven = new Promise((resolve, reject) => {
    let number = 4;
    if (number % 2 === 0) resolve("The number is even!");
    else reject("The number is odd!");
});
checkEven
    .then((message) => console.log(message)) // On success
    .catch((error) => console.error(error)); // On failure
//The number is even!

Syntax

let promise = new Promise((resolve, reject) => {
    // Perform async operation
    if (operationSuccessful) {
        resolve("Task successful");
    } else {
        reject("Task failed");
    }
});

resolve(value): Marks the promise as fulfilled and provides a result.
reject(error): Marks the promise as rejected with an error.

Advanced Promise Methods
Promise.all() Method
Waits for all promises to resolve and returns their results as an array. If any promise is rejected, it immediately rejects.

Promise.all([
    Promise.resolve("Task 1 completed"),
    Promise.resolve("Task 2 completed"),
    Promise.reject("Task 3 failed")
])
    .then((results) => console.log(results))
    .catch((error) => console.error(error));
//Task 3 failed

References
https://www.geeksforgeeks.org/javascript/what-to-understand-callback-and-callback-hell-in-javascript/
https://www.geeksforgeeks.org/javascript/javascript-promise/
https://www.geeksforgeeks.org/javascript/asynchronous-javascript/
https://www.geeksforgeeks.org/javascript/javascript-callbacks/

The Magic of Javascript Closure

Ezhil Abinaya K — Tue, 07 Jul 2026 07:44:20 +0000

Closure
JavaScript variables can belong to:

The local scope
The global scope

Global variables can be made local (private) with closures.Closures make it possible for a function to have "private" variables.A closure is created when a function remembers the variables from its outer scope, even after the outer function has finished executing.
Example:
Suppose you want to use a variable for counting something, and you want this counter to be available to everyone (all functions).You could use a global variable, and a function to increase the counter:

// Initiate counter
let counter = 0;

// Function to increment counter
function add() {
  counter += 1;
  return counter;
}
// Call add() 6 times
console.log(add());//1
console.log(add());//2
console.log(add());//3
console.log(add());//4
console.log(add());//5
console.log(add());//6

Warning !
There is a problem with the solution above: Any code on the page can change the counter, without calling add().

counter =100;
add();
console.log(counter);//100
console.log(add);//102

The counter should be local to the add() function, to prevent other code from changing it.They want counter should be hidden from outside the world.Like this:

function add() {
    let counter = 0;
  counter += 1;
  return counter;
}
// Call add() 6 times
console.log(add());//1
console.log(add());//1
console.log(add());//1
console.log(add());//1
console.log(add());//1
console.log(add());//1

But this is not we want .It did not work because we reset the local counter every time we call the function.Because every time the function runs ,creates a new variable.The solution is We need a closure.

function myCounter() {
  let counter = 0;//variable in outer function
 function inner() {
    counter++;//inner function uses other variable
    console.log(counter);
   }
return inner;
}
const add = myCounter();
add();//1
add();//2
add();//3
const adding = myCounter();
adding();//1
adding();//2
add();//4

Eventhough, the outer function has finished, the inner function remembers the count. This is called closure.
Reference
https://www.w3schools.com/js/js_function_closures.asp

Understanding JavaScript DOM and Events

Ezhil Abinaya K — Mon, 06 Jul 2026 08:01:02 +0000

JavaScript HTML DOM
When a web page loads, the browser creates a tree-like representation of the HTML document.Each part of the document are nodes in the tree:

JavaScript Events
JavaScript events are actions or occurrences that happen in the browser window which the system tells you about so your code can react to them. They act as the bridge between user interactions (like clicks, keypresses, or mouse movements) and the logic you write to handle those behaviors.
Examples of events:

An HTML button is clicked.
A web page has finished loading.
The mouse moves over an element.
A keyboard key is pressed.
An HTML input field is changed.

Common HTML Events

onchange Event
The onchange event is often used in combination with validation of input fields.onchange event occurs when the element loses focus(clicks or tabs anyway).

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onchange Attribute</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function transforms the input to upper case.</p>
<script>
function upperCase() {
  const x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

onClick Event
The onclick attribute fires on a mouse click on the element.

<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>
<script>
function myFunction() {
  document.getElementById("demo").innerText = "Hello World";
}
</script>
</body>

onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmouseover Attribute</h2>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
  obj.innerText = "Thank You"
}
function mOut(obj) {
  obj.innerText = "Mouse Over Me"
}
</script>
</body>
</html>

The onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmousedown Attribute</h2>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
  obj.style.backgroundColor = "#1ec5e5";
  obj.innerText= "Release Me";
}
function mUp(obj) {
  obj.style.backgroundColor="#D94A38";
  obj.innerText="Thank You";
}
</script>
</body>
</html>

onload Event
Execute a JavaScript immediately after a page has been loaded.

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>HTML DOM Events</h1>
<h2>The onload Event</h2>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</body>
</html>

References
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/jsref/event_onchange.asp
https://www.geeksforgeeks.org/html/html-onchange-event-attribute/
https://www.w3schools.com/js/js_htmldom_events.asp
https://www.w3schools.com/tags/ev_onclick.asp
https://www.w3schools.com/jsref/event_onload.asp