Forem: Nanthini Ammu

Closure function in JS

Nanthini Ammu — Wed, 29 Apr 2026 16:21:43 +0000

JavaScript Nested Function :

A function can also contain another function. This is called nested function.

function greet(name) {

        function displayName() {
                console.log("Hi " + name)
        }

        displayName();

}

greet("Varun");

Output :
Hi Varun

Returning a function :

In JavaScript, it is allowed to return a function within a function.

function greet(name) {

        function displayName() {
                console.log("Hi " + name)
        }

        return displayName; //returning a function

}

const g1 = greet("Varun");
console.log(g1);
g1();

Output :
displayName() {
                console.log("Hi " + name)
        }
Hi Varun

In the above program, the greet() function is returning the displayName function definition .
The returned function definition is assigned to the g1 variable. When you print g1 using console.log(g1), you will get the function definition.
To call the function stored in the g1 variable, we use g1() with parentheses.

What is a Closure?

A closure is a function that remembers the variables from its outer scope even after that outer scope has finished executing.

function outer(){
        let count = 0; // This variable lives in outer scope

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

const counter1 = outer(); // outer() finishes, but count isn't gone!
counter1();
counter1();
counter1();

const counter2 = outer();
counter2();
counter2();
counter2();

Output :
1
2
3
1
2
3

outer() runs once.
But count is not destroyed.
Because inner() remembers it.
That memory = closure.
Even though outer() has returned, inner still holds a live reference to count. That's a closure.

function bank(name,totalAmt)
{
        return {
                deposit : function(amount){
                        totalAmt = totalAmt+amount;
                        return totalAmt
                },
                withdraw : function(amount){
                        totalAmt = totalAmt-amount;
                        return totalAmt
                },
                checkbal : function(){
                        console.log(`Hi ${name}, Your total amount is ${totalAmt}`);
                }       
        }


}

const varunacc = bank("Varun",5000)
console.log(varunacc.deposit(1000));
console.log(varunacc.withdraw(500));
varunacc.checkbal();

Output :
6000
5500
Hi Varun, Your total amount is 5500

DOM methods part 2

Nanthini Ammu — Tue, 28 Apr 2026 12:07:05 +0000

What is createElement()?

It is used to create a new HTML element using JavaScript.
Creating an element is a multi-step workflow because the element is added in JavaScript memory, not on the screen.
It consist of 3 step.

Create element - let par = document.createElement("p")
Add content - par.innerText = "Papaya"
Add to DOM - document.body.appendChild(par)

<body>
<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>
<script>
let par = document.createElement("p")
par.innerText = "Papaya"
document.body.appendChild(par)
</script>
</body>

<body>
<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>

<button id="bttn">Add Paragraph</button>

<script>
const btn  = document.getElementById("bttn");

btn.addEventListener("click",()=>
{
   let par = document.createElement("p")     ;
   par.innerText = "New Paragraph Added";
   par.style.color ="red";
   par.setAttribute("class","paragraph")
   document.body.appendChild(par)
   console.log(par)
} )

</script>
</body>

Append in Specific Element:

<body>
<p class="box">Apple</p>
<div id="container"></div>

<button id="bttn">Add Paragraph</button>

<script>

let par = document.createElement("p")
par.innerText ="Hi";

const cont = document.getElementById("container")
cont.appendChild(par);
console.log(par)

</script>
</body>

Output :

Example Dynamic list:

<body>
<p class="box">Apple</p>

<script>

let lst = document.createElement("ul");

for(let i=1; i<=3; i++){
        let li = document.createElement("li");
        li.innerText ="Item "+i;
        lst.appendChild(li);
}

document.body.appendChild(lst);

</script>
</body>

What is remove()?

It is used to delete an element from the DOM.
It removes the element completely from the page.

<body>

        <p id="par">Hello</p>
        <button id="btn">Remove</button>

<script>

        const para = document.getElementById("par")
        const bttn = document.getElementById("btn")

        bttn.addEventListener("click",()=> para.remove());

</script>
</body>

<script>
        const par = document.createElement("p");
        par.innerText = "Hello";
        document.body.appendChild(par);
        setTimeout(()=>par.remove(),3000 )
</script>

<body>

        <p class="box">Apple</p>
        <p class="box">Orange</p>
        <p class="box">Banana</p>

<script>

        const parL = document.querySelectorAll(".box")
        parL.forEach((par,indx)=>{setInterval(()=>par.remove(),(indx+1)*3000)})

</script>
</body>

</html>

What is removeChild()?

It is used to remove a child element from its parent.

<body>
        <div id="box">
        <p id="txt">Apple</p>
        </div>
        <button id="btn">Remove</button>

<script>

        const btn = document.getElementById("btn");
        const prnt = document.getElementById("box");
        const chld = document.getElementById("txt");

        btn.addEventListener("click",()=>prnt.removeChild(chld));

</script>
</body>

<body>

        <button id="add">Add fruits</button>
        <button id="remove">Remove One</button>

<script>


        const p = document.createElement("lu");
        const ad = document.getElementById("add");
        const rm = document.getElementById("remove");

        document.body.appendChild(p);

        const arr = ["Apple","Orange","Banana","Papaya"]

        ad.addEventListener("click",()=>{

                arr.forEach(item=> {
                const c = document.createElement("li");
                c.innerText = item;
                p.appendChild(c);

        })
})

        rm.addEventListener("click",()=>
{
        if(p.lastElementChild)
                p.removeChild(p.lastElementChild)
})

</script>
</body>

Exercise

Counter App :

<html>
<head>
</head>

<body>

    <h1 id ="result">Count</h1>
    <button onclick="increment()">+</button>
    <button onclick="decrement()">-</button>
    <button onclick="reset()">Reset</button>
    <script>

        let no = 0;
        const element = document.getElementById("result");

        function increment()
        {
            no++;
            element.innerText = "Count : "+ no;
            element.style.color = "green";
            document.getElementById("result").style.color = "brown";


        }

        function decrement()
        {
            no--;
            element.innerText = "Count : "+ no;
            element.style.color = "red";

        }

        function reset()
        {
            no = 0;
            element.innerText = "Count : "+ no;
            element.style.color = "black";
        }

    </script>
</body>
</html>

Light On/Off :

<html>
    <head>

    </head>
    <body>

    <img id="img" src="boff.gif" alt="Desc">

        <script>

            let imng = document.getElementById("img");

            imng.addEventListener('click', ()=>{
                if (imng.src.includes("bon.gif"))
                    imng.src = "boff.gif";
                else
                    imng.src = "bon.gif";
            })

        </script>
    </body>
</html>

Change Text on Button Click :

<html>
    <head>

    </head>
    <body>

        <h1 id ="head">Hi</h1>
        <button id="btn" onclick="changeContent()"> Click</button>
        <script>

            function changeContent(){
                document.getElementById("head").innerText = "Hello"
            }

        </script>
    </body>
</html>

Live Character Counter :

<html>
    <head>

    </head>
    <body>

        <textarea id ="txt" placeholder="Type here" maxlength="100" cols="50" rows="5"></textarea>
        <p id="cnt">Count 0</p>
        <script>

            const txt = document.getElementById("txt");
            const cnt = document.getElementById("cnt");

            txt.addEventListener("input",countChar)

            function countChar(){
                cnt.innerText= `Count ${txt.value.length}`;
            }

        </script>
    </body>
</html>

Show/Hide Password :

<html>
    <head>

    </head>
    <body>

        <input type="password" id="pswd" placeholder="Enter Password">
        <button id="chnge">Show</button>

        <script>

            const pwd = document.getElementById("pswd");
            const btn = document.getElementById("chnge");

            btn.addEventListener("click",changeButton)

            function changeButton(){
                if(pwd.type === "password"){
                pwd.type = "text";
                btn.innerText = "Hide";
                }
                else{
                pwd.type = "password";
                btn.innerText = "Show";
                }
            }         
        </script>
    </body>
</html>

Change background color on button click :

<html>
    <head>

    </head>
    <body>


        <input id ="inpt" placeholder="Enter the color">
        <button id="btn">Change</button>

        <script>

            const btn = document.getElementById("btn");
            const inpt = document.getElementById("inpt");


            btn.addEventListener("click",()=>{
                document.body.style.backgroundColor = inpt.value  
            })

        </script>
    </body>
</html>

uppercase converter :

<html>
    <head>

    </head>
    <body>


        <input id ="inpt" placeholder="Enter here">
        <button id="btn">Change</button>

        <script>

            const btn = document.getElementById("btn");
            const inpt = document.getElementById("inpt");

            btn.addEventListener("click",()=>{
                inpt.value = inpt.value.toUpperCase();
            })

        </script>
    </body>
</html>

DOM methods part 1

Nanthini Ammu — Tue, 28 Apr 2026 05:15:09 +0000

What is getElementById()?

It is used to select a single HTML element using its unique id attribute.
Returns an Element object if a match is found; otherwise, it returns null.

<h1 id="title">Hello</h1>
let el = document.getElementById("title");
console.log(el);

Output :
<h1 id="title">Hello</h1>

Changing content :

el.textContent = "Hello, JavaScript!"; 
el.innerText = "Hi!"; 
el.innerHTML = "<b>How</b>";

Changing Style :

el.style.color ="red";
el.style.backgroundColor ="yellow";
document.body.style.backgroundColor = "black";

Adding Event :

<body>

<h1 id="title">Hello</h1>
<button id="btn">click</button>

<script>

let el = document.getElementById("title");     
let btn = document.getElementById("btn");     
btn.addEventListener("click", () => {
el.innerText ="Wecome!";
});

</script>
</body>

What is getElementByClassName?

It selects all elements that have a given class name.
Return HTMLCollection (array-like collection).

<body>

<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>

<script>
let el = document.getElementsByClassName("title");   
console.log(el);
console.log(el[0]);
console.log(el[1]);
</script>
</body>

Output :
HTMLCollection(2) [h1.title, h1.title]
<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>

<body>

<h1 class="title">Hello</h1>
<h1 class="title">Welcome</h1>
<h1 class="title">GoodMorning</h1>

<script>
let el = document.getElementsByClassName("title");   

for(let i=0; i<el.length; i++)
{
        console.log(el[i].innerText);
}
</script>
</body>

Output :
Hello
Welcome
GoodMorning

Changing content :

el[0].innerText = "Hi";
el[1].innerText = "GoodMorning";

Changing Style :

It returns multiple elements so it cannot be styled directly,It has to be updated using loop.

<body>

<button id="btn">Change Style</button>
<p class="box">Hello</p>
<p class="box">World</p>

<script>
const btn = document.getElementById("btn");
const items = document.getElementsByClassName("box");

btn.addEventListener("click", () => {
  for (let item of items) {
    item.style.color = "green";
  }
});
</script>
</body>

What is getElementsByTagName?

It selects all elements with a given HTML tag.
It returns HTMLCollection (array-like).

<body>

<p>Hello</p>
<p>World</p>

<script>

let items = document.getElementsByTagName("p");
console.log(items);

</script>
</body>

Output:
HTMLCollection(2) [p, p]

<body>

<p>Hello</p>
<p>World</p>

<script>

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

for(let item of items)
{
        console.log(item.innerText);

}
</script>
</body>

Changing Style :

<body>

<p>Hello</p>
<p>World</p>

<script>

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

for (let item of items) {
  item.style.backgroundColor = "yellow";
}
</script>
</body>

Cannot directly attach events to collection:
- This is wrong

const btn = document.getElementsByTagName("button");
btn.addEventListener("click", () => {
  console.log("clicked");
});

Fix 1: Access a Single Button

const btn = document.getElementsByTagName("button")[0];

btn.addEventListener("click", () => {
  console.log("clicked");
});

Fix 2: Loop Through All Buttons

const btns = document.getElementsByTagName("button");

for (let btn of btns) {
  btn.addEventListener("click", () => {
    console.log("clicked");
  });
}

What is querySelector()?

It selects the first element that matches a CSS selector.
It returns single element. Null if not found.
If multiple elements match, It returns only the first one.

<body>

<h1 id="title">Hello</h1>
<p class="text">World</p>

<script>

const el = document.querySelector("#title")
const ele = document.querySelector(".text")
const elem = document.querySelector("p")

console.log(el.innerText)
console.log(ele.innerText)
console.log(elem.innerText)

</script>
</body>

Select by ID:

const el = document.querySelector("#title")

Select by Class:

const ele = document.querySelector(".text")

Select by Tag:

const elem = document.querySelector("p")

Changing Style :

ele.style.color = "red"

Adding Event :

<body>
<button>click</button>
<script>
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  alert("Clicked!");
});
</script>
</body>

