DEV Community: Annapoorani Kadhiravan

Array Methods in JS - Part 2

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

JavaScript Array Search Methods

What are Array Search Methods?

Array Search Methods are used to:

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

Common Array Search Methods

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

1. Array.indexOf()

Definition

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

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

Syntax

array.indexOf(searchElement)

array.indexOf(searchElement, startIndex)

Parameters

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

Returns

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

Internal Working

Suppose:

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

Memory:

Index

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

When:

fruits.indexOf("Orange");

JavaScript starts from index 0:

Apple ❌
Orange ✅ Found

Stops immediately and returns:

Example

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

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

Output

Example - Not Found

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

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

Output

-1

Example - Start Position

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

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

Output

Real-Time Example

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

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

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

console.log(position);

Output

Time Complexity [TBD]

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

Common Mistake

if (arr.indexOf("Apple"))

Wrong.

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

Correct:

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

Interview Questions

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

-1

2. Array.lastIndexOf()

Definition

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

Syntax

array.lastIndexOf(searchElement)

array.lastIndexOf(searchElement, fromIndex)

Parameters

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

Returns

Last matching index or -1.

Internal Working

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

Memory:

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

JavaScript starts from the last index:

Blue ✅

Returns:

Example

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

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

Output

Real-Time Example

Suppose a browser stores recently visited pages.

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

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

Output

Time Complexity

O(n)

Best Practice

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

3. Array.includes()

Definition

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

It returns:

true
false

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

Syntax

array.includes(value)

array.includes(value, startIndex)

Parameters

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

Returns

Boolean

Internal Working

Suppose:

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

JavaScript compares each element.

If found:

true

Else:

false

Example

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

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

Output

true

Example

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

Output

false

Real-Time Example

Netflix Premium Features

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

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

Output

HDR Supported

Time Complexity

O(n)

Common Mistake

Using:

indexOf() != -1

instead of

includes()

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

Interview Question

Which is better?

includes()

indexOf()

Use:

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

4. Array.find()

Definition

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

If no element matches, it returns undefined.

Syntax

array.find(callback)

array.find(callback, thisArg)

Callback Parameters

(element, index, array)

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

Returns

Matching element or undefined.

Internal Working

Suppose:

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

Callback:

num > 20

JavaScript checks:

10 ❌
25 ✅

Stops immediately.

Returns:

Example

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

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

console.log(result);

Output

Real-Time Example

Find the first student who scored above 90.

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

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

console.log(topper);

Output

Time Complexity

O(n)

Common Mistake

find() returns the element, not its index.

Interview Question

Difference between find() and filter()?

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

5. Array.findIndex()

Definition

Returns the index of the first element satisfying the condition.

If not found:

-1

Syntax

array.findIndex(callback)

Example

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

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

Output

Real-Time Example

Locate the first pending order.

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

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

console.log(index);

Output

Time Complexity

O(n)

6. Array.findLast() (ES2023)

Definition

Returns the last element that satisfies a condition.

Syntax

array.findLast(callback)

Example

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

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

console.log(result);

Output

Real-Time Example

Find the latest completed transaction.

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

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

console.log(latest);

Output

{ id: 3, status: "Completed" }

Time Complexity

O(n)

7. Array.findLastIndex() (ES2023)

Definition

Returns the index of the last matching element.

Syntax

array.findLastIndex(callback)

Example

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

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

Output

Real-Time Example

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

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

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

console.log(index);

Output

Time Complexity

O(n)

Summary Comparison

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

Tips

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

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

JavaScript Arrays Methods - Part 1

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

What is an Array?

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

Instead of creating separate variables,

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

we can use an array:

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

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

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

1. Array length

Definition

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

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

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

Syntax

array.length

To modify the array length:

array.length = newLength;

Parameters

None.

Returns

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

Internal Working

Consider this array:

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

Memory representation:

Index

0 → Apple
1 → Orange
2 → Mango

length = 3

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

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

Whenever you access:

fruits.length

JavaScript simply returns the value stored in the length property.

It does not count the elements every time.

This makes length very fast.

Example 1

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

console.log(fruits.length);

Output

Example 2 - Updating Length

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

numbers.length = 2;

console.log(numbers);

Output

[10,20]

JavaScript removes the remaining elements.

Example 3 - Increasing Length

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

colors.length = 5;

console.log(colors);

Output

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

The new positions become empty slots.

Real-Time Example

Imagine an E-commerce Shopping Cart.

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

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

Output

Total Items: 3

Amazon and Flipkart use similar logic to display:

Cart (3 Items)

Common Mistake

let arr = [1,2,3];

console.log(arr.length());

Output

TypeError

Why?

Because length is a property, not a method.

Correct:

arr.length

Best Practices

✔ Use length inside loops.

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

2. Array toString()

Definition

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

The original array is not modified.

Syntax

array.toString()

Parameters

None.

Returns

Returns a string.

Internal Working

Suppose

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

Internally JavaScript joins every element using commas.

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

Result

Apple,Orange,Banana

Example

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

let result = fruits.toString();

console.log(result);

Output

Apple,Orange,Banana

Example with Numbers

let numbers = [10,20,30];

console.log(numbers.toString());

Output

10,20,30

Real-Time Example

Sending array data through an API.

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

let apiData = selectedItems.toString();

console.log(apiData);

Output

Laptop,Mouse,Keyboard

Common Mistake

Many developers think it returns an array.

Wrong.

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

console.log(typeof result);

Output

string

Best Practice

Use join() when you need a custom separator.

3. Array at()

Definition

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

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

Syntax

array.at(index)

Parameters

Parameter	Description
index	Position of element

Returns

Returns the element.

Returns undefined if the index is invalid.

Internal Working

Example

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

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

When

arr.at(2)

JavaScript returns

When

arr.at(-1)

JavaScript converts

length + (-1)

4 + (-1)

=3

Returns

Example

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

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

Output

Orange

Negative Index

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

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

Output

Banana

Real-Time Example

Latest Notification

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

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

Output

Delivered

Common Mistake

arr[-1]

Output

undefined

Correct

arr.at(-1)

4. Array join()

Definition

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

Unlike toString(), you can choose the separator.

The original array is not modified.

Syntax

array.join(separator)

Parameters

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

Returns

A string containing all array elements joined together.

Internal Working

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

If you call:

fruits.join(" - ");

JavaScript internally performs:

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

Result:

Apple - Orange - Banana

Example 1

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

console.log(fruits.join());

Output

Apple,Orange,Banana

Example 2

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

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

Output

Apple | Orange | Banana

Real-Time Example

Suppose a user selects multiple skills in a job portal.

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

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

console.log(profile);

Output

JavaScript, React, Node.js

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

Common Mistake

Developers sometimes expect join() to return an array.

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

console.log(typeof result);

Output

string

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

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

Best Practices

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

5. Array pop()

Definition

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

The original array is modified.

Syntax

array.pop()

Parameters

None.

Returns

Returns the removed element.

If the array is empty, it returns undefined.

Internal Working

Consider:

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

Memory before pop():

Index

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

When you call:

fruits.pop();

JavaScript:

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

Memory after:

Index

0 → Apple
1 → Orange
length = 2

Example

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

let removed = fruits.pop();

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

Output

Banana
["Apple", "Orange"]

Real-Time Example

Imagine a browser's recent tabs list.

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

let closedTab = recentTabs.pop();

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

Output

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

Common Mistake

let arr = [];

console.log(arr.pop());

Output

undefined

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

1. Array.isArray()

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

Definition

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

It returns:

true → if the value is an array
false → otherwise

Why do we need it?

In JavaScript:

typeof []

returns

"object"

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

Instead, JavaScript provides:

Array.isArray()

Syntax

Array.isArray(value)

