DEV Community: Saravanan Lakshmanan

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

JavaScript Objects: From Basics to CRUD Operations

Saravanan Lakshmanan — Tue, 16 Jun 2026 16:13:22 +0000

JavaScript Objects

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

1. WHAT IS AN OBJECT?

An object is a collection of related data and functionality stored as key-value pairs.

An object is a non-primitive data type in JavaScript used to store related data and behavior as key-value pairs.

Example:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

Real-Life Example:

Instead of:

let name = "Saravanan";
let age = 25;
let city = "Chennai";

We can group them together:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

This grouped structure is called an Object.

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

2. ENTITY, STATE AND BEHAVIOR

Entity

An entity is a real-world thing that can be identified separately.

Examples:

Student
Employee
Car
Book
Mobile
Person

Example:

Entity = Student

let student = {
name: "Saravanan",
age: 25
};

The object represents the entity in code.

State (Attributes / Properties)

State describes what an object HAS.

Examples:

Name
Age
City

JavaScript:

let student = {
name: "Saravanan",
age: 25,
city: "Chennai"
};

Here:

name
age
city

are states (properties).

Behavior (Methods)

Behavior describes what an object DOES.

Examples:

study()
walk()
eat()
talk()

JavaScript:

let student = {
study() {
console.log("Studying...");
}
};

Here study() is behavior.

Easy Memory Trick:

Entity = Who/What is it?

State = What does it have?

Behavior = What can it do?

Example:

Entity = Student

State = Name, Age

Behavior = Study(), AttendClass()

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

3. PROPERTIES AND VALUES

let person = {
name: "Saravanan",
age: 25
};

Structure:

Property (Key) Value

name -> Saravanan
age -> 25

So:

name = Property
"Saravanan" = Value

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

4. ACCESSING OBJECT PROPERTIES

Dot Notation

console.log(person.name);

Output:

Saravanan

Bracket Notation

console.log(person["name"]);

Output:

Saravanan

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

5. OBJECT LITERAL

This is the most common way of creating objects.

let person = {
name: "Saravanan",
age: 25
};

The {} syntax is called an Object Literal.

Why called Literal?

Because the object is created directly using curly braces.

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

6. OBJECT CONSTRUCTOR

Objects can also be created using the Object constructor.

let person = new Object();

person.name = "Saravanan";
person.age = 25;

Output:

{
name: "Saravanan",
age: 25
}

Difference:

Object Literal:

let person = {
name: "Saravanan"
};

Object Constructor:

let person = new Object();

person.name = "Saravanan";

Most developers prefer Object Literal because it is:

Shorter
Cleaner
Easier to read
Most commonly used

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

7. CRUD OPERATIONS IN OBJECTS

CRUD stands for:

C → Create
R → Read
U → Update
D → Delete

These are the four basic operations performed on data.

CREATE

Creating an object.

let person = {
name: "Saravanan",
age: 25
};

READ

Reading object properties.

console.log(person.name);

Output:

Saravanan

console.log(person["age"]);

Output:

UPDATE

Updating an existing property.

person.age = 26;

Before:

{
name: "Saravanan",
age: 25
}

After:

{
name: "Saravanan",
age: 26
}

DELETE

Deleting a property.

delete person.age;

Before:

{
name: "Saravanan",
age: 25
}

After:

{
name: "Saravanan"
}

Complete CRUD Example

// CREATE
let person = {
name: "Saravanan",
age: 25
};

// READ
console.log(person.name);

// UPDATE
person.age = 26;

// DELETE
delete person.age;

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

8. ADDING, UPDATING AND DELETING PROPERTIES

Add Property

let person = {
name: "Saravanan"
};

person.age = 25;

Result:

{
name: "Saravanan",
age: 25
}

Update Property

person.age = 26;

Delete Property

delete person.age;

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

9. METHODS IN OBJECTS

Functions stored inside objects are called Methods.

let person = {
name: "Saravanan",

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

};

Calling Method:

person.greet();

Output:

Hello

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

10. METHOD SHORTHAND (ES6)

Instead of:

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

We can write:

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

Both produce the same result.

Modern JavaScript prefers the shorthand version.

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

11. NESTED OBJECTS

An object can contain another object.

let person = {
name: "Saravanan",

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

};

This is called a Nested Object.

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

12. ACCESSING NESTED OBJECTS

console.log(person.address.city);

Output:

Chennai

Breakdown:

person
↓
address
↓
city

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

13. OBJECTS CAN STORE DIFFERENT TYPES OF VALUES

let person = {
name: "Saravanan",
age: 25,
isStudent: true,
skills: ["HTML", "CSS", "JS"],

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

};

Objects can store:

String
Number
Boolean
Array
Function
Object

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

14. REAL WORLD VISUALIZATION

person
│
├── name → Saravanan
├── age → 25
│
├── address → Object
│ │
│ ├── city → Chennai
│ └── state → Tamil Nadu
│
└── greet() → Method

var, let, Single & Multi-thread and Process in JavaScript

Saravanan Lakshmanan — Mon, 15 Jun 2026 13:20:29 +0000