What is querySelectorAll()?

It selects ALL elements that match a CSS selector.
It returns static node list.

<body>

<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>

<script>
const items = document.querySelectorAll(".box");
items.forEach(item=> item.style.color ="red")
console.log(items)
</script>
</body>

Output :
NodeList(3) [p.box, p.box, p.box]

Select by ID:

const el = document.querySelector("#title")

Select by Class:

const ele = document.querySelector(".text")

Select by Tag:

const elem = document.querySelector("p")

String in JS part 1

Nanthini Ammu — Thu, 23 Apr 2026 14:26:59 +0000

What is String ?

A string is a sequence of characters.
It is a primitive data type.
String can be created using three different types of delimiters.
Single Quotes - 'Hello'
Double Quotes - "Hello"
Backticks - Hello -(Template Literals) Using this, we can embed variables or any valid expression directly inside the string using ${expression} syntax. Templates allow single and double quotes inside a string.

let name = "Ammu";
let message = `Hello ${name}`;
console.log(message);

let message = `Hello "Varun"`;
console.log(message);

Ouput: 
Hello Ammu
Hello "Varun"

Access Characters :

let name = "Hello";
console.log(name[0]);
console.log(name[1]);
console.log(name[2]);
console.log(name[3]);
console.log(name[4]);
console.log(name[5]);