Parameter

Parameter	Description
value	The value to check

Returns

Boolean

true
false

Internal Working

Suppose

let numbers = [10,20,30];

Internally JavaScript checks the object's internal type.

numbers

↓

Object

↓

Internal Array Type?

↓

Yes

↓

Return true

let person = {
    name: "John"
};

then

person

↓

Object

↓

Internal Array Type?

↓

No

↓

Return false

Example 1

let numbers = [10,20,30];

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

Output

true

Example 2

let student = {
    name: "David"
};

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

Output

false

Example 3

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

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

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

Output

false
false
false

Real-Time Example

Suppose an API returns data.

function displayProducts(products){

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

}

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

Output

Displaying products...

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

Common Mistake

Wrong

typeof []

Output

object

Correct

Array.isArray([])

Output

true

Best Practice

Always validate API responses before looping.

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

2. delete Operator (Array delete)

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

Definition

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

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

Syntax

delete array[index]

Parameter

Parameter	Description
index	Position of element

Returns

true

if deletion succeeds.

Internal Working

Array

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

Memory

0 → Apple

1 → Orange

2 → Banana

length = 3

After

delete fruits[1];

Memory

0 → Apple

1 → Empty

2 → Banana

length = 3

Notice

Length remains

Example

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

delete fruits[1];

console.log(fruits);

console.log(fruits.length);

Output

[
'Apple',
empty,
'Banana'
]

3

Access Deleted Value

console.log(fruits[1]);

Output

undefined

Real-Time Example

Suppose an employee leaves.

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

delete employees[1];

console.log(employees);

Instead of shifting everyone,

JavaScript leaves an empty position.

Usually, this is not what we want.

3. Array.concat()

Definition

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

The original arrays remain unchanged.

Syntax

array1.concat(array2)

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

Parameters

One or more arrays or values.

Returns

Returns a new merged array.

Internal Working

let a=[1,2];

let b=[3,4];

JavaScript creates

New Array

↓

Copy a

↓

Append b

↓

Return New Array

Original arrays stay unchanged.

Example

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

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

let fullstack=frontend.concat(backend);

console.log(fullstack);

Output

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

Multiple Arrays

let a=[1];

let b=[2];

let c=[3];

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

Output

[1,2,3]

Real-Time Example

Suppose a school stores students section-wise.

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

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

let students=sectionA.concat(sectionB);

console.log(students);

Output

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

Common Mistake

Developers think

a.concat(b);

changes a.

Wrong.

It returns a new array.

Correct

let newArray = a.concat(b);

4. Array.copyWithin()

Definition

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

It overwrites existing elements and modifies the original array.

Syntax

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

Parameters

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

Returns

The modified original array.

Internal Working

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

Calling

arr.copyWithin(0,3);

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

Result

[40,50,30,40,50]

Example

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

numbers.copyWithin(0,3);

console.log(numbers);

Output

[40,50,30,40,50]

Real-Time Example

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

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

readings.copyWithin(0,2);

console.log(readings);

Output

[30,40,50,40,50]

Best Practice

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

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

JavaScript String Methods

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

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

let course = "JavaScript";

1. String length

Purpose

Returns the total number of characters in a string.

Syntax

string.length

Example

let company = "OpenAI";

console.log(company.length);

Output

Real-Time Example

Checking password length before registration.

2. String charAt()

Purpose

Returns the character at a specified index.

Syntax

string.charAt(index)

Example

let city = "Madurai";

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

Output

Internal Logic

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

Index 3 contains "u".

3. String charCodeAt()

Purpose

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

Example

let letter = "A";

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

Output

More Examples

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

Output:

4. String codePointAt()

Purpose

Returns the Unicode code point of a character.

Useful for emojis and special symbols.

Example

let emoji = "😊";

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

Output

Difference

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

codePointAt() gives the actual Unicode value.

5. String concat()

Purpose

Combines two or more strings.

Example

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

let fullName = firstName.concat(lastName);

console.log(fullName);

Output

Annapoorani Kadhiravan

Alternative

console.log(firstName + lastName);

6. String at()

Purpose

Returns character at a specific position.

Supports negative indexing.

Example

let language = "JavaScript";

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

Output

J
t

7. String [ ]

Purpose

Access characters using bracket notation.

Example

let laptop = "Dell";

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

Output

D
l

Difference

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

Both return same result.

8. String slice()

Purpose

Extracts part of a string.

Syntax

string.slice(start,end)

Example

let course = "JavaScript";

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

Output

Java

Negative Index

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

Output

Script

9. String substring()

Purpose

Extracts characters between indexes.

Example

let company = "Microsoft";

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

Output

Micro

Difference from slice()

let str = "JavaScript";

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

Output:

Script
JavaScript

substring() doesn't support negative indexes.

10. String substr()

⚠️ Deprecated (Avoid in new projects)

Purpose

Extracts characters based on start position and length.

Example

let city = "Chennai";

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

Output

enna

Explanation

Start at index 2
Take 4 characters

11. String toUpperCase()

Purpose

Converts string to uppercase.

Example

let name = "annapoorani";

console.log(name.toUpperCase());

Output

ANNAPOORANI

12. String toLowerCase()

Purpose

Converts string to lowercase.

Example

let company = "OPENAI";

console.log(company.toLowerCase());

Output

openai

13. String isWellFormed()

Purpose

Checks whether a string contains valid Unicode characters.

Example

let text = "Hello";

console.log(text.isWellFormed());

Output

true

Use Case

Unicode validation before processing text.

14. String toWellFormed()

Purpose

Converts malformed Unicode into valid Unicode.

Example

let text = "\uD800";

console.log(text.toWellFormed());

Output

�

Use Case

Cleaning corrupted text data.

15. String trim()

Purpose

Removes spaces from beginning and end.

Example

let email = "  user@gmail.com  ";

console.log(email.trim());

Output

user@gmail.com

16. String trimStart()

Purpose

Removes spaces only from beginning.

Example

let text = "   Hello";

console.log(text.trimStart());

Output

Hello

17. String trimEnd()

Purpose

Removes spaces only from end.

Example

let text = "Hello   ";

console.log(text.trimEnd());

Output

Hello

18. String padStart()

Purpose

Adds characters at the beginning until desired length.

Example

let orderId = "123";

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

Output

Real-Time Example

Generating invoice numbers.

19. String padEnd()

Purpose

Adds characters at the end.

Example

let code = "JS";

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

Output

JS***

20. String repeat()

Purpose

Repeats a string multiple times.

Example

let star = "*";

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

Output

*****

Real-Time Example

Printing separators.

21. String replace()

Purpose

Replaces first matching occurrence.

Example

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

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

Output

I love JavaScript. Java is powerful.

Note

Only first occurrence is replaced.

22. String replaceAll()

Purpose

Replaces all matching occurrences.

Example

let sentence = "Java Java Java";

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

Output

JS JS JS

23. String split()

Purpose

Converts string into array.

Example

let skills = "HTML,CSS,JavaScript";

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

console.log(result);

Output

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

Split by Space

let sentence = "Learning JavaScript Daily";

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

Output

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

Quick Comparison Table

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

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

Arrays in JavaScript

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

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

Examples of data commonly stored in arrays:

Student names
Marks
Product lists
Mobile numbers
Cities
Shopping cart items

What is an Array?

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

Definition

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

Syntax

let arrayName = [value1, value2, value3];

Example:

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

console.log(fruits);

Output:

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

Why Do We Need Arrays?

Without arrays:

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

Managing many variables becomes difficult.

Using arrays:

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

Everything is organized in one variable.

Real-Life Example

Think of a bookshelf.

Shelf

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

Similarly:

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

Each element has an index.

Array Index

Array indexing starts from 0.

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

