DEV Community: Sowntharya

A Simple Puzzle to learn Python Loops

Sowntharya — Sat, 14 Nov 2026 05:43:21 +0000

problem : 1

Tenali Raman and the Palace Guards

Tenali Raman wishes to meet the King. Before reaching the royal court, he has to pass through many palace gates. A guard is posted at each gate.

Every guard demands a share of whatever reward Tenali Raman receives from the King. Tenali Raman agrees and promises:
"I will give you half of whatever reward I receive from the King."

All the guards allow him to enter. After meeting the King, Tenali Raman receives a reward of 1024 lashes.

Keeping his promise, Tenali Raman shares his reward with the guards. At each gate, he gives half of the lashes he still has to receive to the guard at that gate and proceeds to the next gate.

Write a program to determine:

How many lashes each guard receives.
How many Guards are there if Tenali Raman gets only one lash.

code :

number = 1024
guard = 1

while number >= 1:
    number = number // 2    //floor division

    print("Guard", guard, "gets", number)

    guard += 1

output :
Guard 1 gets 512
Guard 2 gets 256
Guard 3 gets 128
Guard 4 gets 64
Guard 5 gets 32
Guard 6 gets 16
Guard 7 gets 8
Guard 8 gets 4
Guard 9 gets 2
Guard 10 gets 1

Problem : 2

Two trains stop at regular intervals:
Train 1 stops at every 3rd station.
Train 2 stops at every 5th station.
Find:
The first common station where both trains stop.
The last common station where both trains stop.
All common stations where both trains stop.

Note: Total Number of Stations are unknown.

no = 1
last_station = no 
first_station = True
while no <=100: 
    if no%3 == 0 and no % 5 == 0:
        if first_station == True: 
            print('First Station is', no)
            first_station = False
        else:
            print('Common Station is', no)
        last_station = no #15 30    45  60  75  90
    no = no + 1

print('Last Station is', last_station)

understanding purpose :
no = 1
if no%3 == 0 and no % 5 == 0:
print('LCM is', no)
no = no + 1
if no%3 == 0 and no % 5 == 0:
print('LCM is', no)
no = no + 1
if no%3 == 0 and no % 5 == 0:
print('LCM is', no)
no = no + 1
if no%3 == 0 and no % 5 == 0:
print('LCM is', no)
no = no + 1
if no%3 == 0 and no % 5 == 0:
print('LCM is', no)
no = no + 1

Problem : 3
A teacher asks five students to stand in a line. Each student wears a badge with the number 1. Display the badge numbers from left to right.

count = 1
while count <= 5:
    print(1, end=' ')
    count = count + 1

Problem : 4
Five students enter the classroom one after another. The first student gets roll number 1, the second gets 2, and so on. Display the assigned roll numbers.

no = 1
while no <= 20:
    print(no, end=' ')
    no = no+1

Problem : 5
A coach asks students to stand only at even-numbered positions in a queue. Display the first five positions.

position = 2
while position <= 10:
    print(position, end=' ')
    position = position + 2

Problem : 6
A newly constructed building has a special lift that does not stop on every floor. For safety reasons, it stops only at every third floor. A person enters the lift at the ground floor and presses the "Up" button for 5 times.

floor = 3
while floor <=15:
    print(floor,end=' ')
    floor = floor + 3

Problem : 7
A rocket launches with a countdown using only even numbers from 10. Display the countdown.

count_down = 10
while count_down >=1:
    print(count_down, end=' ')
    count_down = count_down -2

notes:
count_down = 10
print(count_down)
count_down = count_down - 2
print(count_down)
count_down = count_down - 2
print(count_down)
count_down = count_down - 2
print(count_down)
count_down = count_down - 2
print(count_down)
count_down = count_down - 2
print(count_down)

What I Learned Today: Exploring Local Storage in JavaScript

Sowntharya — Fri, 13 Nov 2026 17:31:02 +0000

Today, I explored JavaScript Local Storage and learned how to store, retrieve, update, and remove data directly in the browser.

Introduction – What is Local Storage?
Local Storage is a feature in JavaScript that allows us to store data in the browser. The stored data remains available even after refreshing or closing the browser.

