DEV Community: Ezhil Abinaya K

My JavaScript DOM Mini Projects

Ezhil Abinaya K — Mon, 29 Jun 2026 05:49:41 +0000

JavaScript DOM Mini Projects
I completed four beginner-friendly mini projects. These projects helped me understand how JavaScript interacts with HTML elements and updates the webpage dynamically without refreshing it.
1. Change Text on Button Click
In this project, I learned how to access HTML elements using getElementById() and change their content using the innerText property. When the button is clicked, the text changes dynamically.
Concepts Learned:

document.getElementById()
innerText
onclick event

2. Light ON/OFF Toggle
This project simulates a light bulb that turns ON and OFF when the button is clicked. I used a Font Awesome light bulb icon and changed its color using JavaScript.

Concepts Learned:

style.color
if...else
DOM element manipulation
Event handling

3. Counter App
The Counter App increases, decreases, and resets a number displayed on the screen.It updating the DOM whenever the counter value changes.

Concepts Learned:

Variables (let)
Increment (++) and Decrement (--)
innerText
Functions

4. Live Character Counter
In this project, the number of characters typed inside a textarea is counted instantly. The count updates every time the user types.
Concepts Learned:

value
length
onkeyup event
Live DOM updates

What I Learned
These four mini projects strengthened my understanding of JavaScript DOM fundamentals. I learned how to:

Select HTML elements using getElementById()
Handle button and keyboard events
Modify text and styles dynamically
Use conditional statements (if...else)
Work with variables and functions
Read user input using value
Count characters using length

These projects are small, but they build a strong foundation for creating interactive web applications.

Document Object Model(DOM) in Javascript

Ezhil Abinaya K — Fri, 26 Jun 2026 07:40:22 +0000

Document Object Model(DOM)
The DOM (Document Object Model) is a programming interface for HTML documents. It represents the HTML document as a tree-like structure of objects, allowing JavaScript to access, modify, add, or remove HTML elements, attributes, and styles dynamically. It is used to make web pages interactive.

What can we do using DOM?

Access HTML elements
Change text (innerText)
Change HTML (innerHTML)
Change CSS styles (style)
Add new elements
Remove elements
Handle events (click, keypress, etc.)

<html>
<head></head>

<body>
    <h1 id="demo">This is some text.</h1>
    <button onclick="changeText()">
      Change Text
      </button>

    <script>
        function changeText() {
            let element = document.getElementById("demo");
            element.textContent = "Text changed by JavaScript!";
        }
    </script>
</body>

</html>

The HTML page contains a heading element with the id "demo" and a button.
When the button is clicked, the changeText() function is triggered using the onclick event.
Inside the function, document.getElementById("demo") is used to access the heading element and store it in the element variable.
The textContent property updates the heading text to "Text changed by JavaScript!" dynamically without reloading the page.

Accessing Elements in the DOM
getElementById()
Retrieves an element by its id.

let heading = document.getElementById("title");
console.log(heading.textContent);

Reference
https://www.geeksforgeeks.org/html/javascript-html-dom/

Array Search Methods in Javascript

Ezhil Abinaya K — Thu, 25 Jun 2026 14:02:27 +0000

Array indexOf()
indexOf() is an array search method used to find the first occurrence of a specified element in an array. It takes the element to search for as an argument and returns its index position. If the element is not found, it returns -1. The return type is Number. It is useful when we need to know the position of an element in an array.

let fruits = ["Apple", "Mango", "Orange", "Mango"];
let result = fruits.indexOf("Mango");
console.log(result);//1

let fruits = ["Apple", "Mango", "Orange", "Mango"];
let result =fruits.indexOf("Grapes");
console.log(result);//-1

Array lastIndexOf()
lastIndexOf() is an array search method used to find the last occurrence of a specified element in an array.If the element appears multiple times, only the index of its first occurrence is returned. It takes the element to search for as an argument and returns its index position. If the element is not found, it returns -1. The return type is Number. It is useful when we need to find the last position of an element in an array.

let fruits = ["Apple", "Mango", "Orange", "Mango"];
let result = fruits.lastIndexOf("Mango");
console.log(result);//3

Array includes()
includes() is an array search method used to check whether a specified element exists in an array. It takes the element to search for as an argument and returns true if the element is found; otherwise, it returns false. The return type is Boolean. It is useful when we want to verify the presence of an element in an array.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.includes("Mango");
console.log(result);//true

Array find()
find() is an array iteration and search method used to find the first element that satisfies a specified condition.[find() is considered an array iteration method because it iterates through array elements one by one until it finds a matching element.] It executes a callback function for each element in the array and returns the first matching element. If no element satisfies the condition, it returns undefined. The return type is the element itself (such as Number, String, Object, etc.) or undefined. It is useful when we need to retrieve the first matching element from an array.

let nums = [10, 20, 30, 40];
let result = nums.find(num => num > 15);
console.log(result);//20

Array findIndex()
findIndex() is an array iteration and search method used to find the index of the first element that satisfies a specified condition. It executes a callback function for each element in the array and returns the index of the first matching element. If no element satisfies the condition, it returns -1. The return type is Number. It is useful when we need the position of a matching element instead of the element itself.

let nums = [10, 20, 30, 40];
let result = nums.findIndex(num => num > 15);
console.log(result);//1

Array findLast()
findLast() is an array iteration and search method used to find the last element that satisfies a specified condition. It executes a callback function for each element starting from the end of the array and returns the last matching element. If no element satisfies the condition, it returns undefined. The return type is the element itself (Number, String, Object, etc.) or undefined. It is useful when we need the last matching element in an array.

let nums = [10, 20, 30, 40];
let result = nums.findLast(num => num > 15);
console.log(result);//40

Array findLastIndex()
findLastIndex() is an array iteration and search method used to find the index of the last element that satisfies a specified condition. It executes a callback function for each element starting from the end of the array and returns the index of the last matching element. If no element satisfies the condition, it returns -1. The return type is Number. It is useful when we need the position of the last matching element in an array.

let nums = [10, 20, 30, 40];
let result = nums.findLastIndex(num => num > 15);
console.log(result);//3

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

Array Sort Methods in Javascript

Ezhil Abinaya K — Thu, 25 Jun 2026 09:38:29 +0000

Array Sort Methods
sort() is an array method used to arrange the elements of an array in a specific order. By default, it sorts elements as strings in ascending order. We can also provide a compare function to sort numbers or custom data in ascending or descending order. This method modifies the original array and returns the sorted array. The return type is Array. It is useful when we need to organize data in a particular order.