Difference Between var and let in JavaScript

In the early days of JavaScript, there was only one way of declaring variables and that was using the var keyword. A variable declared with var is defined throughout the program. One of the issues with using the var keyword was redeclaring a variable inside a block will also redeclare the variable outside the block.

With the introduction of ES6 in 2015 two more keywords, let and const came into the picture. var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. Variable declared by let cannot be redeclared and must be declared before use whereas variables declared with var keyword are hoisted.

Feature	var	let
Scope	Function Scoped	Block Scoped
Hoisting	Hoisted and initialized as `undefined`	Hoisted but stays in Temporal Dead Zone (TDZ)
Access before declaration	Returns `undefined`	Throws `ReferenceError`
Re-declaration	Allowed	Not Allowed in same scope
Loop behavior	Can cause unexpected bugs	Safer and predictable
Modern Usage	Rarely used	Recommended

✅ Example 1: Scope

if (true) {
    var a = 10;
    let b = 20;
}

console.log(a); // 10
console.log(b); // ReferenceError

var escapes the block, while let stays inside the block.

✅ Example 2: Hoisting

console.log(x);
var x = 10; // undefined

console.log(y);
let y = 20; // ReferenceError

var is initialized with undefined, whereas let remains in the Temporal Dead Zone until its declaration.

Why is var avoided in modern JavaScript?

Function-scoped variables can lead to accidental bugs.
Hoisting behavior can be confusing.
Variables can be re-declared unintentionally.
Loop-related issues occur more frequently with var.
let and const provide safer and more predictable behavior.

Modern Best Practice

const name = "Saravanan"; // Use by default

let count = 0;            // Use when value changes

// Avoid var

Understanding Single Thread, Multi Thread, Process, and Their Relationship

1. What is a Process?

A Process is simply a program that is currently running.

For example, when you open:

Chrome
VS Code
Spotify

each of them becomes a separate process in memory.

Think of a process as a house.

The house contains:

Memory
Resources
Files
Execution environment

Each process has its own separate resources.

Example:

RAM
├── Chrome Process
├── VS Code Process
└── Spotify Process

2. What is a Thread?

A Thread is the smallest unit of execution inside a process.

Think of a thread as a worker inside the house.

Example:

Restaurant (Process)

├── Cook (Thread)
├── Cashier (Thread)
└── Waiter (Thread)

The restaurant owns the resources.

The workers perform the tasks.

A process must have at least one thread.

This first thread is called the Main Thread.

3. Relationship Between Process and Thread

A process can contain one or more threads.

Process
│
├── Thread 1
├── Thread 2
├── Thread 3
└── Thread 4

Key Point:

Process owns resources and memory.
Threads use those resources to perform work.

Think of:

Process = House
Thread = People living in the house

Without the house, people cannot live there.

Without threads, a process cannot perform work.

Single-Threading

A single-threaded application has only one thread performing tasks.

It can execute only one instruction at a time.

Example:

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

Output:

Task 1
Task 2
Task 3

Execution happens one after another.

Real-Life Example

Imagine a shop with only one cashier.

Customer 1
    ↓
Customer 2
    ↓
Customer 3

Each customer must wait for the previous customer to finish.

That is Single Threading.

Multi-Threading

A multi-threaded application can have multiple threads working simultaneously.

Example:

Process
│
├── Thread 1 → Download File
├── Thread 2 → Play Music
├── Thread 3 → Update Screen
└── Thread 4 → Calculate Data

Multiple tasks can run at the same time.

Real-Life Example

Imagine a supermarket with three cashiers.

Cashier 1 → Customer 1
Cashier 2 → Customer 2
Cashier 3 → Customer 3

Customers are served simultaneously.

That is Multi Threading.

Single Thread vs Multi Thread

Feature	Single Thread	Multi Thread
Number of Threads	One	Multiple
Tasks	One at a time	Multiple at once
Complexity	Simple	More complex
Speed	Slower for multiple tasks	Faster for parallel tasks
Memory Usage	Lower	Higher
Synchronization Issues	No	Possible
Example	JavaScript Main Thread	Java, C#, C++

Is JavaScript Single Threaded?

Yes.

JavaScript is primarily a Single-Threaded Language.

It has:

One Call Stack
One Main Thread

Example:

console.log("A");

for(let i = 0; i < 1000000000; i++) {
}

console.log("B");

Output:

A
B

"B" waits until the loop completes because JavaScript executes one statement at a time.

Then How Does JavaScript Perform Multiple Tasks?

This is where many beginners get confused.

Consider:

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

console.log("World");

Output:

World
Hello

If JavaScript is single-threaded, how is this possible?

The answer is:

JavaScript itself is single-threaded, but the browser provides additional features.

Behind the Scenes

Browser Process
│
├── JavaScript Thread
├── Timer Thread
├── Rendering Thread
├── Network Thread
└── Other Threads

When JavaScript encounters:

setTimeout(...)

it hands the timer work to the browser.

The browser waits 2 seconds and later tells JavaScript:

"Timer completed. Execute this callback."

JavaScript then runs the callback when the Call Stack becomes empty.