Why Do We Need Local Storage? – Why storing data in the browser is useful.
We use Local Storage to save data in the browser so users don't lose important information when they refresh or revisit a webpage. For example, saving user preferences, theme settings, or shopping cart items.

How Local Storage Works – Understanding browser storage.
Local Storage stores data as key-value pairs in the user's browser. JavaScript provides built-in methods to save, retrieve, update, and delete data.

Important Local Storage Methods :

1.localStorage.setItem() – Store data.

2.localStorage.getItem() – Retrieve data.

3.localStorage.removeItem() – Remove specific data.

l4.ocalStorage.clear() – Remove all stored data.

Practical Example : Ecommerce website

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        span {
            font-size: 20px;
            font-weight: 600;
        }

        #parent-div {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            width:400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px ;
            gap: 30px;

        }
        /* div:hover {
            transform: scale(1.1);
        } */

        img {
            width: 300px;
        }

        .price {
            text-decoration: line-through;

        }

        #cards {
            display: grid;
            grid-template-columns: /*repeat(3, minmax(0, 1fr));*/ repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
        }

        button {
            padding: 15px 20px;
            font-weight: 700;
            background-color: rgb(8, 98, 216);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        button:hover {
            background-color: rgb(17, 59, 199);
        }

        div {
            display: flex;
            gap : 20px;
        }
        /* #btns button {
            margin-right: 20px;
        } */
       .cart-btn {
        position: fixed;
        right :0;
       } 
       .p{
        width: 200px;    /* controls how much text is visible */
        height: 100px;
        /* overflow: scroll;  hides the rest */
        white-space: nowrap;
    }
    #cartCount {
        font-size: 15px;
    }
    a {
        border: 1px solid blue;
        background-color: rgb(17, 59, 199) ;
        color: white;
        text-decoration: none;
        padding: 10px 10px;
        border-radius: 10px;
        font-weight: 700;
    }


    </style>

</head>
<body>

    <a href="viewcartpage.html" class="cart-btn">ViewCart <span id="cartCount"></span></a>
    <div id = "cards">

    </div>

    <script>

        //localStorage.removeItem("cart");  //to delete use once

        //const currentCart = JSON.parse(localStorage.getItem("cart")) || [];  //if theres no value empty [] shows
        //console.log(currentCart);

        const cart_items = JSON.parse(localStorage.getItem("cart")) || [];
        let totalCount = cart_items.reduce((sum, item) => sum + item.count, 0);
        document.getElementById("cartCount").innerText = totalCount;


        fetch("https://dummyjson.com/products?limit=200")
            .then((res) => res.json())
            .then((data) => {
        const productList = data.products;

        console.log(productList);


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

             const card = document.createElement("div");
             card.id = "parent-div";

                    const elem = document.createElement("img");
                    elem.src = productList[i].images[0];
                    card.appendChild(elem);

                    const brandTag = document.createElement("h3");
                    brandTag.innerText = `Brand : ${productList[i].brand}`;
                    card.appendChild(brandTag);

                    const para = document.createElement("p");
                    para.innerHTML = `<span>Description :</span> ${productList[i].description}`;
                    card.appendChild(para);

                    const priceTag = document.createElement("h3");
                    priceTag.className = "price";
                    priceTag.innerText = `Price :  ${productList[i].price}`;
                    card.appendChild(priceTag);

                    const btns = document.createElement("div");

                    const cart_btn = document.createElement("button");
                    cart_btn.addEventListener('click', ()=> myfunction(productList[i]));
                    cart_btn.innerText = "Add to cart";
                    btns.appendChild(cart_btn);

                    const buy_btn = document.createElement("button");
                    buy_btn.innerText = "Buy";
                    btns.appendChild(buy_btn);
                    card.appendChild(btns);



                    const cardsDiv = document.getElementById("cards");
                    cardsDiv.appendChild(card);

                }
            })


            function myfunction(e){

                let existingItem = cart_items.filter(item => item.id === e.id);
                if (existingItem.length > 0) {
                    existingItem[0].count++;
                }
                else {
                    cart_items.push({...e, count: 1});
                }
                localStorage.setItem("cart", JSON.stringify(cart_items));
                console.log(cart_items);

            }


    </script>

