DEV Community: Saravanan Lakshmanan

My Experience at Code on JVM Chennai: From DSA in Production to Building AI Products

Saravanan Lakshmanan — Sun, 12 Jul 2026 15:05:42 +0000

Recently, I attended the Code on JVM Chennai meetup, and it was an incredible learning experience. As someone transitioning into software development and currently learning Full Stack Java, events like these help bridge the gap between classroom learning and real-world software engineering.

The meetup featured three insightful sessions, each offering a unique perspective on modern software development.

Session 1: DSA in Production

Speaker: Hareesh Rajendran (Founder & CEO, Hayan Tech)

This session completely changed the way I think about Data Structures and Algorithms (DSA).

As beginners, we often associate DSA with coding interviews and competitive programming. But this session demonstrated how many advanced data structures quietly power the applications we use every day.

1. Bloom Filter

A Bloom Filter is a memory-efficient probabilistic data structure used to quickly determine whether an element might exist in a dataset.

Instead of storing every value, it stores compact information, making lookups extremely fast while consuming very little RAM.

Some real-world applications include:

Instagram username availability checks
Apache Cassandra
Google Chrome
Feed readers

2. HNSW Graph (Hierarchical Navigable Small World)

One of the most important data structures behind modern AI applications.

It enables extremely fast similarity searches across millions of vectors, making AI-powered search practical.

Common applications include:

Vector Databases
AI Search
Recommendation Systems
Retrieval-Augmented Generation (RAG)

One interesting takeaway was seeing how AI products rely on efficient data structures—not just machine learning models.

3. Skip List

A Skip List is an alternative to balanced trees that allows fast searching, insertion, and deletion.

Real-world usage:

Redis Sorted Sets
Rate Limiting
RocksDB Storage Engine

4. LSM Tree (Log-Structured Merge Tree)

An LSM Tree is designed for systems that perform a huge number of write operations.

It is widely used in databases and storage systems because it optimizes write performance.

Applications include:

Storage Engines
Databases
Live Streaming Systems

5. Consistent Hashing

Consistent Hashing distributes requests across multiple servers while minimizing data movement whenever servers are added or removed.

It is heavily used in distributed systems such as:

Akamai CDN
Netflix
Amazon DynamoDB
Discord Routing

The speaker also recommended exploring the Netflix Engineering Blog to understand how these concepts are used in production.

6. Hexagonal Grid (H3)

A geospatial indexing system that divides maps into hexagonal cells for efficient location-based processing.

Applications include:

Ola
Uber
Swiggy
Zomato

The recommendation to read the H3 Engineering Blogs was another valuable takeaway.

7. HyperLogLog

HyperLogLog is a probabilistic algorithm used to estimate the number of unique elements while using very little memory.

Instead of counting every item exactly, it provides an approximate count with impressive accuracy.

Examples include:

Reddit
Analytics Dashboards
Google BigQuery

My Biggest Takeaway

This session completely changed my perspective on DSA.

It's not just about solving interview problems—it's about building systems capable of serving millions of users efficiently.

Session 2: Uncovering Ideas Worth Building in the AI Era

Speaker: Agnel John (Founder & CEO, Error Makes Clever)

This session shifted the focus from technology to entrepreneurship.

One of the strongest messages was that building a product alone is never enough. The real challenge is creating something that solves a genuine problem and that people are willing to pay for.

Some important takeaways were:

Build your idea instead of waiting for the "perfect time."
Learn how your product can generate revenue.
A product by itself is never your competitive advantage—execution, customer understanding, and continuous improvement matter much more.
Before building something big, find someone within your own circle who is willing to pay for your solution.
Once you've validated your idea, commit fully and keep improving it.
Getting your first paying customer is a significant milestone because it proves that you're solving a real problem.

As someone still learning development, this session reminded me that writing code is only one part of building successful software. Understanding users and solving meaningful problems are equally important.

Session 3: Streaming Large File Downloads in Java

Speaker: Kalaivani Mohan (Software Engineer, IBM)

The final session focused on an important backend engineering concept—streaming large file downloads.

A common mistake is trying to load an entire large file into memory before sending it to the user. This can consume excessive RAM and affect application performance.

Instead, Java applications use streaming, where files are sent in smaller chunks.

This approach offers several benefits:

Lower memory consumption
Better application performance
Faster response times
Improved scalability

Streaming is commonly used while serving:

Videos
PDF documents
Reports
Cloud storage downloads
Enterprise applications

Although the concept sounds simple, it's an excellent example of how small implementation decisions can make applications significantly more efficient.

Final Thoughts

Each session taught me something different.

The first session showed how advanced data structures power large-scale systems used by millions of users.

The second session reminded me that successful products are built around real customer problems—not just great technology.

The third session demonstrated how backend engineering techniques improve performance and scalability.

As someone currently learning Full Stack Development, attending this meetup broadened my understanding of software engineering beyond coding tutorials and classroom lessons.

A heartfelt thank you to the organizers, speakers, and everyone involved in making Code on JVM Chennai such an informative and inspiring event.

I'm looking forward to attending more tech meetups, learning from experienced professionals, and continuing my journey as a software developer.

Every meetup is another step forward in the learning journey.

Callback, Callback Hell & Promise in JavaScript

Saravanan Lakshmanan — Thu, 09 Jul 2026 17:31:57 +0000

What is a Callback?