Index	Value
0	Red
1	Blue
2	Green

Accessing Elements

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

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

Output:

Red
Green

Creating Arrays

1. Array Literal (Most Common)

let numbers = [10, 20, 30];

2. Array Constructor

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

console.log(numbers);

Output:

[10, 20, 30]

Arrays Can Store Different Data Types

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

console.log(data);

Output:

["John",25,true,null]

Length Property

Returns the number of elements.

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

console.log(fruits.length);

Output:

Modifying Elements

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

fruits[1] = "Mango";

console.log(fruits);

Output:

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

CRUD Operations with Arrays

Create

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

Read

console.log(laptops[0]);

Output:

HP

Update

laptops[1] = "Lenovo";

Output:

["HP","Lenovo"]

Delete

Using pop():

laptops.pop();

console.log(laptops);

Output:

["HP"]

Adding Elements

push()

Adds elements at the end.

let numbers = [10,20];

numbers.push(30);

console.log(numbers);

Output:

[10,20,30]

Real-Life Example

Adding a person to the end of a queue.

unshift()

Adds elements at the beginning.

let numbers = [20,30];

numbers.unshift(10);

console.log(numbers);

Output:

[10,20,30]

Real-Life Example

VIP person entering at the front of the queue.

Removing Elements

pop()

Removes the last element.

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

fruits.pop();

console.log(fruits);

Output:

["Apple","Banana"]

shift()

Removes the first element.

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

fruits.shift();

console.log(fruits);

Output:

["Banana","Orange"]

Real-Life Example

The first person in a queue leaves after getting service.

splice()

Adds, removes, or replaces elements.

Removing

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

numbers.splice(1,2);

console.log(numbers);

Output:

[10,40]

Adding

let numbers = [10,40];

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

console.log(numbers);

Output:

[10,20,30,40]

Replacing

let numbers = [10,20,30];

numbers.splice(1,1,100);

console.log(numbers);

Output:

[10,100,30]

slice()

Returns a portion of an array.

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

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

Output:

[20,30,40]

Real-Life Example

Cutting a cake and taking only a few slices.

Looping Through Arrays

for Loop

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

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

for...of

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

forEach()

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

Searching Arrays

includes()

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

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

Output:

true

indexOf()

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

Output:

Joining Arrays

concat()

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

let result = a.concat(b);

console.log(result);

Output:

[1,2,3,4]

Spread Operator

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

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

console.log(result);

Output:

[1,2,3,4]

Sorting Arrays

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

numbers.sort();

console.log(numbers);

Output:

[1,2,5,8]

Reversing Arrays

let numbers = [10,20,30];

numbers.reverse();

console.log(numbers);

Output:

[30,20,10]

map()

Transforms elements.

let nums = [1,2,3];

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

console.log(doubled);

Output:

[2,4,6]

Real-Life Example

Doubling every employee's salary.

filter()

Returns matching elements.

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

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

console.log(result);

Output:

[30,40]

Real-Life Example

Filtering students who scored above 80 marks.

reduce()

Reduces array into a single value.

let nums = [10,20,30];

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

console.log(sum);

Output:

Real-Life Example

Calculating total bill amount.

find()

Returns first matching element.

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

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

console.log(result);

Output:

some()

Checks whether at least one element satisfies the condition.

let nums = [10,20,30];

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

Output:

true

every()

Checks whether all elements satisfy the condition.

let nums = [10,20,30];

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

Output:

true

Destructuring Arrays

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

let [first, second] = colors;

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

Output:

Red
Blue

Arrays of Objects

let students = [

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

{
    name: "David",
    age: 22
}

];

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

Output:

John

Multidimensional Arrays

let matrix = [

[1,2],
[3,4]

];

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

Output:

Array Methods Summary

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

Arrays vs Objects

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

Real-World Examples

Shopping Cart

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

Student Marks

let marks = [90,85,95];

Cities

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

Employees

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

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

Constructor in JavaScript

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

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

To solve this problem, JavaScript provides Constructor Functions.

What is a Constructor in JavaScript?

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

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

Definition

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

Why Do We Need Constructors?

Suppose we want to create three students.

Without constructors:

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

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

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

This approach works, but it involves repeating code.

With Constructor

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

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

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

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

Much cleaner and reusable.

Real-Life Example

Imagine a cookie cutter.

One mold can produce many cookies.

Cookie Mold
      ↓
Cookie 1
Cookie 2
Cookie 3
Cookie 4

Similarly,

Constructor
      ↓
Object 1
Object 2
Object 3

Syntax of Constructor Function

function Person(name, age) {

    this.name = name;

    this.age = age;

}

Creating objects:

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

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

Understanding `this`

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

function Employee(name, salary) {

    this.name = name;

    this.salary = salary;

}

Creating object:

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

Object created:

{
    name: "John",
    salary: 50000
}

Real-Life Example of `this`

Suppose a teacher says:

"My classroom"

"My" refers to that teacher.

Similarly,

this.name

means

Current object's name

Creating Multiple Objects

function Car(brand, color, price) {

    this.brand = brand;

    this.color = color;

    this.price = price;

}

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

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

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

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

Output:

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

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

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

How Does the `new` Keyword Work?

When we write:

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

JavaScript performs four steps.

Step 1: Creates an Empty Object

{}

Step 2: `this` Points to That Object

this = {}

Step 3: Properties Are Added

{
name: "John",
salary: 50000
}

Step 4: Object Is Returned

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

Visual Representation

new Employee("John",50000)

        ↓

Creates Empty Object

        ↓

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

        ↓

Returns Object

        ↓

{
name:"John",
salary:50000
}

Adding Methods to Constructor

Methods can also be included.

function Student(name, age) {

    this.name = name;

    this.age = age;

    this.greet = function() {

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

    };

}

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

s1.greet();

Output

Hello John

Real-Life Example

Car

Properties:

Brand
Color
Price

Actions:

Start()
Stop()
Accelerate()

Actions are methods.

Example with Laptop

function Laptop(brand, ram, processor) {

    this.brand = brand;

    this.ram = ram;

    this.processor = processor;

    this.showDetails = function() {

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

    };

}

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

laptop1.showDetails();

Output

HP 16GB i7

Constructor Naming Convention

Constructor names usually start with a capital letter.

Example:

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

Not recommended:

function student() {}

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

Constructor with Default Values

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

    this.brand = brand;

    this.price = price;

}

const m1 = new Mobile();

console.log(m1);

Output

{
brand: "Samsung",
price: 30000
}

Constructor for Employee

function Employee(id, name, salary) {

    this.id = id;

    this.name = name;

    this.salary = salary;

}

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

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

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

Constructor for Product

function Product(name, price) {

    this.name = name;

    this.price = price;

}

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

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

Constructor for Animal

function Animal(name, type) {

    this.name = name;

    this.type = type;

}

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

console.log(dog);

Output

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

Built-in Constructors

JavaScript provides several built-in constructors.

String

const name = new String("John");

Number

const age = new Number(25);

Boolean

const status = new Boolean(true);

Array

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

Object

const obj = new Object();

Date

const today = new Date();

Constructor Function vs Object Literal

Object Literal

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

Suitable for one object.

Constructor

function Student(name, age) {

    this.name = name;

    this.age = age;

}

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

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

Suitable for multiple objects.

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

Constructor Function vs Factory Function

Factory Function

function createStudent(name, age) {

    return {
        name,
        age
    };

}

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

Constructor Function

function Student(name, age) {

    this.name = name;

    this.age = age;

}

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

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

What Happens Without `new`?

function Student(name) {

    this.name = name;

}

const s1 = Student("John");

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

Always write:

const s1 =
new Student("John");

Real-World Analogy

Think about a university.

Blueprint

Student Form