</body>
</html>

"Today, I learned how Local Storage helps JavaScript applications remember data even after refreshing the browser".

Daily Savings Challenge: Learn Python Loops Through a Real-Life Problem

Sowntharya — Fri, 13 Nov 2026 17:07:20 +0000

Problem 1:
A daughter is going on a 5-day vacation. She asks her father to give her Rs. 5 every day, so she can save the money.

Her father suggests a different plan. Instead of giving her Rs. 5 daily, he says:
Day 1: Rs. 1
Day 2: Rs. 2
Day 3: Rs. 3
Day 4: Rs. 4
Day 5: Rs. 5

The daughter agrees to her father's proposal.

Write a program to calculate:

A) The total amount the daughter would receive under her original plan.
B) The total amount she would receive under her father's plan.
C) Display both totals.
Redo the same activity for 10 days leave, instead of 5 days.

box = 0
day = 1
box = box + 5
day = 2
box = box + 5
day = 3
box = box + 5
day = 4
box = box + 5
day = 5
box = box + 5
print(box)

box = 0
day = 1
box = box + 5
day = day + 1
box = box + 5
day = day + 1
box = box + 5
day = day + 1
box = box + 5
day = day + 1
box = box + 5
print(box)

box = 0
day  = 1
while day <= 5:
    box = box + 5
    day = day + 1 

print(box)

box = 0
day = 1
box = box + 1
day = 2
box = box + 2
day = 3
box = box + 3
day = 4
box = box + 4
day = 5
box = box + 5
print(box)

box = 0
day = 1
box = box + day
day = day + 1
box = box + day
day = day + 1
box = box + day
day = day + 1
box = box + day
day = day + 1
box = box + day
print(box)

python
box = 0
day  = 1
while day <=5:
    box = box + day
    day = day + 1

print(box) 
-----------------
total = 0
no  = 1
while no <= 10:
    total = total + no
    no = no + 1

print(total)

*Multiplication of First n Numbers: *

total = 1
no  = 1
while no <= 10:
    total = total * no
    no = no + 1

print(total)

*Addition of First n numbers: *
1 * 2 * 3 * 4 * 5

Additive Identity: 0
Multiplicative Identity: 1

2.Frog in a Well

A frog accidentally falls into a 60-foot-deep well.

Every day:

During the day, the frog climbs 2 feet.
During the night, it slips down 0.5 feet.

This pattern continues every day until the frog reaches the top of the well and escapes.

How many days it takes for the frog to get out of the well.
On which day the frog escapes.

Note: Once the frog reaches or crosses the top of the well during the daytime, it escapes immediately and does not slip back that night.

total_depth = 60
day = 0
while total_depth >= 2: 
    total_depth = total_depth - 2 #58
    total_depth = total_depth + 0.5 #58.5
    day = day + 1

print(day)

Problem : 3
3.The Saint's Flower Basket

A saint goes for a morning walk every day. During his walk, he plucks flowers and keeps them in a basket.

On his way back home, he visits 7 temples. At each temple, he offers half of the flowers currently in his basket.

After visiting all 7 temples, he reaches home with exactly one flower remaining in his basket.

Write a program to determine how many flowers the saint had in his basket before he visited the first temple.

Hint: Think carefully about whether it is easier to solve the problem from the beginning or by working backwards from the final flower.

count = 1
temples_visited = 7
count = count * 2 #2
temples_visited = temples_visited - 1
count = count * 2 #4
temples_visited = temples_visited - 1
count = count * 2 #8
temples_visited = temples_visited - 1
count = count * 2 #16
temples_visited = temples_visited - 1
count = count * 2 #32
temples_visited = temples_visited - 1
count = count * 2 #64
temples_visited = temples_visited - 1
count = count * 2 #128

count = 1
temples_visited = 7
while temples_visited > 0:
    count = count * 2 #2
    temples_visited = temples_visited - 1

print(count)

Product Listing using JavaScript API

Sowntharya — Wed, 04 Nov 2026 19:19:40 +0000