let fruits = ["Mango", "Apple", "Orange"];
let result = fruits.sort();//["Apple", "Mango", "Orange"]

Array sort()
sort() is an array method used to arrange the elements of an array in a specific order. By default, it sorts elements as strings in ascending order. It modifies the original array and returns the sorted array. The return type is Array. We can also use a compare function to sort numbers or custom data in ascending or descending order.

let fruits = ["Mango", "Apple", "Orange"];
console.log(fruits.sort());//[ 'Apple', 'Mango', 'Orange' ]

Array reverse()
reverse() is an array method used to reverse the order of elements in an array. It changes the original array by reversing the sequence of elements. The return type is Array. It is useful when we want to display or process data in reverse order.

let fruits = ["Apple", "Mango", "Orange"];
console.log(fruits.reverse());//[ 'Orange', 'Mango', 'Apple' ]

Array toSorted()
toSorted() is an array method used to sort the elements of an array in ascending or descending order without modifying the original array. It works similar to sort(), but instead of changing the original array, it returns a new sorted array. The return type is Array. It is useful when we want to keep the original data unchanged while sorting.

let fruits = ["Mango", "Apple", "Orange"];
let result = fruits.toSorted();
console.log(result);//[ 'Apple', 'Mango', 'Orange' ]
console.log(fruits);//[ 'Mango', 'Apple', 'Orange' ]

Array toReversed()
toReversed() is an array method used to reverse the order of elements in an array without modifying the original array. It returns a new array with elements in reverse order. The return type is Array. It is useful when we want a reversed version of the array while keeping the original array unchanged.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.toReversed();
console.log(result);//[ 'Orange', 'Mango', 'Apple' ]
console.log(fruits);//[ 'Apple', 'Mango', 'Orange' ]

Sorting Objects
We can sort objects in JavaScript using the sort() method along with a compare function. Since objects do not have a default sorting order, we need to specify a property based on which the sorting should be done, such as name, age, or marks. The compare function helps decide the order of objects by comparing their property values.

let students = [
  { name: "A", age: 25 },
  { name: "B", age: 20 },
  { name: "C", age: 22 }
];
students.sort((a, b) => a.age - b.age);
console.log(students);
//[
  { name: 'B', age: 20 },
  { name: 'C', age: 22 },
  { name: 'A', age: 25 }
]

Numeric Sort
Numeric sort in JavaScript is used to sort numbers in ascending or descending order using the sort() method with a compare function. By default, sort() treats numbers as strings, so we need a compare function to correctly sort numeric values.It modifies the original array and returns the sorted array.

let nums = [30, 5, 100, 20];
nums.sort((a, b) => a - b);
console.log(nums);//[ 5, 20, 30, 100 ]

let nums = [30, 5, 100, 20];
nums.sort((a, b) => b - a);
console.log(nums);//[ 100, 30, 20, 5 ]

Math.min()
Math.min() is a built-in JavaScript method used to find the smallest value among the given numbers. It takes one or more numeric arguments and returns the minimum value. The return type is Number. It is useful when we need to identify the smallest value from a set of numbers.

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

let nums = [10, 5, 20, 3];
console.log(Math.min(...nums));//3

Math.max()
Math.max() is a built-in JavaScript method used to find the largest value among the given numbers. It takes one or more numeric arguments and returns the maximum value. The return type is Number. It is useful when we need to identify the largest value from a set of numbers.

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

let nums = [10, 5, 20, 3];
console.log(Math.max(...nums));//20

Home made Min()
We can create a custom min() function by iterating through the array and comparing each element. We assume the first element as the minimum and update it whenever we find a smaller value. Finally, we return the smallest value. The return type is Number.

function myMin(arr) {
    let min = arr[0];

    for (let i = 1; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i];
        }
    }

    return min;
}

let nums = [10, 5, 20, 3];

console.log(myMin(nums));//3

Home made Max()
We can create a custom max() function by iterating through the array and comparing each element. We assume the first element as the maximum and update it whenever we find a larger value. Finally, we return the largest value. The return type is Number.

function myMax(arr) {
    let max = arr[0];

    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }

    return max;
}
let nums = [10, 5, 20, 3];
console.log(myMax(nums));//20

Reference
https://www.w3schools.com/js/js_array_sort.asp

Array Iteration Methods in Javascript

Ezhil Abinaya K — Wed, 24 Jun 2026 14:33:18 +0000

Array Iteration Methods
Array iteration methods are used to iterate through array elements and perform operations on them without using traditional loops.
Array forEach()
forEach() is an array iteration method used to execute a function for each element in an array. It processes the elements one by one in sequence and is commonly used when we want to perform an operation on every element. It takes a callback function as an argument. This method does not return a new array; its return value is undefined. It is useful for tasks such as displaying data, printing values, or updating elements.

let nums = [10, 20, 30];
nums.forEach(function(num) {
    console.log(num);
});
//10
20
30

Array map()
map() is an array iteration method used to transform or modify each element of an array. It executes a callback function for every element and creates a new array based on the returned values. This method does not modify the original array. The return type is Array. It is useful when we want to perform an operation on all elements and get the results in a new array.

let nums = [1, 2, 3];
let result = nums.map(num => num * 2);//result = [2, 4, 6]

Array flatMap()
flatMap() is an array iteration method that combines the functionality of map() and flat(). It first applies a callback function to each element of the array and then flattens the result by one level. This method returns a new array and does not modify the original array. The return type is Array. It is useful when the callback function returns arrays and we want the final result in a single flattened array.

let arr = [1, 2, 3];
let result = arr.flatMap(num => [num, num * 2]);//[1, 2, 2, 4, 3, 6]

Array filter()
filter() is an array iteration method used to select elements from an array based on a condition. It executes a callback function for each element and includes only the elements that satisfy the condition in the result. This method returns a new array and does not modify the original array. The return type is Array. It is useful when we want to extract specific elements from an array.

let nums = [10, 20, 30, 40];
let result = nums.filter(num => num > 20);//[30, 40]

Array reduce()
reduce() is an array iteration method used to combine all the elements of an array into a single value. It executes a callback function for each element and accumulates the result. This method returns a single value, such as a number, string, object, or array, depending on the logic used. It is useful for operations like calculating totals, sums, averages, or building a single result from multiple elements.

let nums = [10, 20, 30];
let result = nums.reduce((total, num) => total + num, 0);
console.log(result);//60

Array reduceRight()
reduceRight() is an array iteration method used to combine all the elements of an array into a single value, similar to reduce(). The difference is that it processes the elements from right to left, starting from the last element and moving towards the first element. It returns a single accumulated value, and the return type depends on the logic used.