Output :
H
e
l
l
o
undefined

Strings are Immutable:

Once a string is created, its value cannot be changed.
Bracket Notation Fails: cannot change a single character using its index.
Methods Return New Strings: Every string method (like .toUpperCase(), .slice(), or .replace()) returns a brand-new string rather than modifying the one you called it on.

let name = "Hello";
console.log(name.toUpperCase());
console.log(name);

Output :
HELLO
Hello

The Value is Immutable: The characters "Hello" in memory can never be changed to "Gello".
The Variable is Mutable: If you use let or var, you can point that variable to a new string at any time.

let name = "Hello";
name[0] = "G"
console.log(name); //Hello
name = "Hi";
console.log(name); //Hi

Ouput :
Hello
Hi

String Length :

console.log("JavaScript".length);

Output :
10

Common String Methods :

toUpperCase()/toLowerCase() :

let str = "Hello";

console.log(str.toUpperCase()); // HELLO
console.log(str.toLowerCase()); // hello

trim():

This method removes whitespace from both sides of a string.

let str = " hello ";
console.log(str.length);  //7
console.log(str.trim().length);  //5

includes() :

-This method determines whether one string can be found within another string, returning a boolean.

The search is case-sensitive.

let str = "JavaScript";
console.log(str.includes("Script")); // true
console.log(str.includes("script")); // false
console.log(str.toLowerCase().includes("script")); // true

indexOf() :

let str = "JavaScript";
console.log(str.indexOf("a")); //1
console.log(str.indexOf("a",2)); //3

slice() :

It extracts a section of a string and returns it as a new string without modifying the original string.
The method takes two parameters. string.slice(indexStart, indexEnd)

let str = "JavaScript";
console.log (str.slice(0)); //JavaScript
console.log (str.slice(1)); //avaScript
console.log (str.slice(0,1)); //J
console.log (str.slice(0,4)); //Java
console.log (str.slice(1,4)); //ava
console.log (str.slice(-3)); //ipt
console.log (str.slice(0,-6)); //Java

replace() :

replace() - replaces only first match
/text/g - replaces all matches using regex
/text/i - 'i' makes it case-insensitive
replaceAll() replaces all matches

let str = "Hello world world";
console.log(str.replace("world", "JS")); //Hello JS world
console.log(str.replace(/world/g, "JS")); //Hello JS JS
console.log(str.replace(/WORLD/g, "JS")); //Hello world world
console.log(str.replace(/WORLD/i, "JS")); //Hello JS world 
console.log(str.replace(/WORLD/gi, "JS")); //Hello JS JS
console.log(str.replaceAll("world", "JS")); //Hello JS JS

split() :

The split() method in JavaScript divides a String into an ordered list of substrings, puts these substrings into an array, and returns that array. It does not modify the original string.

let text = "Hello world from JavaScript";
const words = text.split(" "); 
console.log(words);

let str = "Hello,world,from,JavaScript";
const arr = text.split(","); 
console.log(words);

Output :
 ['Hello', 'world', 'from', 'JavaScript']
 ['Hello', 'world', 'from', 'JavaScript']

let str = "hello";
console.log(str.split("").reverse().join(""));

Output :
olleh

at()/charAt() :

let text = "JavaScript";
console.log(text.at(0)); //j
console.log(text.at(-1)); //t
console.log(text.at(10)); //undefined

console.log(text.charAt(0)); //J
console.log(text.charAt(-1)); //
console.log(text.charAt(10)); //

Array Sort Methods

Nanthini Ammu — Tue, 21 Apr 2026 10:08:06 +0000

sort() :

It is used to arrange elements of an array.
It modifies the original array.
By default, the sort() method converts all elements into strings and sorts them in ascending order based on their Unicode values.
Works perfectly for strings.
For numbers, the default comparator converts elements to strings, which causes unexpected results with numbers. So we must provide a compare function as an argument. The function compares two elements (a and b) and returns a value.
- Negative value: a is placed before b.
- Positive value: b is placed before a.
- Zero: The relative order remains unchanged.


const fruits = ["Apple","Orange","Banana","Papaya","Guava"]
fruits.sort();
console.log(fruits);

const numberz = [10, 9, 2, 1, 100]
numberz.sort();
console.log(numberz); // without compare function  [1, 10, 100, 2, 9]. Because elements are converted into string first.

