DEV Community: Mahalakshmi C

Hooks in React

Mahalakshmi C — Tue, 29 Sep 2026 13:13:05 +0000

What are Hooks?

Hooks are special(Built-in) functions provided by React that allow functional components to use React features such as state, side effects, context, and references.

Hooks were introduced in React 16.8.

Before Hooks, features such as state and lifecycle methods were mainly used with class components. Hooks made it possible to use these features in functional components.

Some commonly used Hooks are:

useState
useEffect
useContext
useRef
useMemo
useCallback

Why Do We Use Hooks?

Hooks are used to:

Manage state in functional components
Perform side effects
Access context data
Store references to DOM elements
Optimize certain calculations and functions
Reuse stateful logic

Rules of Hooks

React has some important rules for using Hooks.

Rule 1: Call Hooks at the Top Level

Do not call Hooks inside:

if statements
for loops
while loops
Nested functions

Correct:

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

    return <h1>{count}</h1>;
}

Incorrect:

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

Rule 2: Call Hooks from React Functions

Hooks should be called from:

React functional components
Custom Hooks

1. useState

useState is used to create and manage state in a functional component.

Example

import { useState } from "react";

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

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

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

export default Counter;

Here:

count → current state value
setCount → function used to update the state
0 → initial value

When setCount changes the value, React re-renders the component.

2. useEffect

useEffect is used to perform side effects in a component.

Examples of side effects include:

Fetching data from an API
Updating localStorage
Setting timers
Adding event listeners

Example

import { useEffect, useState } from "react";

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

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

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

export default Counter;

Whenever count changes, the effect runs.

3. useRef

useRef is used to store a value that persists between renders without causing a re-render when the value changes.

It is also commonly used to access a DOM element.

Example

import { useRef } from "react";

function InputBox() {
    const inputRef = useRef();

    function focusInput() {
        inputRef.current.focus();
    }

    return (
        <div>
            <input ref={inputRef} />

            <button onClick={focusInput}>
                Focus Input
            </button>
        </div>
    );
}

export default InputBox;

Here, useRef is used to access the input element.

Conclusion

Hooks make functional components more powerful by allowing them to use React features such as state, effects, context, and references. Among them, useState and useEffect are two of the most commonly used Hooks when learning React.

Child Components and Props in React

Mahalakshmi C — Sun, 27 Sep 2026 13:32:31 +0000

React applications are built using components. Components can be connected to each other, and one component can pass data to another component.

What is a Child Component?

A child component is a component that is rendered inside another component.
The component that contains the child is called the parent component.

For example:

function BlogPost() {
    return <h2>Introduction to React</h2>;
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>
            <BlogPost />
        </div>
    );
}

Here:

App is the parent component.
BlogPost is the child component.
<BlogPost /> is used inside App.

The relationship is:

App (Parent)
    ↓
BlogPost (Child)

What are Props?

Props stands for Properties.

Props are used to pass data from a parent component to a child component.

Props are passed using attributes.

Example

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

function App() {
    return (
        <div>
            <BlogPost title="Introduction to React" />
        </div>
    );
}

Here:

<BlogPost title="Introduction to React" />

The parent component App passes the value:

Introduction to React

to the child component BlogPost.

The child receives this data through:

props.title

So the flow is:

Parent Component
       |
       |  title="Introduction to React"
       ↓
Child Component
       |
       ↓
props.title

Why Do We Use Props?

Props are mainly used to make components reusable.

For example, instead of creating a separate component for every blog post, we can create one BlogPost component and pass different data to it.

function BlogPost(props) {
    return (
        <article>
            <h2>{props.title}</h2>
            <p>{props.description}</p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost
                title="Introduction to React"
                description="React is a JavaScript library for building user interfaces."
            />

            <BlogPost
                title="Understanding JavaScript"
                description="JavaScript is used to create interactive web applications."
            />
        </div>
    );
}

export default App;

Here, the same BlogPost component is reused twice with different data.

Output

My Blog

Introduction to React
React is a JavaScript library for building user interfaces.

Understanding JavaScript
JavaScript is used to create interactive web applications.

The component remains the same, but the data changes through props.

Props are read-only.

A child component should not directly change the props it receives from its parent.

For example:

function BlogPost(props) {
    return <h2>{props.title}</h2>;
}

Props Can Contain Different Types of Data

<BlogPost
    title="React"
    views={100}
    isPublished={true}
/>

Here:

title → String
views → Number
isPublished → Boolean

Props can also pass arrays, objects, and even functions.

Conclusion

A child component is a component rendered inside a parent component. Props provide a way for the parent component to send data to its child component.

The basic flow is:

Parent Component
       ↓
      Props
       ↓
Child Component
       ↓
    Display Data

Props make React components reusable, flexible, and easier to manage.

Components in React

Mahalakshmi C — Fri, 25 Sep 2026 14:32:57 +0000

A component is a reusable and independent part of a user interface in React.
Components help divide a large application into smaller and manageable parts.

For example, a website can be divided into components such as:

Navbar
Header
Home
Product
Footer
Login Form

Each component can have its own structure and behavior.

Why Are Components Used?

Components provide several benefits:

Reusability
Easy Maintenance
Separation of UI
Passing Data - Props are used to pass data from one component to another.

Types of Components

React components are mainly written as functional components in modern React.

Functional Component

A functional component is a JavaScript function that returns JSX.

function App() {
    return (
        <div>
            <Welcome />
            <p>This is my React application.</p>
        </div>
    );
}

App is the main component, and Welcome is used inside App.

Class Components

Class components are an older way of creating React components.

class Welcome extends React.Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

Class components were commonly used before Hooks were introduced.

Example for components

function BlogPost() {
    return (
        <article>
            <h2>Introduction to React</h2>
            <p>
                React is a JavaScript library used to build
                user interfaces.
            </p>
        </article>
    );
}

function App() {
    return (
        <div>
            <h1>My Blog</h1>

            <BlogPost />
            <BlogPost />
        </div>
    );
}

export default App;

How Does This Work?

The BlogPost component contains the UI for one blog post.

Inside the App component:

<BlogPost /> <BlogPost />

the same component is used twice.

Therefore, React displays two blog posts without writing the same HTML/JSX code again.

My Blog

Introduction to React
React is a JavaScript library used to build user interfaces.

Introduction to React
React is a JavaScript library used to build user interfaces.

Conclusion

Components are a fundamental part of React. They allow an application to be divided into small, reusable, and manageable pieces. By combining different components, a complete React application can be created.

Virtual DOM in React

Mahalakshmi C — Thu, 24 Sep 2026 13:38:26 +0000

The Virtual DOM (Document Object Model) is one of the important concepts in React. It helps React update the user interface efficiently.

What is Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the actual DOM.

The actual DOM represents the elements on a webpage, such as headings, buttons, paragraphs, images, and forms.

React does not directly update the entire actual DOM whenever something changes. Instead, it uses the Virtual DOM to find out what has changed.

How Does Virtual DOM Work?

The basic process is:

React creates a Virtual DOM that represents the UI.
When the data or state changes, React creates a new Virtual DOM.
React compares the new Virtual DOM with the previous Virtual DOM.
It identifies the changed elements.
React updates only those changed parts in the actual DOM.

This comparison process is commonly referred to as reconciliation.

Example

Suppose the UI initially displays:

Hello
Count: 1

After the count changes:

Hello
Count: 2

React does not need to recreate the entire page. It identifies that only the count has changed and updates that part of the UI.

Simple Flow

Initial UI
    ↓
Virtual DOM
    ↓
State changes
    ↓
New Virtual DOM
    ↓
Compare old and new Virtual DOM
    ↓
Find changes
    ↓
Update required part of Actual DOM

Virtual DOM vs Actual DOM

Virtual DOM	Actual DOM
JavaScript representation of the UI	Represents the actual webpage
Lightweight	More expensive to manipulate
Managed by React	Managed by the browser
Used to determine UI changes	Displays the UI

Conclusion

The Virtual DOM helps React manage UI updates efficiently. Instead of unnecessarily changing the entire webpage, React determines which parts need to change and updates those parts in the actual DOM.

React

Mahalakshmi C — Wed, 23 Sep 2026 13:37:35 +0000

Introduction

React is a JavaScript library used to build user interfaces (UI), especially for web applications.