JavaScript is:

Single-Threaded
+
Non-Blocking
+
Event Driven

It achieves asynchronous behavior using:

Event Loop
Callback Queue
Web APIs
Promises
Async/Await

Reference:
https://www.geeksforgeeks.org/javascript/why-javascript-is-a-single-thread-language-that-can-be-non-blocking/
https://www.geeksforgeeks.org/operating-systems/difference-between-process-and-thread/
https://www.geeksforgeeks.org/javascript/difference-between-var-and-let-in-javascript/

JavaScript Functions Explained

Saravanan Lakshmanan — Sat, 13 Jun 2026 11:07:50 +0000

I'm currently learning JavaScript and recently spent some time understanding functions. While studying, I created these notes covering function declarations, parameters, arguments, return statements, function expressions, arrow functions, and commonly used built-in methods. Sharing them here in case they help fellow beginners on their JavaScript journey.

What is a Function?

A function is a reusable block of code designed to perform a specific task.

Think of a function like a machine:

You give some input.
The machine processes it.
It gives back an output.

For example, a calculator's addition operation behaves like a function:

10 + 20 = 30

In JavaScript:

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

Here:

a and b are inputs.
The function performs addition.
The result is returned.

Functions help us avoid writing the same code repeatedly.

Why Do We Need Functions?

Imagine you need to display a welcome message 100 times.

Without functions:

console.log("Welcome");
console.log("Welcome");
console.log("Welcome");
console.log("Welcome");

This quickly becomes difficult to maintain.

With a function:

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

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

Benefits:

Less code
Better readability
Easier maintenance
Improved reusability

Real-Life Example

Suppose you're building an e-commerce application.

Every time a customer places an order, you may need to:

Calculate total price
Apply discounts
Calculate taxes
Generate invoices

Instead of writing the same logic repeatedly, you can create functions:

calculateTotal();
applyDiscount();
calculateTax();
generateInvoice();

Functions make large applications easier to organize and maintain.

Rules for Naming Functions

A function name should clearly describe what the function does.

Good Examples

function calculateSalary() {}
function getUserData() {}
function printInvoice() {}
function findLargestNumber() {}

Poor Examples

function a() {}
function xyz() {}
function temp() {}

Naming Rules

A function name:

✔ Can contain letters

✔ Can contain numbers (but not at the beginning)

✔ Can contain _ and $

✔ Should start with a letter

Valid Names

function add() {}
function add123() {}
function user_data() {}
function $calculate() {}

Invalid Names

function 123add() {}
function my-name() {}
function function() {}

Anatomy of a Function

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

Function Keyword:

function

Tells JavaScript you're creating a function.

Function Name:

add

Used to call the function.

Parameters:

(a, b)

Inputs accepted by the function.

Function Body:

{
    return a + b;
}

Contains the logic that gets executed.

Calling a Function

Creating a function does not execute it.

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

Nothing happens until you call it:

greet();

Output:

Hello

This process is called function invocation or function calling.

Parameters vs Arguments

This is a common source of confusion for beginners.

Parameters

Variables declared in the function definition.

function add(a, b)

Here a and b are parameters.

Arguments

Actual values passed when calling the function.

add(10, 20);

Here 10 and 20 are arguments.

Easy way to remember:

Parameters = Placeholders

Arguments = Actual Values

Is return Mandatory?

No.

A function can work without a return statement.

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

This function simply prints output and does not return anything.

What Does return Do?

The return keyword sends a value back to the place where the function was called.

Example:

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

let result = add(10, 20);

Internally, JavaScript treats it like:

let result = 30;

because:

add(10, 20)

returns:

Difference Between console.log() and return

Many beginners assume they serve the same purpose.

They do not.

console.log()

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

Purpose:

Display information in the console.

Output:

However, the value cannot easily be reused.

return

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

Purpose:

Send a value back to the caller.

Now the value can be:

Stored in a variable
Reused later
Passed to another function
Sent to a database
Displayed in the UI

Why is return Preferred?

Using console.log():

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

The value is displayed, but not reusable.

Using return:

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

let total = add(10, 20);

console.log(total * 2);

Output:

This flexibility is why professional developers use return extensively.

Function Declaration

Traditional way of creating functions.

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

Function Expression

A function stored in a variable.

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

Arrow Function

Modern syntax introduced in ES6.

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

Short version:

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

Arrow functions are widely used in modern JavaScript frameworks like React.

Advantages of Functions

1. Reusability

Write code once and use it many times.

2. Better Readability

calculateTax();
generateInvoice();
sendEmail();

The code explains itself.

3. Easier Maintenance

If a bug exists, you only need to fix it in one place.

4. Modularity

Large applications can be broken into smaller, manageable pieces.

5. Easier Testing

Individual functions can be tested independently.

Commonly Used Built-In Functions and Methods

Output

console.log()

Number Conversion

Number()
parseInt()
parseFloat()

String Methods

toUpperCase()
toLowerCase()
trim()
includes()
slice()
replace()

Array Methods

push()
pop()
shift()
unshift()
map()
filter()
reduce()
find()

Math Methods