const numberz2 = [10, 9, 2, 1, 100]
numberz2.sort((a,b)=>a-b);
console.log(numberz2);

const numberz3 = [10, 9, 2, 1, 100]
numberz2.sort((a,b)=>b-a);
console.log(numberz3);


Output :
['Apple', 'Banana', 'Guava', 'Orange', 'Papaya']
[1, 10, 100, 2, 9]
[1, 2, 9, 10, 100]
[100, 10, 9, 2, 1]

Array Search methods

Nanthini Ammu — Tue, 21 Apr 2026 05:05:07 +0000

indexOf :

indexOf() is used to find the index of an element.
It return -1 if the element is not found.
If the item is present more than once, it returns the position of the first occurrence.
Case Sensitive: "A" and "a" are considered different values.

array.indexOf(item, start)

const fruits = ["Apple","Orange","Banana","Papaya","Guava"]

for(let a of fruits){
    document.write("Index of "+ a+ " : "+fruits.indexOf(a))
    document.write("<br>")
}
document.write(fruits.indexOf("Onion"))


Output : 
Index of Apple : 0
Index of Orange : 1
Index of Banana : 2
Index of Papaya : 3
Index of Guava : 4

-1

const numberz = [1,2,3,4,4,2]

document.write("Index of 2 :"+numberz.indexOf(2)) 
document.write("<br>")
document.write("Index of 4 :"+numberz.indexOf(4))
document.write("<br>")

document.write("Index of 2 :"+numberz.indexOf(2,2))
document.write("<br>")
document.write("Index of 4 :"+numberz.indexOf(4,2))
document.write("<br>")

Output : 
Index of 2 :1
Index of 4 :3
Index of 2 :5
Index of 4 :3

lastIndexOf() :

It returns the position of the last occurrence of the specified element.
It searches from right → left.
when value for the start index is given, it starts from that index and looks backward.

array.lastIndexOf(item, start)

const numberz = [1,2,3,4,4,2]

document.write("Index of 2 :"+numberz.lastIndexOf(2)) 
document.write("<br>")
document.write("Index of 4 :"+numberz.lastIndexOf(4))
document.write("<br>")

document.write("Index of 2 :"+numberz.lastIndexOf(2,2))
document.write("<br>")
document.write("Index of 4 :"+numberz.lastIndexOf(4,2))
document.write("<br>")

Output : 
Index of 2 :5
Index of 4 :4
Index of 2 :1
Index of 4 :-1

includes() :

It is used to determine whether an array contains a specific value among its entries. It returns a boolean value true if the value is found, and false otherwise.

const fruits = ["Apple","Orange","Banana","Papaya","Guava"]
document.write(fruits.includes("Orange"))
document.write("<br>")
document.write(fruits.includes("orange"))
document.write("<br>")
document.write(fruits.includes("orange",2))

Output :
true
false
false

find() :

It is used to get the first element that matches a condition.
It returns the element, if found, otherwise undefined.
It checks each element one by one.
It stops and returns the element, as soon as condition is true.

const fruits = ["Apple","Orange","Banana","Papaya","Guava"]
document.write(fruits.find(a=> a==="Banana" ))
document.write("<br>")

const numberz = [1,2,4,7]
document.write(numberz.find(a=> a%2 == 0))
document.write("<br>")
document.write(numberz.find(a=> a%3 == 0))

Output :
Banana
2
undefined

let users = [
  { id: 1, name: "Arun" },
  { id: 2, name: "Varun" },
  { id: 3, name: "Tharun" }
];

let index = users.findIndex(u => u.id === 2);

console.log(index);

Output :
1

findLast() :

It is used to find the last element that matches a condition.Iterates through an array in reverse order (from right to left) and returns the value of the first element that satisfies the condition.
It searches from right to left.

let numberz = [1,2,5,4]
document.write(numberz.findLast(a=>a%2==0))
document.write("<br>")
document.write(numberz.findLast(a=>a%3==0))

Output : 
4
undefined

let users = [
  { id: 1, name: "Varun" },
  { id: 2, name: "Arun" },
  { id: 1, name: "Tharun" }
];

let user = users.findLast(a=> a.id===1)
console.log(user)

Output :
{id: 1, name: 'Tharun'}

findIndex() :

It is used to find the index of the first element that matches a condition.
It returns index, if the condition is matched, -1 otherwise.

const fruits = ["Apple","Orange","Banana","Papaya","Guava"]

document.write(fruits.find(a=> a==="Banana" ))
document.write("<br>")

const numberz = [1,2,4,7]
document.write(numberz.findIndex(a=> a%2 == 0))
document.write("<br>")
document.write(numberz.findIndex(a=> a%3 == 0))

Output :
Banana
1
-1

findLastIndex() :

It returns the index of the last element that matches a condition.
It searches from right to left.
It checks elements from end to start,stops at the first match from right, returns the index.

let users = [
  { id: 1, name: "Varun" },
  { id: 2, name: "Arun" },
  { id: 1, name: "Tharun" }
];

document.write(users.findLastIndex(a=> a.id===1))

Output : 
2

let nums = [1, 2, 3, 4, 3];
let index = nums.findLastIndex(n => n === 3);
document.write(index);

Output : 
4

Callback Function and Array Iteration methods -1 in JS

Nanthini Ammu — Fri, 17 Apr 2026 09:31:38 +0000

What is Callback function?

A callback function is a function that is passed as an argument to another function.
And is executed later.

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

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

greet("Varun", sayBye);

Output :
Hello Varun
Bye!

Why Callback function ?

To handle asynchronous operations, ensuring code execution continues without blocking the program while waiting for a task—like API requests, file reading, or user input—to complete.

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

forEach() :

It is an array method used to iterate through each element.
It executes a function once for every element.
Cannot use break or continue.
Does not return anything(undefined).

array.forEach(callback(element, index, array))

element : current index value.
index : current index.
array : original array.

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach(function(a,b,c){
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})

Output : 
Iteration :0
Value : apple , Index : 0 , Array : apple,orange,banana,papaya,pomegranate

Iteration :1
Value : orange , Index : 1 , Array : apple,orange,banana,papaya,pomegranate