React was developed by Facebook (now Meta) and was first released as an open-source project in 2013.

Why Do We Use React?

In traditional websites, when we change something on a page, the browser may reload the whole page. React helps us build applications where the UI can be updated efficiently without reloading the entire page.

React is commonly used to create Single Page Applications (SPAs).

What is a Component?

A component is a small, reusable part of a user interface.

For example, in a shopping website, we can create separate components for:

Navbar
Product
Product Card
Cart
Footer

These components can be combined to create the complete application.

Example

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

Here, Welcome is a React component.

When we use:

<Welcome />

React displays:

Welcome to React

React Library vs Framework

React is mainly considered a JavaScript library because it focuses primarily on building the user interface.

A framework usually provides a more complete structure and tools for developing an application.

Advantages of React

Reusable components
Efficient UI updates
Easy to maintain
Supports Single Page Applications
Large community
Can be used to build modern web applications

Conclusion

React makes it easier to build interactive and reusable user interfaces. It uses components to divide an application into smaller and manageable parts. For a beginner who already knows HTML, CSS, and JavaScript, React is a useful next step for learning modern frontend development.

Fetch API in JS

Mahalakshmi C — Tue, 22 Sep 2026 13:57:11 +0000

What is Fetch API?

The Fetch API is used to get or send data between JavaScript and a server.

It is commonly used to work with APIs.

Simple Example

fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.log(error);
    });

How Does It Work?

fetch()
   ↓
Request to server
   ↓
Response
   ↓
response.json()
   ↓
Data

Step 1: fetch()

fetch(url)

Sends a request to the server.

Step 2: response.json()

response.json()

Converts the response into JavaScript data.

Step 3: then()

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

Uses the received data.

Step 4: catch()

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

Handles errors.

Fetch with POST

We can also send data to a server.

fetch("https://example.com/users", {
    method: "POST",
    body: JSON.stringify({
        name: "Maha"
    })
});

Important Point

fetch() returns a Promise.

So we can use:

.then()
.catch()

with Fetch API.

Simple Formula

Remember:

fetch()
   ↓
response
   ↓
response.json()
   ↓
data

Conclusion

Fetch API = Communicating with a server using JavaScript.

It is mainly used to get or send data through APIs.

Promises in JavaScript

Mahalakshmi C — Thu, 10 Sep 2026 11:54:10 +0000

Introduction

In JavaScript, some operations take time to complete. For example, fetching data from a server, reading a file, or waiting for a timer.

JavaScript uses Promises to handle these asynchronous operations in a cleaner and more organized way.

A Promise represents the eventual result of an asynchronous operation.

A Promise can either be:

Successful
Failed
Still in progress

What is a Promise?

A Promise is an object that represents the result of an asynchronous operation.

For example, imagine ordering a product online.

You place the order, but the product is not delivered immediately.

The order can be:

Pending → Order is being processed
Fulfilled → Order is successfully delivered
Rejected → Order could not be delivered

A JavaScript Promise works in a similar way.

Why Do We Need Promises?

Before Promises, asynchronous operations were commonly handled using callbacks.

When many callbacks are nested inside each other, the code can become difficult to read and maintain.

This is called Callback Hell.

Promises provide a cleaner way to handle asynchronous operations.

Promise States

A Promise has three states:

1. Pending

The operation is still running.

2. Fulfilled

The operation completed successfully.

3. Rejected

The operation failed.

The flow is:

             Promise
                |
        -----------------
        |               |
    Fulfilled        Rejected
    (Success)        (Failure)

A Promise starts as pending and later becomes either fulfilled or rejected.

Creating a Promise

We can create a Promise using the Promise constructor.

Syntax:

const promise = new Promise((resolve, reject) => {
    // asynchronous operation
});

Here:

resolve() means the operation was successful.
reject() means the operation failed.

Example:

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

    let success = true;

    if (success) {
        resolve("Operation successful");
    } else {
        reject("Operation failed");
    }

});

In this example, success is true, so the Promise is fulfilled.

Handling a Promise with then()

We use .then() to handle a successful Promise.

Example:

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

    resolve("Data received successfully");

});

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

Output

Data received successfully

Explanation

The Promise calls:

resolve("Data received successfully");

Because the operation is successful, .then() receives the result.

