DEV Community: Annapoorani Kadhiravan

Introduction to React JS

Annapoorani Kadhiravan — Mon, 13 Jul 2026 10:35:40 +0000

Introduction

Applications like Facebook, Instagram, Netflix, WhatsApp Web, Amazon, and Gmail constantly update information without reloading the entire page. Notifications appear instantly, messages update in real time, shopping carts refresh automatically, and dashboards display live data.

Building such dynamic applications using plain JavaScript becomes increasingly difficult as the application grows.

This is where React.js comes into the picture.

React is one of the world's most popular JavaScript libraries for building fast, interactive, and reusable user interfaces.

History of React

Before React existed, developers primarily built websites using:

HTML
CSS
JavaScript (Vanilla JavaScript)
jQuery

These technologies worked well for simple websites where content rarely changed.

However, as web applications became larger and more interactive, managing the user interface became increasingly complex.

Imagine applications like:

Facebook News Feed
Instagram Timeline
Gmail Inbox
Online Banking Dashboard
Hospital Management System
Student Portal

Thousands of elements can change within seconds.

Updating each element manually using JavaScript quickly becomes difficult, repetitive, and prone to errors.

To solve this challenge, Jordan Walke, a software engineer at Meta (formerly Facebook), created React in 2011.

React was first used internally by Facebook before being released as an open-source JavaScript library in 2013.

Today, React is maintained by Meta along with thousands of contributors from the open-source community and is one of the most widely used frontend libraries in the world.

What is React?

React.js is an open-source JavaScript library used for building user interfaces (UI), especially for dynamic and interactive web applications.

Unlike traditional JavaScript, React allows developers to build applications using small, reusable pieces called components.

Instead of manually updating HTML elements whenever data changes, developers simply describe what the user interface should look like, and React takes care of updating the browser efficiently.

In simple words,

React is a JavaScript library that helps developers build fast, interactive, reusable, and maintainable user interfaces.

Why Was React Created?

To understand why React was created, let's first understand the problem developers faced before React.

Imagine you're building a simple score counter.

Initially, the webpage displays:

Score : 0

Whenever the user clicks a button, the score should increase.

Sounds simple, right?

Now imagine you're building Facebook instead.

Every second, the application may need to update:

Notifications
Likes
Comments
Messages
Friend Requests
Posts
Advertisements
User Profile

Each of these updates requires modifying the webpage.

Before React, developers had to manually update every HTML element using JavaScript.

As applications became larger, this approach became difficult to manage.

Developers spent more time updating the UI than building new features.

React was created to solve this exact problem.

Instead of manually updating the webpage, React automatically updates only the parts that actually change.

Understanding the DOM

Before learning React, we need to understand one important concept:

DOM (Document Object Model)

Whenever a browser loads an HTML page, it converts that page into a tree-like structure called the DOM.

For example,

<body>

    <div>

        <h1>Welcome</h1>

        <p>Hello World</p>

    </div>

</body>

The browser internally represents it like this:

Body
│
└── Div
     │
     ├── H1
     │      └── Welcome
     │
     └── P
            └── Hello World

Every HTML element becomes a node inside this tree.

JavaScript interacts with this DOM whenever it needs to:

Create elements
Delete elements
Update text
Change styles
Add animations
Handle user interactions

The Problem with Direct DOM Manipulation

Imagine a webpage containing:

500 buttons
300 images
200 forms
1,000 text elements

Whenever one small value changes, JavaScript directly updates the browser's DOM.

Although this works, updating the real DOM is relatively expensive because the browser may need to:

Recalculate layouts
Repaint elements
Re-render portions of the page

For large applications, repeatedly updating the real DOM can impact performance and make the code harder to maintain.

React addresses this by reducing unnecessary updates to the real DOM.

What is the Virtual DOM?

One of React's biggest innovations is the Virtual DOM.

The Virtual DOM is a lightweight JavaScript representation (or copy) of the real DOM.

Instead of immediately updating the browser whenever data changes, React first updates the Virtual DOM.

Think of it like making edits to a rough draft before publishing the final version.

Instead of constantly changing the actual webpage, React first checks what has changed in this lightweight copy.

This approach significantly reduces unnecessary work.

Real-World Analogy

Imagine you're writing a school assignment.

You don't write directly on the final answer sheet.

Instead, you first write everything on rough paper.

You make corrections, erase mistakes, and improve your answers.

Only after you're satisfied do you copy the final version onto the answer sheet.

React follows a similar approach.

Rough paper → Virtual DOM
Final answer sheet → Real DOM

This allows React to make smart decisions before updating the browser.

How Does React Update the UI?

Whenever the application's data changes, React follows a simple process:

Update the Virtual DOM.
Compare it with the previous Virtual DOM.
Find what has changed.
Update only those changes in the real DOM.

This makes React much more efficient than repeatedly updating the browser directly.

But how does React know what has changed?

That's where the Diffing Algorithm comes in.

What is the Diffing Algorithm?

The Diffing Algorithm is React's comparison process.

Whenever state or props change, React creates a new Virtual DOM.

Now React has two versions:

Old Virtual DOM
New Virtual DOM

React compares both trees and identifies exactly which elements have changed.

For example,

Before clicking the button:

Score : 5

After clicking the button:

Score : 6

React notices that only the number changed.

The surrounding <div>, <button>, and other elements remain the same.

Instead of rebuilding the entire webpage, React updates only the changed text.

This comparison process is called the Diffing Algorithm.

Why is the Diffing Algorithm Important?

Imagine a webpage containing 5,000 HTML elements.

If only one button's text changes, rebuilding the entire page would waste processing power.

Instead, React compares the previous UI with the updated UI and changes only the affected elements.

This makes applications:

Faster
More efficient
Easier to scale

The larger the application becomes, the more beneficial this optimization is.

What is Reconciliation?

After the Diffing Algorithm identifies the differences, React updates the real DOM.

This updating process is called Reconciliation.

In simple words,

Diffing answers the question: "What changed?"
Reconciliation answers the question: "Apply those changes to the browser."

Instead of replacing the complete webpage, React modifies only the parts that actually changed.

This improves performance and provides a smoother user experience.

Complete React Rendering Flow

The following diagram summarizes how React updates the user interface.

User clicks a button
        │
        ▼
Application data changes
        │
        ▼
React creates a New Virtual DOM
        │
        ▼
Diffing Algorithm compares
Old Virtual DOM
        │
        ▼
Differences are identified
        │
        ▼
Reconciliation updates
only the changed elements
in the Real DOM
        │
        ▼
Updated UI appears instantly

This entire process happens so quickly that users usually don't notice it.

That's one of the reasons React applications feel fast and responsive.

React is Declarative and Component-Based.

Imperative Programming

Before React, most web applications were developed using an Imperative Programming approach.

The word Imperative means giving instructions.

In this approach, the developer tells the computer every single step required to achieve the desired result.

Instead of describing the final UI, you manually explain:

What should happen first
What should happen next
Which HTML element to create
Where to place it
When to update it

In simple words,

Imperative Programming focuses on HOW to perform a task.

Imperative Programming Example (Vanilla JavaScript)

document.addEventListener('DOMContentLoaded', function() {

    // Create a new paragraph element
    const p = document.createElement('p');

    // Add text to the paragraph
    p.textContent = 'This paragraph was added imperatively with JavaScript.';

    // Find the content div and append the paragraph
    document.getElementById('content').appendChild(p);

});

Let's understand what happens step by step.

Wait until the webpage loads.
Create a new <p> element.
Add text to the paragraph.
Search for the content div.
Insert the paragraph inside that div.

Every action is performed manually.

Although this is simple for one paragraph, imagine updating hundreds or even thousands of elements in a large application.

The code becomes lengthy, repetitive, and difficult to maintain.

Declarative Programming

React follows a completely different approach called Declarative Programming.

Instead of explaining how to update the webpage, developers simply describe what the UI should look like.

React handles the implementation behind the scenes.

In simple words,

Declarative Programming focuses on WHAT the final user interface should look like.

Declarative Programming Example (React)

import React from 'react';

function App() {

    return (

        <div id="content">

            <p>This paragraph was added declaratively with React.</p>

        </div>

    );

}

export default App;

Notice how much simpler this code is.

We don't tell React:

Create a paragraph.
Find the div.
Append the paragraph.

Instead, we simply describe the desired user interface.

React automatically creates and updates the necessary HTML elements.

Real-Life Analogy

Imagine you're ordering food in a restaurant.

Imperative Approach

You tell the chef:

Take a pan.
Add oil.
Cut onions.
Fry onions.
Add vegetables.
Add spices.
Cook for 20 minutes.

You're explaining every step.

Declarative Approach

You simply say:

"I'd like one Veg Biryani."

You describe the final result.

The chef knows how to prepare it.

React works in exactly the same way.

Developers describe the final UI, and React handles the implementation.

Imperative vs Declarative Programming

Imperative Programming	Declarative Programming (React)
Focuses on How	Focuses on What
Manual DOM updates	Automatic UI updates
More code	Less code
Harder to maintain	Easier to maintain
Developer manages UI changes	React manages UI changes
Better for small scripts	Better for modern applications

What is JSX?

You may have noticed that React code looks similar to HTML.

For example:

<div>

    <h1>Welcome</h1>

    <p>Hello World</p>

</div>

This syntax is called JSX.

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript.

Although it looks like HTML, it is actually JavaScript.

Behind the scenes, React converts JSX into regular JavaScript before the browser executes it.

JSX makes React applications:

Easier to read
Easier to write
Easier to maintain

React is Component-Based

One of React's greatest strengths is its Component-Based Architecture.

Instead of writing one huge webpage, React encourages developers to divide the application into smaller reusable pieces called Components.

Think of components like LEGO blocks.

Each block performs one specific task.

When combined together, they create a complete application.

For example, a typical e-commerce website may contain:

App
│
├── Navbar
├── Search Bar
├── Banner
├── Product List
│      ├── Product Card
│      ├── Product Card
│      ├── Product Card
│
├── Shopping Cart
├── Footer

Each of these is an independent component.

Creating Your First Component

// StaticMessage.js

import React from 'react';

function StaticMessage() {

    return <p>This is a static message!</p>;

}

export default StaticMessage;

This component simply displays a paragraph.

Now let's reuse it.

Reusing Components

import React from 'react';

import StaticMessage from './StaticMessage';

function App() {

    return (

        <div>

            <StaticMessage />

            <StaticMessage />

        </div>

    );

}

Instead of writing the same HTML multiple times, we simply reuse the component.

This is one of the biggest advantages of React.

Benefits of Components

Using components makes applications:

Modular
Reusable
Easy to maintain
Easy to test
Easier to understand
Easier to scale

Whenever you update one component, every place that uses it automatically reflects the latest version.

Parent Component and Child Component