Math.max()
Math.min()
Math.random()
Math.floor()
Math.ceil()
Math.round()

Timer Functions

setTimeout()
setInterval()

These are frequently used in real-world applications.

References:
https://www.geeksforgeeks.org/javascript/functions-in-javascript/
https://www.w3schools.com/js/js_functions.asp

JavaScript Loops

Saravanan Lakshmanan — Wed, 10 Jun 2026 13:33:41 +0000

JavaScript Loops
Loops are handy, if you want to run the same code over and over again, each time with a different value.

The For Loop

The for statement creates a loop with 3 optional expressions:

for (expr1; expr2; expr3) {
  // code block to be executed
}

exp1 is executed one time before the execution of the code block.

exp2 defines the condition for executing the code block.

exp3 is executed every time the code block has been executed.

Example

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

exp1 sets a variable before the loop starts (let i = 0).

exp2 defines the condition for the loop to run (i must be less than 5).

exp3 increases a value (i++) each time the code block has been executed.

Loop Scope

Example

let i = 5;

for (i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Example

 let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

In the first example, let i = 5; is declared outside the loop.

In the second example, let i = 0;, is declared inside the loop.

When a variable is declared with let or const inside a loop, it will only be visible within the loop.

The While Loop

The while loop loops through a block of code as long as a specified condition is true.

Syntax

 while (condition) {
  // code block to be executed
}

Example

In the following example, the code in the loop will run, over and over again, as long as a variable (i) is less than 10:

Example

while (i < 10) {
  text += "The number is " + i;
  i++;
}

The Do While Loop

The do while loop is a variant of the while loop.

The do while loop will execute the code block once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.

Syntax

do {
// code block to be executed
}
while (condition);

The do while runs at least once, even if the condition is false from the start.

This is because the code block is executed before the condition is tested:

Example

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

Do not forget to increase the variable used in the condition, otherwise the loop will never end!

References:
https://www.w3schools.com/js/js_loops.asp
https://www.geeksforgeeks.org/javascript/loops-in-javascript/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

JavaScript practice problems using while loop

Saravanan Lakshmanan — Tue, 09 Jun 2026 16:16:21 +0000

Hi all,

I have practiced a few JavaScript looping concept programs and would like to share them with the community. Please let me know if you find any corrections or suggestions for improvement.

Thank you!

JavaScript week-1 Mock Questions with Answers

Saravanan Lakshmanan — Mon, 08 Jun 2026 10:16:09 +0000

1️⃣ Tell me about yourself.

💡 Tip: Prepare a 1–2 minute introduction covering:
• Name
• Education
• Skills/Technologies
• Projects
• Experience (if any)
• Career Goal

2️⃣ Display: none vs Visibility: hidden

Both properties are used to hide elements, but they behave differently.

display: none

Completely removes the element from the page.
The element is not visible.
The element does not occupy any space.
Other elements move up and take its place.

Example:

display: none

Before:
A B C

After hiding B:
A C

visibility: hidden

Hides the element from view.
The element still occupies space.
Other elements do not move.

Example:

visibility: hidden

Before:
A B C

After hiding B:
A _ C

Quick Difference

display:none	visibility:hidden
Removes element completely	Only hides element
No space occupied	Space remains
Layout changes	Layout remains same

3️⃣ px vs % vs em vs rem

These are commonly used CSS units for sizing.

px (Pixels)

A fixed unit of measurement.

Example:

font-size: 16px;

Always remains 16 pixels.
Not affected by parent element size.

% (Percentage)

Relative to the parent element.

Example:

width: 50%;

If parent width is 1000px:

Result = 500px

em

Relative to the font size of the parent element.

Example:

Parent font-size = 16px

font-size: 2em;

Result:

32px

rem

Relative to the root (html) font size.

Example:

html {
font-size: 16px;
}

font-size: 2rem;

Result:

32px

Quick Summary

px → Fixed size
% → Relative to parent
em → Relative to parent font size
rem → Relative to root font size

Interview Tip

For responsive websites, rem is generally preferred because it provides consistent sizing across the application.

4️⃣ Optional Chaining (?.) Operator

Optional Chaining allows us to safely access nested object properties without throwing an error if a property doesn't exist.

Without Optional Chaining

const user = {
name: "John"
};

console.log(user.address.city);

Output:

Error: Cannot read properties of undefined

Reason:
address does not exist, so JavaScript throws an error.

With Optional Chaining

const user = {
name: "John"
};

console.log(user?.address?.city);

Output:

undefined

Instead of throwing an error, JavaScript safely returns undefined.

Benefits

Prevents application crashes.
Makes code cleaner.
Reduces multiple if conditions.

5️⃣ Bitwise Operators in JavaScript

Bitwise operators work directly on binary numbers (0 and 1).

AND (&)

Returns 1 only when both bits are 1.

Example:

5 & 1

Binary:

5 = 101
1 = 001

Result:

001 = 1

Output:

OR (|)

Returns 1 if either bit is 1.

Example:

5 | 1

Binary:

101
001

Result:

101 = 5

Output:

XOR (^)

Returns 1 only when bits are different.

Example:

5 ^ 1

Binary:

101
001

Result:

100 = 4

Output:

NOT (~)

Flips all bits.

Example:

Output:

-6

Common Bitwise Operators

& (AND)
| (OR)
^ (XOR)
~ (NOT)
<< (Left Shift)
> > (Right Shift)

Interview Tip

Bitwise operators are commonly used in:

Flags and permissions
Low-level programming
Performance optimizations

6️⃣ Type Casting

Type Casting means converting one data type into another.

Implicit Type Casting

JavaScript automatically converts the type.

Example:

console.log("5" + 2);

Output:

Reason:

Number 2 is automatically converted to string.

Explicit Type Casting

Developer manually converts the type.

String to Number

Number("10")

Output:

Number to String

String(100)

Output:

"100"

Number to Boolean

Boolean(1)

Output:

true

Example

let age = "25";

console.log(Number(age));

Output:

Interview Tip

JavaScript is loosely typed, so automatic type conversion happens frequently.

7️⃣ Truthy & Falsy Values

When JavaScript evaluates a condition, values are treated as either Truthy or Falsy.

Falsy Values

There are only 8 Falsy values in JavaScript:

false
0
-0
0n
""
null
undefined
NaN

Truthy Values

Everything else is Truthy.

Examples:

"Hello"
1
[]
{}
true
"false"

Example

if ("Hello") {
console.log("Truthy");
}

Output:

Truthy

Important Interview Question

Is an empty array truthy or falsy?

Answer:

Truthy ✅

Example:

if ([]) {
console.log("Truthy");
}

Output:

Truthy

8️⃣ var vs let vs const

These are used to declare variables.

var

Function scoped
Can be redeclared
Can be reassigned
Hoisted

Example:

var a = 10;
var a = 20;

Allowed ✅

let

Block scoped
Cannot be redeclared
Can be reassigned

Example:

let age = 25;
age = 30;

Allowed ✅

const

Block scoped
Cannot be redeclared
Cannot be reassigned

Example:

const pi = 3.14;

pi = 3.141;

Error ❌

Quick Comparison

Feature	var	let	const
Scope	Function	Block	Block
Redeclare	Yes	No	No
Reassign	Yes	Yes	No
Hoisted	Yes	Yes	Yes

Best Practice

Use:

const by default
let when value changes
Avoid var

9️⃣ What is JavaScript?

JavaScript is a high-level, interpreted, lightweight programming language used to create dynamic and interactive web pages.

Why JavaScript?

HTML → Structure

CSS → Styling

JavaScript → Functionality

Common Uses

Form Validation
Dark Mode
Image Sliders
API Calls
Dynamic Content Updates
Games
Real-Time Chat Applications

Example

Button click event:

document.getElementById("btn").addEventListener("click", () => {
alert("Button Clicked");
});

Where JavaScript Runs?

Browser
Server-side using Node.js

Interview Definition

JavaScript is a high-level, interpreted programming language used to make websites interactive and dynamic.

🔟 Mutable vs Immutable Data

Mutable

A mutable object can be modified after creation.

Examples:

Array
Object

Example:

let arr = [1, 2, 3];

arr.push(4);

console.log(arr);

Output:

[1, 2, 3, 4]

The original array was modified.

Immutable

An immutable value cannot be modified after creation.

Examples:

String
Number
Boolean

Example:

let str = "Hello";

str[0] = "Y";

console.log(str);

Output:

Hello

Reason:

Strings are immutable in JavaScript.

Another Example

let num = 10;

num = 20;

This creates a new value rather than modifying the original value.

Quick Summary

Mutable:

Array
Object

Immutable:

String
Number
Boolean
Null
Undefined
Symbol
BigInt

Interview Tip

Primitive data types are immutable, while Objects and Arrays are mutable because their contents can be changed after creation.

Why if([]) Returns True? Understanding Truthy & Falsy in JavaScript

Saravanan Lakshmanan — Sun, 07 Jun 2026 15:08:23 +0000

What are Truthy and Falsy Values?

In JavaScript, every value can be treated as either true or false when used in a condition (if, while, ternary operator, etc.).

Truthy values behave like true.
Falsy values behave like false.

JavaScript automatically converts values to a boolean when evaluating conditions. This process is called Type Coercion.

Falsy Values

There are only a few falsy values in JavaScript:

false
0
-0
0n
""      // Empty string
null
undefined
NaN

Example

if (0) {
    console.log("This will run");
} else {
    console.log("0 is falsy");
}

Output:

0 is falsy

Truthy Values

Everything that is not falsy is truthy.

Examples:

true
1
-1
"hello"
"0"
[]
{}
function(){}

Example

if ("JavaScript") {
    console.log("String is truthy");
}

Output:

String is truthy

Common Interview Examples

Example 1: Non-empty String

let username = "Saravanan";

if (username) {
    console.log("Username exists");
}

Output:

Username exists

Because a non-empty string is truthy.

Example 2: Empty String

let username = "";

if (username) {
    console.log("Username exists");
} else {
    console.log("Username is empty");
}

Output:

Username is empty

Because an empty string is falsy.

Example 3: Checking Login Credentials

const username = "Saravanan";
const password = "1234";

if (username && password) {
    console.log("Login data available");
} else {
    console.log("Missing credentials");
}

Output:

Login data available

Both values are non-empty strings, so they are truthy.

Example 4: Empty Array

if ([]) {
    console.log("Array is truthy");
}

Output:

Array is truthy

Many beginners expect an empty array to be falsy, but it is truthy.

Example 5: Empty Object

if ({}) {
    console.log("Object is truthy");
}

Output:

Object is truthy

An empty object is also truthy.

Quick Reference Table

Value	Truthy/Falsy
`false`	Falsy
`0`	Falsy
`""`	Falsy
`null`	Falsy
`undefined`	Falsy
`NaN`	Falsy
`1`	Truthy
`"hello"`	Truthy
`"0"`	Truthy
`[]`	Truthy
`{}`	Truthy

Easy Rule to Remember

JavaScript has only a handful of falsy values. Everything else is truthy.

When in doubt, ask yourself:

Boolean(value)

Examples:

Boolean(0);        // false
Boolean("");       // false
Boolean("hello");  // true
Boolean([]);       // true
Boolean({});       // true

Understanding truthy and falsy values is essential because they are used extensively in conditions, loops, logical operators (&&, ||), and real-world application development.

References:
https://www.geeksforgeeks.org/javascript/explain-the-concept-of-truthy-falsy-values-in-javascript/
https://stackoverflow.com/questions/35642809/understanding-javascript-truthy-and-falsy
https://frontend.turing.edu/lessons/module-1/js-truthy-falsy-expressions.html

JavaScript - Conditional Statements

Saravanan Lakshmanan — Thu, 04 Jun 2026 15:51:01 +0000

JavaScript Conditional Statements

Conditional statements allow a program to make decisions and execute different blocks of code based on conditions.

1. if Statement

The if statement executes a block of code only when a condition is true.

Syntax

if (condition) {
  // code to execute
}

Example

let age = 20;

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

Flowchart

     Start
       |
       v
   Condition?
    /      \
 True      False
   |          |
   v          |
 Execute      |
 Code         |
   |          |
   v          |
     End <----

When to Use

When you want to execute code only if a condition is true.
No action is needed when the condition is false.

2. if...else Statement

The if...else statement provides two possible execution paths.

Syntax

if (condition) {
  // code if true
} else {
  // code if false
}

Example

let age = 16;

if (age >= 18) {
  console.log("Eligible to vote");
} else {
  console.log("Not eligible to vote");
}

Flowchart

       Start
         |
         v
     Condition?
      /      \
   True      False
    |           |
    v           v
 Execute A   Execute B
    |           |
    +-----+-----+
          |
          v
         End

When to Use

When there are exactly two possible outcomes.
Example: Pass/Fail, Yes/No, Adult/Minor.

3. else if Statement

Used when multiple conditions need to be checked.

Syntax

if (condition1) {
  // code
} else if (condition2) {
  // code
} else {
  // code
}

Example

let marks = 78;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 75) {
  console.log("Grade B");
} else if (marks >= 50) {
  console.log("Grade C");
} else {
  console.log("Fail");
}