Handling Errors with catch()

We use .catch() to handle a rejected Promise.

Example:

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

    reject("Something went wrong");

});

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

Output

Something went wrong

Explanation

The Promise calls:

reject("Something went wrong");

Since the Promise is rejected, .catch() handles the error.

then() and catch() Together

We can use .then() for success and .catch() for failure.

Example:

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

    let paymentSuccessful = true;

    if (paymentSuccessful) {
        resolve("Payment successful");
    } else {
        reject("Payment failed");
    }

});

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

Output

Payment successful

If we change:

let paymentSuccessful = false;

The output will be:

Payment failed

Promise with Success and Failure

We can also use a condition inside a Promise.

Example:

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

    let serverWorking = true;

    setTimeout(() => {

        if (serverWorking) {
            resolve("Server connected");
        } else {
            reject("Server connection failed");
        }

    }, 2000);

});

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

Output

Server connected

If:

let serverWorking = false;

the output will be:

Server connection failed

finally()

.finally() executes whether the Promise is fulfilled or rejected.

Example:

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

    resolve("Data processed");

});

processData
    .then((message) => {
        console.log(message);
    })
    .catch((error) => {
        console.log(error);
    })
    .finally(() => {
        console.log("Process completed");
    });

Output

Data processed
Process completed

Even if the Promise is rejected, finally() will still execute.

Promise Chaining

One of the useful features of Promises is Promise chaining.

We can use multiple .then() methods one after another.

Example:

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

    resolve(10);

});

process
    .then((number) => {
        console.log(number);
        return number * 2;
    })
    .then((number) => {
        console.log(number);
        return number + 5;
    })
    .then((number) => {
        console.log(number);
    });

Output

10
20
25

How it works

First:

resolve(10);

The first .then() receives 10.

return number * 2;

So it returns 20.

The next .then() receives 20.

return number + 5;

So it returns 25.

The final .then() receives 25.

This is called Promise Chaining.

Promise vs Callback

A callback passes a function to another function.

Example:

function getData(callback) {

    setTimeout(() => {
        callback("Data received");
    }, 2000);

}

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

With a Promise:

function getData() {

    return new Promise((resolve) => {

        setTimeout(() => {
            resolve("Data received");
        }, 2000);

    });

}

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

Promises can make multiple asynchronous operations easier to organize, especially when chaining several steps.

Real-World Uses of Promises

Promises are commonly used when working with:

API requests
Fetching data from a server
Database operations
File operations
Timers
Network requests
Authentication
Loading external data

For example, when a website requests user information from a server, the response may take some time. A Promise can represent that pending operation and later provide either the data or an error.

Promise Flow

The overall flow can be remembered like this:

Create Promise
      ↓
   Pending
      ↓
  Operation
   /      \
Success   Failure
   ↓        ↓
resolve   reject
   ↓        ↓
 .then()  .catch()
      \    /
       ↓
   .finally()

Conclusion

Promises are used in JavaScript to handle asynchronous operations in a cleaner way.

A Promise has three states:

Pending → Fulfilled
Pending → Rejected

The important methods are:

.then()     → handles success
.catch()    → handles errors
.finally()  → runs after completion

Promises are especially useful for API calls, network requests, timers, and other operations that take time to complete.

Promises also provide the foundation for async/await, which gives us another clean way to work with asynchronous JavaScript.

Synchronous and Asynchronous JavaScript

Mahalakshmi C — Wed, 09 Sep 2026 13:38:28 +0000

JavaScript can execute code in two different ways:

Synchronous JavaScript
Asynchronous JavaScript

The main difference is how JavaScript handles the execution of tasks.

1. Synchronous JavaScript

Synchronous means that JavaScript executes code one statement at a time, in order.

The next statement will execute only after the previous statement has finished.

For example:

console.log("Step 1");
console.log("Step 2");
console.log("Step 3");

Output:

Step 1
Step 2
Step 3

Here, JavaScript executes the statements one after another.

Step 1
   ↓
Step 2
   ↓
Step 3

If one task takes a long time, the following tasks have to wait.

Real-World Example

Imagine you are standing in a queue at a restaurant.

Person 1 → Order → Receive food
                    ↓
Person 2 → Order → Receive food
                    ↓