Contains:

Name
Age
Department

Using that form:

Student 1
Student 2
Student 3
Student 4

The form is the constructor.

Each student is an object.

References :

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

Objects in JavaScript

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

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

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

Students
Employees
Cars
Mobiles
Products
Users
Animals

What is an Object?

An object is a collection of properties and methods.

Properties store data.
Methods store functions.

Syntax

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

Example

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

console.log(student);

Output:

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

Real-Life Example

Think of a Student ID Card.

Name : John
Age  : 21
City : Chennai

All these details belong to one student.

Similarly:

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

The object stores related information together.

Why Do We Need Objects?

Without Objects

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

Managing multiple variables becomes difficult.

With Objects

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

Everything is organized inside one object.

Object Terminologies

Consider:

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

Here,

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

Creating Objects

There are several ways to create objects.

1. Object Literal

Most commonly used.

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

console.log(mobile);

Output

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

Real-Life Example

Writing details in a notebook.

Brand : Samsung
Model : S25
Price : 90000

Accessing Object Properties

There are two ways:

Dot Notation

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

console.log(mobile.brand);

Output

Apple

Bracket Notation

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

Output

iPhone 16

Real-Life Example

Finding a contact in your phone.

Contact Name → Mobile Number

Similarly,

mobile.brand

retrieves the value.

Adding Properties

Objects are dynamic.

const laptop = {
    brand: "Dell"
};

laptop.ram = "16GB";

console.log(laptop);

Output

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

Real-Life Example

Buying a laptop and later upgrading RAM.

Initially:

Brand : Dell

Later:

Brand : Dell
RAM : 16GB

Updating Properties

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

laptop.ram = "16GB";

console.log(laptop);

Output

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

Real-Life Example

Changing your phone number in a bank account.

Old

9876543210

New

9999999999

Deleting Properties

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

delete laptop.camera;

console.log(laptop);

Output

{
brand: "HP"
}

Real-Life Example

Removing old information from a form.

CRUD Operations with Objects

CRUD means:

Create
Read
Update
Delete

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

// Create
laptop.processor = "i7";

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

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

// Delete
delete laptop.processor;

console.log(laptop);

Output

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

Objects with Methods

Methods are functions inside objects.

const student = {

    name: "John",

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

};

student.greet();

Output

Hello

Real-Life Example

A Car

Properties

Brand
Color
Price

Actions

Start()
Stop()
Accelerate()

Actions are methods.

Using this Keyword

const student = {

    name: "John",

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

};

student.greet();

Output

Hello John

Real-Life Example

Suppose a teacher says:

"My class"

Here "my" refers to the teacher.

Similarly,

this.name

refers to the current object.

Nested Objects

Objects can contain other objects.

const employee = {

    name: "David",

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

};

console.log(employee.address.city);

Output

Chennai

Real-Life Example

Company

Company
    ↓
Department
        ↓
Employee

Similarly

Object
   ↓
Nested Object

Object.keys()

Returns all keys.

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

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

Output

["name","age"]

Object.values()

Returns values.

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

Output

["John",22]

Object.entries()

Returns key-value pairs.

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

Output

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

Looping Through Objects

Using for...in

const student = {

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

};

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

Output

name John
age 21
city Chennai

Real-Life Example

Checking items in a grocery bill one by one.

Object Destructuring

Extract values easily.

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

const {brand, ram} = laptop;

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

Output

HP
16GB

Real-Life Example

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

Spread Operator with Objects

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

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

console.log(details);

Output

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

Object.freeze()

Prevents modification.

const car = {
    brand: "BMW"
};

Object.freeze(car);

car.brand = "Audi";

console.log(car);

Output

{
brand:"BMW"
}

Real-Life Example

Submitting an exam paper.

After submission, changes cannot be made.

Object.seal()

Allows updating but prevents adding or deleting properties.

const car = {
    brand: "BMW"
};

Object.seal(car);

car.brand = "Audi";

console.log(car);

Output

{
brand:"Audi"
}

Object Constructor

const person = new Object();

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

console.log(person);

Output

{
name:"John",
age:22
}

Factory Function

function createStudent(name, age){

    return {
        name,
        age
    };

}

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

console.log(s1);

Output

{
name:"John",
age:21
}

Constructor Function

function Student(name, age){

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

}

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

console.log(s1);

Output

{
name:"John",
age:21
}

Objects vs Arrays

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

Example

Object

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

Array

const marks = [90,85,95];

Real-World Examples of Objects

Student

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

Car

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

Employee

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

Product

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

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

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

Example of a Factory Function

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

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

Output:

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

Example of a Constructor Function

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

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

Output:

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

Key Difference

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

In short:

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

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

Understanding Synchronous and Asynchronous JavaScript

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

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

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

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

Synchronous Execution
Asynchronous Execution

What is Synchronous JavaScript?

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

Definition

Synchronous means one task at a time, in sequence.

Example

console.log("Task 1");

console.log("Task 2");

console.log("Task 3");

Output

Task 1
Task 2
Task 3

How it Works

Task 1
 ↓
Task 2
 ↓
Task 3

Each task waits for the previous one to complete.

Real-Life Example: ATM Queue

Imagine three people standing in front of an ATM.

Person 1
 ↓
Person 2
 ↓
Person 3

Person 2 cannot use the ATM until Person 1 finishes.

Similarly, synchronous JavaScript processes one operation at a time.

Another Example

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

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

first();
second();

Output

First Function
Second Function

Problem with Synchronous Execution

Suppose one operation takes a long time.

console.log("Start");

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

}

console.log("End");

The program becomes blocked until the loop finishes.

Execution Flow

Start
 ↓
Long Process
 ↓
End

Nothing else can happen during the long process.

What is Asynchronous JavaScript?

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

Definition

Asynchronous means tasks can happen independently without blocking the program.

Example

console.log("Start");

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

console.log("End");

Output

Start
End
Timer Finished

Execution Flow

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

JavaScript doesn't wait for the timer to finish.

Real-Life Example: Restaurant

Imagine ordering food in a restaurant.

Synchronous Approach

Order food
Wait 20 minutes
Eat food
Pay bill

Nothing else happens while waiting.

Asynchronous Approach

Order food
Talk to friends
Check phone
Food arrives
Eat

You continue doing other tasks while waiting.

This is how asynchronous programming works.

Why Do We Need Asynchronous Programming?

Many operations take time:

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

Without asynchronous programming, applications would freeze.

Example: API Request

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

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

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

Output

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

The application continues running while data is being fetched.

Synchronous vs Asynchronous

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

Visual Comparison

Synchronous

Task 1
 ↓
Task 2
 ↓
Task 3
 ↓
Task 4

Asynchronous

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

setTimeout() Example

console.log("1");

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

console.log("3");

Output

1
3
2

Why?

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

Real-Life Example: Washing Machine

Synchronous

Start washing
Wait
Wait
Wait
Washing completes
Cook dinner

Asynchronous

Start washing
Cook dinner
Watch TV
Read book
Washing completes

Multiple activities happen simultaneously.

Ways to Handle Asynchronous Operations

JavaScript provides three main approaches:

1. Callbacks

2. Promises

3. Async/Await

1. Callback

A callback function executes after another task completes.

function fetchData(callback) {

    setTimeout(() => {

        callback();

    }, 2000);
}

fetchData(() => {

    console.log("Data received");

});

Output

Data received

Real-Life Example

Food delivery:

Order food
↓
Food prepared
↓
Delivery boy calls you

The call is like a callback function.

2. Promise

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

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

    resolve("Success");

});

promise.then(result => {

    console.log(result);

});

Output

Success

Promise States

Pending
   ↓
Resolved
or
Rejected

Real-Life Example

Online Shopping