React applications are built like a family tree.

One component can contain another component.

Example:

App
│
├── Header
├── Sidebar
├── Content
└── Footer

Here,

App is the Parent Component.
Header, Sidebar, Content, and Footer are Child Components.

Parent → Child Communication

React follows One-Way Data Flow.

This means data naturally flows from the Parent Component to the Child Component.

The Parent passes data using Props.

Example:

<Header title="Welcome to React" />

Here,

The Parent sends the value "Welcome to React" to the Header component.

The Child receives it and displays it.

This makes applications predictable and easier to debug.

Child → Parent Communication

Sometimes the Child Component needs to send information back to the Parent.

React does this using Callback Functions.

Instead of directly modifying the Parent's data, the Parent sends a function to the Child.

The Child calls that function whenever it needs to communicate.

Example:

Parent
   │
   ├── sends function
   ▼
Child
   │
   └── calls function
          │
          ▼
Parent receives updated data

Although communication appears to move from Child to Parent, React's data flow still remains one-way because the Parent controls the data.

One-Way Data Flow

One of React's core principles is One-Way Data Binding.

Parent
    │
    ▼
Child
    │
    ▼
Grandchild

Data always flows downward.

This makes applications:

Predictable
Easier to debug
Easier to maintain
Less prone to unexpected side effects

References :
https://medium.com/@castonboyd/react-js-for-beginners-understanding-the-why-mastering-the-how-and-exploring-the-what-2082aad56052
https://www.geeksforgeeks.org/reactjs/reactjs-introduction/
https://www.w3schools.com/react/react_intro.asp
https://strapi.io/blog/what-is-react-js

Software Architect - A tech Meetup

Annapoorani Kadhiravan — Sun, 12 Jul 2026 12:03:45 +0000

My first ever tech meetup, absolutely worth it, there is no senior junior level, everyone shared their experience, it broke my ice in talking with others. Experienced people shared their journey, it was like wholesome talk, where I didn't feel like meeting everyone for the first time. Each one of them made me comfortable and shared their insights.

DEV-ON SOFTWARE - a service based company, organized this event, who is one step ahead of other companies incase of AI integration in their projects. They build an AI model in SDLC and in DevOps, which can understand the project needs and provide solutions, instead of putting the confidential case studies in Open-ai platforms, they build their own models to assist.

One of the interesting part of the event was about the presenter Subal, who did presentation for the first time on "Architecting for Scale - from hundreds to Millions : Scaling a backend system, one bottleneck at a time". He just came started presentation with a funny reel but with strong message which states that "A viral gym meme highlights a hyper-focused lifter losing a competition to a relaxed, casual gym-goer who skips days but stays stress-free. The reel humorously proves that obsessing over perfect routines and flashy gear leads to quick burnout and failure. Ultimately, it conveys that sustainable, imperfect consistency over the long term will always beat short-term perfection." - which means showing up on something consistently matters more than working on with high intensity.

And more interesting part was, the way he delivered the content, no much deep or technical talk, just a casual talk which covers all the details, in between he forgot few steps, he checked his notes and make it also in a funny way. At this moment, people did not focus much on his way of presentation but on interaction he had with everyone. He treated everyone there was his friends, he was telling whatever the mistake he made, what need to be done and what not to be, everything in detail but not perfect.

This made me understand that, showing up on anything will help us win one day. There were 4 presentations but this stood out, because I could easily relate with me, which gave me confidence of showing up.

Other 3 presentation was completely technical and perfect presentation, where seniors asked more doubts and also shared their work experience on it.

Presentation - 1

Six Architecture Decisions the Open Source Decisions

Dr. Sachin Garg, who has 30 years experience in IT industry, shared his insights on the current generation who builds application with the help of AI without understanding the backend working and meaning of the concept used in the projects. He also added that, understanding architecture is as important as building something.

Also had a discussing about the AI in IT industry, AI Engineer is not just prompting, we have to do some designing architecture, model, LLMS, training data, where to host the entire application, about cloud, Kubernetes, decluster and so on. Prompting is just a part in AI.

Presentation - 2

LLM as Judge & Agent as Judge

This presentation was more technical for me to understand but it was interesting to know more new tech terms.

LLM-as-a-judge is an evaluation method where a separate Large Language Model acts as an automated evaluator to grade the text or responses generated by your primary AI model or application. Instead of relying on manual human reviews or simple statistical word-overlap metrics (like BLEU or ROUGE), you provide the judge model with an input (the user prompt), the candidate output, and a scoring rubric. The judge then outputs a score and a written rationale.

Agent-as-a-judge is an advanced framework that builds upon LLM-as-a-judge. Rather than only assessing a final output, an agent-as-a-judge uses autonomous AI agents equipped with tools to monitor another agent's entire multi-step reasoning process. Because agents can actively run code, verify facts against external environments, and query system states, they are highly effective at evaluating complex, multi-step tasks (like software debugging) where the "journey" matters as much as the destination.

Presentation - 3

Handling Large tool outputs in Agentic Workflows - Oodle AI

The presenter taught about how to do cost cutting and implement new methods to make the process simpler, He was also having 20+ years of experience. He mainly focused on, when there is huge traffic hitting on a site, how to handle it effectively and maintain the billing in an appropriate way to make the process cost effective.

Overall the event taught me, to make a clear structured view of each topic you learn and have a good idea about it. Made few contacts with greater experience and also with different domain people. Also I understood that, both senior and junior have an in-depth knowledge and application oriented perspective on the work what they are doing. I could also see more college students who have strong knowledge on Cloud and AI. Inspiring session! And the overall moto was :

DO ONE THING & DO IT WELL!

Tools suggested : coder.com , kilo.ai
Book Suggested : The Cucukoo's Egg

Decoding Image Slider - Using HTML, CSS and JS

Annapoorani Kadhiravan — Tue, 07 Jul 2026 19:17:47 +0000

Technologies Used

Technology	Purpose
HTML	Creates the webpage structure
CSS	Styles the slider
JavaScript	Changes images dynamically

Important Elements

Image

<img id="sliderImage">

This image changes every time the user clicks a button.

Previous Button

<button id="previousBtn">

Moves backward.

Next Button

<button id="nextBtn">

Moves forward.

CSS Styling

Important properties:

Property	Purpose
display:flex	Align items in one row
justify-content	Center horizontally
align-items	Center vertically
object-fit	Prevent image stretching
border-radius	Rounded corners
box-shadow	Shadow effect

JavaScript Logic

JavaScript makes the slider interactive.

It performs five main tasks:

Step 1

Select HTML elements.

document.getElementById()

Step 2

Store image paths inside an array.

images

↓

Image1

Image2

Image3

Image4

Step 3

Keep track of the current image.

currentIndex

↓

0

Step 4

Update the image source.

sliderImage.src

↓

images[currentIndex]

Step 5

Respond to button clicks.

Click

↓

Increase index

↓

Show new image

Variables

Variables store data.

Example:

let currentIndex = 0;

Think of a variable as a box that stores information.

currentIndex

↓

0

Constants

const sliderImage

Used for values that never change.

Why?

Because the image element itself never changes.

Only its content changes.

Arrays

Instead of writing

image1

image2

image3

image4

we write

images[]

↓

0 → image1

1 → image2

2 → image3

3 → image4

Arrays store multiple values together.

Array Index

Arrays start from 0.

images[0]

↓

image1

images[2]

↓

image3

Functions

Functions are reusable blocks of code.

Instead of writing

Change image

five times,

we create

showImage()

Whenever needed,

showImage();

runs automatically.

Benefits:

Cleaner code
Reusable
Easier to maintain

DOM Manipulation

DOM stands for

Document Object Model

JavaScript interacts with HTML using the DOM.

HTML

↓

DOM

↓

JavaScript

Example

document.getElementById("sliderImage")

means

"Find the image in HTML."

Event Listeners

An Event Listener waits for something to happen.

Example:

Click Button

↓

Run Function

Increment Operator

currentIndex++;

means

currentIndex = currentIndex + 1;

Example

0 -> 1 -> 2 -> 3

Decrement Operator

currentIndex--;

means

currentIndex = currentIndex - 1;

Example

3 -> 2 -> 1

Conditional Statements

if()

used for decision making.

Example

if(currentIndex >= images.length)

If we reach the last image,

start from the beginning.

Image Length

images.length

returns

if there are four images.

This prevents hardcoding values.

OUTPUT

Check out my project Image Slider here : https://project1-b3f69b.gitlab.io/Image%20Slider/index.html

References :

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1
https://www.w3schools.com/howto/howto_js_slideshow.asp

Breaking down - Calculator app build using HTML, CSS and JS

Annapoorani Kadhiravan — Mon, 06 Jul 2026 19:27:17 +0000

Building of Calculator App using HTML, CSS and JS

Technology	Purpose
HTML	Creates the calculator structure
CSS	Styles the calculator interface
JavaScript	Handles calculator operations and user interactions

HTML Structure

HTML defines the layout of the calculator.

Main elements used:

Calculator container (div)
Display (input)
Buttons (button)

Example:

<div class="calculator">

    <input type="text" id="display" readonly>

    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('+')">+</button>
    <button onclick="calculate()">=</button>

</div>

Important HTML Concepts

`<div>`

Used as a container to group related elements together.

Example:

<div class="calculator">

`<input>`

Displays the mathematical expression and final result.

<input type="text" id="display" readonly>

type="text" creates a text box.
id="display" uniquely identifies the element.
readonly prevents users from typing directly into the display.

`<button>`

Represents each calculator key.

<button onclick="appendValue('7')">7</button>

When clicked, it executes a JavaScript function.

CSS Styling

CSS improves the appearance of the calculator.

Some commonly used properties include:

display
grid
padding
margin
background
border-radius
box-shadow

Example:

.buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

Here, CSS Grid arranges the buttons into four equal columns.

JavaScript Concepts

JavaScript adds functionality to the calculator.

Selecting an HTML Element

const display = document.getElementById("display");

Explanation

document represents the entire webpage.
getElementById() finds an element using its unique ID.
display stores a reference to the input box so it can be updated later.

Functions

Functions group reusable code.

Example:

function appendValue(value){
}

Whenever a number or operator button is clicked, this function is called.

Appending Values

display.value += value;

This adds the clicked button value to the existing expression.

Example:

Current Display : 45

Clicked Button : 6

Updated Display : 456

Clearing the Display

display.value = "";

This removes all characters from the display.

Example:

Before

123+45

After

(empty)

Deleting the Last Character

display.value =
display.value.slice(0,-1);

The slice() method returns a portion of a string.

Example:

Current Display

12345

After Delete

1234

Calculating the Result

display.value = eval(display.value);

The eval() function evaluates a mathematical expression stored as a string.

Example:

Expression

10+20*2

Result

50