A callback is simply a function passed as an argument to another function so that it can be executed later.

Example:

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

function processUser(callback) {
    callback("Saravanan");
}

processUser(greet);

Output

Hello Saravanan

Here, greet is the callback function.

Why do we need callbacks?

Some tasks take time to complete.

For example:

Downloading data from a server
Reading a file
Waiting for a timer
Fetching API data

JavaScript doesn't stop the entire program while waiting.

Instead, it says:

"Continue doing other work. When this task finishes, I'll call the callback."

Example:

console.log("Start");

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

console.log("End");

Output

Start
End
Task Completed

Notice that JavaScript didn't wait for 2 seconds before printing End.

The Problem: Callback Hell

Imagine we're building software using the SDLC process.

The order should be:

Planning
↓
Design
↓
Development
↓
Testing
↓
Deployment

Using callbacks:

function planning(callback) {
    setTimeout(() => {
        console.log("Planning Completed");
        callback();
    }, 1000);
}

function design(callback) {
    setTimeout(() => {
        console.log("Design Completed");
        callback();
    }, 1000);
}

function development(callback) {
    setTimeout(() => {
        console.log("Development Completed");
        callback();
    }, 1000);
}

function testing(callback) {
    setTimeout(() => {
        console.log("Testing Completed");
        callback();
    }, 1000);
}

function deploy() {
    console.log("Deployment Completed");
}

planning(() => {
    design(() => {
        development(() => {
            testing(() => {
                deploy();
            });
        });
    });
});

Although the program works, there's a problem.

The code keeps moving further to the right.

planning(
    design(
        development(
            testing(
                deploy()
            )
        )
    )
)

This deeply nested structure is called Callback Hell.

Problems with Callback Hell:

Difficult to read
Difficult to debug
Difficult to maintain
Becomes messy as the project grows

Solution: Promise

A Promise represents the result of an asynchronous operation.

It can be in one of three states:

Pending
Fulfilled (Resolved)
Rejected

Creating a Promise:

const planning = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log("Planning Completed");
            resolve();
        }, 1000);
    });
};

The Promise either calls:

resolve();

when successful,

reject();

when something goes wrong.

Promise Chaining

Now we can execute tasks one after another without nesting.

planning()
    .then(() => design())
    .then(() => development())
    .then(() => testing())
    .then(() => deploy())
    .catch(() => console.log("Something went wrong."));

This code is much easier to read.

It clearly says:

Planning
→ Design
→ Development
→ Testing
→ Deploy

Even Cleaner: async/await

JavaScript introduced async and await to make Promise-based code look more like normal synchronous code.

async function SDLC() {
    try {
        await planning();
        await design();
        await development();
        await testing();
        await deploy();
    } catch (error) {
        console.log(error);
    }
}

SDLC();

This is usually easier to understand because the steps appear in the same order they execute.

Callback Hell vs Promise

Callback Hell	Promise
Deeply nested code	Flat and readable code
Hard to maintain	Easy to maintain
Difficult error handling	Centralized error handling using `.catch()`
Less readable as the project grows	Easier to understand and extend

References:
https://www.w3schools.com/js/js_promise.asp
https://www.geeksforgeeks.org/javascript/javascript-promise/

JavaScript Closures

Saravanan Lakshmanan — Wed, 08 Jul 2026 09:54:26 +0000

Closure

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

In simple words:

A closure allows a function to "remember" the environment in which it was created.

This is one of JavaScript's most powerful features and is commonly used for data privacy, maintaining state, callbacks, and event handling.

Why Do We Need Closures?

Normally, local variables exist only while a function is running.

Once the function finishes execution, its local variables are destroyed.

But sometimes we need those variables even after the function has finished.

Closures solve this problem by allowing the inner function to remember those variables.

Basic Example

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

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

    return inner;
}

const greet = outer();

greet();

Output

Hello

Step-by-Step Execution

Step 1

outer() is called.

let message = "Hello";

A local variable is created.

Step 2

Inside outer(), another function is created.

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

The inner() function can access message because it is inside outer().

Step 3

Instead of calling inner(), we return it.

return inner;

Step 4

The returned function is stored.

const greet = outer();

Although outer() has finished execution, JavaScript does not destroy the variable message.

Why?

Because the returned function still needs it.

Step 5

Now we call:

greet();

Output:

Hello

The inner function still remembers the variable.

This memory is called a closure.

Visual Representation

outer()
│
├── message = "Hello"
│
└── return inner()
         │
         ▼
    greet()
         │
         ▼
console.log(message)
         │
         ▼
      "Hello"

Even though outer() has finished, message is still available because inner() remembers it.

Example 2: Counter

function counter() {

    let count = 0;

    return function () {
        count++;
        console.log(count);
    };

}

const increment = counter();

increment();
increment();
increment();

Output

1
2
3

How It Works

When counter() runs,

count = 0

The returned function remembers count.

Each time the function is called,

count++;

The value increases instead of resetting.

Without a closure, count would become 0 every time.

Example 3: Private Variable

function bankAccount() {

    let balance = 5000;

    return function () {
        console.log(balance);
    };

}

const checkBalance = bankAccount();

checkBalance();

Output

The variable balance cannot be accessed directly.

console.log(balance);

Output

ReferenceError

Only the returned function can access it.

This provides data privacy.

Closure with Parameters

function multiply(x) {

    return function(y) {
        return x * y;
    };

}