Place order
↓
Pending
↓
Delivered (Resolved)

or

Cancelled (Rejected)

3. Async/Await

Introduced in ES2017.

It makes asynchronous code look like synchronous code.

async function getMessage() {

    return "Hello";

}

getMessage().then(console.log);

Output:

Hello

Example with await

async function fetchUser() {

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

    let data = await response.json();

    console.log(data);

}

fetchUser();

Real-Life Example

Ordering Pizza

Place order
↓
Wait for preparation
↓
Receive pizza

await tells JavaScript:

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

Behind the Scenes

JavaScript uses:

Call Stack

Stores function execution.

main()
 ↓
function1()
 ↓
function2()

Web APIs

Handle asynchronous tasks like:

setTimeout()
fetch()
DOM events

Callback Queue

Stores completed asynchronous tasks.

Completed Task
 ↓
Waiting Queue

Event Loop

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

Queue
 ↓
Event Loop
 ↓
Call Stack

Complete Example

console.log("Start");

setTimeout(() => {

    console.log("Inside Timer");

}, 2000);

console.log("End");

Execution

Call Stack

console.log("Start")

Output:

Start

setTimeout()

Moves to Web API

Timer starts

Next Statement

console.log("End");

Output:

End

Timer Finishes

Moves to Callback Queue

Inside Timer

Event Loop

Pushes callback into Call Stack

Output:

Inside Timer

Summary

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

Key Takeaways

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

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

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

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

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

Types of Functions in JavaScript

Annapoorani Kadhiravan — Fri, 19 Jun 2026 17:42:37 +0000

Functions are one of the most important concepts in JavaScript. They help us organize code, avoid repetition, and make programs easier to understand and maintain.

Think of a function as a machine:

You give it some input.
It performs a task.
It may return an output.

For example:

function makeTea() {
    console.log("Tea is ready");
}

makeTea();

Output:

Tea is ready

Why Do We Need Functions?

Without functions:

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

With functions:

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

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

Real-Life Example

Imagine a washing machine.

Put clothes inside (input).
Start the machine (function).
Get clean clothes (output).

Similarly, a JavaScript function takes data, processes it, and gives a result.

Types of Functions in JavaScript

There are several types of functions:

Function Declaration
Function Expression
Anonymous Function
Arrow Function
Parameters and Arguments Functions
Return Function
Callback Function
Higher Order Function
Immediately Invoked Function Expression (IIFE)
Constructor Function
Recursive Function
Generator Function

1. Function Declaration

Also called Named Function.

Syntax

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

greet();

Output:

Hello World

Real-Time Example

Think of a recipe book.

Whenever you want tea, you follow the recipe.

function makeTea() {
    console.log("Tea is ready");
}

makeTea();

Characteristics

✔ Has a name

✔ Can be called multiple times

✔ Supports hoisting

2. Function Expression

A function stored inside a variable.

Syntax

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

greet();

Output:

Hello World

Real-Time Example

Saving a contact in your phone.

Instead of remembering the number, you store it with a name.

const add = function() {
    console.log("Addition");
};

Here:

Variable = contact name
Function = phone number

Characteristics

✔ Stored in variables

✔ No hoisting like function declarations

✔ Useful when passing functions around

3. Anonymous Function

A function without a name.

const display = function() {
    console.log("Anonymous Function");
};

display();

Output:

Anonymous Function

Real-Life Example

Temporary workers in a company.

They perform a task but don't have permanent identities.

Similarly, anonymous functions are often used once and then discarded.

Example with setTimeout()

setTimeout(function() {
    console.log("Executed after 2 seconds");
}, 2000);

4. Arrow Function

Introduced in ES6.

Syntax

Traditional Function:

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

Arrow Function:

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

Or shorter:

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

Output:

add(10,5)

Real-Life Example

Traditional function is like writing a full letter.

Arrow function is like sending a WhatsApp message—short and quick.

Characteristics

✔ Short syntax

✔ Common in React

✔ Doesn't have its own this

5. Functions with Parameters and Arguments

Parameters receive values.

Arguments are the actual values passed.

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

greet("John");

Output:

Hello John

Real-Life Example

Ordering pizza.

orderPizza("Cheese");

Here:

Parameter = pizza type
Argument = Cheese

Another example:

function multiply(a, b) {
    console.log(a * b);
}

multiply(5,4);

Output:

6. Return Function

Returns a value to the caller.

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

let result = add(10,20);

console.log(result);

Output:

Real-Life Example

ATM Machine

Input:

Withdraw ₹5000

Output:

Cash ₹5000

The cash returned is similar to the return statement.

Without return:

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

With return:

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

The returned value can be reused later.

7. Callback Function

A function passed as an argument to another function.

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

function sayBye() {
    console.log("Good Bye");
}

greet("John", sayBye);

Output:

Hello John
Good Bye

Real-Life Example

Food delivery.

Order food.
Wait for delivery.
Delivery boy calls you.

The call after delivery is like a callback.

Another example:

setTimeout(function() {
    console.log("Executed after 3 seconds");
}, 3000);

8. Higher Order Function

Functions that:

Receive another function.
Return another function.

Example:

function operation(callback) {
    callback();
}

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

operation(display);

Output:

Learning JavaScript

Real-Life Example

A manager assigning work to employees.

Manager = Higher Order Function
Employees = Callback Functions

Examples:

map()

let numbers = [1,2,3];

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

console.log(result);

Output:

[2,4,6]

filter()

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

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

console.log(result);

Output:

[30,40]

9. IIFE (Immediately Invoked Function Expression)

Runs immediately after creation.

(function() {
    console.log("Executed Immediately");
})();

Output:

Executed Immediately

Real-Life Example

Automatic doors.

As soon as someone approaches, the door opens automatically.

Similarly, IIFE executes instantly.

Used for:

Initialization
Avoiding variable conflicts

10. Constructor Function

Used to create objects.

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

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

console.log(s1);

Output:

{
name: "John",
age: 21
}

Real-Life Example

Cookie cutter.

One mold creates many cookies.

Similarly, one constructor creates many objects.

let s2 = new Student("David", 22);
let s3 = new Student("Sam", 23);

11. Recursive Function

A function calling itself.

function countDown(n) {

    if(n === 0)
        return;

    console.log(n);

    countDown(n-1);
}

countDown(5);

Output:

Real-Life Example

Russian dolls.

Each doll contains another smaller doll until the last one.

Factorial Example

function factorial(n) {

    if(n === 1)
        return 1;

    return n * factorial(n-1);
}

console.log(factorial(5));

Output:

12. Generator Function

Introduced in ES6.

Creates values one by one.

function* numbers() {
    yield 1;
    yield 2;
    yield 3;
}

let num = numbers();

console.log(num.next());
console.log(num.next());
console.log(num.next());

Output:

{ value:1, done:false }
{ value:2, done:false }
{ value:3, done:false }

Real-Life Example

Netflix episodes.

Episodes are loaded one at a time instead of loading the entire series at once.

13. Async Function

An Async Function is used to perform asynchronous operations like API calls, database queries, or file handling.

It always returns a Promise and allows us to use the await keyword.

Syntax

async function fetchData() {
    return "Data fetched successfully";
}

fetchData().then(console.log);

Output

Data fetched successfully

Using await

async function getUser() {

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

    let data = await response.json();

    console.log(data);
}

getUser();

Real-Time Example

Imagine ordering food through Swiggy or Zomato.

Place the order.
Wait for the restaurant to prepare it.
Receive the food when it is ready.

The waiting process is similar to an async function.

Where is it used?

API calls
Database operations
File uploads
AWS services
Fetch requests

14. Nested Function

A function defined inside another function is called a Nested Function.

Inner functions can access variables from the outer function.

Example