This mini project is developed using HTML, CSS, and JavaScript. It fetches product details from the DummyJSON API (https://dummyjson.com/products?limit=200) using the Fetch API.

The project dynamically displays up to 200 products on the webpage, including their product images, brand names, descriptions, and prices. Each product is displayed in a separate card with an Add to Cart button.

Key Features:

Fetches product data from an external API.
Uses JavaScript DOM manipulation to create product cards dynamically.
Displays product images, brand names, descriptions, and prices.
Provides an Add to Cart button for each product.

Objective: The main objective of this project is to understand API integration, asynchronous JavaScript, Fetch API, and DOM manipulation in a real-world application.

Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        span {
            font-size: 26px;
            font-weight: 600;
        }

        div {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            width: 450px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px ;
            gap: 30px;

        }
        div:hover {
            transform: scale(1.1);
        }

        img {
            width: 300px;
        }

        .price {
            text-decoration: line-through;

        }

        body {
            display: grid;
            grid-template-columns: /*repeat(3, minmax(0, 1fr));*/ repeat(auto-fit, minmax(350px, 1fr));
            gap: 40px;
        }

        button {
            padding: 15px 20px;
            font-weight: 700;
            background-color: rgb(8, 98, 216);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
        button:hover {
            background-color: rgb(17, 59, 199);
        }
    </style>

</head>
<body>
    <script>
        fetch("https://dummyjson.com/products?limit=200")
            .then((res) => res.json())
            .then((data) => {
        const productList = data.products;

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

             const card = document.createElement("div");

                    const elem = document.createElement("img");
                    elem.src = productList[i].images[0];
                    card.appendChild(elem);

                    const brandTag = document.createElement("h3");
                    brandTag.innerText = `Brand : ${productList[i].brand}`;
                    card.appendChild(brandTag);

                    const para = document.createElement("p");
                    para.innerHTML = `<span>Description :</span> ${productList[i].description}`;
                    card.appendChild(para);

                    const priceTag = document.createElement("h3");
                    priceTag.className = "price";
                    priceTag.innerText = `Price :  ${productList[i].price}`;
                    card.appendChild(priceTag);

                    const btn = document.createElement("button");
                    btn.innerText = "Add to cart";
                    card.appendChild(btn);

                    document.body.appendChild(card);

                }
            })
    </script>

</body>
</html>

image :

String methods

Sowntharya — Wed, 04 Nov 2026 12:11:12 +0000

1.trim() :
This method removes whitespace from both sides of a string.

let text1 = "      hey hi!      ";
let text2 = text1.trim();   //hey hi!

2.trimStart() :
This method removes whitespace only from start of a string.

let text1 = "      hey hi!      ";
let text2 = text1.trim();   //hey hi!

3.trimEnd() :
This method removes whitespace only from end of a string.

let text1 = "      hey hi!      ";
let text2 = text1.trim();   //     hey hi!

4.repeat() :
method returns a string along with a number of copies of a string.

let text = "python";
let result = text.repeat(2);   //pythonpython

5.replace() :
method replaces a specified value with another value in a string.
note :

method does not change the string.
method replaces only the first match.

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");  //Please visit W3Schools!

the replace() method replaces only the first match.

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");  //Please visit W3Schools and Microsoft!

the replace() method is case sensitive. Writing MICROSOFT (with upper-case) will not work.

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools"); //Please visit Microsoft!

To replace case insensitive, use a regular expression with an /i flag.

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");
//output : Please visit W3Schools!

To replace all matches, use a regular expression with a /g flag.

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");
output :  Please visit W3Schools and W3Schools!

6.replaceAll() :
note : replaceAll() does not work in Internet Explorer.

let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

 //output : I love dogs. Dogs are very easy to love. Dogs are very polpular.

regular expression, the global flag (g) must be set.

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

7.split() :
A string can be converted to an array with the split() method.

let text = "Hi fox!";
const myArr = text.split("");  //["H","i","f","o","x","!"]

syntax :
text.split("")     // Split on characters
text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

let text = "The quick brown fox.";
const myArr = text.split();  //["The quick brown fox."]

String Methods in JavaScript

Sowntharya — Tue, 03 Nov 2026 13:31:55 +0000

String methods are built-in functions used to work with text. They help us find the length, change letters, search words, extract characters, and more.

1.Length :
Length - property returns the length of the string.

let name = "Hello";
let length = name.length; //5
console.log(name.length);  //5

2.toLowerCase() :
convert all letters into small letters.

let name = "JAVASCRIPT";

console.log(name.toLowerCase()); //javascript

3.toUpperCase() :
convert all letters into capital letters.

let name = "javascript";

console.log(name.toUpperCase()); //JAVASCRIPT

there are 4 methods to get string character

4.at() :

method returns the character at a specified index (position) in a string.

const name = "Samsung";
let letter = name.at(2);  //m

note: It allows the use of negative indexes while charAt() do not.

const name = "sowntharya";
let letter = name.at(-5);  //h

5.CharAt() :
method returns the character at a specified index in a string.

let text = "HELLO WORLD";
let char = text.charAt(0);  //H

6.charCodeAt() :

method returns the code of the character at a specified index in a string.
returns a UTF-16 code (an integer between 0 and 65535).

let text = "HELLO WORLD";
let char = text.charCodeAt(0); //72

7.Propert Access [] :

let text = "HELLO WORLD";
let char = text[0]; //H

note : If no character is found, [ ] returns undefined, while charAt() returns an empty string. It looks like array but they are not.

8.concat() :
join/combine two or more strings.

let text1 = "Sam";
let text2 = "Sung";
let text3 = text1.concat(" ", text2);  //Sam Sung

note: empty quotes for space between 2 string
strings are immutable: Strings cannot be changed, only replaced.

To get part a of string 3 methods

9.slice () :

extracts a part of a string and returns the extracted part in a new string.
note : take 2 parameters: start position, and end position
First position is 0. Second position is 1

let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);  // Banana