const double = multiply(2);

console.log(double(5));

Output

Here,

x = 2

is remembered by the returned function.

Later,

2 × 5 = 10

References:
https://www.geeksforgeeks.org/javascript/closure-in-javascript/
https://www.w3schools.com/js/js_function_closures.asp

JavaScript DOM Basics: Selecting, Accessing, Adding & Deleting Elements

Saravanan Lakshmanan — Fri, 03 Jul 2026 10:26:50 +0000

1️⃣ Selecting an Element

Selecting means finding an HTML element so JavaScript can work with it.

HTML

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

<p class="text">Hello</p>

<button>Click Me</button>

JavaScript

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

Now JavaScript knows which element you want to work with.

Common Selection Methods

// By ID
document.getElementById("title");

// By Class
document.getElementsByClassName("text");

// By Tag
document.getElementsByTagName("button");

// First matching element
document.querySelector(".text");

// All matching elements
document.querySelectorAll(".text");

💡 Real-life analogy:

Imagine a library with thousands of books.

If someone asks you to bring the JavaScript book, the first thing you do is find it.

That process is called Selecting.

2️⃣ Accessing an Element

Once you've selected an element, you can access its information.

HTML

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

JavaScript

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

console.log(heading.innerText);

Output

Welcome

You can also access other properties:

heading.id;

heading.className;

heading.style.color;

heading.tagName;

Think of it this way

Selecting ➜ Finds the element

Accessing ➜ Reads information from the element

💡 Real-life analogy:

You search for your friend's contact (Selecting).

Then you check their phone number or email (Accessing).

3️⃣ Adding an Element

Adding means creating a new HTML element and inserting it into the webpage.

Step 1: Create an element

const para = document.createElement("p");

This creates:

<p></p>

But it's not visible yet.

Step 2: Add content

para.innerText = "Hello Everyone";

Now it becomes

<p>Hello Everyone</p>

Still not visible.

Step 3: Add it to the webpage

document.body.appendChild(para);

Now your page becomes

<body>

<h1>My Website</h1>

<p>Hello Everyone</p>

</body>

The paragraph now appears on the webpage.

💡 Real-life analogy:

Buying a new chair doesn't automatically place it in your room.

You first buy it (create), then bring it into your room (append).

4️⃣ Deleting an Element

Deleting means removing an element from the webpage.

HTML

<p id="msg">Hello</p>

JavaScript

const para = document.getElementById("msg");

para.remove();

The paragraph disappears from the page.

Another Example

<ul>
    <li>Apple</li>
    <li id="banana">Banana</li>
    <li>Mango</li>
</ul>

document.getElementById("banana").remove();

Result

<ul>
    <li>Apple</li>
    <li>Mango</li>
</ul>

💡 Real-life analogy:

Your room has a chair, table, and fan.

If you remove the chair, the room still exists—but the chair is gone.

That's exactly what .remove() does.

Complete Flow

HTML

<body>

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

</body>

Step 1 — Select

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

Step 2 — Access

console.log(heading.innerText);

Output

Welcome

Step 3 — Add

const p = document.createElement("p");

p.innerText = "Learning DOM";

document.body.appendChild(p);

Now the page becomes

<h1>Welcome</h1>

<p>Learning DOM</p>

Step 4 — Delete

p.remove();

Back to

<h1>Welcome</h1>

Quick Summary

Concept	Meaning	Example
Selecting	Find an HTML element	`document.getElementById("title")`
Accessing	Read information from the selected element	`heading.innerText`
Adding	Create and insert a new element	`createElement()` + `appendChild()`
Deleting	Remove an element from the webpage	`element.remove()`

References:
https://www.w3schools.com/jsreF/met_element_remove.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
https://www.geeksforgeeks.org/javascript/how-to-remove-an-html-element-using-javascript/

JavaScript DOM Mini Projects

Saravanan Lakshmanan — Wed, 01 Jul 2026 17:24:52 +0000

DOM Mini Project #1 – Bulb ON/OFF Toggle

📝 Project Overview

This beginner-friendly DOM project simulates a simple Bulb ON/OFF Toggle using JavaScript. Clicking the button switches the bulb image between ON and OFF states while updating the button text accordingly. This project helped me understand DOM manipulation, event handling, conditional statements, and dynamically updating HTML elements.

Source Code

<body>
    <img id = "bulb" src = "https://www.w3schools.com/js/pic_bulboff.gif">
    <button id = "btn" onclick="bulbToggle()">ON</button>

    <script>
        function bulbToggle(){
            if(document.getElementById("btn").innerText ==="ON"){
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulbon.gif";
            document.getElementById("btn").innerText = "OFF";

            }else{
            document.getElementById("bulb").src = "https://www.w3schools.com/js/pic_bulboff.gif";
            document.getElementById("btn").innerText = "ON";
            }
        }
    </script>
</body>

Output

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/js-mini_projects.html

DOM Mini Project #2 – Counter App

📝 Project Overview

This Counter App is a beginner-friendly JavaScript project that allows users to increment, decrement, and reset a counter. It helped me practice variables, functions, DOM manipulation, conditional statements, and keeping the UI synchronized with application state.

Source Code