function outerFunction(a) {

    function innerFunction(b) {
        return a + b;
    }

    return innerFunction;
}

const addTen = outerFunction(10);

console.log(addTen(5));

Output

Real-Time Example

Think of a company.

Company
   ↓
Department
      ↓
Employees

Similarly:

Outer Function
       ↓
Inner Function

The employee (inner function) can access resources provided by the department (outer function).

Another Example

function parent() {

    let name = "John";

    function child() {
        console.log(name);
    }

    child();
}

parent();

Output

John

15. Pure Function

A Pure Function always produces the same output for the same input and does not modify external data.

Example

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

console.log(add(5,3));

Output

Why is it called Pure?

Because:

✔ Same input → Same output

✔ No side effects

✔ Doesn't change global variables

Impure Function Example

let count = 0;

function increment() {
    count++;
}

Here, the global variable changes, so this is an Impure Function.

Pure Function Example

function increment(num) {
    return num + 1;
}

console.log(increment(5));

Output

Real-Time Example

Think of a calculator.

2 + 3 = 5

No matter how many times you perform the calculation, the answer will always be 5.

That's exactly how pure functions work.

Advantages

Predictable
Easy to test
Easier debugging
Commonly used in React and Functional Programming

16. Rest Parameter Function

Rest parameters (...) allow a function to accept any number of arguments.

Syntax

function sum(...numbers) {

    return numbers.reduce((total, num) => total + num, 0);

}

console.log(sum(10,20,30,40));

Output

Another Example

function displayNames(...names) {

    console.log(names);

}

displayNames("John", "David", "Sam");

Output

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

Real-Time Example

Think of a shopping basket.

Sometimes you buy:

1 item

Sometimes:

5 items

Sometimes:

20 items

The basket can hold any number of items.

Similarly, Rest Parameters allow a function to receive any number of arguments.

Complete List of JavaScript Function Types

No	Function Type
1	Function Declaration (Named Function)
2	Function Expression
3	Anonymous Function
4	Arrow Function
5	Parameter and Argument Functions
6	Return Functions
7	Callback Functions
8	Higher Order Functions
9	IIFE (Immediately Invoked Function Expression)
10	Constructor Functions
11	Recursive Functions
12	Generator Functions
13	Async Functions
14	Nested Functions
15	Pure Functions
16	Rest Parameter Functions

References
https://www.geeksforgeeks.org/javascript/functions-in-javascript/

Decoding Hoisting in JS

Annapoorani Kadhiravan — Sun, 14 Jun 2026 10:55:07 +0000

One of the most confusing concepts for JavaScript beginners is Hoisting. Many developers coming from languages like Java, C, or Python often wonder:

How can a function be called before it is declared?
Why does JavaScript print undefined instead of throwing an error?
Why do let and const behave differently from var?

To answer these questions, we need to understand how JavaScript executes code behind the scenes.

What is Hoisting?

Hoisting is JavaScript's behavior of allocating memory for variables and functions before executing the code.

In simple words:

JavaScript scans the entire program first, creates memory for variables and functions, and then starts executing the code line by line.

Because of this, some variables and functions can be accessed before they appear in the source code.

Does JavaScript Actually Move Code?

No.

Nothing physically moves to the top.

Hoisting is simply a conceptual way to explain JavaScript's internal execution process.

JavaScript Execution Phases

JavaScript executes code in two phases:

1. Memory Creation Phase

During this phase:

Variables declared using var are initialized with undefined.
Function declarations are stored completely in memory.
Variables declared using let and const are created but remain inaccessible.

2. Execution Phase

After memory allocation, JavaScript executes statements one by one.

Variable Hoisting with var

Consider:

console.log(x);

var x = 10;

Output

undefined

Many beginners expect:

but JavaScript internally behaves as:

var x;

console.log(x);

x = 10;

During memory creation:

x → undefined

During execution:

Print undefined
Assign 10 to x

Why Does It Print Undefined?

Because only the declaration:

var x;

is hoisted.

The assignment:

x = 10;

remains in its original place.

Variable Hoisting with let

console.log(age);

let age = 25;

Output

ReferenceError:
Cannot access 'age' before initialization

Variable Hoisting with const

console.log(pi);

const pi = 3.14;

Output

ReferenceError

What is Temporal Dead Zone (TDZ)?

Variables declared with let and const are hoisted but remain inside a region called the Temporal Dead Zone.

The TDZ starts from the beginning of the scope and ends when the variable is initialized.

Example:

console.log(a);

let a = 10;

Here:

TDZ begins
↓
console.log(a)
↓
ReferenceError
↓
let a = 10
↓
TDZ ends

Function Hoisting

Functions declared using function declarations are completely hoisted.

Example:

greet();

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

Output

Hello

Internally:

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

greet();

Why Are Functions Fully Hoisted?

JavaScript stores the entire function in memory during the memory creation phase.

Therefore, the function becomes available even before its declaration appears in the code.

Function Expression Hoisting

Consider:

greet();

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

Output

TypeError: greet is not a function

Internally:

var greet;

greet();

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

At the time of function call:

greet = undefined

Thus:

undefined()

causes an error.

Arrow Function Hoisting

hello();

const hello = () => {
    console.log("Hi");
};

Output

ReferenceError

Since const variables remain inside the Temporal Dead Zone, the function cannot be accessed before initialization.

Hoisting Comparison Table

Declaration Type	Hoisted	Initial Value
var	Yes	undefined
let	Yes	TDZ
const	Yes	TDZ
Function Declaration	Yes	Entire Function
Function Expression	Variable only	undefined
Arrow Function	Variable only	TDZ

Hoisting vs Undefined

Many beginners confuse these two terms.

Hoisting

The process of allocating memory before execution.

Undefined

The default value assigned to variables declared using var.

Example:

console.log(num);

var num = 100;

Output:

undefined

because internally:

var num;

console.log(num);

num = 100;

Why Does JavaScript Use Hoisting?

JavaScript separates:

Memory allocation
Code execution

This design provides flexibility and supports features like recursion and function reuse.

Advantages of Hoisting

1. Allows Function Calls Before Declaration

greet();

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

Output:

Hello

2. Supports Recursion

function factorial(n)
{
    if(n === 1)
        return 1;

    return n * factorial(n - 1);
}

Because the function already exists in memory, it can call itself.

3. Improves Code Organization

Example:

main();

function main()
{
    greet();
}

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

Functions can be organized logically without worrying about order.

Should We Rely on Hoisting?

Generally, No.

Although this works:

greet();

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

it is better to write:

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

greet();

This improves:

Readability
Maintainability
Debugging

Common Interview Questions

Is let hoisted?

Yes.

But it remains inside the Temporal Dead Zone.

Is const hoisted?

Yes.

Like let, it stays in the Temporal Dead Zone.

Are functions hoisted?

Function declarations are completely hoisted.

Are arrow functions hoisted?

No.

Only the variable declaration is hoisted.

Why does var print undefined?

Because var variables are initialized with undefined during memory creation.

Difference Between Hoisting and Undefined

Hoisting	Undefined
Memory allocation process	Default value assigned to var variables
Happens before execution	Seen during execution
Applies to variables and functions	Applies only to variables

Tips

✔ Declare variables before using them.

✔ Prefer let and const over var.

✔ Do not intentionally depend on hoisting.

✔ Write function declarations before function calls for better readability.

✔ Use meaningful variable names.

Summary

Hoisting is JavaScript's memory allocation behavior.
Variables declared with var are initialized with undefined.
let and const are hoisted but remain inside the Temporal Dead Zone.
Function declarations are fully hoisted.
Function expressions and arrow functions are not completely hoisted.
Hoisting improves flexibility, but relying on it is not recommended.

Reference