Person 3 → Order → Receive food

Person 2 has to wait until Person 1's order is completed.

This is similar to synchronous execution.

2. Asynchronous JavaScript

Asynchronous means JavaScript can start a task and continue executing other code without waiting for that task to finish.

When the asynchronous task is completed, its callback can be executed later.

A common example is setTimeout().

console.log("Start");

setTimeout(() => {
    console.log("Task completed");
}, 2000);

console.log("End");

Output:

Start
End
Task completed

Task completed appears after 2 seconds.

Why Does This Happen?

When JavaScript reaches setTimeout(), it schedules the function to run after 2 seconds and continues executing the next statement.

So the execution happens approximately like this:

Start
  ↓
setTimeout() → wait in background
  ↓
End
  ↓
After 2 seconds
  ↓
Task completed

This is called asynchronous execution.

Synchronous vs Asynchronous

Synchronous	Asynchronous
Executes one task at a time	Allows other code to continue while waiting
Executes in order	Completion may happen later
Next task waits for the current task	Next task does not necessarily wait
Can block execution when a task takes time	Helps prevent waiting/blocking
Example: normal statements	Example: `setTimeout()`, API requests

Important Point

Asynchronous does not mean JavaScript executes everything at exactly the same time.

Instead, it means JavaScript can handle tasks that take time without blocking the execution of other code.

For example, while waiting for a network response, JavaScript can continue handling other tasks.

Common Asynchronous Operations

Some common examples of asynchronous operations in JavaScript are:

setTimeout()
setInterval()
API requests
Fetching data from a server
Reading files
Promises
async/await

Conclusion

Synchronous JavaScript executes statements one by one in order, where each task waits for the previous task to finish. Asynchronous JavaScript allows time-consuming tasks to be handled without stopping the execution of other code.

Understanding synchronous and asynchronous execution is important because it helps us understand concepts such as callbacks, setTimeout(), Promises, API calls, and async/await in JavaScript.

Callback and Closure in JavaScript

Mahalakshmi C — Tue, 08 Sep 2026 13:30:55 +0000

Callback functions and closures are important concepts in JavaScript. They become especially useful when working with asynchronous operations such as setTimeout().

In this blog, we will understand Callback Functions, setTimeout(), and Closures with simple examples.

Callback Function

A callback function is a function passed as an argument to another function. The receiving function can execute the callback function later when it is needed.

For example:

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

function message() {
    console.log("Welcome to JavaScript");
}

greet("John", message);

Output:

Hello John
Welcome to JavaScript

Here, message is passed as an argument to the greet() function. Therefore, message is called a callback function.

The important point is that we pass the function without parentheses:

greet("John", message);

We do not write:

greet("John", message());

because message() would execute immediately instead of being passed as a callback.

Callback with `setTimeout()`

setTimeout() is a JavaScript function used to execute a piece of code after a specified amount of time.

The syntax is:

setTimeout(function, delay);

For example:

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

Output after approximately 2 seconds:

Hello

Here, the function passed to setTimeout() is a callback function.

We can also write it using an arrow function:

setTimeout(() => {
    console.log("Hello after 2 seconds");
}, 2000);

The callback is not executed immediately. It is executed after the specified delay.

Understanding Callback and `setTimeout()`

Consider this example:

console.log("Start");

setTimeout(() => {
    console.log("Timeout");
}, 2000);

console.log("End");

Output:

Start
End
Timeout

Even though the setTimeout() code appears before "End", the callback executes later.

The setTimeout() callback waits for the specified delay, while JavaScript continues executing the remaining synchronous code.

Closure in JavaScript

A closure occurs when an inner function remembers and can access variables from its outer function even after the outer function has finished executing.

For example:

function outer() {
    let message = "Hello";

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

    return inner;
}

let result = outer();

result();

Output:

Hello

Here, inner() can access the message variable from outer() even after outer() has finished executing.

This is called a closure.

Closure with `setTimeout()`

Closures are commonly seen when using setTimeout() because the callback function can remember variables from its surrounding scope.

For example:

function greet() {
    let message = "Hello from closure";

    setTimeout(() => {
        console.log(message);
    }, 2000);
}

greet();

Output after approximately 2 seconds:

Hello from closure

Here, the greet() function finishes executing before the setTimeout() callback runs.

However, the callback still remembers the message variable.

This happens because the callback forms a closure over the variable message.

Callback Function vs Closure

Callback and closure are different concepts, although they can work together.

Callback Function	Closure
A function passed as an argument to another function	A function that remembers variables from its outer scope
Focuses on passing a function	Focuses on accessing preserved variables
Commonly used with `setTimeout()`	Can occur when an inner function accesses outer variables
Example: `setTimeout(callback, 2000)`	Example: callback accessing `name` from an outer function

Callback + Closure + `setTimeout()`

We can combine all three concepts in one example:

function orderFood(item) {

    let message = "Your " + item + " is ready";

    setTimeout(() => {
        console.log(message);
    }, 2000);
}

orderFood("Biryani");

Output after approximately 2 seconds:

Your Biryani is ready

Step-by-Step Execution

Let's understand the example step by step.

Step 1

The orderFood("Biryani") function is called.

item = "Biryani"

Step 2

The message variable is created.

message = "Your Biryani is ready"

Step 3

The callback function is passed to setTimeout().

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

Step 4

setTimeout() schedules the callback to execute after approximately 2 seconds.

Step 5

The orderFood() function finishes executing.

Step 6

After the delay, the callback executes.

console.log(message);

The callback still remembers the message variable because of closure.

Step 7

The output is:

Your Biryani is ready

Conclusion

A callback function is a function passed as an argument to another function and executed when needed. setTimeout() uses a callback function to perform an operation after a specified delay. A closure allows an inner function to remember and access variables from its outer scope even after the outer function has finished executing.

Understanding callbacks, closures, and setTimeout() is important because these concepts form the foundation for understanding asynchronous JavaScript.

Functions in JavaScript – Part 2

Mahalakshmi C — Mon, 07 Sep 2026 08:43:34 +0000

In Part 1, we learned about function declaration, function calling, parameters, arguments, and the return statement.

In this part, we will learn about different ways of creating functions in JavaScript. These include Function Expression, Anonymous Function, Arrow Function, and Default Parameters.

1. Function Expression

A function expression is a function that is stored inside a variable.

For example:

let greet = function() {
    console.log("Hello, JavaScript");
};

greet();

Output:

Hello, JavaScript

Here, the function does not have a name. Instead, the function is assigned to the variable greet.

We call the function using the variable name:

greet();

Function Declaration vs Function Expression

Function Declaration	Function Expression
Uses the `function` keyword with a function name	Function is assigned to a variable
Example: `function greet() {}`	Example: `let greet = function() {}`
Function has a name	Function can be anonymous
Can be called before its declaration because function declarations are hoisted	Cannot be safely called before the assignment

2. Anonymous Function

An anonymous function is a function without a name.

For example:

let message = function() {
    console.log("Welcome");
};

message();

Output:

Welcome

Here, the function does not have a name. It is stored inside the message variable.

Anonymous functions are commonly used when we need a function for a specific purpose and do not need to give the function a separate name.

3. Arrow Function

An arrow function is a shorter way of writing a function. It was introduced in ES6 and uses the arrow => syntax.

For example:

let greet = () => {
    console.log("Hello");
};

greet();

Output:

Hello

Here, () represents the parameters and => is the arrow syntax.

Arrow Function with Parameters

An arrow function can also accept parameters.

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

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

Output:

Here, a and b are parameters, and the function returns their sum.

Shorter Arrow Function

If an arrow function contains only one statement that returns a value, we can write it in a shorter form.

let add = (a, b) => a + b;

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

Output:

Here, the return keyword and curly braces are not required because the expression is returned automatically.

4. Default Parameters

Default parameters allow us to provide a default value for a parameter when no argument is passed to the function.

For example:

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

greet();

Output:

Hello, Guest

Here, no argument is passed to greet(), so JavaScript uses the default value "Guest".

If we provide an argument, the provided value is used instead.

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

greet("Maha");

Output:

Hello, Maha

Here, "Maha" replaces the default value "Guest".

Conclusion

JavaScript provides different ways to create and write functions. A function expression stores a function inside a variable, while an anonymous function is a function without a name. An arrow function provides a shorter syntax for writing functions, and default parameters allow us to provide default values when arguments are not supplied.