<body>
    <h2>Count : <span id="count"></span></h2>
    <button id="incrementBtn" onclick="increment()">+</button>
    <button id="decrementBtn" onclick="decrement()">-</button>
    <button id="resetBtn" onclick="reset()">reset</button>
    <h1>Counter App</h1>

    <script>
        let count = 0;
        let countElement = document.getElementById("count");
        countElement.innerText = count;

        function updateCount() {
            countElement.innerText = count;
        }

        function increment() {
            count++;
            updateCount();
        }

        function decrement() {
            if (count > 0) {
                count--;
                updateCount();
            }
        }

        function reset() {
            count = 0;
            updateCount();
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/counterapp.html

DOM Mini Project #3 – Live Character Counter

📝 Project Overview

This Live Character Counter updates the character count instantly as the user types into a textarea. It helped me understand real-time event handling, DOM updates, and working with string properties in JavaScript.

Source Code:

<body>
    <h1>Live Character Counter</h1>

    <textarea id="text" oninput="textArea()"></textarea>

    <p>Characters : <span id="counter"></span></p>

    <script>
        let counterElement = document.getElementById("counter");
        let textElement = document.getElementById("text");

        counterElement.innerText = textElement.value.length;

        function textArea() {
            counterElement.innerText = textElement.value.length;
        }
    </script>
</body>

Output:

GitLab Pages:
https://front-end-3d9f55.gitlab.io/javascript/liveCharCount.html

JavaScript DOM (Document Object Model)

Saravanan Lakshmanan — Mon, 29 Jun 2026 15:59:02 +0000

What is DOM?

DOM (Document Object Model) is a programming interface provided by the browser that represents an HTML document as a tree of objects.

It allows JavaScript to access, modify, create, and delete HTML elements dynamically.

In simple words:

DOM is the bridge between HTML and JavaScript.

Without the DOM, JavaScript cannot change the content or appearance of a webpage after it has loaded.

How DOM Works

Suppose we have the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Example</title>
</head>
<body>

<h1>Hello World</h1>

<p>Learning JavaScript DOM</p>

<button>Click Me</button>

</body>
</html>

The browser converts this HTML into a tree structure:

Document
│
└── html
    │
    ├── head
    │   └── title
    │
    └── body
        ├── h1
        ├── p
        └── button

JavaScript accesses these nodes through the DOM.

Why Do We Use DOM?

DOM allows JavaScript to:

Read HTML elements
Change text content
Change styles
Change attributes
Create new elements
Remove elements
Handle user events
Build interactive web pages

Selecting Elements

1. getElementById()

Selects one element using its id.

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

2. getElementsByClassName()

Returns all elements having the same class.

let items = document.getElementsByClassName("card");

Returns an HTMLCollection.

3. getElementsByTagName()

Selects elements using their tag.

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

4. querySelector()

Returns the first matching element.

document.querySelector(".box");

document.querySelector("#title");

document.querySelector("p");

5. querySelectorAll()

Returns every matching element.

document.querySelectorAll(".card");

Returns a NodeList.

Changing Content

innerText

Changes visible text.

heading.innerText = "Welcome";

innerHTML

Changes HTML content.

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

textContent

Returns all text including hidden text.

heading.textContent

Working with Form Elements

value

Used for input and textarea.

let username = input.value;

Example:

textbox.value = "";

Clears the textbox.

Changing Attributes

src

image.src = "image.png";

href

link.href = "https://example.com";

id

element.id = "header";

className

element.className = "active";

Styling Elements

element.style.color = "red";

element.style.backgroundColor = "yellow";

element.style.fontSize = "24px";

element.style.display = "none";

Creating Elements

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

Adding Elements

parent.appendChild(p);

Removing Elements

element.remove();

Events in DOM

Events are actions performed by users.

Examples:

click
dblclick
input
change
mouseover
mouseout
keydown
keyup
submit
focus
blur

Event Example

<button onclick="show()">Click</button>

function show(){
    alert("Button clicked");
}

Reading Input

<input id="name">

let value = document.getElementById("name").value;

Updating Text

document.getElementById("result").innerText = value;

References:
https://www.w3schools.com/js/js_htmldom.asp
https://www.geeksforgeeks.org/javascript/dom-document-object-model/

My First Java Community Event – Java June

Saravanan Lakshmanan — Sat, 27 Jun 2026 13:28:11 +0000

Today, I attended my very first Java June community event, and it turned out to be one of the most insightful learning experiences in my programming journey.

The event brought together around 60–80 developers, students, and Java enthusiasts, creating an amazing environment to learn, network, and exchange ideas with people who genuinely enjoy building software.

The Session That Changed My Perspective

One of the keynote sessions was delivered by Mahati ChandraMohan, a Senior Software Engineer at PayPal with 14 years of industry experience.

Instead of starting with code, she started with a simple story.

Imagine two developers are asked to build a payment system that supports UPI, Net Banking, and Credit/Debit Cards.

Both developers successfully complete the client's requirements.

But one developer goes a step further.

Instead of tightly coupling the payment logic, they design the system in a way that if a new payment method—say Bitcoin, Digital Wallets, or any future payment option—needs to be introduced, it can be added with minimal changes to the existing code.

That simple story completely changed the way I think about software development.

I realized that writing code is not just about making it work today.

It's about designing software that continues to work tomorrow, next year, and even ten years from now.

My Biggest Takeaways

Write code that is easy to extend.
Avoid modifying core business logic whenever possible.
Reduce the risk of introducing bugs while adding new features.
Design software for change—not just for today's requirements.
Maintainability is just as important as functionality.

One statement that really stayed with me was the importance of treating legacy code with care. Great software isn't rewritten every time a requirement changes—it evolves through good design.

This discussion also made me realize why Design Patterns are such an important skill for software engineers. They are not just interview topics; they are proven solutions to recurring software design problems.

The speaker also recommended reading the "Design Patterns: Elements of Reusable Object-Oriented Software" (Gang of Four) book, which has definitely been added to my reading list.

Java + AI

Another interesting session introduced the growing AI ecosystem within Java.

Some of the technologies discussed included:

Spring AI
LangChain4j
Ollama
Deep Java Library (DJL)

It was exciting to see how the Java ecosystem is evolving to support modern AI application development.

More Than Technical Talks

The event also included quizzes, discussions, and opportunities to interact with developers working in the industry.

As someone who is still learning, being able to speak with experienced developers and hear about real-world software engineering was incredibly motivating.

Final Thoughts

I walked into the event expecting to learn a few Java concepts.

I walked out with a completely different perspective on software engineering.

Programming is not just about writing code that solves a problem.

It's about writing code that is maintainable, scalable, easy to extend, and resilient to future changes.

Today reminded me that becoming a better developer isn't only about learning new languages or frameworks—it's about learning how experienced engineers think.

Looking forward to attending more community events, learning from professionals, and continuing this journey.

Numeric Sort Methods in JavaScript

Saravanan Lakshmanan — Thu, 25 Jun 2026 16:08:46 +0000

1. Numeric Sort

Numeric sorting arranges numbers in ascending or descending order.

JavaScript's default sort() method treats values as strings, which can produce unexpected results.

Problem with Default sort()

const numbers = [100, 25, 8, 50];

numbers.sort();

console.log(numbers);

Output

[100, 25, 50, 8]

This happens because JavaScript converts numbers into strings and performs lexicographic (dictionary) sorting.

JavaScript compares:

"100"
"25"
"50"
"8"

instead of actual numeric values.

Numeric Sort (Ascending)

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => a - b);