https://www.programiz.com/javascript/hoisting
https://www.w3schools.com/js/js_hoisting.asp
https://www.geeksforgeeks.org/javascript/javascript-hoisting/
https://medium.com/@javvadirupasri8/decoding-javascript-hoisting-a-must-know-concept-for-interviews-c4e23438e93e

More about function in JS

Annapoorani Kadhiravan — Sun, 14 Jun 2026 10:43:42 +0000

Why Do We Need Functions?

Suppose we want to add two numbers several times.

Without functions:

let result = 10 + 20;
console.log(result);

result = 30 + 40;
console.log(result);

result = 50 + 60;
console.log(result);

This approach leads to code duplication.

Using functions:

function add(i, j) {
    let result = i + j;
    console.log(result);
}

add(10, 20);
add(30, 40);
add(50, 60);

Output:

30
70
110

Thus, functions improve:

Reusability
Readability
Maintainability
Modularity

Naming Conventions for Functions

Function names should follow certain rules.

Rules

1. Function names cannot contain spaces

❌ Invalid

function add numbers() {}

✅ Valid

function addNumbers() {}

2. Function names cannot use reserved keywords

❌ Invalid

function return() {}

function for() {}

3. Function names should describe the work performed

Good examples:

calculateTotal()
findMaximum()
printDetails()
generateOTP()

Bad examples:

abc()
xyz()
temp()

What is Camel Case?

Camel Case is a naming convention where:

The first word starts with lowercase.
Every subsequent word starts with an uppercase letter.

Example:

calculateTotalAmount()
findStudentMarks()
printEmployeeDetails()

The capital letters resemble the humps of a camel.

Hence the name Camel Case.

Function Declaration

A function declaration defines a function.

Example:

function add(i, j) {
    return i + j;
}

Here:

add is the function name.
i and j are parameters.

Function Call

Calling or invoking a function means executing it.

add(10, 20);

Here:

10 and 20

are called arguments.

Parameters vs Arguments

This is one of the most commonly asked interview questions.

Parameters	Arguments
Variables in function definition	Values passed during function call
Receive values	Supply values
Exist inside the function	Exist outside the function

Example:

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

add(10, 20);

Parameters:

a, b

Arguments:

10, 20

Types of Parameters

1. Formal Parameters

Declared inside the function definition.

function add(a, b)

Here:

a and b

are formal parameters.

2. Actual Parameters (Arguments)

Passed during function call.

add(10,20);

Here:

10 and 20

are actual parameters.

3. Default Parameters

Provide default values.

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

greet();

Output:

Guest

4. Rest Parameters

Used when the number of arguments is unknown.

function add(...numbers)
{
    console.log(numbers);
}

Does a Function Always Need to Return a Value?

No.

Functions may be:

Return Functions

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

Non-return Functions

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

Both are valid.

Who Decides Whether to Use Return?

The programmer decides.

Use return when:

The result is needed elsewhere.
Another function needs the output.
Data should be stored.

Example:

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

let result = square(5);

Use console.log() when:

You only want to display something.

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

When Should We Use Return Statements?

Use return when:

✔ Performing calculations

✔ Returning values to another function

✔ Storing values in variables

✔ Building reusable utilities

Example:

function multiply(a,b)
{
    return a*b;
}

let answer = multiply(5,4);

Output:

What Happens if Return is Missing?

function add(a,b)
{
    let result = a+b;
}

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

Output:

undefined

Because the function didn't return anything.

Multiple Return Statements

Yes, multiple return statements are allowed.

Example:

function checkNumber(x)
{
    if(x>0)
        return "Positive";

    return "Negative";
}

Only one return executes.

Once return executes, the function terminates.

Can We Return Multiple Values?

Many beginners think this:

return "Biriyani",140,"Salem";

Output:

Salem

Because JavaScript evaluates the comma operator and returns the last value.

Correct Ways

Return an array:

return ["Biriyani",140,"Salem"];

Return an object:

return {
    food:"Biriyani",
    price:140,
    place:"Salem"
};

Does a Function Create the Value or Container?

Functions create values.

Variables act as containers.

Example:

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

The function creates:

Container:

let answer = add(10,20);

answer stores the value.

Function Hoisting

Function declarations are hoisted.

Example:

greet();

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

Output:

Hello

JavaScript internally moves the function declaration to the top.

What is Hoisting?

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

Hoisting vs Undefined

Example:

console.log(x);

var x=10;

Output:

undefined

Because:

Internally:

var x;

console.log(x);

x=10;

Function hoisting:

hello();

function hello()
{
    console.log("Hi");
}

Output:

Hi

JavaScript is Pass-by-Value

Variables themselves are not passed.

Only values are passed.

Example:

function change(x)
{
    x=100;
}

let num=10;

change(num);

console.log(num);

Output:

Because only the value 10 was copied into x.

JavaScript vs Java Functions

JavaScript	Java
Dynamic typing	Static typing
Return type optional	Return type mandatory
Functions can be standalone	Methods belong to classes
Supports first-class functions	Functions are methods
Flexible parameter count	Parameter count fixed

What is function hoisting?

Functions are moved to the top of their scope during execution.

Can a function have multiple returns?

Yes, but only one executes.

What happens after return?

The function terminates immediately.

Is return mandatory?

No.

Difference between parameters and arguments?

Parameters receive values.

Arguments supply values.

What is camelCase?

A naming convention where the first word starts lowercase and subsequent words start with uppercase.

Example:

calculateTotalPrice()

What is the default return value?

undefined

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function
https://javascript.info/function-basics
https://www.w3schools.com/js/js_functions.asp

Types of loops and Function in JS

Annapoorani Kadhiravan — Sat, 13 Jun 2026 18:56:47 +0000

Programming is all about solving problems efficiently. Two concepts that play a major role in writing reusable and efficient programs are loops and functions.

Loops help us perform repetitive tasks without writing the same code again and again, whereas functions help us organize code into reusable blocks.

Let's understand these concepts in detail.

Why Do We Need Loops?

Suppose we want to print "Hello" five times.

Without loops, we would write:

console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");
console.log("Hello");

Although this works, it violates one of the fundamental principles of programming:

Don't Repeat Yourself (DRY)

Repeating code:

Increases the number of lines.
Makes maintenance difficult.
Introduces more chances for errors.

Loops solve this problem by allowing us to execute the same block of code multiple times.

Types of Loops in JavaScript

JavaScript provides three looping statements:

Loop Type	Category
while	Entry-Check Loop
for	Entry-Check Loop
do...while	Exit-Check Loop

Entry-Check Loop / Entry-Controlled Loop

In entry-Check loops, the condition is checked before executing the loop body.

If the condition is false initially, the loop body never executes.

Examples:

while loop
for loop

Exit-Check Loop / Exit-Controlled Loop

In an exit-Check loop, the loop body executes first and then checks the condition.

Therefore, the body executes at least once.

Example:

do...while loop

Components of Every Loop

Every loop generally consists of three parts:

1. Initialization

Determines where the loop starts.

let i = 1;

2. Condition

Determines whether the loop should continue executing.

i <= 5

3. Increment or Decrement

Updates the loop variable after each iteration.

i++;

i--;

1. while Loop

The while loop repeatedly executes a block of code as long as the condition remains true.

Syntax

while(condition)
{
    // statements
}

Example: Print Numbers from 1 to 5

let i = 1;

while(i <= 5)
{
    console.log(i);
    i++;
}

Output

Working of while Loop

Iteration 1:

i = 1
1 <= 5 → true
Print 1
i becomes 2

Iteration 2:

i = 2
2 <= 5 → true
Print 2

This process continues until:

i = 6
6 <= 5 → false

At that point, the loop terminates.

Infinite Loop

An infinite loop occurs when the condition never becomes false.