Iteration :2
Value : banana , Index : 2 , Array : apple,orange,banana,papaya,pomegranate

Iteration :3
Value : papaya , Index : 3 , Array : apple,orange,banana,papaya,pomegranate

Iteration :4
Value : pomegranate , Index : 4 , Array : apple,orange,banana,papaya,pomegranate

//same program with arrow function as argument

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach((a,b,c)=>{
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})


//same program with function expression as argument

const fruits = ["apple","orange","banana","papaya","pomegranate"];
fruits.forEach(function(a,b,c){
    document.write("Iteration :"+ b)
    document.write("<br>");
    document.write(" Value : "+a+" , ");
    document.write(" Index : "+b+" , ");
    document.write(" Array : "+c)
    document.write("<br>");
    document.write("<br>");
})

const numbersarr = [1,3,5,8,9]
let value = 0;
numbersarr.forEach((a)=>value+=a);
document.write(value);

Output : 26

const numbersarr = [1,3,5,8,9]
let value = 0;
numbersarr.forEach((a)=>{
    if (a == 3)
    return //to skip this iteration
    value+=a
});
document.write(value);

Output : 23

map():

It is used to transform each element of an array. It returns a new array with modified values.
It does not modify the original array; it creates a new one.

array.map(callback(element, index, array))

const numbersarr = [1,3,5,8,9]
let result = numbersarr.map(a=> a*5)
document.write(numbersarr);
document.write("<br>");
document.write(result);

Output : 
1,3,5,8,9
5,15,25,40,45

flatMap() :

flatMap = map() + flat(1)
It Transforms each element like map().
Then flattens the result by one level

array.flatMap(callback(element, index, array))

const numbersarr = [9,3,7,1,2]
console.log("This is Map")
console.log(numbersarr.map((a)=> [a,a*2]))
console.log("This is flatMap")
console.log(numbersarr.flatMap((a)=> [a,a*2]))

Output :

const numbersarr = [9,2,4,3,28]
console.log("when map is used")
console.log(numbersarr.map(a=> a%2===0 ? a*2 : [])) 
console.log("when flatMap is used")
console.log(numbersarr.flatMap(a=> a%2===0 ? a*2 : []))

Output :

filter() :

It is used to select elements from an array based on a condition.
It returns a new array with only the elements that pass the condition.

array.filter((element, index, array) => condition)

const numbersarr = [9,2,4,3,28]
console.log(numbersarr.filter(a=> a%2===0))

Output : [2, 4, 28]

const numbersarr = [9,2,4,3,28]
const newnumber = numbersarr.filter((value,index)=> 
    {return value>5}
)

console.log(newnumber);

Output : [9,28]

const user = [
    {name : "Varun", age : 6},
    {name : "Tharun", age : 16},
    {name : "Arun", age : 25}

]
const adult = user.filter(a=> a.age>=25)
console.log(adult);

Output : [{name : "Arun", age : 25}]

JS Arrays and array functions

Nanthini Ammu — Wed, 15 Apr 2026 05:26:44 +0000

What is an Array?

An array is a collection of multiple values stored in a single variable.
It is an Object type.
List of values known as element.
The first element is at index 0, the second at index 1, and so on.
Arrays can grow or shrink as elements are added or removed.
Arrays can store elements of different data types. So it is Heterogeneous.

Why use Array?

Instead of declaring dozens of separate variables for related items (like car1, car2, etc.), they can be grouped into one array.
Unlike in many other languages, JavaScript arrays are resizable and can hold a mix of different data types.
Arrays make it easy to loop through thousands of items to perform bulk operations.

Creating an Array:

const fruits = ["apple","orange","banan"]

//You can also create an empty array, and provide elements later:

const fruits = [];

fruits[0] = "Apple";
fruits[1] = "Orange";
fruits[2] = "Banana";

//The following example also creates an Array, and assigns values to it:

const fruits = new Array("Apple", "Orange", "Banana");

Accessing Array Elements:

document.write(fruits[0]);
document.write("<br>")
document.write(fruits[1]);

Loop through Array :

Normal :


const fruits = ["apple","orange","banan"]

for(let i =0; i<fruits.length; i++){
    document.write(fruits[i]);
    document.write("<br>");
}

Output:

apple
orange
banan

Using for of :


const fruits = ["apple","orange","banan"]

for(let a of fruits)
{
    document.write(a);
    document.write("<br>");
}

Using forEach :


const fruits = ["apple","orange","banan"]

fruits.forEach(a=> 
{
    document.write(a);
    document.write("<br>");

}
);

----------------------

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

let sum = 0;
numbers.forEach(a=> sum=sum+a);
document.write(sum);

Output : 15

Updating value:

const fruits = ["apple","orange","banan"]

document.write(fruits);
fruits[1] = "grapes";
document.write(fruits);


Output :

apple,orange,banan
apple,grapes,banan

Array Length:

const fruits = ["apple","orange","banan"]

document.write(fruits.length);

Output : 3

push() - add at end :

The push() method adds a new element to an array at the end.

const fruits = ["apple","orange","banan"]

document.write(fruits);
document.write("<br>");
fruits.push("papaya","guava");
document.write(fruits);

Output :
apple,orange,banan
apple,orange,banan,papaya,guava

unshift() - add at beginning:

The unshift() method adds a new element to an array at the beginning.

const fruits = ["apple","orange","banan"]

document.write(fruits);
document.write("<br>");
fruits.unshift("papaya","guava");
document.write(fruits);

Output :
apple,orange,banan
papaya,guava,apple,orange,banan

pop() - remove last:

The pop() method removes the last element from an array.

const fruits = ["apple","orange","banan"]

document.write(fruits);
document.write("<br>");
fruits.pop();
document.write(fruits);

Output :

apple,orange,banan
apple,orange

shift() - remove first:

The shift() method removes the first array element and shifts all other elements to a lower index.

const fruits = ["apple","orange","banan"]

document.write(fruits);
document.write("<br>");
fruits.shift();
document.write(fruits);

Output :
apple,orange,banan
orange,banan

toString() :

The toString() method returns the elements of an array as a comma separated string.

const fruits = ["apple","orange","banan"]