console.log(numbers);

Output

[8, 25, 50, 100]

How It Works

a - b

Negative → a comes before b
Positive → b comes before a
Zero → no change

Numeric Sort (Descending)

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => b - a);

console.log(numbers);

Output

[100, 50, 25, 8]

Real-World Example

const marks = [78, 95, 66, 82, 99];

marks.sort((a, b) => b - a);

console.log(marks);

Output

[99, 95, 82, 78, 66]

Useful for:

Ranking students
Sorting scores
Sorting prices
Sorting ages

2. Random Sort

Random sorting is commonly used to shuffle array elements.

Example

const numbers = [1, 2, 3, 4, 5];

numbers.sort(() => Math.random() - 0.5);

console.log(numbers);

Possible Output

[3, 1, 5, 2, 4]

Another run may produce:

[5, 2, 1, 4, 3]

How It Works

Math.random()

returns a value between:

0 and 1

Example:

0.15
0.87
0.43

Subtracting 0.5 creates positive and negative values:

Math.random() - 0.5

Possible results:

-0.35
0.27
-0.12

These random positive and negative values cause sort() to rearrange elements unpredictably.

Use Cases

Quiz applications
Card games
Random questions
Random item selection
Entertainment apps

3. Math.min()

Math.min() returns the smallest value from a list of numbers.

Syntax

Math.min(value1, value2, value3, ...)

Example

console.log(
    Math.min(10, 20, 5, 30)
);

Output

Using Math.min() with Arrays

Arrays must be expanded using the spread operator.

const numbers = [10, 20, 5, 30];

console.log(
    Math.min(...numbers)
);

Output

How Spread Operator Works

...numbers

converts:

[10, 20, 5, 30]

into:

10, 20, 5, 30

Therefore JavaScript sees:

Math.min(10, 20, 5, 30)

Real-World Example

const temperatures =
    [32, 28, 25, 30, 35];

console.log(
    Math.min(...temperatures)
);

Output:

4. Math.max()

Math.max() returns the largest value from a list of numbers.

Syntax

Math.max(value1, value2, value3, ...)

Example

console.log(
    Math.max(10, 20, 5, 30)
);

Output

Using Math.max() with Arrays

const numbers = [10, 20, 5, 30];

console.log(
    Math.max(...numbers)
);

Output

Real-World Example

const sales =
    [5000, 8500, 3000, 12000];

console.log(
    Math.max(...sales)
);

Output:

Useful for finding:

Highest salary
Highest marks
Highest sales
Highest temperature

5. Home-Made Min()

Interviewers often ask:

Find the minimum value without using Math.min().

This helps test problem-solving skills and loop understanding.

Logic

Assume first element is minimum.
Compare remaining elements.
Update minimum whenever a smaller value is found.

Example

const numbers = [10, 11, 1, 100, 89];

let min = numbers[0];

for(let i = 1; i < numbers.length; i++){

    if(numbers[i] < min){
        min = numbers[i];
    }

}

console.log(min);

Output

Dry Run

Array:

[10, 11, 1, 100, 89]

Initially:

min = 10

Compare:

11 < 10

False

Compare:

1 < 10

True

Update:

min = 1

Remaining values are larger.

Final answer:

Real-World Use Case

const productPrices =
    [250, 500, 120, 900, 300];

Finding the cheapest product.

6. Home-Made Max()

Another common interview question:

Find the maximum value without using Math.max().