let arr = ["A", "B", "C"];
let result = arr.reduceRight((acc, value) => acc + value);
console.log(result);//CBA

Array every()
every() is an array iteration method used to check whether all elements in an array satisfy a given condition. It executes a callback function for each element and returns true only if every element meets the condition. If any element fails the condition, it returns false. The return type is boolean. It is useful when we want to validate all elements in an array.

let nums = [10, 20, 30];
let result = nums.every(num => num > 5);
console.log(result);//true

Array some()
some() is an array iteration method used to check whether at least one element in an array satisfies a given condition. It executes a callback function for each element and returns true if any element meets the condition. If no elements satisfy the condition, it returns false. The return type is Boolean. It is useful when we want to check if an array contains at least one matching element.

let nums = [10, 20, 30];
let result = nums.some(num => num > 25);
console.log(result);//true

Array from()
Array.from() is a built-in static method used to create a new array from an array-like object or an iterable object such as a string. It converts the given data into an actual array and returns the new array. The return type is Array. It is useful when we need to perform array operations on data that is not already an array.

let result = Array.from("Hello");
console.log(result);//[ 'H', 'e', 'l', 'l', 'o' ]

Array keys()
keys() is an array method used to get the index values of an array. It returns an iterator object containing the keys (indexes) of the array elements. The return type is Array Iterator. It is useful when we need to access or iterate through the index positions of an array.An iterator is an object that allows us to access values one by one.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.keys();
for (let key of result) {
    console.log(key);
}
//0
1
2

Array entries()
entries() is an array method used to get both the index and value of each element in an array. It returns an iterator containing key-value pairs, where the key is the index and the value is the corresponding array element. The return type is Array Iterator. It is useful when we need both the index and the value while processing an array.

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

let result = fruits.entries();
for (let entry of result) {
    console.log(entry);
}
//[ 0, 'Apple' ]
[ 1, 'Mango' ]
[ 2, 'Orange' ]

Array with()
with() is an array method used to replace an element at a specific index and return a new array with the updated value. It takes the index and the new value as arguments. This method does not modify the original array. The return type is Array. It is useful when we want to update an element while keeping the original array unchanged.

let fruits = ["Apple", "Mango", "Orange"];
let result = fruits.with(1, "Grapes");
console.log(result);//[ 'Apple', 'Grapes', 'Orange' ]

Array Spread (...)
The spread operator (...) is used to expand the elements of an array into individual values. It is commonly used to copy arrays, merge multiple arrays, or pass array elements as separate arguments to a function. It returns the expanded values, and when used inside an array literal, it helps create a new array. It is useful for writing shorter and cleaner code.An array literal is a way of creating an array using square brackets [] and placing the elements inside them.

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = [...arr1, ...arr2];
console.log(result);//[ 1, 2, 3, 4 ]

Array Rest (...)
The rest operator (...) is used to collect multiple values into a single array. It is commonly used in function parameters when we do not know how many arguments will be passed. The collected values are stored in an array. It is useful for handling a variable number of values in a flexible way.

function showNumbers(...nums) {
    console.log(nums);
}

showNumbers(10, 20, 30);//[ 10, 20, 30 ]

Internal Logics Behind Javascript Array Methods

Ezhil Abinaya K — Tue, 23 Jun 2026 16:46:47 +0000

Array join()
It combines all the elements of an array into a single string.It allows us to specify our own separator between the elements.

const myArr=["HTML","CSS","JS"];
function joinDemo(arr,separator){
let result="";
for(let i=0;i<arr.length;i++){
result+=arr[i];
if(i<arr.length-1){
result+=separator;
}
}
return result;
}
console.log(joinDemo(myArr,"-"));//HTML-CSS-JS

Built-in Logic

const arr=["HTML","CSS","JS"];
console.log(arr.join("-"));//HTML-CSS-JS

Array at()
Returns the value at a specific array index, supporting both positive and negative indexing.

const myArr=["HTML","CSS","JS"];
function atDemo(arr,index){
if(index<0){
index=arr.length+index;
}
return arr[index];
}
console.log(atDemo(myArr,1));//CSS
console.log(atDemo(myArr,1));//JS

Built-in Logic

const arr=["HTML","CSS","JS"];
console.log(arr.at(1));//CSS
console.log(arr.at(-1));//JS

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

const myArr=["HTML","CSS","JS"];
function popDemo(arr){
    const removedElement=arr[arr.length-1];
    arr.length=arr.length-1;
    return removedElement;
}
console.log(popDemo(myArr));//JS
console.log(myArr);//[ 'HTML', 'CSS' ]

Built-in Logic

const arr=["HTML","CSS","JS"];
const removed=arr.pop();
console.log(removed);//JS
console.log(arr);//[ 'HTML', 'CSS' ]

Array push()
The push() method adds one or more elements to the end of an array.
Return type: New array length.

const myArr=["HTML","CSS"];
function pushDemo(arr,value){
arr[arr.length]=value;
return arr.length;
}
console.log(pushDemo(myArr,"JS"));//3
console.log(myArr);//[ 'HTML', 'CSS', 'JS' ]

Built-in Logic

const arr=["HTML","CSS"];
const newlength=arr.push("JS");
console.log(newlength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]

Multiple Values Version

const myArr=["HTML"];
function pushDemo(arr,...values){
    for(let i=0;i<values.length;i++){
        arr[arr.length]=values[i];
    }
    return arr.length;
}
console.log(pushDemo(myArr,"CSS","JS"));//3
console.log(myArr);  //[ 'HTML', 'CSS', 'JS' ]

Array shift()
The shift() method removes the first element from an array and returns that removed element.

const arr=["HTML","CSS","JS"];
function shiftDemo(arr){
    const removedElement=arr[0];
    for(let i=0;i<arr.length-1;i++){
        arr[i]=arr[i+1];
    }
    arr.length=arr.length-1;
    return removedElement;
    }
console.log(shiftDemo(arr));//HTML
console.log(arr);//[ 'CSS', 'JS' ]

Built-in Logic

const arr=["HTML","CSS","JS"];
const removed =arr.shift();
console.log(removed);//HTML
console.log(arr);//[ 'CSS', 'JS' ]

Array unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of that array.

const myArr=["CSS","JS"];
function unshiftDemo(arr,value){
for(let i=arr.length;i>0;i--){
arr[i]=arr[i-1]; 
}
arr[0]=value;
return arr.length;
}
console.log(unshiftDemo(myArr,"HTML"));//3
console.log(myArr);//[ 'HTML', 'CSS', 'JS' ]