Flowchart

          Start
            |
            v
      Condition 1?
        /      \
     Yes       No
      |         |
      v         v
  Execute A  Condition 2?
               /    \
            Yes      No
             |        |
             v        v
        Execute B  Condition 3?
                     /     \
                  Yes      No
                   |        |
                   v        v
             Execute C  Execute D
                   |        |
                   +----+---+
                        |
                        v
                       End

When to Use

When multiple conditions need to be evaluated.
Example: Grades, Salary Ranges, User Roles.

4. switch Statement

The switch statement compares a single value against multiple cases.

Syntax

switch (expression) {
  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // code
}

Example

let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid Day");
}

Flowchart

          Start
            |
            v
      Check Value
            |
    +---+---+---+
    |   |   |   |
 Case1 Case2 Case3
    |   |   |   |
    v   v   v   v
 Code Code Code Default
    |   |   |   |
    +---+---+---+
            |
            v
           End

When to Use

When comparing the same variable against multiple values.
Cleaner than many else if statements.

5. Ternary Operator (?:)

A shorthand version of if...else.

Syntax

condition ? valueIfTrue : valueIfFalse;

Example

let age = 20;

let result = age >= 18
  ? "Adult"
  : "Minor";

console.log(result);

Flowchart

       Start
         |
         v
     Condition?
      /      \
   True      False
    |           |
    v           v
 Value A     Value B
      \       /
       \     /
        \   /
         \ /
          v
         End