Note: eval() is suitable for learning purposes but is not recommended for production applications due to security and performance concerns.

Error Handling

try{

}
catch{

}

The try...catch statement prevents the application from crashing when an invalid expression is entered.

Example:

Expression

5++

Output

Error

Event Handling

Buttons respond to user actions using the onclick event.

Example:

<button onclick="appendValue('9')">

Execution Flow:

User Clicks Button
        ↓
onclick Event Fires
        ↓
JavaScript Function Executes
        ↓
Display Updates

Calculator Workflow

User Opens Calculator
        ↓
HTML Creates the Interface
        ↓
CSS Styles the Calculator
        ↓
JavaScript Loads
        ↓
User Clicks a Button
        ↓
Value Appears on Display
        ↓
User Continues Entering Expression
        ↓
User Clicks "="
        ↓
Expression is Evaluated
        ↓
Result is Displayed

JavaScript Methods Used

Method	Purpose
`document.getElementById()`	Selects an HTML element by its ID
`display.value`	Gets or updates the input field value
`slice()`	Removes the last character from the expression
`eval()`	Evaluates the mathematical expression
`try...catch`	Handles invalid expressions without crashing the application

Output

Check out my Calculator Project here : https://project1-b3f69b.gitlab.io/Calculator/index.html

Reference :
https://www.tutorialspoint.com/article/real-time-calculator-using-html-css-and-javascript

Detailing SDLC

Annapoorani Kadhiravan — Mon, 06 Jul 2026 18:18:35 +0000

Have you ever wondered how applications like Amazon, WhatsApp, Instagram, Netflix, Google Pay, or your college management portal are developed?

Do developers simply start writing code?

Absolutely not!

Before even a single line of code is written, multiple teams collaborate to understand customer requirements, estimate costs, design interfaces, test functionality, deploy applications, and maintain them after release.

This entire journey is called the Software Development Life Cycle (SDLC).

📖 A Short Story Before We Begin

Imagine your family decides to build a dream home.

Would you immediately start buying cement and bricks?

Of course not.

Instead, your family would first discuss:

How many rooms are needed?
What is the budget?
Which location should be chosen?
Who will design the house?
How long will construction take?
Who will inspect the quality?

Only after answering these questions does construction begin.

Developing software works exactly the same way.

Whether you're building:

A School Website
An Online Shopping Platform
A Banking Application
A Hospital Management System
A Food Delivery App
A Multiplayer Game

Every successful software product follows a structured process known as the Software Development Life Cycle (SDLC).

🎯 What is SDLC?

Software Development Life Cycle (SDLC) is a structured process used to design, develop, test, deploy, and maintain software in an organized and efficient manner.

Instead of randomly writing code, SDLC provides a roadmap that answers four important questions:

What should be built?
Who will build it?
How will it be developed?
When should each activity happen?

Think of SDLC as the blueprint that guides a software project from idea to reality.

💡 Why Do We Need SDLC?

Without SDLC:

❌ Developers start coding without understanding requirements.

❌ Designers create interfaces the client never asked for.

❌ Testers don't know what to validate.

❌ Deadlines are missed.

❌ Budgets increase.

❌ Customers become dissatisfied.

With SDLC:

✅ Everyone knows their role.

✅ Requirements are documented.

✅ Resources are planned.

✅ Risks are minimized.

✅ Quality improves.

✅ Projects are delivered on time.

🌍 Real-World Project Used Throughout This Blog

Let's assume a school approaches an IT company with the following requirement:

"We need a Smart School Management System."

The system should include:

Student Login
Teacher Login
Parent Portal
Attendance
Fee Payment
Homework
Online Classes
Results
Notifications

We'll use this project to understand every SDLC phase.

🧭 SDLC Workflow

💡 Idea
   │
   ▼
📋 Requirement Gathering
   │
   ▼
📅 Planning
   │
   ▼
🔍 Analysis
   │
   ▼
🎨 Designing
   │
   ▼
💻 Development
   │
   ▼
🧪 Testing
   │
   ▼
🚀 Deployment
   │
   ▼
🛠 Maintenance

1️⃣ Requirement Gathering

🎯 Goal

Understand exactly what the customer wants.

No coding happens here.

Instead, this phase focuses entirely on communication.

Golden Rule: Build the right product before building the product right.

👨‍💼 Who is Responsible?

Business Analyst (BA)
Client
Product Owner (sometimes)
Project Manager (sometimes)

🧠 Skills Required for a Business Analyst

Excellent communication
Business knowledge
Analytical thinking
Convincing skills
Confidence during client meetings
Documentation skills

🗣 Example Client Conversation

Instead of accepting:

"Build a School Website."

The Business Analyst asks:

School Details

School Name?
Existing Website?
Logo?
Brand Colors?

Student Module

Student Login?
Attendance?
Homework?
Online Classes?

Teacher Module

Upload Assignments?
Manage Attendance?
Publish Results?

Parent Module

Online Fee Payment?
Notifications?
Student Progress Reports?

Technical Questions

Website?
Mobile App?
Android?
iOS?
OTP Login?
Google Login?
Payment Gateway?

The better the questions, the better the software.

📄 Outcome

The Business Analyst prepares the Business Requirement Specification (BRS) document.

A BRS contains only business requirements.

Example:

Students should log in.
Teachers should upload attendance.
Parents should pay fees online.

Notice that technologies are not mentioned.

2️⃣ Planning

Planning answers four simple questions:

What?
When?
How?
Who?

👥 Who is Involved?

Project Manager
Scrum Master
Team Leads
Testing Manager

Planning for Development and Testing usually happens separately.

📌 Resource Management

The company estimates:

Budget
Timeline
Team Size
Hardware
Software
Cloud Infrastructure
Training
Licenses

Example Team:

2 Frontend Developers
2 Backend Developers
2 Test Engineers
1 UI/UX Designer
1 DevOps Engineer

3️⃣ Analysis

Now the technical team studies every requirement.

Questions include:

Can this feature be built?
Which technologies should be used?
Are third-party APIs required?
What risks exist?

📄 BRS vs FRS

BRS	FRS
Business Requirements	Business + Technical Requirements
Written by Business Analyst	Prepared by Technical Team
Client-friendly	Developer-friendly
No technology details	Includes technologies and implementation

Example FRS:

Frontend: React

Backend: Node.js

Database: MySQL

Authentication: JWT

Cloud: AWS

4️⃣ Designing

Now designers convert ideas into visuals.

👥 Teams

UI Designer
UX Designer
Graphic Designer

Deliverables include:

Wireframes
Mockups
Prototypes
Logos
Icons
Color Themes

Only after approval does development begin.

5️⃣ Development

Now coding begins.

👨‍💻 Team

Frontend Developers
Backend Developers
Database Developers
Architects

Developers build:

User Interface
APIs
Business Logic
Database

Before sharing code, developers perform Unit Testing.

Finally, the code is pushed to Git.

6️⃣ Testing

Testing begins much earlier than many beginners think.

The QA team studies the requirements, prepares test cases, and validates every feature.

🧪 STLC

Requirement Analysis

↓

Test Case Preparation

↓

Environment Setup

↓

Execution

↓

Bug Reporting

↓

Regression Testing

↓

Closure

Popular Testing Tools

Tool	Purpose
Selenium	Web Automation
Playwright	Cross-Browser Automation
Cypress	Modern Frontend Testing
Cucumber	Test Driven Development (BDD)

🐞 Bug vs Defect

Bug

A coding mistake identified during testing.

Defect

Any mismatch between expected and actual behavior.

📌 Important Fact

There is no such thing as 100% bug-free software.

The goal is to reduce defects to an acceptable level before release.

7️⃣ Deployment

After successful testing, the application is deployed to production.

👥 Team

DevOps Engineers
Operations Team

Popular Tools

Git
Jenkins
Maven
Docker
Kubernetes
CI/CD Pipelines

8️⃣ Maintenance

Deployment is not the end.

Users continue requesting:

Bug Fixes
Security Updates
Performance Improvements
New Features

Critical bugs are always fixed before adding new features.

📚 SDLC Models You Must Know

Waterfall Model
V-Model
Agile Model
Spiral Model
Prototype Model
RAD (Rapid Application Development)
Iterative Model

Each model is suitable for different types of projects based on requirements, risk, and customer involvement.

💼 Certifications That Can Help

Project Management

PRINCE2
PMP
ITIL

Software Testing

ISTQB

These certifications are especially useful as you gain industry experience.

Interview Tips

When asked to explain SDLC:

Don't just list the phases.

For every phase, explain:

What happens?
Why is it needed?
Who performs it?
How is it carried out?
When does it begin?
What is the outcome?

Support your explanation with a single real-world example from start to finish. This demonstrates both conceptual clarity and practical understanding.

References
https://www.geeksforgeeks.org/software-engineering/software-development-life-cycle-sdlc/
https://aws.amazon.com/what-is/sdlc/
https://www.ibm.com/think/topics/sdlc
https://www.salesforce.com/in/platform/software-development/lifecycle/
https://www.geeksforgeeks.org/software-testing/software-testing-life-cycle-stlc/
https://medium.com/@jacobmilller65/stlc-explained-every-phase-of-the-software-testing-life-cycle-a36fd79b3651
https://miro.medium.com/1*aEK90rtoC5KJdocGQlEHZA.gif
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR88TbGCQDYNw4WCbAK9OK-_PH9JpPWKbTwqIW-ABLP9I1cbvU3SuM7h5yx&s=10
https://cdn.prod.website-files.com/610bb663a35dd3364ddbf08c/6156cd5701416e208d2c2392_blc-short-min.png
https://dz2cdn1.dzone.com/storage/temp/16594280-image2.jpg
https://import.pvs-studio.com/docx/terminology/SDLC_TERM/image1.png?ver=07-03-2026-10-35-21

Array Methods in JS - Part 2

Annapoorani Kadhiravan — Fri, 26 Jun 2026 03:42:58 +0000

JavaScript Array Search Methods

What are Array Search Methods?

Array Search Methods are used to:

Find the position (index) of an element.
Check whether an element exists.
Retrieve an element that satisfies a condition.
Find the index of an element that matches a condition.
Search from the beginning or the end of an array.

Common Array Search Methods

Method	Purpose	Returns
`indexOf()`	Finds the first occurrence of a value	Index or `-1`
`lastIndexOf()`	Finds the last occurrence of a value	Index or `-1`
`includes()`	Checks whether a value exists	`true` / `false`
`find()`	Finds the first matching element	Element or `undefined`
`findIndex()`	Finds the index of the first matching element	Index or `-1`
`findLast()` (ES2023)	Finds the last matching element	Element or `undefined`
`findLastIndex()` (ES2023)	Finds the last matching index	Index or `-1`

1. Array.indexOf()

Definition