If you omit the second parameter, the method will slice out the rest of the string:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7);  //Banana, Kiwi

If a parameter is negative, the position is counted from the end of the string

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);  //Banana, Kiwi

10.substring() :
substring() is similar to slice().

The difference is that start and end values less than 0 are treated as 0 in substring().

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);  //Banana

11.substr() :
The second parameter specifies the length of the extracted part.
same as slice().

If you omit the second parameter, the method will slice out the rest of the string:

let text = "Apple, Banana, Kiwi";
let part = text.slice(7);  //Banana, Kiwi

If a parameter is negative, the position is counted from the end of the string

let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);  //Banana, Kiwi

note : substr() not removed from JS.

substr() is still supported by modern JavaScript engines.
Old features are documented in Annex B.
developers are advised not to use it in new code.
It may still work for backward compatibility.

DOM (Document Object Model)

Sowntharya — Mon, 02 Nov 2026 18:56:05 +0000

DOM is a programming interface that allows javascript to access and change HTML elements, content, styles and attributes.
note: DOM connects HTML and JavaScript.

1.DOM works :

<h1 id="heading">Hello World</h1>

javascript can access and change that heading using DOM.

document.getElementById("heading").innerHTML = "welcome";

output: welcome //displays welcome instead of Hello World.

2.DOM methods:

getElementById() :select element by ID.
getElementByClassname() : select element by classname.
getElementByTagname() : select element by tagname.
querySelector() : select 1st matching element
querySelectorAll() : select all matching element.

3.Changing HTML content:

<p id="demo" >hello world</p>
<script>
document.getElementById("demo").innerHTML="para";
</script>

4.Changing CSS using DOM :

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

<script>
document.getElementById("title").style.color="red;
</script>

5.DOM events :
events are actions performed by the user, such as clicking, typing or moving the mouse.
Example code : Button click.

<button id="btn">Click Me>/button>
<script>
document.getElementById("btn").onclick=function() {
alert("Button Clicked");
}
</script>