let fruitsList = fruits.toString();
document.write(fruitsList);

Output :
apple,orange,banan

at():

The at() method returns an indexed element from an array. The at() method returns the same as [].
Negative Index Counts backward from the end of the array. For example, -1 returns the last element, and -2 returns the second to last.

const fruits = ["apple","orange","banan"]

document.write(fruits[2]);
document.write("<br>");
document.write(fruits.at(2));

output:
banan
banan

join() :

The join() method also joins all array elements into a string.
It behaves just like toString(), but in addition you can specify the separator.

const fruits = ["apple","orange","banan"]

document.write(fruits.toString());
document.write("<br>");
document.write(fruits.join("*"));

Output:
apple,orange,banan
apple*orange*banan

delete :

The delete operator removes a property from an object.

const fruits = ["apple","orange","banan"]
document.write(fruits);
delete fruits[1];
document.write("<br>");
document.write(fruits[0]);
document.write("<br>");
document.write(fruits[1]);
document.write("<br>");
document.write(fruits[2]);

Output :

apple,orange,banan
apple
undefined
banan

concat() :

The concat() method creates a new array by merging (concatenating) existing arrays.
Does not modify original.
Can take multiple arrays/values.

const fruits = ["apple","orange","banana"];
const vegetables = ["onion","tomato","brinjal"];
const liquid = ["water","juice"] 
document.write(fruits.concat(vegetables,liquid));

Output :
apple,orange,banana,onion,tomato,brinjal,water,juice

copyWithin() :

The copyWithin() method in JavaScript is used to copy a sequence of array elements from one position to another within the same array.
It is a mutating method, meaning it modifies the original array in place without changing its length.

array.copyWithin(target, start, end)

default value of starting position, if not mentioned explicitly is 0.
default value of ending position, if not mentioned explicitly is array length.

document.write( fruits.copyWithin(2,0,3) );
document.write("<br>");
document.write(fruits);

document.write("<br>");

const vegetables = ["carrot","onion","tomato","brinjal","garlic"];

document.write( vegetables.copyWithin(2) );
document.write("<br>");
document.write(vegetables);

document.write("<br>");

const colors = ["red","orange","yellow","white","pink"]

document.write( colors.copyWithin(2,1) );
document.write("<br>");
document.write(colors);

document.write("<br>");

const shapes = ["circle","square","rectangle","triangle","diamond"]

document.write( shapes.copyWithin(-2,2) );
document.write("<br>");
document.write(shapes);


Output : 
apple,orange,apple,orange,banana
apple,orange,apple,orange,banana
carrot,onion,carrot,onion,tomato
carrot,onion,carrot,onion,tomato
red,orange,orange,yellow,white
red,orange,orange,yellow,white
circle,square,rectangle,rectangle,triangle
circle,square,rectangle,rectangle,triangle

flat() :

It is used to flatten nested arrays.
It converts a multi-level array into single-level array.
flat(depth) removes one level of nesting by default(depth =1).
Returns new array.Does NOT change original array.

const fruits = ["apple",["orange",["banana","papaya"]],"pomegranate"];

console.log(fruits.flat());
console.log(fruits.flat(1));
console.log(fruits.flat(2));
console.log(fruits.flat(3));
console.log(fruits.flat(Infinity));

Output :

slice() :

It is used to extract a portion of an array.
It returns a new array.It does NOT modify the original array.

array.slice(start, end)
start - starting index(included)
end - ending index(excluded)

const fruits = ["apple","orange","banana","papaya","pomegranate"];

const fruitsslice1 = fruits.slice(); //copy entire array
document.write(fruitsslice1); 
document.write("<br>"); 

const fruitsslice2 = fruits.slice(2);
document.write(fruitsslice2); 
document.write("<br>"); 


const fruitsslice3 = fruits.slice(2,3);
document.write(fruitsslice3); 
document.write("<br>"); 

const fruitsslice4 = fruits.slice(-4,-2);
document.write(fruitsslice4); 
document.write("<br>"); 

const fruitsslice5 = fruits.slice(-4);
document.write(fruitsslice5); 
document.write("<br>"); 

Output :

apple,orange,banana,papaya,pomegranate
banana,papaya,pomegranate
banana
orange,banana
orange,banana,papaya,pomegranate

splice() :

This function is used to modify the contents of an array by removing, replacing, or adding new elements.
It changes the original array.

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

start : index where operation begins
deleteCount : how many elements to remove
item1, item2 : elements to add(optional)

const fruits = ["apple","orange","banana","papaya","tomato"];
fruits.splice(2);
document.write(fruits); //removes element from index 2.

document.write("<br>");

const vegetables = ["carrot","onion","tomato","brinjal","garlic"];
vegetables.splice(3,2)
document.write(vegetables); //starting from 3rd index and removing 2 elements.

document.write("<br>");


const colors = ["red","orange","yellow","white","pink"]
colors.splice(1,2,"brown","black")
document.write(colors);  //replacing 2 elements(brown,black) against orange and yellow(from position 1). 

document.write("<br>");

const shapes = ["circle","square","rectangle"]
shapes.splice(2,0,"triangle","diamond")
document.write(shapes);  //not removing any element and adding triangle and diamond from index 2.

Output :
apple,orange
carrot,onion,tomato
red,brown,black,white,pink
circle,square,triangle,diamond,rectangle

toSpliced() :

Does not mutate the original array. Returns a new array containing all elements after the modification.
same logic as splice().

const fruits = ["apple","orange","banana","papaya","tomato"];
const fruitsSliced = fruits.toSpliced(2);
document.write(fruitsSliced); 

document.write("<br>");

const vegetables = ["carrot","onion","tomato","brinjal","garlic"];
const vegetablesSliced =  vegetables.toSpliced(3,2)
document.write(vegetablesSliced); 

document.write("<br>");


const colors = ["red","orange","yellow","white","pink"]
const colorsSliced =  colors.toSpliced(1,2,"brown","black")
document.write(colorsSliced);  

document.write("<br>");

const shapes = ["circle","square","rectangle"]
const shapesSliced =  shapes.toSpliced(2,0,"triangle","diamond")
document.write(shapesSliced);  