These function types make JavaScript code more flexible, reusable, and easier to write. In the next part, we will explore more advanced function concepts such as callback functions, nested functions, and closures.

Function in JavaScript - part1

Mahalakshmi C — Fri, 04 Sep 2026 14:20:49 +0000

Functions

Functions are one of the most important concepts in JavaScript.

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

Instead of writing the same code multiple times, we can place the code inside a function and call it whenever needed.

For example, instead of writing console.log("Welcome") multiple times, we can create a function.

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

The code inside the function will not execute until the function is called.

greet();

Output:

Welcome

Why Do We Use Functions?

Functions help us avoid repeating the same code. They also make programs more organized, reusable, and easier to understand.

For example, without a function:

console.log("Welcome, John");
console.log("Welcome, David");
console.log("Welcome, Mary");

Using a function:

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

greet();
greet();
greet();

A function can be called multiple times whenever the same task needs to be performed.

Function Declaration

A function declaration is one of the most common ways to create a function in JavaScript.

The syntax is:

function functionName() {
    // code to execute
}

A function declaration contains:

The function keyword.
A function name.
Parentheses ().
Curly braces {} containing the function code.

For example:

function showMessage() {
    console.log("Learning JavaScript");
}

Here, showMessage is the name of the function.

Calling a Function

Creating a function does not automatically execute its code. We need to call or invoke the function to execute it.

A function is called by writing its name followed by parentheses.

function showMessage() {
    console.log("Learning JavaScript");
}

showMessage();

Output:

Learning JavaScript

Here, the function is declared first and then called using showMessage().

Calling a Function Multiple Times

One of the main advantages of functions is reusability. We can call the same function multiple times.

function welcome() {
    console.log("Welcome to our website");
}

welcome();
welcome();
welcome();

Output:

Welcome to our website
Welcome to our website
Welcome to our website

The same block of code is executed every time the function is called.

Parameters

Parameters are variables that are written inside the parentheses of a function. They allow a function to receive values when it is called.

For example:

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

Here, name is a parameter.

The function can receive different values through this parameter.

greet("John");
greet("David");

Output:

Hello, John
Hello, David

The function uses the value passed to it and produces different results.

Multiple Parameters

A function can have more than one parameter. Multiple parameters are separated by commas.

For example:

function introduce(name, city) {
    console.log(name + " is from " + city);
}

introduce("John", "Chennai");

Output:

John is from Chennai

Here, name and city are parameters.

Arguments

Arguments are the actual values that are passed to a function when it is called.

For example:

function add(a, b) {
    console.log(a + b);
}

add(10, 20);

Here:

a and b are parameters.
10 and 20 are arguments.

Output:

Parameters vs Arguments

Parameters	Arguments
Variables defined in the function declaration	Actual values passed when calling the function
Receive values inside the function	Provide values to the function
Example: `function add(a,b)`	Example: `add(10,20)`
`a & b` are parameter	`10 and 20` are an argument

The `return` Statement

The return statement is used to send a value back from a function.

For example:

function add(a, b) {
    return a + b;
}

let result = add(10, 20);

console.log(result);

Output:

Here, the function calculates a + b and returns the result.

The returned value is stored in the result variable.

`return` vs `console.log()`

console.log() displays a value in the console, while return sends a value back from the function.

For example:

function add(a, b) {
    console.log(a + b);
}

add(10, 20);

Output:

In this example, the result is only displayed.

Now consider:

function add(a, b) {
    return a + b;
}

let result = add(10, 20);

console.log(result);

Output:

Here, the result is returned from the function and can be stored in a variable or used in another operation.

For example:

function add(a, b) {
    return a + b;
}

let total = add(10, 20) * 2;

console.log(total);

Output:

This is one of the main advantages of using return.

Important Point About `return`

When JavaScript reaches a return statement, the function stops executing.

For example:

function check() {
    console.log("Start");

    return "Completed";

    console.log("End");
}

console.log(check());

Output:

Start
Completed

The code after the return statement is not executed.

Conclusion

Functions help us organize and reuse code in JavaScript. A function is created using the function keyword and is executed when it is called. Functions can receive values through parameters and arguments, and they can send results back using the return statement.