Program You can try:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="txt">0</h1>
    <button onclick="increament()">+</button>
    <button onclick="decrement()">-</button>
    <button onclick="reset()">Reset</button>

    <script>

        let count = 0;

    function increament(){
        const incBtn = document.getElementById("txt");
         count++;
         incBtn.innerText = count;

    if(count >=10){
        document.getElementById("txt").style.color="green";
        document.getElementById("txt").style.fontSize="60px";  //fontsize increase
    }
    else if (count >=5)
    {
        incBtn.style.color="blue";
        document.getElementById("txt").style.fontSize="40px";

    }
     else if (count <5)
    {
        incBtn.style.color="red";
        document.getElementById("txt").style.fontSize="30px";

    }
    else
    {
        document.getElementById("txt").style.color="black";

    }


    } 

    function decrement(){
        const decBtn = document.getElementById("txt");
        count--;
        if(count<0)
    {    count=0

    }
    // if(count>0)
    // {count--;} 

        decBtn.innerText = count;
        if(count >=10){
        document.getElementById("txt").style.color="green";
        document.getElementById("txt").style.fontSize="60px";  //fontsize increase
    }
    else if (count >=5)
    {
        decBtn.style.color="blue";
        document.getElementById("txt").style.fontSize="40px";

    }
     else if (count <5)
    {
        decBtn.style.color="red";
        document.getElementById("txt").style.fontSize="30px";

    }

    }

    function reset(){
        const rst = document.getElementById("txt");
        count=0;
        rst.innerText = count;
        rst.style.color="red";

    }

    </script>


</body>
</html>

JavaScript iterations method

Sowntharya — Fri, 30 Oct 2026 08:47:25 +0000

JavaScript 3 statement for looping:
1.For...of loop :
used to get the values of an array one by one.
For array we prefer for...of to get value.

let nums = [10, 20, 30];
for(let x of nums){
console.log(x);
}
output:
10
20
30

2.for...in loop :
used to access the keys or indexes of an array.
(Not recommended)

let nums = [10, 20, 30];
for(let i in nums){
console.log(i);
}

3.forEach() :
Execute/ calls a function for each array element. it doesn't create a new array.

1.const numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

//function myFunction(value, index, array)
function myFunction(value){
  console.log(value);
}
output :
45
4
9
16
25

2.//function myFunction(index)
function myFunction(value, index){
  console.log(index);
}  or
//function myFunction(index)
function myFunction(_, index){
  console.log(index);
}
3.//function myFunction(array)
function myFunction(value, index, array){
  console.log(array);

notes : within function we can give 3 arguments(value index, array).

4.map() :
create a new array transforming/performing a function each element.

const num1=[1, 2, 3];
const num2= num1.map(myFunction);

//function myFunction(value, index, array)
function myFunction(value){
return value*2;
}
console.log(num2);

5.flatMap() :
first map each array element then create new array by flatten the array.
note: Function(value, index, array)

let nums = [1, 2, 3];
let result = nums.flatMap(n => [n, n * 10]);
console.log(result); //1,10,2,20,3,30

6.filter() :
create new array containing only elements that satisfy a condition.
note: Function(value, index, array)

let nums = [10, 15,20,25];
let result = nums.filter(myFunction);
function myFunction(value){
return value >15;
}
or
let nums = [10, 15,20,25];
let result = nums.filter(n => n > 15);
console.log(result);   //[20, 25]

7.reduce()
combines array elements into single result.
note : works from left to right.

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

8.reduceRight() :
works from right to left

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value) {
  return total + value;  //9
}

9.every() :
checks all elements satisfy a condition.
returns true or false.
note: Function(value, index, array)

let nums = [10,20,30];

console.log(nums.every(n => n>5));  //true
console.log(nums.every(n => n>15));//false

10.some() :
checks at least one element satisfies a condition.
note: Function(value, index, array)

let nums = [10,20,30];

console.log(nums.every(n => n>5));  //true
console.log(nums.every(n => n>15));//true

11.Array.from() :
create a new array from a iterable or array like value , string.

let text = "CAT";
let result = Array.from(text);
console.log(result);

output: ["C", "A", "T"]

12.keys() :
returns an iterator containing the array's indexes.

let fruits = ["apple", "mango", "orange"];
console.log([...fruits.keys()]);

output : [0, 1, 2]

13.spread operator(...) :
spread expands an array's elements. it is used to copy or combine arrays.