Built-in Logic

const arr=["CSS","JS"];
const newLength=arr.unshift("HTML");
console.log(newLength);//3
console.log(arr);//[ 'HTML', 'CSS', 'JS' ]

Array concat()
The concat() method in JavaScript merges two or more arrays and returns a brand-new array without modifying the original arrays.

const arr1=["HTML","CSS"];
const arr2=["JS","React"];
function concatDemo(arr1,arr2){
const result=[];
for(let i=0;i<arr1.length;i++){
result[result.length]=arr1[i];
}
for(let i=0;i<arr2.length;i++){
result[result.length]=arr2[i];
}
return result;
}
console.log(concatDemo(arr1,arr2));//[ 'HTML', 'CSS', 'JS', 'React' ]

Built-in Logic

const arr1=["HTML","CSS"];
const arr2=["JS","React"];
const result=arr1.concat(arr2);
console.log(result);//[ 'HTML', 'CSS', 'JS', 'React' ]

Array copyWithin()
The copyWithin() method copies array elements to another position within the same array. It directly modifies (mutates) the original array without changing its length.
Syntax

array.copyWithin(target, start, end)

target → The index where the copied elements will be pasted.
start → The index from which elements will be copied.
end → The index up to which elements will be copied (exclusive, not included).

const myArr=[1,2,3,4,5];
function copyWithinDemo(arr,target,start){
for(let i=start;i<arr.length;i++){
arr[target]=arr[i];
target++;
}
return arr;
}
console.log(copyWithinDemo(myArr,0,3));//[ 4, 5, 3, 4, 5 ]

Built-in Logic

const myArr=[1,2,3,4,5];
myArr.copyWithin(0,3);
console.log(myArr);//[ 4, 5, 3, 4, 5 ]

Array flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to a specified depth.

const arr = [1, 2, [3, 4], [5, 6]];

function flatDemo(arr) {

    const result = [];

    for (let i = 0; i < arr.length; i++) {

        if (Array.isArray(arr[i])) {

            for (let j = 0; j < arr[i].length; j++) {
                result.push(arr[i][j]);
            }

        } else {

            result.push(arr[i]);

        }
    }

    return result;
}

console.log(flatDemo(arr));//[ 1, 2, 3, 4, 5, 6 ]

Built-in Logic

const arr = [1, 2, [3, 4], [5, 6]];
console.log(arr.flat());//[ 1, 2, 3, 4, 5, 6 ]

Array slice()
The slice() method copies a portion of an array and returns it as a new array without modifying the original one.
Syntax

array.slice(startIndex, endIndex);

const arr=["HTML","CSS","JS","React"];
function sliceDemo(arr,start,end){
const result=[];
for(let i=start;i<end;i++){
result[result.length]=arr[i];
}
return result;
}
console.log(sliceDemo(arr,1,3));//[ 'CSS', 'JS' ]
console.log(arr);//[ 'HTML', 'CSS', 'JS', 'React' ]

Built-in Logic

const arr=["HTML","CSS","JS","React"];
const result=arr.slice(1,3);
console.log(result);//[ 'CSS', 'JS' ]

Array Methods in Javascript

Ezhil Abinaya K — Mon, 22 Jun 2026 13:53:35 +0000

Array Methods in Javascript
To help you perform common tasks efficiently, JavaScript provides a wide variety of array methods. These methods allow you to add, remove, find, and transform array elements with ease.
Array length
The length property is the standard way to find the number of elements in a JavaScript array. It returns an integer representing the total number of slots in the array.To get the size of an array, use the .length property. Do not use parentheses because it is a property, not a method.

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // Output: 3

const fruits = ['apple', 'banana']; 

if (fruits.length === 0) { 
    console.log("Array is empty"); 
} else {
    console.log("Array has items inside it!");
}
// Output: Array has items inside it!

const numbers = [10, 20, 30, 40];
numbers.length = 2; 
console.log(numbers); // Output: [10, 20]

Extending an array: Increasing the length property adds empty slots (not undefined values) to the end of the array.

const items = ['A'];
items.length = 3;
console.log(items); // Output: ['A', <2 empty items>]

Array toString()
It converts a JavaScript array into a single, comma-separated string containing all its elements.This method takes no arguments and always has a Return Type of a String containing all elements separated by commas. It is compatible with any data type inside the array; numbers, booleans, and strings convert cleanly to text.

const fruits = ["Apple", "Banana", "Orange"];
const result = fruits.toString();
console.log(result); 
//Apple,Banana,Orange

// Array containing numbers, strings, and mixed text
const mixedArray = [100, "Apple", 250, "Banana", 12.5, "Orange"];
// Convert to string
const result = mixedArray.toString();
console.log(result);//100,Apple,250,Banana,12.5,Orange
console.log(typeof result);//  string

No Modification: It does not change the original array. It returns a brand-new string.
No Parameters: The method accepts zero arguments.
Array join() Method
It creates and returns a new string by concatenating all of the elements in this array, separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.The join() method always returns a string data type.Even if your array contains only numbers, booleans, or objects, the final output will always be converted into a single primitive string text.
Return Value: A brand-new string.
Original Array: It remains completely unchanged (pure method).
Default Behavior: If you provide no separator, it defaults to a comma (,).

const elements = ['Fire', 'Air', 'Water'];

// 1. No argument (defaults to comma)
console.log(elements.join());

// 2. Custom separator (comma and space)
console.log(elements.join(', '));

// 3. Empty string separator (joins directly)
console.log(elements.join(''));

// 4. Custom word or character separator
console.log(elements.join(' and '));
//Fire,Air,Water
Fire, Air, Water
FireAirWater
Fire and Air and Water

null and undefined handling: If any element in the array is null or undefined, join() converts it into an empty string "" instead of printing "null" or "undefined".

const mixed = ['Hello', null, 'World', undefined];
console.log(mixed.join('-')); //Hello--World-

console.log([1, , 3].join(','));//1,,3

Array at()
It is an method takes an integer value and returns the item at that index, allowing for both positive and negative integers.The primary advantage of at() is that it simplifies negative indexing, allowing you to count elements backward from the end of an array.
1.Accessing the Last Element (The at() Advantage)
Instead of using the bulky bracket notation to calculate the final index, you can use -1.

const colors = ['red', 'green', 'blue', 'yellow'];
// Old bracket way
console.log(colors[colors.length - 1]); // yellow
// New at() way
console.log(colors.at(-1)); // yellow
console.log(colors.at(-2)); // green