Example:

let i = 1;

while(i <= 5)
{
    console.log(i);
}

Output:

1
2
3
4
5
...

The loop never stops because i++ is missing.

Infinite loops consume CPU and memory resources and may eventually crash the program.

2. for Loop

The for loop is considered the compact form of the while loop because initialization, condition, and increment are written in a single line.

Syntax

for(initialization; condition; increment)
{
    // statements
}

Example

for(let i = 1; i <= 5; i++)
{
    console.log(i);
}

Output

while Loop vs for Loop

while Loop

let i = 1;

while(i <= 5)
{
    console.log(i);
    i++;
}

for Loop

for(let i = 1; i <= 5; i++)
{
    console.log(i);
}

Both produce the same output.

The difference lies mainly in readability.

Special Forms of for Loop

Infinite Loop

for(;;)
{
    console.log("Hi");
}

Output:

Hi
Hi
Hi
...

Since no condition is provided, JavaScript assumes it is always true.

Explicit Infinite Loop

for(;true;)
{
    console.log("Hi");
}

Output:

Hi
Hi
Hi
...

No Iteration

for(;false;)
{
    console.log("Hi");
}

Output:

No output.

Because the condition is false initially.

When Should We Use while and for?

Use while Loop

When the number of iterations is unknown.

Examples:

Reading data until a valid input is entered.
Waiting for a user action.
Processing files until end-of-file is reached.

while(password !== correctPassword)
{
    // ask again
}

Use for Loop

When the number of iterations is known.

Examples:

Print numbers from 1 to 100.
Traverse arrays.
Display table values.

for(let i=1;i<=100;i++)
{
    console.log(i);
}

do...while Loop

The do...while loop executes the body first and checks the condition later.

Syntax

do
{
    // statements
}
while(condition);

Example

let i = 1;

do{
    console.log(i);
    i++;
}
while(i <= 5);

Output

Why Is It Called Exit-Controlled / Exit-check?

Because the condition is checked after executing the loop body.

Therefore, the body executes at least once.

Curly Braces in JavaScript

Curly braces define a block of statements.

Without braces, only the first statement belongs to the loop or if statement.

Example:

let i = 5;

if(i == 4)
    console.log("Hello");

console.log("Bye");

Output:

Bye

Because:

if(i == 4)
{
    console.log("Hello");
}

console.log("Bye");

Multiple Statements Using Curly Braces

if(i == 4)
{
    console.log("Hello");
    console.log("Bye");
}

Now both statements belong to the if block.

Infinite Loop Due to Missing Braces

let i = 5;

while(i >= 1)
    console.log("Hello");

console.log("Bye");

Output:

Hello
Hello
Hello
...

Notice that:

console.log("Bye");

is outside the loop.

Also, i never changes, causing an infinite loop.

Functions in JavaScript

Functions are reusable blocks of code.

They are considered the building blocks of programs.

Functions help:

Reduce code duplication.
Improve readability.
Increase maintainability.
Promote modular programming.
Reuse code multiple times.

Creating a Function

function add(i, j)
{
    let result = i + j;
    console.log(result);
}

add(10,10);

Output:

Parameters and Arguments

Parameters

Variables declared in the function definition.

function add(i, j)

i and j are parameters.

Arguments

Values passed while calling the function.

add(10,10);

Here:

10 and 10 are arguments.

Real-Life Analogy: Biriyani Function

Think of a function like a recipe.

function biriyani(riceContainer, masalaContainer, container)
{
    console.log("Biriyani ready");
}

Calling:

biriyani("rice", "masala", "chicken");

supplies the ingredients.

Calling Without Arguments

biriyani();

Internally:

riceContainer = undefined
masalaContainer = undefined
container = undefined

If printed:

function biriyani(riceContainer, masalaContainer, container)
{
    console.log(riceContainer);
    console.log(masalaContainer);
    console.log(container);
}

biriyani();

Output:

undefined
undefined
undefined

Passing Actual Values

biriyani("BasmatiRice", "Masala", "Mutton");

Output:

BasmatiRice
Masala
Mutton

Summary

Loops

while → Entry-controlled loop / Entry-Check loop.
for → Entry-controlled loop / Entry-check loop.
do...while → Exit-controlled loop / Exit-check loop.
Infinite loops occur when conditions never become false.
Curly braces group multiple statements.

Functions

Functions are reusable blocks of code.
Parameters receive values from arguments.
Missing arguments become undefined.
Functions improve readability and modularity.

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
https://javascript.info/while-for
https://javascript.info/function-basics
https://www.w3schools.com/js/js_loop_for.asp
https://www.w3schools.com/js/js_functions.asp

Understanding Looping in JavaScript

Annapoorani Kadhiravan — Tue, 09 Jun 2026 17:23:04 +0000

Programming often requires performing the same task multiple times. Writing the same code repeatedly is inefficient and difficult to maintain. This is where loops come into the picture.

Loops allow us to execute a block of code repeatedly until a specified condition becomes false.

Why Do We Need Loops?

Suppose we want to print 1 five times.

Without loops, we would need to write:

let count = 0;

if (count < 5) {
    console.log(1);
    count++;
}

// Repeat the same block 4 more times

Repeating the same block several times increases the number of lines and makes the program difficult to manage.

To avoid this repetition, JavaScript provides loops.

The while Loop

A while loop is a shorter and more efficient way to execute the same block of code multiple times.

Syntax

while(condition) {
    // code to execute
}

The loop continues executing as long as the condition evaluates to true.

Example 1: Print 1 Five Times

let count = 0;

while (count < 5) {
    console.log(1);
    count++;
}

Output

How It Works

count starts at 0.
The condition count < 5 is checked.
Since the condition is true, 1 is printed.
count++ increases the value by 1.
The process repeats until count becomes 5.
At that point, the condition becomes false and the loop stops.

Infinite Loop

Consider the following code:

let count = 0;

while (count < 5) {
    console.log(1);
}

Since count is never incremented, the condition always remains true.

As a result, the loop keeps running forever, creating an infinite loop.

Therefore, always ensure that the loop variable is updated properly.

Example 2: Print Numbers from 1 to 5

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

Output

Explanation

Initial value = 1
Ending value = 5
Interval = +1

The variable increases by one after each iteration.

Example 3: Print Numbers from 5 to 1

let i = 5;

while (i >= 1) {
    console.log(i);
    i--;
}

Output

Explanation

Initial value = 5
Ending value = 1
Interval = -1

The variable decreases after each iteration.

Example 4: Find the Sum of the First Five Numbers

let i = 1;
let sum = 0;

while (i <= 5) {
    sum += i;
    i++;
}

console.log(sum);

Output

Step-by-Step

Iteration	Value of i	Sum
1	1	1
2	2	3
3	3	6
4	4	10
5	5	15

Example 5: Print Odd Numbers

Odd numbers can be generated by increasing the value by 2 in each iteration.

let i = 1;

while (i <= 9) {
    console.log(i);
    i += 2;
}

Output

Explanation

Initial value = 1
Ending value = 9
Interval = 2

Components of a Loop

Every loop generally contains three important parts:

1. Initial Value

let i = 1;

Determines where the loop starts.

2. Condition

i <= 5

Determines when the loop should continue executing.

3. Increment or Decrement

i++;

i--;

Changes the loop variable after each iteration.

Short Summary

Loops help avoid writing repetitive code.
A while loop executes repeatedly as long as its condition is true.
Every loop requires:
- Initial value
- Condition
- Increment or decrement
Forgetting to update the loop variable results in an infinite loop.
Loops can be used to print numbers, calculate sums, and generate patterns efficiently.

References
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
https://www.w3schools.com/js/js_loop_while.asp
https://javascript.info/while-for