When to Use

For simple conditions.
Avoid for complex nested logic.

Summary Table

Conditional Statement	Purpose
if	Execute code when a condition is true
if...else	Choose between two outcomes
else if	Handle multiple conditions
switch	Compare one value against multiple cases
Ternary (?:)	Short form of if...else

Key Takeaway

Use if for a single condition.
Use if...else for two outcomes.
Use if...else if...else for multiple conditions.
Use switch when checking many values of the same variable.
Use the ternary operator for concise one-line decisions.

References:
https://www.geeksforgeeks.org/javascript/conditional-statements-in-javascript/
https://www.w3schools.com/js/js_conditionals.asp

JavaScript Operators Explained with Examples

Saravanan Lakshmanan — Thu, 04 Jun 2026 15:28:01 +0000

JavaScript Operators

Operators are special symbols used to perform operations on values and variables in JavaScript.

1. Arithmetic Operators

Used for mathematical calculations.

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.33
console.log(a % b); // 1
console.log(a ** b); // 1000

Common Operators: +, -, *, /, %, **

2. Increment & Decrement Operators

Used to increase or decrease a value by 1.

let x = 5;

console.log(++x); // 6 (Pre-increment)
console.log(x++); // 6 (Post-increment)
console.log(x);   // 7

Common Operators: ++, --