2. Positive vs. Negative Indexing

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.at(0));  // apple (First item)
console.log(fruits.at(1));  // banana (Second item)
console.log(fruits.at(-3)); // apple (Third from the end)
console.log(fruits.at(10)); // undefined (Out of bounds)

Array pop()
It is an method in JavaScript removes the last element from an array and returns that element.This is a mutating method, meaning it modifies the original array directly by changing its contents and decreasing its length property by one.

Parameters: None.
Return Value: The removed element from the array. If the array is empty, it returns undefined.

// Initialize an array
const frameworks = ["React", "Vue", "Angular"];
// Remove the last item
 const removedFramework =frameworks.pop();
console.log(removedFramework); // Output: Angular (the removed element)
console.log(frameworks); // Output: ['React', 'Vue'] (the original array is mutated)
console.log(frameworks.length); // Output: 2 (the length decreased by 1)

Empty Arrays: Calling pop() on an empty array does not throw an error; it simply returns undefined and leaves the length at 0.

const emptyArray = [];
console.log(emptyArray.pop()); //  undefined

Array push()
It is an method adds one or more elements to the end of an array and returns the new length of that array. It is a destructive method, meaning it mutates (changes) the original array directly.
Returns a number: It does not return the updated array; it returns the updated length integer.
Appends multiple items: You can pass multiple values at once as individual arguments.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');
console.log(fruits);    // ['apple', 'banana', 'orange']
console.log(newLength); //  3

const numbers = [1, 2];
numbers.push(3, 4, 5);
console.log(numbers); // Output: [1, 2, 3, 4, 5]

Array shift()
It is an method in JavaScript removes the very first element from an array and returns that removed element. This method permanently changes (mutates) the original array by shifting all remaining items down by one index and decreasing the array's length by one.

Return Value: It extracts and returns the item from index 0. If you call it on an empty array, it leaves the array unchanged and returns undefined.
Array Mutation: It modifies the array in place.

const fruits = ["Apple", "Banana", "Cherry"];
// Remove the first item
const firstFruit = fruits.shift();
console.log(firstFruit); // Output: Apple
console.log(fruits);     // Output: ['Banana', 'Cherry']

Array unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of that array. It modifies (mutates) the original array directly by shifting existing elements to higher indexes.
Mutates the Original Array: **The original array is overwritten.
**Returns a Number: The method returns the updated length property of the array.

const fruits = ['apple', 'banana'];
const newLength = fruits.unshift('orange');
console.log(fruits);     // Output: ['orange', 'apple', 'banana']
console.log(newLength);  // Output: 3

Adding Multiple Elements At Once
When you pass multiple arguments, they are added together at the start, maintaining their original sequence.

const numbers = [3, 4];
numbers.unshift(1, 2);
console.log(numbers); // Output: [1, 2, 3, 4]

Array.isarray()
Array.isArray() is a built-in static method in JavaScript used to determine whether a passed value is an array. It returns true if the value is an array, and false if it is not.

// Returns true
console.log(Array.isArray([]));
console.log(Array.isArray([1, 2, 3]));
console.log(Array.isArray(new Array()));
// Returns false
console.log(Array.isArray({}));
console.log(Array.isArray("Hello"));
console.log(Array.isArray(42));
console.log(Array.isArray(undefined));

Array delete()
It is a delete operator, but using it on arrays is generally discouraged because it leaves empty (undefined) holes and does not change the array's length.To properly remove elements and shift the remaining items, you should use built-in array methods like splice() or filter().

const fruits = ['apple', 'banana', 'orange'];
delete fruits[1]; 
console.log(fruits); // ['apple', <1 empty item>, 'orange']
console.log(fruits.length); // 3 (Length does NOT change)

Array concat()
It is a built-in JavaScript method used to merge two or more arrays or values into a single, brand-new array. Crucially, this method does not change the original arrays; instead, it returns a shallow copy containing the combined elements.
Parameters: Arrays and/or individual values to combine.
Return value: A completely new array instance.

const arr1 = ["Cecilie", "Lone"];
const arr2 = ["Emil", "Tobias", "Linus"];
console.log(arr1.concat(arr2));//[ 'Cecilie', 'Lone', 'Emil', 'Tobias', 'Linus' ]

Array copyWithin()
It modifies an array in place by copying a section of it to another position within the same array. It never changes the length of the array.
Syntax

array.copyWithin(target, start, end)

target → The index where the copied elements will be pasted.
start → The index from which elements will be copied.
end → The index up to which elements will be copied (exclusive, not included).

const numbers = [1, 2, 3, 4, 5];
// Copy everything from index 0 and paste it starting at index 3
numbers.copyWithin(3); 
console.log(numbers); // Output: [1, 2, 3, 1, 2] 
// (Notice the length is still 5; the last two numbers were cut off)

Specifying a start Position

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
// Copy from index 3 to the end, paste starting at index 0
fruits.copyWithin(0, 3);
console.log(fruits); //  ['date', 'elderberry', 'cherry', 'date', 'elderberry']

Specifying start and end Range
Remember that the end index is exclusive.

const letters = ['a', 'b', 'c', 'd', 'e'];
// Copy elements from index 1 up to (but not including) index 3 -> ['b', 'c']
// Paste them starting at index 3
letters.copyWithin(3, 1, 3);
console.log(letters); // Output: ['a', 'b', 'c', 'b', 'c']

target = 3 → Paste starting at index 3
start = 1 → Copy starting from index 1
end = 3 → Copy up to index 3 (index 3 not included).So only elements at index 1 and 2 ('b' and 'c') are copied and pasted starting at index 3.
Using Negative Indices

const items = [10, 20, 30, 40, 50];
// Target: -2 (index 3)
// Start: -4 (index 1)
// End: -1 (index 4, exclusive)
items.copyWithin(-2, -4, -1);
console.log(items);// Output: [10, 20, 30, 20, 30]

Array flat()
Flattening an array is the process of reducing the dimensionality of an array.Flattening is useful when you want to convert a multi-dimensional array into a one-dimensional array.The flat() method creates a new array with sub-array elements concatenated to a specified depth.
Syntax

const newArray = arr.flat(depth);

const myArr = [[1,2],[3,4],[5,6]];
console.log(myArr.flat());//[ 1, 2, 3, 4, 5, 6 ]

Array slice()
It is a built-in JavaScript method that extracts a section of an array and returns it as a brand-new array. Crucially, it is a non-destructive method, meaning the original array remains completely unchanged.
Syntax

array.slice(start, end)