let a = [10,20, 30];
let b = [...a];
console.log(b);   //[10, 20, 30]

let a = [10, 20];
let b = [30, 40];
console.log(...a, ...b);   //[10, 20, 30, 40]

14.rest parameter(...) :
rest collects arguments into single array. spread and rest are same but differ purpose.

function add(...nums){
return nums.reduce((total, n) => total + n, 0);
}
console.log(add(10, 20, 30));   //60

JavaScript Functions

Sowntharya — Thu, 29 Oct 2026 14:45:04 +0000

Function is a block of code designed to perform a specific task. We can reuse it whenever needed.

notes: function() first need to know return type

1.Function declaration

function greet()
{
console.log("hello world");
}
greet();  // hello world

2.Function with parameters/arguments

parameter - name/ input value , argument - value
Parameters receive values when the function is called.

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

a and b are parameters. 10 and 20 arguments.

3.Function with return
return sends a value back to the caller(the value goes back to who calls).
reuse the result of another calculation.

function add(a, b){
return a + b;
}
let result = add(10,20);
console.log(result);  // 30

4.Default parameter
function without values are default parameter.

function greet(name = "world"){
console.log("hello" + name);
}
greet();
greet("sam");

output :
hello world
hello sam

5.Function expression
A function can stored in a variable.

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

6.Arrow function
A shorter way to write a function.

let add = (a, b) => {
return a + b;
};
console.log(add(5,3)); //8

//shorter version
let add = (a, b) => a + b;
console.log(add(5,3));  //8

7.Callback function
A callback is a function passed as an argument to another function.

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

function add(a, b, callback){
callback(a + b);
}
add(10, 20, display);  // 30

notes:
normal function : perform a task and return the result.
callback function : passes a function to another function so it can decide when to call it. (used in button click, arrays, timers)

8.Function returning a value

function square(n){
return n * n;
}
console.log(square(5));   //25

Array in JavaScript

Sowntharya — Thu, 29 Oct 2026 11:38:33 +0000

Array is a group or collection of different data types stored in single variable/continuous memory.
used to organize same type of data.
Array is index based, index starts at 0.
Array is fixed in size.

1.Create a array

let fruits = ["apple", "mango", "orange"];
console.log(fruits);   

output: ["apple", "mango", "orange"]

Array Methods ( accessing array elements )

 const fruits = ["banana" , "orange" , "apple" , "Mango" , "kiwi" ];
 let size = fruits.length;
 console.log("length of array : " + size);

 // indexOf() - Find the index
 console.log(fruits.indexOf("apple"));  // apple is index 2

 // includes() - Check if an element exists
console.log(fruits.includes("orange"));  //true
console.log(fruits.includes("Grapes"));   //false

 // add new element
 fruits[fruits.length] = "mango";
 console.log(fruits);

 //change a array element by reffering index
 fruits[0] = "lemon"; 
 console.log(fruits);

 let list = fruits.toString();
 console.log("array to string : " + list);


 let fruit = fruits.at(-1);  // reverse/ based on index / starts from 0
 console.log("third element of fruits : " +  fruit);

  //use separator
 let concat = fruits.join(" + * , "); 
 console.log("join all array element into string  : "+ concat );

 // return last value
 let rmv = fruits.pop();
 console.log("removes last elements : " + rmv); 

 //return array length
 let add =  fruits.push("starfruit");
 console.log("add new element to array at end : " + add); 

 let remove = fruits.shift();
 console.log("remove 1st array and shift all element to lower index : " +    remove);
 console.log(fruits);

 // return added index
 let unshft = fruits.unshift("strawberry"); 
 console.log("add new element and unshift older element : " + unshft);
 console.log(fruits);

 // add new method to js
 let arr = Array.isArray(fruits); 
 console.log(arr);
 console.log(fruits);

 let dlt = delete fruits[7]; // 0 index value become empty
 console.log(dlt);
 console.log(fruits);

 // merge array
 const fname = ["Sowntharya" , "sam"];
 const lname = ["Rajendran" , "sung"];
 const name = fname.concat(lname); 
 console.log(name); 

 // create new array with sub array
 const flt = [[1,2], [3,4], [4,5]];
 let arry = flt.flat(); 
 console.log(arry); 

 // 1st create new array  then create flattening array
 const map = [1,2,3,4,5,6];
 let fmap = map.flatMap(a => [a, a * 10]); 
 console.log(fmap);

 // slice() -return a part of an array without changing the original array
 let splce = fruits.splice(2,0, "guava", "pineapple");
 console.log(splce); 
 let numbers = [10, 20, 30, 40, 50];
 console.log(numbers.slice(1,4));  //[20, 30, 40]
 console.log(numbers);  //[10, 20, 30, 40, 50]


 // splice() - Add, remove or replace element 
 //remove elements: starts at index 1 and removes 1 element.
 let fruits = ["apple", "mango", "orange"];
 fruits.splice(1,1);
 console.log(fruits);  ["apple", "orange"]