Logic

Assume first element is maximum.
Compare remaining elements.
Update maximum whenever a larger value is found.

Example

const numbers = [10, 11, 1, 100, 89];

let max = numbers[0];

for(let i = 1; i < numbers.length; i++){

    if(numbers[i] > max){
        max = numbers[i];
    }

}

console.log(max);

Output

Dry Run

Array:

[10, 11, 1, 100, 89]

Initially:

max = 10

Compare:

11 > 10

True

Update:

max = 11

Compare:

1 > 11

False

Compare:

100 > 11

True

Update:

max = 100

Final answer:

Real-World Use Case

const salaries =
    [25000, 40000, 55000, 32000];

Finding the highest salary.

References:
https://www.w3schools.com/js/js_array_sort.asp
https://www.geeksforgeeks.org/javascript/javascript-array-methods/

Alphabetic Array Sort in JavaScript

Saravanan Lakshmanan — Thu, 25 Jun 2026 14:56:28 +0000

1. Array sort()

The sort() method sorts the elements of an array.

Syntax

array.sort(compareFunction)

The compareFunction determines the sorting order.

Sorting Strings

When no compare function is provided, JavaScript sorts values alphabetically (lexicographically).

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

fruits.sort();

console.log(fruits);

Output

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

Sorting Numbers in Ascending Order

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => a - b);

console.log(numbers);

Output

[8, 25, 50, 100]

Sorting Numbers in Descending Order

const numbers = [100, 25, 8, 50];

numbers.sort((a, b) => b - a);

console.log(numbers);

Output

[100, 50, 25, 8]

Important Characteristics

Modifies the original array.
Returns the same array after sorting.
Supports custom sorting through a compare function.
Can sort numbers, strings, dates, and objects.

2. Array reverse()

The reverse() method reverses the order of elements in an array.

Syntax

array.reverse()

Example

const values = [10, 20, 30, 40];

values.reverse();

console.log(values);

Output

[40, 30, 20, 10]

Important Characteristics

Modifies the original array.
Returns the same reversed array.
Does not create a new array.
Useful for displaying data in reverse order.

Combining sort() and reverse()

const numbers = [50, 10, 30, 20];

numbers.sort((a, b) => a - b);
numbers.reverse();

console.log(numbers);

Output

[50, 30, 20, 10]

3. Array toSorted()

toSorted() is a modern array method introduced in ES2023.

It creates a sorted copy of the array without changing the original array.

Syntax

array.toSorted(compareFunction)

Example

const numbers = [50, 10, 30, 20];

const sortedNumbers =
    numbers.toSorted((a, b) => a - b);

console.log(sortedNumbers);
console.log(numbers);

Output

[10, 20, 30, 50]

[50, 10, 30, 20]

Important Characteristics

Does not modify the original array.
Returns a new sorted array.
Useful when immutability is required.
Commonly used in React and modern JavaScript applications.

sort() vs toSorted()

Feature	sort()	toSorted()
Modifies Original Array	Yes	No
Returns Same Array	Yes	No
Returns New Array	No	Yes

4. Array toReversed()

toReversed() is another ES2023 method.

It creates a reversed copy of the array while preserving the original array.

Syntax

array.toReversed()

Example

const values = [10, 20, 30, 40];

const reversedValues =
    values.toReversed();

console.log(reversedValues);
console.log(values);

Output

[40, 30, 20, 10]

[10, 20, 30, 40]

Important Characteristics

Does not modify the original array.
Returns a new reversed array.
Ideal when original data must remain unchanged.

reverse() vs toReversed()

Feature	reverse()	toReversed()
Modifies Original Array	Yes	No
Returns Same Array	Yes	No
Returns New Array	No	Yes

5. Sorting Object Arrays

In real-world applications, arrays often contain objects rather than simple values.

Example:

const students = [
    { name: "Saravanan", year: 12 },
    { name: "Raj", year: 20 },
    { name: "Priya", year: 5 }
];

Object arrays are sorted using a compare function that specifies which property should be used for comparison.

Sorting by Number Property (Ascending)

students.sort(
    (a, b) => a.year - b.year
);

Output

[
  { name: "Priya", year: 5 },
  { name: "Saravanan", year: 12 },
  { name: "Raj", year: 20 }
]

Sorting by Number Property (Descending)

students.sort(
    (a, b) => b.year - a.year
);

Output

[
  { name: "Raj", year: 20 },
  { name: "Saravanan", year: 12 },
  { name: "Priya", year: 5 }
]

Sorting by String Property

For string properties, localeCompare() is commonly used.

Ascending Order (A–Z)

students.sort(
    (a, b) =>
        a.name.localeCompare(b.name)
);

Output

[
  { name: "Priya", year: 5 },
  { name: "Raj", year: 20 },
  { name: "Saravanan", year: 12 }
]

Descending Order (Z–A)

students.sort(
    (a, b) =>
        b.name.localeCompare(a.name)
);

Output

[
  { name: "Saravanan", year: 12 },
  { name: "Raj", year: 20 },
  { name: "Priya", year: 5 }
]

Common Object Sorting Examples

Sort Employees by Salary

employees.sort(
    (a, b) => a.salary - b.salary
);

Sort Products by Price

products.sort(
    (a, b) => a.price - b.price
);

Sort Users by Name

users.sort(
    (a, b) =>
        a.name.localeCompare(b.name)
);

References:
https://www.w3schools.com/js/js_array_sort.asp
https://www.geeksforgeeks.org/javascript/javascript-array-methods/

JavaScript Array Methods: forEach(), map(), and flatMap()

Saravanan Lakshmanan — Wed, 24 Jun 2026 09:46:49 +0000

====================================================

1. forEach()

What is forEach()?

forEach() is used to execute a function once for every element in an array.

It is mainly used when you want to:
• Print values
• Update variables
• Call another function
• Perform some action for every element

Important:
forEach() does NOT return a new array.

Syntax

array.forEach(function(value, index, array) {
// code
});

Parameters:

value -> Current element
index -> Current index
array -> Original array

Example 1

let numbers = [10, 20, 30];

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

Output:
10
20
30

Example 2

let numbers = [10, 20, 30];

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

Output:
10 0 [10,20,30]
20 1 [10,20,30]
30 2 [10,20,30]

Internal Logic of forEach()

let numbers = [10,20,30];

function display(value){
console.log(value);
}

for(let i = 0; i < numbers.length; i++){
display(numbers[i]);
}

This is approximately how forEach() works internally.

Return Value of forEach()

let numbers = [10,20,30];

let result = numbers.forEach(function(value){
return value * 2;
});

console.log(result);

Output:
undefined

Even if you return something, forEach() ignores it.

When to Use forEach()

✔ Printing values
✔ Calling functions
✔ Updating variables
✔ Executing code for every element

✘ Not suitable when you need a new array

====================================================

2. map()

What is map()?

map() creates a NEW ARRAY by transforming every element of the original array.

Original array remains unchanged.

Syntax

array.map(function(value, index, array){
return newValue;
});

Example 1

let numbers = [10,20,30];

let result = numbers.map(function(value){
return value * 2;
});

console.log(result);

Output:
[20,40,60]

Original Array Remains Same

console.log(numbers);

Output:
[10,20,30]

Internal Logic of map()

let numbers = [10,20,30];

let newArray = [];

for(let i = 0; i < numbers.length; i++){
newArray.push(numbers[i] * 2);
}

console.log(newArray);

Output:
[20,40,60]

This is approximately how map() works internally.

Example 2

let numbers = [1,2,3];

let result = numbers.map(function(value){
return "Number: " + value;
});

console.log(result);

Output:
[
"Number: 1",
"Number: 2",
"Number: 3"
]

When to Use map()

✔ Transforming data
✔ Modifying values
✔ Creating a new array
✔ Preparing data for UI

Example:
10 → 20
20 → 40
30 → 60

====================================================

Difference Between forEach() and map()

forEach()

• Iterates through array
• Does not return new array
• Used for actions
• Return value ignored

map()

• Iterates through array
• Returns new array
• Used for transformations
• Returned values collected

Example:

let numbers = [10,20,30];

numbers.forEach(function(value){
console.log(value * 2);
});

Output:
20
40
60

let numbers = [10,20,30];

let result = numbers.map(function(value){
return value * 2;
});

console.log(result);

Output:
[20,40,60]

====================================================

3. flatMap()

What is flatMap()?

flatMap() = map() + flat()

It first transforms each element and then flattens the result by one level.

Why Do We Need flatMap()?

Consider:

let numbers = [1,2,3];

let result = numbers.map(function(value){
return [value, value * 10];
});

console.log(result);

Output:

[
[1,10],
[2,20],
[3,30]
]

Notice that map() creates nested arrays.

Using flat() After map()

let result = numbers
.map(function(value){
return [value, value * 10];
})
.flat();

console.log(result);

Output:

[1,10,2,20,3,30]

Using flatMap()

let numbers = [1,2,3];

let result = numbers.flatMap(function(value){
return [value, value * 10];
});

console.log(result);

Output:

[1,10,2,20,3,30]

flatMap() performs map() and flat() together.

Visual Representation

Original Array:

[1,2,3]

map():

[
[1,10],
[2,20],
[3,30]
]

flatMap():

[
1,10,
2,20,
3,30
]

Understanding Square Brackets []

Example:

let result = [1,2,3].flatMap(function(x){
return [x, x * 10, 40];
});

Iteration 1:

x = 1

return [1,10,40]

Iteration 2:

x = 2

return [2,20,40]

Iteration 3:

x = 3

return [3,30,40]

map() would produce:

[
[1,10,40],
[2,20,40],
[3,30,40]
]

flatMap() automatically converts it into:

[
1,10,40,
2,20,40,
3,30,40
]

Why Can't We Write?

return x, x * 10, 40;

Because JavaScript uses the comma operator.

Example:

function demo(){
return 10,20,30;
}

console.log(demo());

Output:
30

Only the LAST value gets returned.

Therefore:

return x, x * 10, 40;

returns only:

To return multiple values, use an array:

return [x, x * 10, 40];

Does flatMap() Also Pass value, index, array?

YES.

Just like forEach() and map(), flatMap() also passes:

(value, index, array)

Example:

let numbers = [10,20,30];

numbers.flatMap(function(value, index, array){

console.log(value);
console.log(index);
console.log(array);

return [value];

});

References:
https://www.w3schools.com/js/js_array_iteration.asp#mark_foreach
https://www.geeksforgeeks.org/javascript/javascript-array-methods/

JavaScript Arrays

Saravanan Lakshmanan — Fri, 19 Jun 2026 13:28:28 +0000

What is an Array?

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

Imagine you want to store the names of 5 students.

❌ Without Array:

let student1 = "Ram";
let student2 = "Priya";
let student3 = "Kumar";
let student4 = "John";
let student5 = "Sara";

✅ With Array:

let students = ["Ram", "Priya", "Kumar", "John", "Sara"];

Instead of creating multiple variables, we store all values inside one array.

1. Creating Arrays (2 Methods)

Method 1: Array Literal (Most Common)

This is the easiest and most commonly used method.

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

How it works:

Index Value

0 Apple
1 Mango
2 Orange

Method 2: Array Constructor

Arrays can also be created using the Array() constructor.

let fruits = new Array("Apple", "Mango", "Orange");

Output:

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

Note:

Most developers prefer the Array Literal method because it is shorter and easier to read.

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

Less Common:
let fruits = new Array("Apple", "Mango", "Orange");

2. Understanding Index

Every element in an array has a position called an index.

⚠️ Array indexing starts from 0, not 1.

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

Index Value

0 Apple
1 Mango
2 Orange

3. Accessing Array Elements

Use square brackets [] with the index number.

Example:

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

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

Accessing an Invalid Index:

console.log(fruits[5]);

Output:

undefined

Because index 5 does not exist.

4. Array Length Property

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

Example:

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

console.log(fruits.length);

Output:

Because there are 3 elements.

Another Example:

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

console.log(numbers.length);

Output:

5. Getting the Last Element Using Length

A common interview question.

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

console.log(fruits[fruits.length - 1]);

Output:

Orange

Explanation:

fruits.length returns 3

Last Index = 3 - 1 = 2

fruits[2] returns Orange

6. Array Elements Can Be Any Data Type

Unlike Java, JavaScript arrays can store different types of values in the same array.

Example:

let data = [
"Saravanan",
26,
true,
null
];

console.log(data);

Output:

["Saravanan", 26, true, null]

Arrays Can Store Objects

let person = [
{
name: "Saravanan",
age: 26
}
];

console.log(person);

Arrays Can Store Other Arrays

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

console.log(nestedArray);

Output:

[[10,20],[30,40]]

7. Using Loops with Arrays

Arrays are commonly used with loops because they allow us to process multiple values efficiently.

Using a Traditional for Loop

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

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

Output:

Apple
Mango
Orange

How it Works:

1st Iteration:
i = 0
fruits[0] → Apple

2nd Iteration:
i = 1
fruits[1] → Mango

3rd Iteration:
i = 2
fruits[2] → Orange

Loop stops when:
i < fruits.length becomes false.

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

JavaScript Constructor Functions

Saravanan Lakshmanan — Wed, 17 Jun 2026 15:54:58 +0000

What is a Constructor Function?

A Constructor Function is a regular JavaScript function used with the new keyword to create and initialize multiple objects with the same structure.

It acts like a blueprint for creating objects.

By convention, constructor function names start with a capital letter.

Syntax

function ConstructorName(parameter1, parameter2) {
    this.property1 = parameter1;
    this.property2 = parameter2;
}

Example

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

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

console.log(emp1);

Output

Employee {
    name: "Saravanan",
    salary: 50000
}

How the `new` Keyword Works

When JavaScript executes:

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

it performs the following steps automatically:

Step 1: Creates an Empty Object

{}

Step 2: Sets `this` to the New Object

this = {}

Step 3: Executes the Constructor Function

this.name = "Saravanan";
this.salary = 50000;

Result:

{
    name: "Saravanan",
    salary: 50000
}

Step 4: Returns the Object Automatically

return this;

Understanding `this`

Inside a constructor function, this refers to the newly created object.

function Employee(name) {
    this.name = name;
}

const emp1 = new Employee("Saravanan");

Internally:

emp1.name = "Saravanan";

The property name is on the left side and the value comes from the parameter on the right side.

this.name = name;

Creating Multiple Objects

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

const emp1 = new Employee("Ram", 50000);
const emp2 = new Employee("Kumar", 60000);
const emp3 = new Employee("Ajay", 70000);

All objects follow the same structure.

Adding Methods

Constructor functions can also contain methods.

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;

    this.displayInfo = function() {
        console.log(this.name + " earns " + this.salary);
    };
}

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

emp1.displayInfo();

Output

Saravanan earns 50000

CRUD Operations on Constructor Function Objects

Objects created using constructor functions behave like normal JavaScript objects.

Create

emp1.age = 26;

Read

console.log(emp1.age);

Update

emp1.age = 27;

Delete

delete emp1.age;

Adding Properties to One Object

emp1.department = "IT";

Only emp1 receives the property.

Adding Properties for All Objects Using Prototype

Employee.prototype.company = "TCS";

Now all Employee objects can access the property.

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

Output

TCS
TCS

Adding Shared Methods Using Prototype

Employee.prototype.greet = function() {
    console.log("Hello " + this.name);
};

Now every Employee object can use the same method.

emp1.greet();
emp2.greet();

This approach is more memory-efficient because only one copy of the function exists.

Constructor Function vs Object Literal

Object Literal

const employee = {
    name: "Ram",
    salary: 50000
};

Best when creating a single object.

Constructor Function

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

Best when creating multiple objects with the same structure.

References:
https://www.w3schools.com/js/js_object_constructors.asp
https://www.geeksforgeeks.org/javascript/javascript-function-constructor/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function