start (Optional): The zero-based index where extraction begins. Defaults to 0.
end (Optional): The index before which to end extraction. The element at this index is excluded. Defaults to the end of the array.
Extracting a Sub-array (Middle Portion)
Provide both start and end arguments to get a clean slice. Remember that the end index is exclusive.

const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const favorites = colors.slice(1, 4); 
console.log(favorites); // ['green', 'blue', 'yellow']
console.log(colors);    // ['red', 'green', 'blue', 'yellow', 'purple'] (Unchanged)

const numbers = [10, 20, 30, 40, 50];
const remaining = numbers.slice(2);
console.log(remaining); // [30, 40, 50]

Using Negative Indices

const animals = ['cat', 'dog', 'bird', 'fish'];
// Get the last two elements
console.log(animals.slice(-2)); // ['bird', 'fish']
// Mix positive and negative indices (start at index 1, stop 1 element before the end)
console.log(animals.slice(1, -1)); // ['dog', 'bird']

Array splice()
It is a method in JavaScript is a built-in function used to modify the contents of an array by removing, replacing, or adding elements in place.
Syntax

array.splice(start, deleteCount, item1, item2, /* ... */ itemN)

Adding Elements (Without Deleting)

let fruits = ['Apple', 'Date'];
// At index 1, delete 0 items and insert 'Banana' and 'Cherry'
fruits.splice(1, 0, 'Banana', 'Cherry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry', 'Date']

Removing Elements
To remove elements, provide the starting index and how many items to delete.

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
// Remove 2 elements starting at index 1 ('Banana' and 'Cherry')
let removed = fruits.splice(1, 2);
console.log(fruits);  // Output: ['Apple', 'Date']
console.log(removed); // Output: ['Banana', 'Cherry'] (The deleted items)

Replacing Elements

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
// At index 1, remove 2 elements and insert 'Mango'
fruits.splice(1, 2, 'Mango');
console.log(fruits); 
// Output: ['Apple', 'Mango', 'Date']

Removing Everything from an Index

let fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
// Drop everything starting from index 2
fruits.splice(2);
console.log(fruits); 
// Output: ['Apple', 'Banana']

Array toSpliced()
It is an method is a modern JavaScript feature (introduced in ES2023) that allows you to delete, insert, or replace elements in an array without modifying the original array.
Deleting Elements

const numbers = [10, 20, 30, 40, 50];
// Remove 2 elements starting at index 1
const modified = numbers.toSpliced(1, 2); 
console.log(modified); // [10, 40, 50]
console.log(numbers);  // [10, 20, 30, 40, 50] (Original is completely untouched)

Inserting Elements

const fruits = ['apple', 'banana'];
// Insert 'cherry' and 'date' at index 1
const modifiedFruits = fruits.toSpliced(1, 0, 'cherry', 'date');
console.log(modifiedFruits); // ['apple', 'cherry', 'date', 'banana']

Replacing Elements

const letters = ['a', 'b', 'c', 'd'];
// Replace 'b' and 'c' (index 1) with 'X' and 'Y'
const updatedLetters = letters.toSpliced(1, 2, 'X', 'Y');
console.log(updatedLetters); // ['a', 'X', 'Y', 'd']

Array Iterations
Array forEach
It is an method executes a provided callback function once for each element in an array in ascending order.

const fruits = ["Apple", "Mango", "Orange"];
fruits.forEach(function(fruit) {
    console.log(fruit);
});//Apple
Mango
Orange

const fruits = ["Apple", "Mango", "Orange"];
fruits.forEach(function(fruit, index) {
    console.log(index, fruit);
});//0 Apple
1 Mango
2 Orange

References
1.https://www.geeksforgeeks.org/javascript/javascript-array-methods/
2.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Mastering this, Constructors & Arrays in JavaScript

Ezhil Abinaya K — Mon, 22 Jun 2026 06:54:24 +0000

this Keyword in Javascript
In JavaScript, the this keyword refers to the object that is currently executing or invoking the function.It is used to access the properties and methods of that object without using object name repeatedly.
Constructor
A constructor is a special function used to create and intialize objects in js. We use it we need to create multiple objects with the same properties and methods. Instead of writing the same object structure again and again, we can define it once inside a constructor and create multiple objects from it. It is considered good practice to name constructor functions with an upper-case first letter.When we create a object constructor called automatically.
For Example, If we need to create many student object with properties like name, age, we can use a constructor instead of creating each object separately.

function Person(name = "Unknown", age = 0) {
    this.name = name;
    this.age = age;
}

const person1 = new Person("Pranjal", 30);
const person2 = new Person("Amar");  
const person3 = new Person();  

console.log(person1);  
console.log(person2); 
console.log(person3);
//
{"name":"Pranjal","age":30}

{"name":"Amar","age":0}

{"name":"Unknown","age":0}

Array
In JavaScript, an array is a global object used to store ordered collections of data. JavaScript arrays are dynamic (they can automatically change size) and heterogeneous (they can hold a mix of different data types like numbers, strings, and objects at the same time).
Creating an Array
The easiest and most common way to create an array is by using the array literal syntax with square brackets []:

// An empty array
const empty = [];

// An array containing strings, numbers, and 
booleans
const mix = ["Apple", 42, true];

Zero-Indexed: The first item is always at index 0, the second is at 1, and so on.
The Length Property: Tracking array size is handled automatically via .length.
Essential Array Operations & Methods
1. Accessing and Modifying Elements
You can read or change items by referencing their index inside square brackets.

const tools = ["HTML", "CSS", "JS"]; 
console.log(tools[0]); //  "HTML"

tools[1] = "Sass"; // Updates the item

console.log(tools); //  ["HTML", "Sass", "JS"]
console.log(tools[1]); //  "Sass"

2. Adding and Removing Elements
JavaScript provides built-in methods to easily modify items from the start or end of an array.
push(): Adds an item to the end.
pop(): Removes the last item.
unshift(): Adds an item to the beginning.
shift(): Removes the first item.

let fruits = ["Banana", "Orange"];
// Add to the end
fruits.push("Apple");     
console.log(fruits); // Output: ["Banana", "Orange", "Apple"]
// Remove from the end
fruits.pop();             
console.log(fruits); // Output: ["Banana", "Orange"]
// Add to the beginning
fruits.unshift("Mango");  
console.log(fruits); // Output: ["Mango", "Banana", "Orange"]
// Remove from the beginning
fruits.shift();           
console.log(fruits); // Output: ["Banana", "Orange"]

To calculate the total, average, grade, and pass/fail status from a JavaScript array.