The indexOf() method searches an array for a specified value and returns the index of its first occurrence.

If the value is not found, it returns -1.

Syntax

array.indexOf(searchElement)

array.indexOf(searchElement, startIndex)

Parameters

Parameter	Description
`searchElement`	Value to search for
`startIndex` (optional)	Index where the search starts

Returns

Index of the first matching element.
-1 if not found.

Internal Working

Suppose:

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

Memory:

Index

0 → Apple
1 → Orange
2 → Mango
3 → Orange

When:

fruits.indexOf("Orange");

JavaScript starts from index 0:

Apple ❌
Orange ✅ Found

Stops immediately and returns:

Example

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

console.log(fruits.indexOf("Orange"));

Output

Example - Not Found

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

console.log(fruits.indexOf("Mango"));

Output

-1

Example - Start Position

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

console.log(fruits.indexOf("Orange", 2));

Output

Real-Time Example

Suppose an e-commerce site wants to know whether a product category exists.

let categories = ["Mobiles", "Laptops", "TV"];

let position = categories.indexOf("Laptops");

console.log(position);

Output

Time Complexity [TBD]

Case	Complexity
Best	O(1)
Worst	O(n)

Common Mistake

if (arr.indexOf("Apple"))

Wrong.

If Apple is at index 0, JavaScript treats 0 as false.

Correct:

if (arr.indexOf("Apple") !== -1)

Interview Questions

Q. What does indexOf() return if the value is not found?

-1

2. Array.lastIndexOf()

Definition

The lastIndexOf() method searches from the end of the array and returns the last matching index.

Syntax

array.lastIndexOf(searchElement)

array.lastIndexOf(searchElement, fromIndex)

Parameters

Parameter	Description
`searchElement`	Value to search
`fromIndex` (optional)	Index to start searching backward

Returns

Last matching index or -1.

Internal Working

let colors = ["Red", "Blue", "Green", "Blue"];

Memory:

0 → Red
1 → Blue
2 → Green
3 → Blue

JavaScript starts from the last index:

Blue ✅

Returns:

Example

let colors = ["Red", "Blue", "Green", "Blue"];

console.log(colors.lastIndexOf("Blue"));

Output

Real-Time Example

Suppose a browser stores recently visited pages.

let history = ["Home", "Products", "Cart", "Products"];

console.log(history.lastIndexOf("Products"));

Output

Time Complexity

O(n)

Best Practice

Use lastIndexOf() when duplicate values exist and you need the most recent occurrence.

3. Array.includes()

Definition

The includes() method checks whether a value exists in an array.

It returns:

true
false

Unlike indexOf(), you don't have to compare with -1.

Syntax

array.includes(value)

array.includes(value, startIndex)

Parameters

Parameter	Description
`value`	Value to search
`startIndex` (optional)	Starting position

Returns

Boolean

Internal Working

Suppose:

let skills = ["HTML", "CSS", "JavaScript"];

JavaScript compares each element.

If found:

true

Else:

false

Example

let skills = ["HTML", "CSS", "JavaScript"];

console.log(skills.includes("CSS"));

Output

true

Example

console.log(skills.includes("Python"));

Output

false

Real-Time Example

Netflix Premium Features

let features = ["4K", "HDR", "Offline Download"];

if (features.includes("HDR")) {
    console.log("HDR Supported");
}

Output

HDR Supported

Time Complexity

O(n)

Common Mistake

Using:

indexOf() != -1

instead of

includes()

includes() is more readable when you only need to know whether the value exists.

Interview Question

Which is better?

includes()

indexOf()

Use:

includes() → existence check.
indexOf() → position required.

4. Array.find()

Definition

The find() method returns the first element that satisfies a given condition.

If no element matches, it returns undefined.

Syntax

array.find(callback)

array.find(callback, thisArg)

Callback Parameters

(element, index, array)

Parameter	Description
`element`	Current element
`index`	Current index
`array`	Original array

Returns

Matching element or undefined.

Internal Working

Suppose:

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

Callback:

num > 20

JavaScript checks:

10 ❌
25 ✅

Stops immediately.

Returns:

Example

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

let result = numbers.find(num => num > 20);

console.log(result);

Output

Real-Time Example

Find the first student who scored above 90.

let marks = [65, 72, 95, 88];

let topper = marks.find(mark => mark > 90);

console.log(topper);

Output

Time Complexity

O(n)

Common Mistake

find() returns the element, not its index.

Interview Question

Difference between find() and filter()?

find() → first matching element.
filter() → all matching elements.

5. Array.findIndex()

Definition

Returns the index of the first element satisfying the condition.

If not found:

-1

Syntax

array.findIndex(callback)

Example

let ages = [15, 18, 25, 40];

console.log(ages.findIndex(age => age >= 18));

Output

Real-Time Example

Locate the first pending order.

let orders = [
    { id: 1, status: "Completed" },
    { id: 2, status: "Pending" },
    { id: 3, status: "Pending" }
];

let index = orders.findIndex(order => order.status === "Pending");

console.log(index);

Output

Time Complexity

O(n)

6. Array.findLast() (ES2023)

Definition

Returns the last element that satisfies a condition.

Syntax

array.findLast(callback)

Example

let numbers = [12, 18, 25, 30];

let result = numbers.findLast(num => num > 20);

console.log(result);

Output

Real-Time Example

Find the latest completed transaction.

let transactions = [
    { id: 1, status: "Pending" },
    { id: 2, status: "Completed" },
    { id: 3, status: "Completed" }
];

let latest = transactions.findLast(t => t.status === "Completed");

console.log(latest);

Output

{ id: 3, status: "Completed" }

Time Complexity

O(n)

7. Array.findLastIndex() (ES2023)

Definition

Returns the index of the last matching element.

Syntax

array.findLastIndex(callback)

Example

let numbers = [5, 15, 25, 35];

console.log(numbers.findLastIndex(num => num > 20));

Output

Real-Time Example

Find the index of the last product that is out of stock.

let products = [
    { name: "Laptop", stock: 5 },
    { name: "Mouse", stock: 0 },
    { name: "Keyboard", stock: 10 },
    { name: "Monitor", stock: 0 }
];

let index = products.findLastIndex(product => product.stock === 0);

console.log(index);

Output

Time Complexity

O(n)

Summary Comparison

Method	Returns	Search Direction	Callback Required	Modifies Array
`indexOf()`	First matching index	Left → Right	❌	❌
`lastIndexOf()`	Last matching index	Right → Left	❌	❌
`includes()`	`true` / `false`	Left → Right	❌	❌
`find()`	First matching element	Left → Right	✅	❌
`findIndex()`	First matching index	Left → Right	✅	❌
`findLast()`	Last matching element	Right → Left	✅	❌
`findLastIndex()`	Last matching index	Right → Left	✅	❌

Tips

Use includes() when you only need to check if a value exists.
Use indexOf() or lastIndexOf() when you need the position of a primitive value.
Use find() or findIndex() for arrays of objects or custom conditions.
Use findLast() and findLastIndex() (ES2023) when you need to search from the end without reversing the array.
Remember that indexOf() and includes() use strict equality (===) for comparison, so searching for objects compares references, not object contents.

References:
https://www.w3schools.com/js/js_array_search.asp

JavaScript Arrays Methods - Part 1

Annapoorani Kadhiravan — Fri, 26 Jun 2026 03:33:39 +0000

What is an Array?

An Array is a special object in JavaScript used to store multiple values in a single variable.

Instead of creating separate variables,

let student1 = "John";
let student2 = "David";
let student3 = "Alex";

we can use an array:

let students = ["John", "David", "Alex"];

Each value inside the array is called an element, and every element has an index starting from 0.

Index :   0        1        2
        -------------------------
Array : | John | David | Alex |
        -------------------------

1. Array length

Definition

The length property returns the total number of elements present in an array.

It is not a function. It is a property of an array object.

It is also writable, meaning you can change the length to increase or decrease the array size.

Syntax

array.length

To modify the array length:

array.length = newLength;

Parameters

None.

Returns

Returns a number representing the total number of elements in the array.

Internal Working

Consider this array:

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

Memory representation:

Index

0 → Apple
1 → Orange
2 → Mango

length = 3

When JavaScript creates the array, it internally stores a special property:

{
  0: "Apple",
  1: "Orange",
  2: "Mango",
  length: 3
}

Whenever you access:

fruits.length

JavaScript simply returns the value stored in the length property.

It does not count the elements every time.

This makes length very fast.

Example 1

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

console.log(fruits.length);

Output

Example 2 - Updating Length

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

numbers.length = 2;

console.log(numbers);

Output

[10,20]

JavaScript removes the remaining elements.

Example 3 - Increasing Length

let colors = ["Red","Blue"];

colors.length = 5;

console.log(colors);

Output

["Red","Blue", empty × 3]

The new positions become empty slots.

Real-Time Example

Imagine an E-commerce Shopping Cart.

let cart = ["Laptop", "Mouse", "Keyboard"];

console.log("Total Items:", cart.length);

Output

Total Items: 3

Amazon and Flipkart use similar logic to display:

Cart (3 Items)

Common Mistake

let arr = [1,2,3];

console.log(arr.length());

Output

TypeError

Why?

Because length is a property, not a method.

Correct:

arr.length

Best Practices

✔ Use length inside loops.

for(let i=0;i<arr.length;i++){
    console.log(arr[i]);
}

2. Array toString()

Definition

The toString() method converts an array into a comma-separated string.

The original array is not modified.

Syntax

array.toString()

Parameters

None.

Returns

Returns a string.

Internal Working

Suppose

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

Internally JavaScript joins every element using commas.

Apple + "," +
Orange + "," +
Banana

Result

Apple,Orange,Banana

Example

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

let result = fruits.toString();

console.log(result);

Output

Apple,Orange,Banana

Example with Numbers

let numbers = [10,20,30];

console.log(numbers.toString());

Output

10,20,30

Real-Time Example

Sending array data through an API.

let selectedItems = ["Laptop","Mouse","Keyboard"];

let apiData = selectedItems.toString();

console.log(apiData);

Output

Laptop,Mouse,Keyboard

Common Mistake

Many developers think it returns an array.

Wrong.

let result = [1,2,3].toString();

console.log(typeof result);

Output

string

Best Practice

Use join() when you need a custom separator.

3. Array at()

Definition

The at() method returns the element at a specified index.

Unlike bracket notation ([]), it also supports negative indexing.

Syntax

array.at(index)

Parameters

Parameter	Description
index	Position of element

Returns

Returns the element.

Returns undefined if the index is invalid.

Internal Working

Example

let arr = ["A","B","C","D"];

0 → A
1 → B
2 → C
3 → D

When

arr.at(2)

JavaScript returns

When

arr.at(-1)

JavaScript converts

length + (-1)

4 + (-1)

=3

Returns