Understanding function declarations, function calls, parameters, arguments, and return values is important because these concepts form the foundation for working with functions in JavaScript.

DOM in JavaScript

Mahalakshmi C — Fri, 04 Sep 2026 08:29:15 +0000

DOM in JavaScript

DOM stands for Document Object Model. It is a programming interface that allows JavaScript to access and manipulate HTML documents.

When a web page is loaded in the browser, the browser creates a DOM representation of the HTML page. JavaScript can use the DOM to select, modify, add, or remove HTML elements.

For example, consider the following HTML:

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

Using JavaScript, we can access and change this element.

document.getElementById("title").textContent = "Welcome to JavaScript";

After executing the JavaScript code, the content of the <h1> element changes from:

Hello World

to:

Welcome to JavaScript

DOM Tree

The browser represents an HTML document as a tree of objects called the DOM Tree.

In the DOM, every HTML element is treated as an object called a node.

JavaScript can use these nodes to interact with the web page.

Selecting HTML Elements

JavaScript provides several methods to select elements.

1. getElementById()

The getElementById() method is used to select an element using its id.

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

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

console.log(element);

2. getElementsByClassName()

The getElementsByClassName() method is used to select elements using a class name.

<p class="message">Hello</p>
<p class="message">Welcome</p>

let elements = document.getElementsByClassName("message");

console.log(elements);

This method returns a collection of elements because multiple HTML elements can have the same class name.

3. getElementsByTagName()

The getElementsByTagName() method is used to select elements using their tag name.

<p>First paragraph</p>
<p>Second paragraph</p>

let elements = document.getElementsByTagName("p");

console.log(elements);

This method returns a collection of all <p> elements.

4. querySelector()

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

<h1 class="title">JavaScript DOM</h1>

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

console.log(element);

Here, .title is a CSS class selector.

We can also select elements using an id selector.

document.querySelector("#title");

Or using a tag selector.

document.querySelector("h1");

5. querySelectorAll()

The querySelectorAll() method selects all elements that match a CSS selector.

<p class="message">Hello</p>
<p class="message">Welcome</p>

let elements = document.querySelectorAll(".message");

console.log(elements);

This method returns a collection of all elements with the class "message".

Changing Text Content

The textContent property is used to change or access the text inside an HTML element.

For example:

Changing HTML Content

The innerHTML property is used to access or change the HTML content inside an element.

<div id="content"></div>

document.getElementById("content").innerHTML =
    "<h2>Welcome</h2>";

This adds an <h2> element inside the <div>.

The result in the browser will be:

Welcome

Changing CSS Styles

JavaScript can also change the CSS styles of an HTML element using the style property.

Creating a New Element

The document.createElement() method is used to create a new HTML element.

For example:

let heading = document.createElement("h2");

heading.textContent = "New Heading";

document.body.appendChild(heading);

Here, JavaScript creates a new <h2> element and adds it to the <body>.

Removing an Element

The remove() method is used to remove an HTML element.

Adding an Event

The DOM also allows JavaScript to respond to user actions such as clicking a button.

For example:

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

<h1 id="message"></h1>

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

button.addEventListener("click", function() {
    document.getElementById("message").textContent =
        "Button Clicked";
});

When the user clicks the button, the text "Button Clicked" appears on the web page.

Common DOM Methods

Method	Description
`getElementById()`	Selects an element using its ID
`getElementsByClassName()`	Selects elements using a class name
`getElementsByTagName()`	Selects elements using a tag name
`querySelector()`	Selects the first matching element
`querySelectorAll()`	Selects all matching elements
`createElement()`	Creates a new HTML element
`appendChild()`	Adds an element to another element
`remove()`	Removes an element

Common DOM Properties

Property	Description
`textContent`	Changes or accesses text content
`innerHTML`	Changes or accesses HTML content
`style`	Changes CSS styles
`value`	Gets or changes the value of an input element

Conclusion

The DOM allows JavaScript to interact with HTML elements on a web page. Using the DOM, we can select elements, change text and HTML content, modify CSS styles, create new elements, remove existing elements, and respond to user actions.

Understanding the DOM is important because it helps us create dynamic and interactive web pages using JavaScript.