const marks=[98,99,67,78,90];
const marks =;
console.log(marks.length); 

let failCount = checkFailcount(marks);
console.log(failCount); 

if (failCount > 0) { 
    console.log("no grade");
} else {
    let total = findTotal(marks);
    let avg = findAvg(total, marks.length);
    let grade = findGrade(avg);
    console.log("Total:", total, "Avg:", avg, "Grade:", grade);
}

function checkFailcount(studMarks) {
    let i = 0;
    let count = 0;
    while (i < studMarks.length) { 
        if (studMarks[i] < 35) {
            count++;
        }
        i++;
    }
    return count; 
}

function findTotal(studMarks) {
    let i = 0;
    let total = 0;
    while (i < studMarks.length) { 
        total = total + studMarks[i];
        i++;
    }
    return total;
}

function findAvg(total, countofsub) {
    return total / countofsub;
}

function findGrade(avg) {
    if (avg >= 90) { return 'A'; } 
    else if (avg >= 70) { return 'B'; } 
    else { return 'C'; }
}
//5
  0
Total: 432 Avg: 86.4 Grade: B

References
1.https://www.geeksforgeeks.org/javascript/javascript-arrays/
2.https://www.geeksforgeeks.org/javascript/js-constructor-method/

Object in js

Ezhil Abinaya K — Tue, 16 Jun 2026 13:40:54 +0000

JavaScript Asynchronous Functions Overview
In JavaScript, asynchronous functions help us execute tasks without blocking the main program flow.Instead of waiting for one task to finish, JavaScript moves ahead and handles results later.These functions are mainly used for timers, API calls, and background operations, making web applications faster and more responsive. Below are some important asynchronous functions like setTimeout, setInterval, Promises, async/await, and fetch, with examples and use cases.

Javascript Objects
An object in JavaScript is basically a dynamic data structure. It stores related data in the form of key-value pairs, where each key acts as a unique identifier for its value.Inside an object, the values can be different types like primitive values such as numbers and strings, or even other objects, and also functions. When a function is written inside an object, we call it a method.One important point is that objects are mutable, meaning we can change them anytime. We can add new properties, modify existing ones, or even delete properties after the object is created.Objects are mainly used because they help in grouping related data and behavior together. So instead of storing everything separately, we can keep all related information in one place, which makes the code more organized and easier to manage.
There are two primary ways to create an object in JavaScript:
1. Creation Using Object Literal
The object literal syntax allows you to define and initialize an object with curly braces {}, setting properties as key-value pairs.

let obj = {
    name: "EzhilAnban",
    age: 30,
    job: "Developer"
};
console.log(obj);//{"name":"EzhilAnban","age":30,"job":"Developer"}

2. Creation Using new Object() Constructor

let obj = new Object();
obj.name= "EzhilAnban"",
obj.age= 30,
obj.job= "Developer"

console.log(obj);//{"name":"EzhilAnban"","age":30,"job":"Developer"}

Basic Operations on JavaScript Objects
1. Accessing Object Properties
You can access an object’s properties using either dot notation or bracket notation.

const airpods = {
  brand: "Apple",
  model: "AirPods Pro",
  price: 24900
};

// accessing properties
console.log(airpods.brand);  // Apple
console.log(airpods.model);  // AirPods Pro
console.log(airpods.price);  // 24900

2. Modifying Object Properties
Properties in an object can be modified by reassigning their values.

const airpods = {
  brand: "Apple",
  model: "AirPods Pro",
  price: 24900
};
airpods.price = 22900; // updated price
console.log(airpods.price);//22900

3. Adding Properties to an Object
You can dynamically add new properties to an object using dot or bracket notation.

airpods.color = "White";
console.log(airpods.color);

4. Removing Properties from an Object
The delete operator removes properties from an object.

const airpods = {
  brand: "Apple",
  model: "AirPods Pro",
  price: 24900
};
// delete a property
delete airpods.price;

console.log(airpods);//{"brand":"Apple","model":"AirPods Pro"}

5. Merging Objects
Objects can be merged using Object.assign() or the spread syntax { ...obj1, ...obj2 }.

const obj1 = {
  brand: "Apple",
  model: "AirPods Pro"
};

const obj2 = {
  price: 24900,
  color: "White"
};

const merged = { ...obj1, ...obj2 };
console.log(merged);
//{
  brand: "Apple",
  model: "AirPods Pro",
  price: 24900,
  color: "White"
}

Using Object.assign()
const obj1 = { brand: "Apple" };
const obj2 = { model: "AirPods Pro" };

const merged = Object.assign({}, obj1, obj2);

console.log(merged);
//{ brand: 'Apple', model: 'AirPods Pro' }

6. Object Length
You can find the number of properties in an object using Object.keys().

const airpods = {
  brand: "Apple",
  model: "AirPods Pro",
  price: 24900
};
console.log(Object.keys(airpods).length);//3

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

Types of Functions in JavaScript

Ezhil Abinaya K — Mon, 15 Jun 2026 13:03:29 +0000

Types of Functions in Javascript
1. Named Function
A function that has its own name when declared. It’s easy to reuse and debug because the name shows up in error messages or stack traces.This is the most traditional way to write a function. It has a specific name and can be used (called) anywhere in your code, even before it's defined (called hoisting).

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

2. Anonymous Function
A function that does not have a name. It is usually assigned to a variable or used as a callback. Since it has no name, it cannot be called directly.

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

3. Function Expression
A Function Expression is a function that is assigned to a variable and can be invoked using that variable name.

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

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

4. Arrow Function (ES6)
Arrow functions are a compact, streamlined way to write function expressions in JavaScript. Introduced in ES6, they eliminate the need for the function keyword and provide unique rules for scoping. A new way to write functions using the => syntax.
Syntax Variations
Multiple parameters(Single-Line Expression): Wrapped in standard parentheses. Omit the curly braces and return keyword.

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

Single parameter: Parentheses can be completely omitted.

const square = x => x * x;

Zero parameters: Empty parentheses are strictly required.

const greet = () => "Hello World!";

Multi-line block: Requires curly braces and an explicit return keyword.

const calculateTotal = (price, tax) => {
    const total = price + tax;
    return total;
};

5. Immediately Invoked Function Expression (IIFE)
An Immediately Invoked Function Expression (IIFE) is simply a JavaScript function that runs automatically the exact moment it is defined.Normally, a function runs only when it is called.An IIFE runs automatically when the JavaScript engine reads it (compiles it).Everything inside an IIFE is private to that function.Variables inside an IIFE cannot be accessed from outside.

(function() {
  console.log("I run immediately!");
})();// I run immediately

6. Callback Functions
A JavaScript callback is a function passed as an argument to another function, which is then executed (or "called back") at a later point in time to complete a specific task.
Types of Callbacks
Synchronous Callbacks
Synchronous code executes line by line, one statement at a time. The next statement waits until the current statement finishes.

console.log("Start");
console.log("Middle");
console.log("End");
//Start 
Middle 
End

Real Life Examples for Synchronous
Imagine ATM machine.
Insert Card -->Enter Pin -->Select Amount --> Get Money
Here, to move to the next step, the current step must be completed first. This is called synchronous execution.
Asynchronous Callbacks:
Asynchronous callbacks are executed at a later time, allowing the main program to continue running without waiting.This is essential for preventing the application from freezing during long-running tasks like network requests.In simple words, Asynchronous code allows other code to run without waiting for a time-consuming task to finish.

console.log("Start");

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

console.log("End");
//Start
End
Middle

Here , Start prints.setTimeout() starts a timer (2 seconds).JavaScript doesn't wait.End prints immediately.After 2 seconds, Middle prints.
Real Life Examples for Asynchronous Callbacks
1.File Download: Click Download -->Download running... -->Meanwhile use browser normally
This is Asynchronous.
2.Login Request:Click Login -->Server checks username/password-->Response comes later
This is Asynchronous.
Callback Function General Syntax

function mainFunction(callback) {
    callback();
}

function callbackFunction() {
    // code
}

mainFunction(callbackFunction);

Examples for callback

function display(callback) {
    callback();
}

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

display(greet);//Hello

display → Main function
greet → Callback function
A callback function is a function passed as an argument to another function and executed later.

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

function thankYou() {
    console.log("Thank You");
}

welcome(thankYou);//Welcome User
                  //Thank You

Real-Life Callback Example
Suppose you order food from a restaurant:

You place the food order.
You give your phone number.
When the food is ready, the restaurant calls you.

Here:
Food order = Main function
Phone number = Callback
You provide your phone number now, but it is used later when the task (preparing the food) is completed.
This is similar to a callback function in JavaScript: you pass a function now, and it is executed later after a specific task is finished.

function orderFood(callback) {
    console.log("Food is being prepared...");
    callback();
}

function callCustomer() {
    console.log("Food is ready!");
}

orderFood(callCustomer);//Food is being prepared...
                       //Food is ready!

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

How the Return Statement Works in JavaScript

Ezhil Abinaya K — Fri, 12 Jun 2026 07:32:53 +0000

Javascript Return Statement
The return statement in JavaScript is used to end the execution of a function and return a value to the caller. It is used to control function behaviour and optimise code execution.

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

let sum = add(10, 20);
console.log(sum);//30

When to use return in js?
Use return inside a function when you want to send a value back to the place where the function was called.
1. To return a calculation result

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

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

Output:

30

return adds the values and sends the result back.
2. To store a value

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

let result = square(5);
console.log(result);

Output:

25

return sends 25 back and stores it in result.
3. To check a condition

function isEven(num) {
    return num % 2 === 0;
}

console.log(isEven(4));

Output:

true

return sends true or false back.
4. To stop a function

function test() { 
console.log("Start"); 
return; 
console.log("End");
 }
test();
Output:
Start

After return, the function stops. "End" is not printed.return is used to control a function's behavior by deciding what value should be sent back based on conditions. It also optimizes code execution because once return is reached, the function stops executing any remaining statements.
5. To Use the Result in Another Operation
A returned value can be used in other calculations, conditions, or functions.

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

let total = add(10, 20);

console.log(total * 2);
Output:
60

Here, return sends the value back, and that value is reused in another operation.

When return is not needed

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

greet();

Output:

Hello

Here we only print a message. No value is sent back, so return is not required.
Without return

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

let sum = add(10, 20);
console.log(sum);
Output:
undefined

Since the function does not return a value, JavaScript automatically returns undefined
Simple Rule
Need to send a result back from a function? → Use return
Only displaying output? → return is not required
Use return when you want to:
✔ Get a result.
✔ Store a value.
✔ Check conditions.
✔ Stop a function.
✔ Use the result in another operation.
References
https://www.geeksforgeeks.org/javascript/javascript-return-statement/

Exploring JavaScript Control Flow and Functions

Ezhil Abinaya K — Wed, 10 Jun 2026 09:25:24 +0000

JavaScript For Loop
for loop is a control flow statement that allows code to be executed repeatedly based on a condition. It consists of three parts: initialization, condition, and increment/decrement.

Initialization: Runs once before the loop starts to set up a counter variable.
Condition: Evaluated before every iteration; if true, the loop continues.
Afterthought: Runs at the end of each iteration, usually to increment or decrement the counter.

Syntax

for (initialization; condition; afterthought) {
  // Code to execute during each iteration
}

Flowchart

Example 1:Counting up to 5

for (let i = 1; i <= 5; i++) {
  console.log(i); // 1, 2, 3, 4, 5
}

Example 2: For loop to print table of a number

let x = 5
for (let i = 1; i <= 10; i++) {
  console.log(x * i); // 5 10 15 20 25 30 35 40 45 50
}

do...while loop
A do...while loop in JavaScript is an exit-controlled control flow statement that executes a block of code at least once before checking if a specified condition is true. If the condition evaluates to true, the loop repeats; if false, the loop terminates.
Syntax
The syntax requires the do keyword followed by a code block, and finishes with the while keyword and a boolean condition.

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

Example

let status = false;

do {
  console.log("This message prints exactly once!");
} while (status === true);// This message prints exactly once!

Function
A JavaScript function is a reusable block of code designed to perform a specific task. It executes only when it is called.They allow you to organize, reuse, and modularize code. It can take inputs, perform actions, and return outputs.
Arguments
In JavaScript, arguments are the actual values you pass into a function when you called.

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

greet("Ezhil");          // "Ezhil" = argument

Parameters
Parameters are the variables declared in the function definition that receive values from arguments when the function is called.
"Declared in the function definition" means the variables written inside the function's parentheses when creating the function.
Example

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

add(10, 20);

a and b → Parameters
10 and 20 → Arguments
Tricky Interview Questions
1.What happens if arguments are missing?

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

add(10);//Nan (because b is undefined)

2.Why is do...while different from while?
do...while executes at least once.

let x = 10;

do {
    console.log("Hello");
} while (x < 5);//Hello

References
https://www.geeksforgeeks.org/javascript/javascript-for-loop/