Example

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

console.log(fruits.at(1));

Output

Orange

Negative Index

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

console.log(fruits.at(-1));

Output

Banana

Real-Time Example

Latest Notification

let notifications = [
    "Order Placed",
    "Order Shipped",
    "Delivered"
];

console.log(notifications.at(-1));

Output

Delivered

Common Mistake

arr[-1]

Output

undefined

Correct

arr.at(-1)

4. Array join()

Definition

The join() method combines all array elements into a single string using a specified separator.

Unlike toString(), you can choose the separator.

The original array is not modified.

Syntax

array.join(separator)

Parameters

Parameter	Description
separator (optional)	String inserted between elements. Default is `","`.

Returns

A string containing all array elements joined together.

Internal Working

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

If you call:

fruits.join(" - ");

JavaScript internally performs:

"Apple" + " - " +
"Orange" + " - " +
"Banana"

Result:

Apple - Orange - Banana

Example 1

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

console.log(fruits.join());

Output

Apple,Orange,Banana

Example 2

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

console.log(fruits.join(" | "));

Output

Apple | Orange | Banana

Real-Time Example

Suppose a user selects multiple skills in a job portal.

let skills = ["JavaScript", "React", "Node.js"];

let profile = skills.join(", ");

console.log(profile);

Output

JavaScript, React, Node.js

This is commonly used to display selected skills on a profile page.

Common Mistake

Developers sometimes expect join() to return an array.

let result = ["A", "B"].join("-");

console.log(typeof result);

Output

string

What is the difference between join() and toString()?

`join()`	`toString()`
Allows a custom separator	Always uses a comma
Returns a string	Returns a string
Does not modify the array	Does not modify the array

Best Practices

✔ Use join() whenever you need a specific separator, such as spaces, hyphens, or pipes.

5. Array pop()

Definition

The pop() method removes the last element from an array and returns that removed element.

The original array is modified.

Syntax

array.pop()

Parameters

None.

Returns

Returns the removed element.

If the array is empty, it returns undefined.

Internal Working

Consider:

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

Memory before pop():

Index

0 → Apple
1 → Orange
2 → Banana
length = 3

When you call:

fruits.pop();

JavaScript:

Retrieves the last element (Banana).
Removes it from the array.
Decreases the length property by 1.
Returns the removed element.

Memory after:

Index

0 → Apple
1 → Orange
length = 2

Example

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

let removed = fruits.pop();

console.log(removed);
console.log(fruits);

Output

Banana
["Apple", "Orange"]

Real-Time Example

Imagine a browser's recent tabs list.

let recentTabs = ["Home", "Products", "Cart"];

let closedTab = recentTabs.pop();

console.log("Closed:", closedTab);
console.log(recentTabs);

Output

Closed: Cart
["Home", "Products"]

Common Mistake

let arr = [];

console.log(arr.pop());

Output

undefined

Always check if the array has elements before calling pop() if your logic depends on a removed value.

1. Array.isArray()

Note: isArray() is not an array method. It is a static method of the Array object.

Definition

The Array.isArray() method checks whether a given value is an array.

It returns:

true → if the value is an array
false → otherwise

Why do we need it?

In JavaScript:

typeof []

returns

"object"

So we cannot use typeof to determine whether a variable is an array.

Instead, JavaScript provides:

Array.isArray()

Syntax

Array.isArray(value)

Parameter

Parameter	Description
value	The value to check

Returns

Boolean

true
false

Internal Working

Suppose

let numbers = [10,20,30];

Internally JavaScript checks the object's internal type.

numbers

↓

Object

↓

Internal Array Type?

↓

Yes

↓

Return true

let person = {
    name: "John"
};

then

person

↓

Object

↓

Internal Array Type?

↓

No

↓

Return false

Example 1

let numbers = [10,20,30];

console.log(Array.isArray(numbers));

Output

true

Example 2

let student = {
    name: "David"
};

console.log(Array.isArray(student));

Output

false

Example 3

console.log(Array.isArray("JavaScript"));

console.log(Array.isArray(100));

console.log(Array.isArray(true));

Output

false
false
false

Real-Time Example

Suppose an API returns data.

function displayProducts(products){

    if(Array.isArray(products)){
        console.log("Displaying products...");
    }else{
        console.log("Invalid Data");
    }

}

displayProducts(["Laptop","Mouse"]);

Output

Displaying products...

Without checking, your application could crash when trying to iterate over non-array data.

Common Mistake

Wrong

typeof []

Output

object

Correct

Array.isArray([])

Output

true

Best Practice

Always validate API responses before looping.

if(Array.isArray(data)){
    data.forEach(item=>console.log(item));
}

2. delete Operator (Array delete)

Important: delete is not an array method. It is a JavaScript operator.

Definition

The delete operator removes an element from an array without changing the array length.

Instead of removing the index, it creates an empty slot (hole).

Syntax

delete array[index]

Parameter

Parameter	Description
index	Position of element

Returns

true

if deletion succeeds.

Internal Working

Array

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

Memory

0 → Apple

1 → Orange

2 → Banana

length = 3

After

delete fruits[1];

Memory

0 → Apple

1 → Empty

2 → Banana

length = 3

Notice

Length remains

Example

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

delete fruits[1];

console.log(fruits);

console.log(fruits.length);

Output

[
'Apple',
empty,
'Banana'
]

3

Access Deleted Value

console.log(fruits[1]);

Output

undefined

Real-Time Example

Suppose an employee leaves.

let employees = [
"John",
"David",
"Alex"
];

delete employees[1];

console.log(employees);

Instead of shifting everyone,

JavaScript leaves an empty position.

Usually, this is not what we want.

3. Array.concat()

Definition

The concat() method merges two or more arrays into a new array.

The original arrays remain unchanged.

Syntax

array1.concat(array2)

array1.concat(array2,array3,...)

Parameters

One or more arrays or values.

Returns

Returns a new merged array.

Internal Working

let a=[1,2];

let b=[3,4];

JavaScript creates

New Array

↓

Copy a

↓

Append b

↓

Return New Array

Original arrays stay unchanged.

Example

let frontend=["HTML","CSS"];

let backend=["Node","Express"];

let fullstack=frontend.concat(backend);

console.log(fullstack);

Output

["HTML","CSS","Node","Express"]

Multiple Arrays

let a=[1];

let b=[2];

let c=[3];

console.log(a.concat(b,c));

Output

[1,2,3]

Real-Time Example

Suppose a school stores students section-wise.

let sectionA=["John","David"];

let sectionB=["Alex","Sam"];

let students=sectionA.concat(sectionB);

console.log(students);

Output

["John","David","Alex","Sam"]

Common Mistake

Developers think

a.concat(b);

changes a.

Wrong.

It returns a new array.

Correct

let newArray = a.concat(b);

4. Array.copyWithin()

Definition

The copyWithin() method copies part of an array to another position within the same array.

It overwrites existing elements and modifies the original array.

Syntax

array.copyWithin(target)
array.copyWithin(target, start)
array.copyWithin(target, start, end)

Parameters

Parameter	Description
target	Index where copied values will be placed
start	Start copying from this index
end (optional)	Stop copying before this index

Returns

The modified original array.

Internal Working

let arr = [10,20,30,40,50];

Calling

arr.copyWithin(0,3);

copies elements from index 3 onward (40,50) to index 0.

Result

[40,50,30,40,50]

Example

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

numbers.copyWithin(0,3);

console.log(numbers);

Output

[40,50,30,40,50]

Real-Time Example

Suppose you maintain a fixed-size buffer for sensor readings and want to overwrite old values with recent ones.

let readings=[10,20,30,40,50];

readings.copyWithin(0,2);

console.log(readings);

Output

[30,40,50,40,50]

Best Practice

Use copyWithin() only when you intentionally want to overwrite elements in the same array.

References:
https://www.w3schools.com/js/js_array_methods.asp

JavaScript String Methods

Annapoorani Kadhiravan — Fri, 26 Jun 2026 03:01:39 +0000

A String in JavaScript is a sequence of characters used to store text.

let course = "JavaScript";

1. String length

Purpose

Returns the total number of characters in a string.

Syntax

string.length

Example

let company = "OpenAI";

console.log(company.length);

Output

Real-Time Example

Checking password length before registration.

2. String charAt()

Purpose

Returns the character at a specified index.

Syntax

string.charAt(index)

Example

let city = "Madurai";

console.log(city.charAt(3));

Output

Internal Logic

M a d u r a i
0 1 2 3 4 5 6

Index 3 contains "u".

3. String charCodeAt()

Purpose

Returns the Unicode value (UTF-16 code) of a character.

Example

let letter = "A";

console.log(letter.charCodeAt(0));

Output

More Examples

console.log("a".charCodeAt(0));

Output:

4. String codePointAt()

Purpose

Returns the Unicode code point of a character.

Useful for emojis and special symbols.

Example

let emoji = "😊";

console.log(emoji.codePointAt(0));

Output

Difference

console.log("😊".charCodeAt(0));
console.log("😊".codePointAt(0));

codePointAt() gives the actual Unicode value.

5. String concat()

Purpose

Combines two or more strings.

Example

let firstName = "Annapoorani";
let lastName = " Kadhiravan";

let fullName = firstName.concat(lastName);

console.log(fullName);

Output

Annapoorani Kadhiravan

Alternative

console.log(firstName + lastName);

6. String at()

Purpose

Returns character at a specific position.

Supports negative indexing.

Example

let language = "JavaScript";

console.log(language.at(0));
console.log(language.at(-1));

Output

J
t

7. String [ ]

Purpose

Access characters using bracket notation.

Example

let laptop = "Dell";

console.log(laptop[0]);
console.log(laptop[2]);

Output

D
l

Difference

console.log(laptop.charAt(0));
console.log(laptop[0]);

Both return same result.

8. String slice()

Purpose

Extracts part of a string.

Syntax

string.slice(start,end)

Example

let course = "JavaScript";

console.log(course.slice(0,4));

Output

Java

Negative Index

console.log(course.slice(-6));

Output

Script

9. String substring()

Purpose

Extracts characters between indexes.

Example

let company = "Microsoft";

console.log(company.substring(0,5));

Output

Micro

Difference from slice()

let str = "JavaScript";

console.log(str.slice(-6));
console.log(str.substring(-6));

Output:

Script
JavaScript

substring() doesn't support negative indexes.

10. String substr()

⚠️ Deprecated (Avoid in new projects)

Purpose

Extracts characters based on start position and length.

Example

let city = "Chennai";

console.log(city.substr(2,4));

Output

enna

Explanation

Start at index 2
Take 4 characters

11. String toUpperCase()

Purpose

Converts string to uppercase.

Example

let name = "annapoorani";

console.log(name.toUpperCase());

Output

ANNAPOORANI

12. String toLowerCase()