Control Statement in JavaScript

Sowntharya — Wed, 28 Oct 2026 14:12:07 +0000

Control statement used to control the flow of execution of the program based on certain condition.
They allow program to make decision , repeat action or jump to different part of the code.

Types of statements

Conditional statement : used to choose execution path based on a condition. conditional/selection/decision making statement.

if statement : If the condition is true statement will be executed. one condition - yes or no

let age = 20;
if(age >= 18){
console.log("eligible");  //eligible
}

if else statement : If the condition is true statement will be executed otherwise else part will be execute.

let age =16;
if(age>=18){
console.log("eligible");
}
else{
console.log("not eligible"); //not eligible
}

else if statement : If the condition is true statement will be execute if its false else if will execute if none is true then else part will execute.

let mark =75;
if(mark>=90){
console.log("A grade");
}
else if (mark>=70){
console.log("B grade");// B grade
} 
else{
console.log("C grade");

Nested if statement : If statement inside another if statement. Both the condition should be true.

let age = 22;
let id = true;
if(age>=18){
if(id==true){
console.log("allowed");// allowed
}
}

switch statement : Multiway branch statement. select a case based on a value.

let day = 2;
switch(day){
case 1 :
console.log("Monday");
break;
case 2 :
console.log("Tuesday");  //Tuesday
break;
case 3 :
console.log("Wednesday");
break;

2.Looping Statement : Used to repeat a block of code multiple times, until a condition is true.

while loop : used to repeat/iterate a part of program repeatedly until the specified condition is true. If condition become false loop automatically stop. (no. of iteration is not fixed -we use)

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

do-while loop / exit control loop : used to check the condition later, want to execute the block atleast once.

let i = 1;
do {
console.log(i); //1
i++;
}
while(i<=3);

for loop : use to perform a task in single line. initialization, condition, increament/decreament.

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

output:
1
2
3

3.Jump statement : used to break out of loops and switch statement.

break statement : used to break the current flow of the program.

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

continue : It doesn't break the loop, its skip the specific part of the loop and jump the next iteration of the loop.

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

return statement : ends a function and can send a value back to the place where the function was called.

function add(a, b){
return a+b;
}
let result = add(10,20);
console.log(result);  // 30

Objects in JS

Sowntharya — Tue, 27 Oct 2026 17:50:34 +0000

Object is a non primitive data type to store functions and values.
Multiple values as key:value pairs.
Functions are stored as key:function() pairs called methods.
Object store related information about one thing.

Examples:

let person = {
name : "Priya",
age : 20,
city : "Chennai"
};
console.log(person);

output: {name: "Priya", age: 20, city: "Chennai"}

To access object:

Dot notation

console.log(person.name);
console.log(person.age);

output: Priya
20

2.Bracket notation

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

output : Chennai

Object CRUD Operations :

Add a new property

let mobile = {
name: "Vivo",
price: 20000,
};
mobile.model: "V80";  //includes this
console.log(student);

output: Vivo
20000
V80

Read a property

console.log(mobile.name); //Vivo
console.log(mobile["name"]); //Vivo

Update a property

mobile.price: 25000;
console.log(mobile.price); // 25000

Delete a property

delete mobile.price;
console.log(mobile); //price will be removed

output: Vivo
V80