Output :
apple,orange
carrot,onion,tomato
red,brown,black,white,pink
circle,square,triangle,diamond,rectangle

Constructor Function

Nanthini Ammu — Wed, 15 Apr 2026 04:31:07 +0000

What is constructor function?

A constructor function is a function used to create multiple objects with the same structure.
It is like a blue print.
Function name starts with capital letter.

function Person(name,age)
{
    this.name = name;
    this.age = age;
        this.nationality = "Tamil";  //default value
    this.greet = function(){
    document.write(`Hi, I am ${this.name}`+"<br>");
    }
}


const varun = new Person("Varun", 6);
const Arun = new Person("Arun", 6);
varun.greet();
Arun.greet();
document.write(varun.nationality);

JS Object

Nanthini Ammu — Fri, 10 Apr 2026 04:37:35 +0000

What is Object?

An object is a collection of key-value(properties and values) pairs.
In other terms they are variables that can store both values and functions.
Functions are stored as key:function() pairs called methods.

const person = {
    name : "Varun", 
    age : 6, 
    isStudent : true
};

document.write(person.name+"<br>");
document.write(person.age+"<br>");
document.write(person.isStudent+"<br>");


Output : 
Varun
6
true

//Here name,age and isStudent are keys. Varun,6 and true are values.

Accessing object keys using Bracket Notation(useful for dynamic keys) :

const person = {
    name : "Varun", 
    age : 6, 
    isStudent : true
};

document.write(person["name"]+"<br>");
document.write(person["age"]+"<br>");
document.write(person["isStudent"]+"<br>");

Output :
Varun
6
true

Adding and Updating property :

const person = {
    name : "Varun", 
    age : 6, 
    isStudent : true
};

person.city = "chennai"; //adding new property
person.age = 7 //updating property

document.write(person.name+"<br>");
document.write(person.age+"<br>");
document.write(person.isStudent+"<br>");
document.write(person.city+"<br>");

Output : 
Varun
7
true
chennai

Deleting property :


const person = {
    name : "Varun", 
    age : 6, 
    isStudent : true
};

console.log(person.isStudent);
delete person.isStudent
console.log(person.isStudent); //undefined

Methods(Functions inside objects) :

const person = {
    name: "Varun",
    age:6,
    greet: function(){
        return "Hi, I am "+this.name+"."; //'this' refers to this object
    },
    play:()=>{
        return "I am Playing."
    }

};

document.write(person.greet()+"<br>");
document.write(person.play());

Output :
Hi, I am Varun.
I am Playing.

Nested objects :

A Nested Object is simply an object inside another object.

const person = {
    name: "Varun",
    age:6,
    address :{
        city: "Chennai",
        state: "Tamilnadu"
    }

};

document.write(person.address.city+"<br>");
document.write(person.address.state);

Output :
Chennai
Tamilnadu

JS Functions

Nanthini Ammu — Thu, 09 Apr 2026 07:28:43 +0000

Function :

Reusable blocks of code designed to perform specific tasks
Function run when it is called.

Example :


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

greet(); 

Output : Hello!

Variables(let) inside function are private.

function test() {
  let x = 10;
}

console.log(x); //error

Functions with Parameters :

Parameters allow to pass values to a function.
Parameters are listed inside the parentheses in the function definition.

Parameter : Variable in function definition
Argument : Actual value passed to function


function add(a,b) {   //  'a,b' is Parameter
  console.log(a+b);
}

add(5,6);      // "5,6" is Argument


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

greet("Varun");

Output : Hello Varun

Defautlt Parameter :

Default parameters allow to assign a default value to a function parameter.
If no argument is passed, default value is used.
Always keep default parameters at the end.

function display(name = "You"){

    console.log(name);
}

display("Varun");
display();

Output : 
Varun
You

Multiple Defautlt Parameters :

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

console.log(add(5, 3)); // 8
console.log(add(5));    // 5
console.log(add());     // 0

Return Values :

A function can return a value back to the code that called it.
When a function reaches a return statement, the function stops executing.The value after the return keyword is sent back to the caller.


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

let result = add(5, 3);
console.log(result); 

Outpu : 8

Function Types

Function Declaration.
Function Expression.
Arrow function.

Function Declaration :

The traditional way to define a named function. It is hoisted, meaning it can be called before its definition in the code.


let result = add(5, 3);
console.log(result); 

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

Function Expression :

A Function Expression is a function defined as part of an expression, rather than as a standalone function declaration. It is typically anonymous (no name), created at runtime (not hoisted), and most commonly assigned to a variable. Since it's not hoisted, it cannot be called before the line where it is defined.
After a function expression has been stored in a variable, the variable can be used as a function.
It is a function without a name. It ends with a semicolon.
This is not hoisted.As function expressions can not be called before they are defined.


const multiply = function(a, b) {
  return a * b;
};
console.log(multiply(4, 3));

Arrow Function :

It allows a simple syntax for function expressions.
Can create it without function, return keywords and curly brackets.
It can be used when the function body contains only one statement.
Parentheses are required for zero or multiple parameters.
It is not hoisted.


const multiply = (a,b)=> a*b;
console.log(multiply(1,2));

//Can also do this


const operator = (a,b) => {
    console.log(a+b); 
    console.log(a*b);
    console.log(a/b);
    console.log(a%b)
};
operator(1,2);

Excercise 2

Nanthini Ammu — Tue, 07 Apr 2026 08:10:06 +0000

21) Least Common Multiple

let number1 = 8
let number2 = 10

let minNumber = (number1<number2?number1:number2);
let maxNumber = (number1>number2?number1:number2);

while(true)
{

if(number2%minNumber == 0)
{
    document.write(parseInt(number2));
    break;
}

number2 = number2+maxNumber;

}

Output : 40

22) 2 power 5

let number = 2;
let power = 5;

document.write(number**5);

Output : 32

25) Fibonacci Series

let firstNumber = 0
let secondNumber = 1
let str = "";

str = firstNumber+","+secondNumber+","

for(let i =0; i<=10; i++)
{
    total = firstNumber+secondNumber; 
        str = str+total+","

    firstNumber = secondNumber; 
    secondNumber = total;
}
document.write(str.slice(0,-1));