Purpose

Converts string to lowercase.

Example

let company = "OPENAI";

console.log(company.toLowerCase());

Output

openai

13. String isWellFormed()

Purpose

Checks whether a string contains valid Unicode characters.

Example

let text = "Hello";

console.log(text.isWellFormed());

Output

true

Use Case

Unicode validation before processing text.

14. String toWellFormed()

Purpose

Converts malformed Unicode into valid Unicode.

Example

let text = "\uD800";

console.log(text.toWellFormed());

Output

�

Use Case

Cleaning corrupted text data.

15. String trim()

Purpose

Removes spaces from beginning and end.

Example

let email = "  user@gmail.com  ";

console.log(email.trim());

Output

user@gmail.com

16. String trimStart()

Purpose

Removes spaces only from beginning.

Example

let text = "   Hello";

console.log(text.trimStart());

Output

Hello

17. String trimEnd()

Purpose

Removes spaces only from end.

Example

let text = "Hello   ";

console.log(text.trimEnd());

Output

Hello

18. String padStart()

Purpose

Adds characters at the beginning until desired length.

Example

let orderId = "123";

console.log(orderId.padStart(6,"0"));

Output

Real-Time Example

Generating invoice numbers.

19. String padEnd()

Purpose

Adds characters at the end.

Example

let code = "JS";

console.log(code.padEnd(5,"*"));

Output

JS***

20. String repeat()

Purpose

Repeats a string multiple times.

Example

let star = "*";

console.log(star.repeat(5));

Output

*****

Real-Time Example

Printing separators.

21. String replace()

Purpose

Replaces first matching occurrence.

Example

let sentence = "I love Java. Java is powerful.";

console.log(sentence.replace("Java","JavaScript"));

Output

I love JavaScript. Java is powerful.

Note

Only first occurrence is replaced.

22. String replaceAll()

Purpose

Replaces all matching occurrences.

Example

let sentence = "Java Java Java";

console.log(sentence.replaceAll("Java","JS"));

Output

JS JS JS

23. String split()

Purpose

Converts string into array.

Example

let skills = "HTML,CSS,JavaScript";

let result = skills.split(",");

console.log(result);

Output

["HTML", "CSS", "JavaScript"]

Split by Space

let sentence = "Learning JavaScript Daily";

console.log(sentence.split(" "));

Output

["Learning","JavaScript","Daily"]

Quick Comparison Table

Method	Purpose
length	Count characters
charAt()	Get character
charCodeAt()	Unicode value
codePointAt()	Unicode code point
concat()	Join strings
at()	Access character (supports negative index)
[ ]	Access character
slice()	Extract part of string
substring()	Extract text (no negative index)
substr()	Extract by length (deprecated)
toUpperCase()	Convert to uppercase
toLowerCase()	Convert to lowercase
isWellFormed()	Check valid Unicode
toWellFormed()	Fix invalid Unicode
trim()	Remove spaces both sides
trimStart()	Remove left spaces
trimEnd()	Remove right spaces
padStart()	Add characters at beginning
padEnd()	Add characters at end
repeat()	Repeat string
replace()	Replace first match
replaceAll()	Replace all matches
split()	Convert string to array

References:
https://www.w3schools.com/js/js_string_methods.asp

Arrays in JavaScript

Annapoorani Kadhiravan — Fri, 19 Jun 2026 18:13:38 +0000

Arrays are one of the most fundamental and widely used data structures in JavaScript. They allow us to store multiple values in a single variable and efficiently manipulate collections of data.

Examples of data commonly stored in arrays:

Student names
Marks
Product lists
Mobile numbers
Cities
Shopping cart items

What is an Array?

An array is a special type of object that stores multiple values in an ordered sequence.

Definition

An array is a collection of elements stored in contiguous positions and accessed using indexes.

Syntax

let arrayName = [value1, value2, value3];

Example:

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

console.log(fruits);

Output:

["Apple", "Banana", "Orange"]

Why Do We Need Arrays?

Without arrays:

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Orange";

Managing many variables becomes difficult.

Using arrays:

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

Everything is organized in one variable.

Real-Life Example

Think of a bookshelf.

Shelf

Book 0 → Java
Book 1 → Python
Book 2 → JavaScript
Book 3 → React

Similarly:

let courses = ["Java", "Python", "JavaScript", "React"];

Each element has an index.

Array Index

Array indexing starts from 0.

let colors = ["Red", "Blue", "Green"];

Index	Value
0	Red
1	Blue
2	Green

Accessing Elements

let colors = ["Red", "Blue", "Green"];

console.log(colors[0]);
console.log(colors[2]);

Output:

Red
Green

Creating Arrays

1. Array Literal (Most Common)

let numbers = [10, 20, 30];

2. Array Constructor

let numbers = new Array(10, 20, 30);

console.log(numbers);

Output:

[10, 20, 30]

Arrays Can Store Different Data Types

let data = [
    "John",
    25,
    true,
    null
];

console.log(data);

Output:

["John",25,true,null]

Length Property

Returns the number of elements.

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

console.log(fruits.length);

Output:

Modifying Elements

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

fruits[1] = "Mango";

console.log(fruits);

Output:

["Apple", "Mango", "Orange"]

CRUD Operations with Arrays

Create

let laptops = ["HP", "Dell"];

Read

console.log(laptops[0]);

Output:

HP

Update

laptops[1] = "Lenovo";

Output:

["HP","Lenovo"]

Delete

Using pop():

laptops.pop();

console.log(laptops);

Output:

["HP"]

Adding Elements

push()

Adds elements at the end.

let numbers = [10,20];

numbers.push(30);

console.log(numbers);

Output:

[10,20,30]

Real-Life Example

Adding a person to the end of a queue.

unshift()

Adds elements at the beginning.

let numbers = [20,30];

numbers.unshift(10);

console.log(numbers);

Output:

[10,20,30]

Real-Life Example

VIP person entering at the front of the queue.

Removing Elements

pop()

Removes the last element.

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

fruits.pop();

console.log(fruits);

Output:

["Apple","Banana"]

shift()

Removes the first element.

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

fruits.shift();

console.log(fruits);

Output:

["Banana","Orange"]

Real-Life Example

The first person in a queue leaves after getting service.

splice()

Adds, removes, or replaces elements.

Removing

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

numbers.splice(1,2);

console.log(numbers);

Output:

[10,40]

Adding

let numbers = [10,40];

numbers.splice(1,0,20,30);

console.log(numbers);

Output:

[10,20,30,40]

Replacing

let numbers = [10,20,30];

numbers.splice(1,1,100);

console.log(numbers);

Output:

[10,100,30]

slice()

Returns a portion of an array.

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

console.log(numbers.slice(1,4));

Output:

[20,30,40]

Real-Life Example

Cutting a cake and taking only a few slices.

Looping Through Arrays

for Loop

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

for(let i=0;i<fruits.length;i++){
    console.log(fruits[i]);
}

for...of

for(let fruit of fruits){
    console.log(fruit);
}

forEach()

fruits.forEach(function(item){
    console.log(item);
});

Searching Arrays

includes()

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

console.log(fruits.includes("Banana"));

Output:

true

indexOf()

console.log(fruits.indexOf("Orange"));

Output:

Joining Arrays

concat()

let a = [1,2];
let b = [3,4];

let result = a.concat(b);

console.log(result);

Output:

[1,2,3,4]

Spread Operator

let a = [1,2];
let b = [3,4];

let result = [...a,...b];

console.log(result);

Output:

[1,2,3,4]

Sorting Arrays

let numbers = [5,2,8,1];

numbers.sort();

console.log(numbers);

Output:

[1,2,5,8]

Reversing Arrays

let numbers = [10,20,30];

numbers.reverse();

console.log(numbers);

Output:

[30,20,10]

map()

Transforms elements.

let nums = [1,2,3];

let doubled = nums.map(function(num){
    return num * 2;
});

console.log(doubled);

Output:

[2,4,6]

Real-Life Example

Doubling every employee's salary.

filter()

Returns matching elements.

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

let result = nums.filter(function(num){
    return num > 20;
});

console.log(result);

Output:

[30,40]

Real-Life Example

Filtering students who scored above 80 marks.

reduce()

Reduces array into a single value.

let nums = [10,20,30];

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

console.log(sum);

Output:

Real-Life Example

Calculating total bill amount.

find()

Returns first matching element.

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

let result = nums.find(num => num > 20);

console.log(result);

Output:

some()

Checks whether at least one element satisfies the condition.

let nums = [10,20,30];

console.log(nums.some(num => num > 25));

Output:

true

every()

Checks whether all elements satisfy the condition.

let nums = [10,20,30];

console.log(nums.every(num => num > 5));

Output:

true

Destructuring Arrays

let colors = ["Red","Blue","Green"];

let [first, second] = colors;

console.log(first);
console.log(second);

Output:

Red
Blue

Arrays of Objects

let students = [

{
    name: "John",
    age: 21
},

{
    name: "David",
    age: 22
}

];

console.log(students[0].name);

Output:

John

Multidimensional Arrays

let matrix = [

[1,2],
[3,4]

];

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

Output:

Array Methods Summary

Method	Purpose
push()	Add at end
pop()	Remove from end
shift()	Remove from beginning
unshift()	Add at beginning
splice()	Add, remove, replace
slice()	Extract part of array
concat()	Merge arrays
sort()	Sort elements
reverse()	Reverse elements
map()	Transform elements
filter()	Filter elements
reduce()	Convert to single value
find()	Find first match
some()	Checks one condition
every()	Checks all conditions

Arrays vs Objects

Arrays	Objects
Ordered collection	Key-value pairs
Accessed by index	Accessed by keys
Stores lists	Stores entities
Example: Marks	Example: Student

Real-World Examples

Shopping Cart

let cart = [
    "Laptop",
    "Mouse",
    "Keyboard"
];

Student Marks

let marks = [90,85,95];

Cities

let cities = [
    "Madurai",
    "Chennai",
    "Coimbatore"
];

Employees

let employees = [
    "John",
    "David",
    "Sam"
];

References :
https://www.geeksforgeeks.org/javascript/javascript-arrays/
https://www.w3schools.com/js/js_arrays.asp

Constructor in JavaScript

Annapoorani Kadhiravan — Fri, 19 Jun 2026 18:07:25 +0000

One of the biggest advantages of JavaScript is the ability to create multiple objects with similar properties and behaviors. Writing each object manually becomes repetitive and inefficient.

To solve this problem, JavaScript provides Constructor Functions.

What is a Constructor in JavaScript?

A constructor is a special function used to create and initialize objects.

Think of it as a blueprint or template for creating multiple objects with similar properties.

Definition

A Constructor Function is a function used with the new keyword to create objects.

Why Do We Need Constructors?

Suppose we want to create three students.