Key Difference:

++x → Increment first, then use the value.
x++ → Use the value first, then increment.

3. Assignment Operators

Used to assign or update values.

let x = 10;

x += 5; // x = 15
x -= 2; // x = 13
x *= 2; // x = 26

Common Operators: =, +=, -=, *=, /=, %=

4. Comparison Operators

Used to compare two values and return true or false.

console.log(5 > 3);     // true
console.log(5 < 3);     // false
console.log(5 == "5");  // true
console.log(5 === "5"); // false

Common Operators: ==, ===, !=, !==, >, <, >=, <=

Tip: Prefer === over == to avoid unexpected type conversion.

5. Logical Operators

Used to combine or invert conditions.

console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false

Common Operators:

&& (AND)
|| (OR)
! (NOT)

Short-Circuiting:

A && B → Returns B if A is truthy.
A || B → Returns A if A is truthy.

Example:

console.log(10 && 20); // 20
console.log(10 || 20); // 10

6. Conditional (Ternary) Operator

A shorthand version of if...else.

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Syntax:

condition ? valueIfTrue : valueIfFalse

7. Nullish Coalescing Operator (??)

Provides a default value only when the left side is null or undefined.

let username = null;

console.log(username ?? "Guest"); // Guest

Useful for handling missing values safely.

8. Optional Chaining Operator (?.)

Safely accesses object properties without throwing errors.

const user = null;

console.log(user?.name); // undefined

Useful when data may be missing.

9. Type Operators

Used to check data types or object relationships.

console.log(typeof "Hello"); // string
console.log(typeof 100);     // number

Common Operators: typeof, instanceof

10. Bitwise Operators

Perform operations at the binary level.

console.log(5 & 1); // 1
console.log(5 | 1); // 5

Mostly used in advanced programming scenarios.

11. String Operators

Used to combine strings.

let firstName = "John";
let lastName = "Doe";

console.log(firstName + " " + lastName);

Common Operators: +, +=

12. Spread & Rest Operator (...)

A powerful feature for arrays, objects, and function parameters.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

console.log(arr2);

Useful for copying, merging, and handling multiple values.

References:
https://www.w3schools.com/js/js_operators.asp
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://www.programiz.com/javascript/operators

Immutable vs Mutable ||JavaScript Type Conversion

Saravanan Lakshmanan — Tue, 02 Jun 2026 10:29:16 +0000

Immutable vs Mutable (Non-Immutable)

Immutable

An immutable value cannot be changed after it is created.
When you modify it, JavaScript creates a new value instead of changing the original one.

Example
let a = "Hello"; a = "Hi";
What happens?
"Hello" // old value remains unchanged "Hi" // new value is created
The variable a now points to the new value "Hi".

Immutable Data Types

String
Number
Boolean
Null
Undefined
Symbol
BigInt

Mutable (Non-Immutable)

A mutable value can be changed after it is created.
Instead of creating a new value, JavaScript modifies the existing object.

Example
`let user = {
name: "John"
};

user.name = "David";What happens?{
name: "David"
}`
The same object is updated. No new object is required for this change.

Mutable Data Types

Object
Array
Function

Quick Comparison

Immutable	Mutable
Cannot be changed directly	Can be changed directly
Modification creates a new value	Modification updates the existing value
Primitive data types	Non-primitive data types
Example: String, Number	Example: Object, Array

Easy Memory Trick

Immutable = New value is created when changed
let x = 10; x = 20;

Mutable = Existing value is updated
let arr = [1, 2]; arr.push(3);
x = 20 creates a new value, while arr.push(3) changes the existing array.

JavaScript Type Conversion
In JavaScript Type Conversion can be defined as converting the data type of the variables from one type to the other manually by the programmer(explicitly) or automatically by the JavaScript(implicitly).

Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically by the JavaScript.
Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the function Number(), String(), and Boolean().

Implicit Type Conversion (Coercion)
In JavaScript, the implicit type conversion or coercion conversion can be defined as the automatic conversion of the data type of the variables from one type to another type. Implicit type conversion mostly occurs when we are performing the arithmetic or the logical operations.

String with Number (Concatenation)
When we add a string with the number, the JavaScript automatically converts the number into a string and performs string concatenation.
let res = 5 + "5"; console.log(res);