26) Swapping two numbers

let firstNumber = 3;
let secondNumber = 5;
let temp = 0;

temp = firstNumber;
firstNumber = secondNumber;
secondNumber = temp

document.write("firstNumber : "+firstNumber+"<br>");
document.write("secondNumber: "+secondNumber);

27) Swapping without third variable

let firstNumber = 3;
let secondNumber = 5;

document.write("Before Swapping firstNumber : "+firstNumber+"<br>");
document.write("Before Swapping secondNumber : "+secondNumber+"<br>");

firstNumber = firstNumber+secondNumber; //8
secondNumber = firstNumber - secondNumber; // 3
firstNumber = firstNumber - secondNumber; //5

document.write("After Swapping firstNumber : "+firstNumber+"<br>");
document.write("After Swapping secondNumber : "+secondNumber+"<br>");

28) Fibonacci without using third variable

let firstNumber = 0;
let secondNumber = 1;

document.write(firstNumber+",");
document.write(secondNumber+",");

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

    firstNumber = firstNumber+secondNumber; //0+1 =1 
    document.write(firstNumber+","); //1 
    secondNumber = firstNumber+secondNumber;  // 1+1 = 2
    document.write(secondNumber+",");


}
Output : 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377,610,987,1597,2584,4181,6765,10946,17711,28657,

30) First 10 Prime Numbers

let count = 1;
let str = "";

        for (let i = 2; i <= 100; i++) {
            let isPrime = true;

            for (let j = 2; j < i; j++) {
                if (i % j == 0)
                    isPrime = false
            }
            if (isPrime && count<=10){
                str = str+i+",";
                count++;
            }


        }

        document.write(str.slice(0,-1));

Output : 2,3,5,7,11,13,17,19,23,29

29) Odd Positions - Even Positions

let oddPositions = "";
let evenPositions = "";
for(let i = 1;i<=100;i++)
{
if(i%2 == 0)
evenPositions = evenPositions+i+",";
else
oddPositions = oddPositions+i+",";
}

document.write("Odd Positions : "+oddPositions.slice(0,-1)+"<br>");
document.write("Even Positions : "+evenPositions.slice(0,-1));

Output : 
Odd Positions : 1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,93,95,97,99
Even Positions : 2,4,6,8,10,12,14,16,18,20,22,24,26,28,30,32,34,36,38,40,42,44,46,48,50,52,54,56,58,60,62,64,66,68,70,72,74,76,78,80,82,84,86,88,90,92,94,96,98,100

31) Sum of Digits until it becomes single digit

let number = 984567;
let total;
let temp =0;
while(number>10)
{
 total = 0;
while(number>0)
{

 total = total+ (number%10);
 number = parseInt(number/10);
}
    number = total;
}
    document.write(total)

Output : 3

32) Printing 5! 4! 3! 2! 1!

let printFactorial;
for(let i=5; i>=1; i--)
{
    printFactorial = 1;
for(let j = 1; j<=i; j++)
{

printFactorial = printFactorial*j;

}
document.write(`Factorial of ${i} :`+ printFactorial+"<br>");
}

Output : 
Factorial of 5 :120
Factorial of 4 :24
Factorial of 3 :6
Factorial of 2 :2
Factorial of 1 :1

32) Printing 5! 4! 3! 2! 1! using function recursion:

for(let i = 5; i>=1; i--)
{
    console.log(`factorial of ${i} :`+factorial(i));
}

function factorial(i)
{
    if(i==1)
        return 1;
    else
        return i*factorial(i-1);
}

Output :
factorial of 5 :120
factorial of 4 :24
factorial of 3 :6
factorial of 2 :2
factorial of 1 :1

33) Printing 110 29 38 47

let number = 10;

for(let i=1; i<=10; i++)
{

document.write(`${i} * ${number} : `+i*number+"<br>");
number--;

}

34) Printing 1 11 121

let number = 11;
for(let i=0; i<=5; i++)
{
document.write((number**i) + " ");

}

Output : 1 11 121 1331 14641 161051

35) Printing 1 8 27 64

let power = 3;
for(let i =1; i<=5; i++)
{
    document.write(i**power+" ");
}

Output : 1 8 27 64 125

36) Printing 1 4 9 16 25 36 49 64 81 100

for(let i =1; i<=10; i++)
{
    document.write(i*i+" ");
}

Printing 1 4 27 256

for(let i =1; i<=5; i++)
{
    document.write(i**i+" ");
}

38) Square Root of a Number

let number = 16
for(let i =2; i<=number; i++)
{
    if(number%i ==0 && number == i*i)
    {
    document.write(i);
    break;
    }
}
Output : 4

39) Spy Number

let number = 1124
let addition =0;
let multiplication = 1;
while(number>0)
{
addition = addition+(number%10);
multiplication = multiplication*(number%10);
number = parseInt(number/10);
}
if(addition ==multiplication )
document.write("Given number is a Spy number. Addition of digit is "+addition+ ".Multiplication of Digit is "+multiplication+".");
else
document.write("Given number is not a Spy number");

Output : Given number is a Spy number. Addition of digit is 8.Multiplication of Digit is 8.

40) Prime no.s in a fibonacci series

let firstNumber = 0
let secondNumber = 1
let str = "";
let primeNumber = "";
let isPrime;

str = firstNumber+","+secondNumber+","


for(let i =0; i<=10; i++)
{
    isPrime = true;
    total = firstNumber+secondNumber; 
    str = str+total+","

        for(let j =2; j<total; j++)
        {
        if(total%j ==0){
            isPrime = false;
            break;}
        }
        if(isPrime)
        primeNumber = primeNumber+total+" ";

    firstNumber = secondNumber; 
    secondNumber = total;
}

document.write("Fibonacci Series : ")
document.write(str.slice(0,-1));
document.write("<br>")
document.write("Primt Number in Fibonacci Series : ")
document.write(primeNumber);

Output : 

Fibonacci Series : 0,1,1,2,3,5,8,13,21,34,55,89,144
Primt Number in Fibonacci Series : 1 2 3 5 13 89