Without constructors:

const student1 = {
    name: "John",
    age: 21,
    city: "Chennai"
};

const student2 = {
    name: "David",
    age: 22,
    city: "Madurai"
};

const student3 = {
    name: "Sam",
    age: 20,
    city: "Coimbatore"
};

This approach works, but it involves repeating code.

With Constructor

function Student(name, age, city) {
    this.name = name;
    this.age = age;
    this.city = city;
}

const student1 = new Student("John", 21, "Chennai");

const student2 = new Student("David", 22, "Madurai");

const student3 = new Student("Sam", 20, "Coimbatore");

Much cleaner and reusable.

Real-Life Example

Imagine a cookie cutter.

One mold can produce many cookies.

Cookie Mold
      ↓
Cookie 1
Cookie 2
Cookie 3
Cookie 4

Similarly,

Constructor
      ↓
Object 1
Object 2
Object 3

Syntax of Constructor Function

function Person(name, age) {

    this.name = name;

    this.age = age;

}

Creating objects:

const p1 = new Person("John", 25);

const p2 = new Person("David", 30);

Understanding `this`

Inside a constructor, this refers to the object being created.

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;

}

Creating object:

const emp1 = new Employee("John", 50000);

Object created:

{
    name: "John",
    salary: 50000
}

Real-Life Example of `this`

Suppose a teacher says:

"My classroom"

"My" refers to that teacher.

Similarly,

this.name

means

Current object's name

Creating Multiple Objects

function Car(brand, color, price) {

    this.brand = brand;

    this.color = color;

    this.price = price;

}

const car1 = new Car("BMW", "Black", 6000000);

const car2 = new Car("Audi", "White", 7000000);

const car3 = new Car("Benz", "Silver", 8000000);

console.log(car1);
console.log(car2);
console.log(car3);

Output:

{
brand: "BMW",
color: "Black",
price: 6000000
}

{
brand: "Audi",
color: "White",
price: 7000000
}

{
brand: "Benz",
color: "Silver",
price: 8000000
}

How Does the `new` Keyword Work?

When we write:

const emp = new Employee("John", 50000);

JavaScript performs four steps.

Step 1: Creates an Empty Object

{}

Step 2: `this` Points to That Object

this = {}

Step 3: Properties Are Added

{
name: "John",
salary: 50000
}

Step 4: Object Is Returned

const emp = {
name: "John",
salary: 50000
};

Visual Representation

new Employee("John",50000)

        ↓

Creates Empty Object

        ↓

this.name = "John"
this.salary = 50000

        ↓

Returns Object

        ↓

{
name:"John",
salary:50000
}

Adding Methods to Constructor

Methods can also be included.

function Student(name, age) {

    this.name = name;

    this.age = age;

    this.greet = function() {

        console.log("Hello " + this.name);

    };

}

const s1 = new Student("John", 21);

s1.greet();

Output

Hello John

Real-Life Example

Car

Properties:

Brand
Color
Price

Actions:

Start()
Stop()
Accelerate()

Actions are methods.

Example with Laptop

function Laptop(brand, ram, processor) {

    this.brand = brand;

    this.ram = ram;

    this.processor = processor;

    this.showDetails = function() {

        console.log(
            this.brand,
            this.ram,
            this.processor
        );

    };

}

const laptop1 =
new Laptop("HP", "16GB", "i7");

laptop1.showDetails();

Output

HP 16GB i7

Constructor Naming Convention

Constructor names usually start with a capital letter.

Example:

function Student() {}
function Employee() {}
function Car() {}

Not recommended:

function student() {}

Capital letters indicate that the function is intended to be used with new.

Constructor with Default Values

function Mobile(
    brand = "Samsung",
    price = 30000
) {

    this.brand = brand;

    this.price = price;

}

const m1 = new Mobile();

console.log(m1);

Output

{
brand: "Samsung",
price: 30000
}

Constructor for Employee

function Employee(id, name, salary) {

    this.id = id;

    this.name = name;

    this.salary = salary;

}

const emp1 =
new Employee(101, "John", 50000);

const emp2 =
new Employee(102, "David", 60000);

console.log(emp1);
console.log(emp2);

Constructor for Product

function Product(name, price) {

    this.name = name;

    this.price = price;

}

const p1 =
new Product("Laptop", 70000);

const p2 =
new Product("Mobile", 40000);

Constructor for Animal

function Animal(name, type) {

    this.name = name;

    this.type = type;

}

const dog =
new Animal("Tommy", "Dog");

console.log(dog);

Output

{
name:"Tommy",
type:"Dog"
}

Built-in Constructors

JavaScript provides several built-in constructors.

String

const name = new String("John");

Number

const age = new Number(25);

Boolean

const status = new Boolean(true);

Array

const numbers = new Array(10,20,30);

Object

const obj = new Object();

Date

const today = new Date();

Constructor Function vs Object Literal

Object Literal

const student = {
    name: "John",
    age: 21
};

Suitable for one object.

Constructor

function Student(name, age) {

    this.name = name;

    this.age = age;

}

const s1 = new Student("John", 21);

const s2 = new Student("David", 22);

Suitable for multiple objects.

Object Literal	Constructor Function
Single object	Multiple objects
Simple	Reusable
Less code for one object	Less repetition
No blueprint	Blueprint approach

Constructor Function vs Factory Function

Factory Function

function createStudent(name, age) {

    return {
        name,
        age
    };

}

const s1 =
createStudent("John", 21);

Constructor Function

function Student(name, age) {

    this.name = name;

    this.age = age;

}

const s1 =
new Student("John", 21);

Factory Function	Constructor Function
Uses return	Uses `new`
No `this`	Uses `this`
Creates objects	Creates objects
Easier to understand	Traditional approach

What Happens Without `new`?

function Student(name) {

    this.name = name;

}

const s1 = Student("John");

Without new, the function behaves like a normal function and may cause unexpected results.

Always write:

const s1 =
new Student("John");

Real-World Analogy

Think about a university.

Blueprint

Student Form

Contains:

Name
Age
Department

Using that form:

Student 1
Student 2
Student 3
Student 4

The form is the constructor.

Each student is an object.

References :

https://www.w3schools.com/js/js_object_constructors.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

Objects in JavaScript

Annapoorani Kadhiravan — Fri, 19 Jun 2026 17:58:21 +0000

Objects are one of the most important concepts in JavaScript. Almost everything in JavaScript revolves around objects.

Objects help us store related data together and represent real-world entities such as:

Students
Employees
Cars
Mobiles
Products
Users
Animals

What is an Object?

An object is a collection of properties and methods.

Properties store data.
Methods store functions.

Syntax

const objectName = {
    key1: value1,
    key2: value2
};

Example

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

console.log(student);

Output:

{
    name: "John",
    age: 21,
    city: "Chennai"
}

Real-Life Example

Think of a Student ID Card.

Name : John
Age  : 21
City : Chennai

All these details belong to one student.

Similarly:

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

The object stores related information together.

Why Do We Need Objects?

Without Objects

let name = "John";
let age = 21;
let city = "Chennai";

Managing multiple variables becomes difficult.

With Objects

const student = {
    name: "John",
    age: 21,
    city: "Chennai"
};

Everything is organized inside one object.

Object Terminologies

Consider:

const laptop = {
    brand: "HP",
    ram: "16GB",
    price: 70000
};

Here,

Term	Value
brand	Property
ram	Property
price	Property
"HP"	Value
"16GB"	Value
70000	Value

Creating Objects

There are several ways to create objects.

1. Object Literal

Most commonly used.

const mobile = {
    brand: "Samsung",
    model: "S25",
    price: 90000
};

console.log(mobile);

Output

{
brand: "Samsung",
model: "S25",
price: 90000
}

Real-Life Example

Writing details in a notebook.

Brand : Samsung
Model : S25
Price : 90000

Accessing Object Properties

There are two ways:

Dot Notation

const mobile = {
    brand: "Apple",
    model: "iPhone 16"
};

console.log(mobile.brand);

Output

Apple

Bracket Notation

console.log(mobile["model"]);

Output

iPhone 16

Real-Life Example

Finding a contact in your phone.

Contact Name → Mobile Number

Similarly,

mobile.brand

retrieves the value.

Adding Properties

Objects are dynamic.

const laptop = {
    brand: "Dell"
};

laptop.ram = "16GB";

console.log(laptop);

Output

{
brand: "Dell",
ram: "16GB"
}

Real-Life Example

Buying a laptop and later upgrading RAM.

Initially:

Brand : Dell

Later:

Brand : Dell
RAM : 16GB

Updating Properties

const laptop = {
    brand: "Dell",
    ram: "8GB"
};

laptop.ram = "16GB";

console.log(laptop);

Output

{
brand: "Dell",
ram: "16GB"
}

Real-Life Example

Changing your phone number in a bank account.

Old

9876543210

New

9999999999

Deleting Properties

const laptop = {
    brand: "HP",
    camera: "1080p"
};

delete laptop.camera;

console.log(laptop);

Output

{
brand: "HP"
}

Real-Life Example

Removing old information from a form.

CRUD Operations with Objects

CRUD means:

Create
Read
Update
Delete

const laptop = {
    brand: "Lenovo",
    ram: "8GB"
};

// Create
laptop.processor = "i7";

// Read
console.log(laptop.ram);

// Update
laptop.ram = "16GB";

// Delete
delete laptop.processor;

console.log(laptop);

Output

{
brand: "Lenovo",
ram: "16GB"
}

Objects with Methods

Methods are functions inside objects.

const student = {

    name: "John",

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

};

student.greet();

Output

Hello

Real-Life Example

A Car

Properties

Brand
Color
Price

Actions

Start()
Stop()
Accelerate()

Actions are methods.

Using this Keyword

const student = {

    name: "John",

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

};

student.greet();

Output

Hello John

Real-Life Example

Suppose a teacher says:

"My class"

Here "my" refers to the teacher.

Similarly,

this.name

refers to the current object.

Nested Objects

Objects can contain other objects.

const employee = {

    name: "David",

    address: {
        city: "Chennai",
        state: "Tamil Nadu"
    }

};

console.log(employee.address.city);

Output

Chennai

Real-Life Example

Company

Company
    ↓
Department
        ↓
Employee

Similarly

Object
   ↓
Nested Object

Object.keys()

Returns all keys.

const student = {
    name: "John",
    age: 22
};

console.log(Object.keys(student));

Output

["name","age"]

Object.values()

Returns values.

console.log(Object.values(student));

Output

["John",22]

Object.entries()

Returns key-value pairs.

console.log(Object.entries(student));

Output

[
["name","John"],
["age",22]
]

Looping Through Objects

Using for...in

const student = {

    name: "John",
    age: 21,
    city: "Chennai"

};

for(let key in student){
    console.log(key, student[key]);
}

Output