Boolean to Number
When we perform the mathematical operations, then JavaScript automatically converts true to 1 and false to 0.
let res = true + 1; console.log(res);

Equality Comparison (==)
When we use the equality operator in the JavaScript, it compares them after converting the value into the same data type.
let res = (5 == "5"); console.log(res);

Automatic Conversion in Logical Operations
In JavaScript, these values are automatically converts undefined, null, "" (empty string), false, NaN, and 0 to false, and all other values to true.
let res = Boolean(""); let res2 = Boolean("Hello"); console.log(res) console.log(res2)

Explicit Type Conversion
In JavaScript, explicit type conversion can be defined as when we manually change the data type of the variable from one to other using some built-in JavaScript functions. JavaScript provides us the built-in functions for performing the explicit conversion.

Converting to String
In JavaScript, we can convert the value into a string using the String() function, toString(), and by concatenating the empty string.

let n = 123; let s1 = String(n); let s2 = n.toString(); console.log(s1) console.log(s2)

Converting to Number
In JavaScript, we can convert the value into a number using the Number() function, parseInt(), and parseFloat().

let s = "123"; let n = Number(s); let s1 = "12.34"; let n1 = parseFloat(s1); console.log(n) console.log(n1)

Converting to Boolean
In JavaScript, we can convert the value into a boolean we can use the Boolean() function.
let str = "Hello"; let b1 = Boolean(str); let emptyStr = ""; let b2 = Boolean(emptyStr); console.log(b1) console.log(b2)

Reasons to Learn JavaScript Type Conversion

Data Handling: In JavaScript when we are working with API responses, user inputs and calculations, these type of the operation require type conversion.
Prevent Bugs: It is important to understand the type conversion which can help in preventing bugs which occurs when JavaScript implicitly converts value.
Code Clarity: By performing the explicit conversion makes our code bug free and more clear.

JavaScript Type Conversion

Conversion Type	Implicit Conversion (Coercion)	Explicit Conversion
String + Number	Automatically converts numbers to strings	Use `String()` or `.toString()`
Number + Boolean	Converts `true` to `1` and `false` to `0`	Use `Number()`
String to Boolean	Non-empty strings become `true`, empty strings become `false`	Use `Boolean()`
Number from String	JavaScript may convert automatically during operations	Use `Number()`, `parseInt()`, or `parseFloat()`

References:
https://www.geeksforgeeks.org/javascript/javascript-type-conversion/
https://www.w3schools.com/js/js_type_conversion.asp
https://immutable-js.com/
https://www.geeksforgeeks.org/javascript/why-is-immutability-so-important-in-javascript/

DEV Community: Saravanan Lakshmanan

JavaScript Arrays

What is an Array?

1. Creating Arrays (2 Methods)

Method 1: Array Literal (Most Common)

Method 2: Array Constructor

2. Understanding Index

3. Accessing Array Elements

4. Array Length Property

5. Getting the Last Element Using Length

6. Array Elements Can Be Any Data Type

Arrays Can Store Objects

Arrays Can Store Other Arrays

7. Using Loops with Arrays

Using a Traditional for Loop

JavaScript Constructor Functions

What is a Constructor Function?

Syntax

Example

Output

How the new Keyword Works

Step 1: Creates an Empty Object

Step 2: Sets this to the New Object

Step 3: Executes the Constructor Function

Step 4: Returns the Object Automatically

Understanding this

Creating Multiple Objects

Adding Methods

Output

CRUD Operations on Constructor Function Objects

Create

Read

Update

Delete

Adding Properties to One Object

Adding Properties for All Objects Using Prototype

Output

Adding Shared Methods Using Prototype

Constructor Function vs Object Literal

Object Literal

Constructor Function

JavaScript Objects: From Basics to CRUD Operations

JavaScript Objects

1. WHAT IS AN OBJECT?

2. ENTITY, STATE AND BEHAVIOR

Entity

State (Attributes / Properties)

Behavior (Methods)

3. PROPERTIES AND VALUES

4. ACCESSING OBJECT PROPERTIES

Dot Notation

Bracket Notation

5. OBJECT LITERAL

6. OBJECT CONSTRUCTOR

7. CRUD OPERATIONS IN OBJECTS

CREATE

READ

UPDATE

DELETE

Complete CRUD Example

8. ADDING, UPDATING AND DELETING PROPERTIES

Add Property

Update Property

Delete Property

9. METHODS IN OBJECTS

10. METHOD SHORTHAND (ES6)

11. NESTED OBJECTS

12. ACCESSING NESTED OBJECTS

13. OBJECTS CAN STORE DIFFERENT TYPES OF VALUES

14. REAL WORLD VISUALIZATION

var, let, Single & Multi-thread and Process in JavaScript

Understanding Single Thread, Multi Thread, Process, and Their Relationship

1. What is a Process?

2. What is a Thread?

3. Relationship Between Process and Thread

Single-Threading

Real-Life Example

Multi-Threading

Real-Life Example

Single Thread vs Multi Thread

How the `new` Keyword Works

Step 2: Sets `this` to the New Object

Understanding `this`