name John
age 21
city Chennai

Real-Life Example

Checking items in a grocery bill one by one.

Object Destructuring

Extract values easily.

const laptop = {
    brand: "HP",
    ram: "16GB"
};

const {brand, ram} = laptop;

console.log(brand);
console.log(ram);

Output

HP
16GB

Real-Life Example

Removing specific books from a shelf instead of carrying the entire shelf.

Spread Operator with Objects

const student = {
    name: "John",
    age: 20
};

const details = {
    ...student,
    city: "Madurai"
};

console.log(details);

Output

{
name:"John",
age:20,
city:"Madurai"
}

Object.freeze()

Prevents modification.

const car = {
    brand: "BMW"
};

Object.freeze(car);

car.brand = "Audi";

console.log(car);

Output

{
brand:"BMW"
}

Real-Life Example

Submitting an exam paper.

After submission, changes cannot be made.

Object.seal()

Allows updating but prevents adding or deleting properties.

const car = {
    brand: "BMW"
};

Object.seal(car);

car.brand = "Audi";

console.log(car);

Output

{
brand:"Audi"
}

Object Constructor

const person = new Object();

person.name = "John";
person.age = 22;

console.log(person);

Output

{
name:"John",
age:22
}

Factory Function

function createStudent(name, age){

    return {
        name,
        age
    };

}

let s1 = createStudent("John",21);

console.log(s1);

Output

{
name:"John",
age:21
}

Constructor Function

function Student(name, age){

    this.name = name;
    this.age = age;

}

const s1 = new Student("John",21);

console.log(s1);

Output

{
name:"John",
age:21
}

Objects vs Arrays

Objects	Arrays
Store data in key-value pairs	Store values by index
Uses property names	Uses index numbers
Represents entities	Represents collections
Accessed using keys	Accessed using indexes

Example

Object

const student = {
    name:"John",
    age:21
};

Array

const marks = [90,85,95];

Real-World Examples of Objects

Student

const student = {
    name: "John",
    age: 20,
    department: "CSE"
};

Car

const car = {
    brand: "BMW",
    color: "Black",
    price: 6000000
};

Employee

const employee = {
    id: 101,
    name: "David",
    salary: 50000
};

Product

const product = {
    name: "Laptop",
    price: 70000,
    stock: 20
};

In JavaScript, both Factory Functions and Constructor Functions are used to create objects, but they differ in the way objects are created and initialized.

Factory Function	Constructor Function
A normal function that returns an object.	A function used with the `new` keyword to create objects.
Explicitly returns an object.	Automatically returns the newly created object.
Does not use `this` or `new` (usually).	Uses `this` to assign properties and methods.
Simpler and easier to understand.	Follows object-oriented programming style.
Function name can be anything.	Conventionally starts with a capital letter.

Example of a Factory Function

function createLaptop(brand, ram) {
    return {
        brand: brand,
        ram: ram
    };
}

const laptop1 = createLaptop("Dell", "16GB");
console.log(laptop1);

Output:

{ brand: 'Dell', ram: '16GB' }

Example of a Constructor Function

function Laptop(brand, ram) {
    this.brand = brand;
    this.ram = ram;
}

const laptop1 = new Laptop("Dell", "16GB");
console.log(laptop1);

Output:

Laptop { brand: 'Dell', ram: '16GB' }

Key Difference

Factory functions create and return an object manually.
Constructor functions create objects automatically when called with the new keyword and initialize properties using this.

In short:

Factory Function → Returns an object explicitly.
Constructor Function → Uses new and this, and the object is returned automatically.

References :
https://www.geeksforgeeks.org/javascript/objects-in-javascript/
https://www.w3schools.com/js/js_objects.asp

Understanding Synchronous and Asynchronous JavaScript

Annapoorani Kadhiravan — Fri, 19 Jun 2026 17:50:45 +0000

JavaScript is a single-threaded language, meaning it executes one task at a time. However, modern applications frequently perform tasks that take time, such as:

Fetching data from APIs
Reading files
Uploading images
Waiting for user actions
Accessing databases

To handle these operations efficiently, JavaScript uses two execution models:

Synchronous Execution
Asynchronous Execution

What is Synchronous JavaScript?

In synchronous programming, code executes line by line, and each statement waits for the previous statement to finish.

Definition

Synchronous means one task at a time, in sequence.

Example

console.log("Task 1");

console.log("Task 2");

console.log("Task 3");

Output

Task 1
Task 2
Task 3

How it Works

Task 1
 ↓
Task 2
 ↓
Task 3

Each task waits for the previous one to complete.

Real-Life Example: ATM Queue

Imagine three people standing in front of an ATM.

Person 1
 ↓
Person 2
 ↓
Person 3

Person 2 cannot use the ATM until Person 1 finishes.

Similarly, synchronous JavaScript processes one operation at a time.

Another Example

function first() {
    console.log("First Function");
}

function second() {
    console.log("Second Function");
}

first();
second();

Output

First Function
Second Function

Problem with Synchronous Execution

Suppose one operation takes a long time.

console.log("Start");

for(let i = 0; i < 10000000000; i++) {

}

console.log("End");

The program becomes blocked until the loop finishes.

Execution Flow

Start
 ↓
Long Process
 ↓
End

Nothing else can happen during the long process.

What is Asynchronous JavaScript?

Asynchronous programming allows JavaScript to start a task and continue executing other tasks without waiting for that task to finish.

Definition

Asynchronous means tasks can happen independently without blocking the program.

Example

console.log("Start");

setTimeout(() => {
    console.log("Timer Finished");
}, 3000);

console.log("End");

Output

Start
End
Timer Finished

Execution Flow

Start
 ↓
setTimeout() starts
 ↓
Continue execution
 ↓
End
 ↓
Timer completes
 ↓
Timer Finished

JavaScript doesn't wait for the timer to finish.

Real-Life Example: Restaurant

Imagine ordering food in a restaurant.

Synchronous Approach

Order food
Wait 20 minutes
Eat food
Pay bill

Nothing else happens while waiting.

Asynchronous Approach

Order food
Talk to friends
Check phone
Food arrives
Eat

You continue doing other tasks while waiting.

This is how asynchronous programming works.

Why Do We Need Asynchronous Programming?

Many operations take time:

API requests
Database queries
File reading
Uploading images
Payment processing
Network communication

Without asynchronous programming, applications would freeze.

Example: API Request

console.log("Fetching data...");

fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => console.log(data));

console.log("Program continues...");

Output

Fetching data...
Program continues...
[User data]

The application continues running while data is being fetched.

Synchronous vs Asynchronous

Synchronous	Asynchronous
Executes line by line	Doesn't wait for tasks to finish
Blocking	Non-blocking
Slow for long operations	Efficient
Simple to understand	More complex
Tasks run sequentially	Tasks run independently
One task at a time	Multiple operations can overlap

Visual Comparison

Synchronous

Task 1
 ↓
Task 2
 ↓
Task 3
 ↓
Task 4

Asynchronous

Task 1
 ↓
Task 2 starts
 ↓
Task 3 executes immediately
 ↓
Task 4 executes
 ↓
Task 2 completes later

setTimeout() Example

console.log("1");

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

console.log("3");

Output

1
3
2

Why?

JavaScript sends setTimeout() to the browser's Web API and continues executing the next line.

Real-Life Example: Washing Machine

Synchronous

Start washing
Wait
Wait
Wait
Washing completes
Cook dinner

Asynchronous

Start washing
Cook dinner
Watch TV
Read book
Washing completes

Multiple activities happen simultaneously.

Ways to Handle Asynchronous Operations

JavaScript provides three main approaches:

1. Callbacks

2. Promises

3. Async/Await

1. Callback

A callback function executes after another task completes.

function fetchData(callback) {

    setTimeout(() => {

        callback();

    }, 2000);
}

fetchData(() => {

    console.log("Data received");

});

Output

Data received

Real-Life Example

Food delivery:

Order food
↓
Food prepared
↓
Delivery boy calls you

The call is like a callback function.

2. Promise

A Promise represents a value that will be available in the future.

let promise = new Promise((resolve, reject) => {

    resolve("Success");

});

promise.then(result => {

    console.log(result);

});

Output

Success

Promise States

Pending
   ↓
Resolved
or
Rejected

Real-Life Example

Online Shopping

Place order
↓
Pending
↓
Delivered (Resolved)

or

Cancelled (Rejected)

3. Async/Await

Introduced in ES2017.

It makes asynchronous code look like synchronous code.

async function getMessage() {

    return "Hello";

}

getMessage().then(console.log);

Output:

Hello

Example with await

async function fetchUser() {

    let response = await fetch(
        "https://jsonplaceholder.typicode.com/users/1"
    );

    let data = await response.json();

    console.log(data);

}

fetchUser();

Real-Life Example

Ordering Pizza

Place order
↓
Wait for preparation
↓
Receive pizza

await tells JavaScript:

"Pause this function until the result is ready, but don't block the rest of the program."

Behind the Scenes

JavaScript uses:

Call Stack

Stores function execution.

main()
 ↓
function1()
 ↓
function2()

Web APIs

Handle asynchronous tasks like:

setTimeout()
fetch()
DOM events

Callback Queue

Stores completed asynchronous tasks.

Completed Task
 ↓
Waiting Queue

Event Loop

Checks whether the Call Stack is empty and moves tasks from the queue into the stack.

Queue
 ↓
Event Loop
 ↓
Call Stack

Complete Example

console.log("Start");

setTimeout(() => {

    console.log("Inside Timer");

}, 2000);

console.log("End");

Execution

Call Stack

console.log("Start")

Output:

Start

setTimeout()

Moves to Web API

Timer starts

Next Statement

console.log("End");

Output:

End

Timer Finishes

Moves to Callback Queue

Inside Timer

Event Loop

Pushes callback into Call Stack

Output:

Inside Timer

Summary

Feature	Synchronous	Asynchronous
Execution	One after another	Independent
Waiting	Yes	No
Blocking	Blocking	Non-blocking
Speed	Slower for heavy tasks	Faster and efficient
Complexity	Simple	More advanced
Examples	Mathematical calculations	API calls, file uploads, timers

Key Takeaways

Synchronous JavaScript executes code one line at a time.
Asynchronous JavaScript allows other tasks to continue while waiting.
JavaScript is single-threaded but achieves asynchronous behavior through:
- Web APIs
- Callback Queue
- Event Loop
Asynchronous programming is implemented using:
- Callbacks
- Promises
- Async/Await

Synchronous programming is like standing in a queue and waiting for your turn.

Asynchronous programming is like placing an order online and continuing with your day while the order is being prepared.

Understanding synchronous and asynchronous execution is fundamental to mastering Promises, Async/Await, APIs, Node.js, React, and modern JavaScript development.

References :
https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/
https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript