DEV Community: Vigneshwaran V

JavaScript DOM

Vigneshwaran V — Sun, 28 Jun 2026 13:17:46 +0000

The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree of objects. JavaScript uses the DOM to access and manipulate web page content, structure, and styles dynamically.

DOM stands for Document Object Model.
It represents an HTML document as a tree of objects (nodes).
The browser automatically creates the DOM when a web page loads.
JavaScript uses the DOM to access and manipulate HTML elements.
The DOM represents every HTML element as an object. These objects contain properties, methods, and attributes (stored as name-value pairs), allowing JavaScript to access and manipulate the web page dynamically.
The DOM allows JavaScript to change content, attributes, styles, and structure of a web page.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello Vicky</h1>
    <p>Welcome to DOM</p>
    <button>Click Me</button>
</body>
</html>

The browser converts it into a DOM Tree like this:

Document
│
└── html
    │
    ├── head
    │   │
    │   └── title
    │       │
    │       └── "My Page"
    │
    └── body
        │
        ├── h1
        │   │
        │   └── "Hello Vicky"
        │
        ├── p
        │   │
        │   └── "Welcome to DOM"
        │
        └── button
            │
            └── "Click Me"

Understanding the relationships

body
├── h1
├── p
└── button

Here body is the parent node.
h1, p, and button are child nodes of body.
h1, p, and button are siblings of each other.

A DOM Tree is a hierarchical structure where each HTML element is a node connected through parent-child and sibling relationships, allowing JavaScript to navigate and manipulate the page.

We use the DOM (Document Object Model) because it allows JavaScript to interact with and modify a web page after it has loaded.

Without the DOM, HTML would just be a static document.

Example for DOM

This the Example code shows how the Dom will Actually access and modify the HTML elements.

<!DOCTYPE html>
<html>
<body>

    <h1 id="heading">Welcome</h1>

    <button onclick="changeText()">
        Change Text
    </button>

    <script>
        function changeText() {
            document.getElementById("heading").textContent = "Welcome Vicky";
        }
    </script>

</body>
</html>

Modify the Text

document.getElementById("heading").textContent = "Welcome Vicky";

textContent is a property of the DOM element.
Assigning a new value updates the text inside the element.

Before:

<h1 id="heading">Welcome</h1>

After button click:

<h1 id="heading">Welcome Vicky</h1>

Why do we use the DOM?

The DOM allows JavaScript to access and manipulate HTML elements dynamically. For example, we can select an element using getElementById() and change its content using the textContent property without reloading the page.

Example

document.getElementById("heading").textContent = "Welcome Vicky";

Here document represents the web page.
getElementById() selects the element.
textContent modifies the text inside that element.
This makes web pages interactive and dynamic.

The DOM is a tree-like representation of an HTML document that allows JavaScript to access, modify, create, and delete web page elements dynamically.

References

https://www.w3schools.com/js/js_htmldom.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
https://www.geeksforgeeks.org/javascript/how-to-manipulate-dom-elements-in-javascript/

Code On JVM (My First JAVA Meetup)

Vigneshwaran V — Sat, 27 Jun 2026 18:49:42 +0000

Today I attended My first Java Meetup and there I learned a lot of things from the professionals who take the session, they provide more info about the code and how the code actually works in backend and how we write a good code to avoid complex problems.

Community

They are Strong community with lot of professionals, students, and java enthusiasts, they are very motivated and well organised community who make Monthly Meetups to discuss about the technology and how the java works in current tech-world.

Session

The Session was taken by Mahati ChandraMohan, she is a senior software engineer at PAYPAL and she have 14Years of Experience.
She take the Session very clearly as even a student can also understand what she will convey to us, like that much clarity she gave to each and everyone who attend the Meetup.

What she actually taught

She tells one thing clearly that a good developer developes a good code.
good code => means not the code works well today, is the code which works for long time without any complexcity or without create any problem, which is adaptable to future integration of new features.

Design Patterns

She taught something like Design Pattern is nothing but the design which we used to write our code is known as Design Patterns.
She tell that Around 23 Design Patters are there but she taught 3 Design Patterns in a simple manner and which is more understandable to all.
1. Creational Pattern
2. Structural pattern
3. Behavioral pattern
These are all the Patterns she taught today.
design pattern are the design, the way of writing efficient and good code which allow us make changes and add features without any problem, which means the clear code allow us to do anything around it but still its working well.
If we use these Design Patterns to write a code then our code also a good one and we also a good developer who able to create a scalable application, and which adaptable to add new features and works well for long years.

Example:

Bad Design (Without Design Pattern)

class PaymentProcessor {
  processPayment(method, amount) {

    if (method === "UPI") {
      console.log(`Paid ₹${amount} using UPI`);
    }

    else if (method === "CreditCard") {
      console.log(`Paid ₹${amount} using Credit Card`);
    }

    else if (method === "PayPal") {
      console.log(`Paid ₹${amount} using PayPal`);
    }

    else {
      console.log("Invalid Payment Method");
    }
  }
}

const payment = new PaymentProcessor();

payment.processPayment("UPI", 500);
payment.processPayment("CreditCard", 1000);

Here, every time a new payment method is added, we must modify the existing code.
Problems
Imagine tomorrow your client says:

Add Google Pay
Add PhonePe
Add Apple Pay
You have to keep editing:

if(method==="GooglePay") { ... }
else if(method==="PhonePe") { ... }
else if(method==="ApplePay") { ... }

Good Design (Strategy Design Pattern)
Each payment method becomes a separate strategy.
Step 1: Create Payment Strategies

class UPIPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using UPI`);
  }
}

class CreditCardPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using Credit Card`);
  }
}

class PayPalPayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using PayPal`);
  }
}

Step 2: Payment Processor

class PaymentProcessor {

  constructor(paymentMethod) {
    this.paymentMethod = paymentMethod;
  }

  processPayment(amount) {
    this.paymentMethod.pay(amount);
  }

}

Step 3: Use It

const upi = new UPIPayment();
const card = new CreditCardPayment();
const paypal = new PayPalPayment();

const payment1 = new PaymentProcessor(upi);
payment1.processPayment(500);

const payment2 = new PaymentProcessor(card);
payment2.processPayment(1000);

const payment3 = new PaymentProcessor(paypal);
payment3.processPayment(1500);

Output

Paid ₹500 using UPI
Paid ₹1000 using Credit Card
Paid ₹1500 using PayPal

Why is this better?
Suppose you need to add PhonePe.
Just create a new class:

class PhonePePayment {
  pay(amount) {
    console.log(`Paid ₹${amount} using PhonePe`);
  }
}

Use it:

const phonepe = new PhonePePayment();

const payment = new PaymentProcessor(phonepe);

payment.processPayment(2000);

Note:

No changes to PaymentProcessor
No huge if-else chain
Easy to extend
Easy to test

Design Pattern Used

This is the Strategy Pattern.
She tells like this the good developer developes the code which is more efficient and scalable and also adaptable to future integrations.

Quiz

They also conduct Quiz About the JAVA, for students and professional they participated. If they score well they also rewarded by gifts and they also asked some funny questions in that Quiz.

Grateful to Mahati ChandraMohan for an insightful and well-structured session that made complex concepts easy to understand. Special thanks to our trainers for continuously encouraging us to participate in meetups and expand our knowledge.

Array Methods in JS

Vigneshwaran V — Fri, 26 Jun 2026 14:51:28 +0000

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.

1. JavaScript Array length

The length property of an array returns the number of elements in the array. It automatically updates as elements are added or removed.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.length);

The code defines an array 'a' containing the elements "HTML", "CSS", "JS", and "React".
a.length returns the number of elements in the array.
The length property returns the length (size) of an array.

2. JavaScript Array toString() Method

The toString() method converts the given value into the string with each element separated by commas.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

let myList = fruits.toString();

console.log(myList)

Output

Banana,Orange,Apple,Mango

Every JavaScript object has a toString() method.
The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string.

3. JavaScript Array at()

ES2022 introduced the array method at():

Example
Get the third element of fruits using at():

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);
console.log(fruit);

Output

Apple

Get the third element of fruits using []:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Output

Apple

The at() method returns an indexed element from an array.
The at() method returns the same as [].
at() is an ECMAScript 2022 feature.
Many languages allow negative bracket indexing like [-1] to access elements from the end of an object / array / string.
This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.
The at() method was introduced in ES2022 to solve this problem.

4. JavaScript Array join() Method

This join() method creates and returns a new string by concatenating all elements of an array. It uses a specified separator between each element in the resulting string.

It behaves just like toString(), but in addition you can specify the separator.

let a = ["HTML", "CSS", "JS", "React"];
console.log(a.join('|'));

Output

HTML|CSS|JS|React

The join('|') method combines the array elements into a single string, with each element separated by a pipe (|) character.

5. Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.
This is what popping and pushing is:
Popping items out of an array, or pushing items into an array.

JavaScript Array.pop() Method
The pop() method removes the last element from an array:

let a = [20, 30, 40, 50];
a.pop();
console.log(a);

Output

[20,30,40]

The pop() method returns the value that was "popped out".

JavaScript Array.push() Method
The push() method is used to add an element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array.

let a = [10, 20, 30, 40, 50];
a.push(60);
a.push(70, 80, 90);
console.log(a);

Output

[10,20,30,40,50,60,70,80,90]

The push() method returns the new array length.

6. Shifting Elements

Shifting is equivalent to popping, but working on the first element instead of the last.

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

let a = [20, 30, 40, 50];
a.shift();
console.log(a);

Output

[30,40,50]

The shift() method returns the value that was "shifted out".
** JavaScript Array.unshift() Method**
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

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

Output

[10,20,20,30,40]

The unshift() method returns the new array length

7. Array.isArray()

ECMAScript 5 (JavaScript 2009) added the new method Array.isArray() to JavaScript:
This method is used to check wheather the data is in Array Format or Not.

const fruits = ["Banana", "Orange", "Apple"];
console.log(Array.isArray(fruits));

Output

true

8. JavaScript Array delete()

Using delete() leaves undefined holes in the array.
Use pop() or shift() instead.

Example

const fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];
console.log(fruits);

Output

[ <1 empty item>, 'Orange', 'Apple', 'Mango']

9. Merging Arrays (Concatenating)

In programming languages, concatenation means joining strings end-to-end.
Concatenation "snow" and "ball" gives "snowball".
Concatenating arrays means joining arrays end-to-end.

JavaScript Array concat() Method
The concat() method is used to concatenate two or more arrays and it gives the merged array.

let a1 = [11, 12, 13];
let a2 = [14, 15, 16];
let a3 = [17, 18, 19];

let newArr = a1.concat(a2, a3);
console.log(newArr);

Output

[11,12,13,14,15,16,17,18,19]

The concat() method does not change the existing arrays. It always returns a new array.
The concat() method can take any number of array arguments.
The concat() method can also take strings as arguments:

const arr1 = ["Emil", "Tobias", "Linus"];
const myChildren = arr1.concat("Peter"); 
console.log(myChildren)

Output

[ 'Emil', 'Tobias', 'Linus','Peter' ]

10. Array copyWithin()

The copyWithin() method copies array elements to another position in an array:

Examples
Copy to index 2, all elements from index 0:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
console.log(fruits);

Output

['Banana','Orange','Banana','Orange']

Copy to index 2, the elements from index 0 to 2:

const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
fruits.copyWithin(2, 0, 2);

console.log(fruits);

Output

['Banana','Orange','Banana','Orange','Kiwi']

The copyWithin() method overwrites the existing values.
The copyWithin() method does not add items to the array.
The copyWithin() method does not change the length of the array.

11. Flattening an Array

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.

JavaScript Array flat()

ES2019 Introduced the Array flat() method.
The flat() method creates a new array with sub-array elements concatenated to a specified depth.

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

console.log(myArr)     // it doesn't modify the original Array
console.log(newArr)   // it return new Array as output

Output

[[1,2],[3,4],[5,6]]
[1,2,3,4,5,6]

flat() is an ECMAScript 2019 feature.

12. JavaScript Array flatMap()

ES2019 added the Array flatMap() method to JavaScript.
The flatMap() method first maps all elements of an array and then creates a new array by flattening the array.
flatMap() is a combination of:
map() → transforms each element.
flat() → flattens one level of nested arrays

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap(x => [x, x * 10]);

console.log(myArr)
console.log(newArr)

Output

[1, 2, 3, 4, 5, 6]
[ 
  1,10,2,20,3,
  30,4,40,5,50,
  6,60
]

Difference Between map() and flatMap()

Using map()

const arr = [1, 2, 3];

const result = arr.map(x => [x, x * 2]);

console.log(result);

Output:

[
  [1, 2],
  [2, 4],
  [3, 6]
]

Using flatMap()

const arr = [1, 2, 3];

const result = arr.flatMap(x => [x, x * 2]);

console.log(result);

Output:

[1, 2, 2, 4, 3, 6]

flatMap() executes a callback function on each array element and then combines (flattens) the returned arrays into a single array by removing one level of nesting.

13. Splicing and Slicing Arrays

The splice() method adds new items to an array.
The slice() method slices out a piece of an array.

JavaScript Array splice()

splice() is used to add, remove, or replace elements in an array.

It modifies the original array.

Syntax

array.splice(start, deleteCount, item1, item2, ...)

1. Remove Elements

const fruits = ["Apple", "Banana", "Mango", "Orange"];

fruits.splice(1, 2);

console.log(fruits);

Output

["Apple", "Orange"]

What happened?

Index:   0        1         2        3
Array: ["Apple","Banana","Mango","Orange"]

Start at index 1 ("Banana")
Delete 2 elements:

"Banana", "Mango"

Remaining:

["Apple", "Orange"]

2. Add Elements

const fruits = ["Apple", "Mango"];

fruits.splice(1, 0, "Banana");

console.log(fruits);

Output

["Apple", "Banana", "Mango"]

What happened?

Start at index 1
Delete 0 elements
Insert "Banana"

3. Replace Elements

const fruits = ["Apple", "Banana", "Mango"];

fruits.splice(1, 1, "Orange");

console.log(fruits);

Output

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

What happened?

Start at index 1
Remove 1 element ("Banana")
Insert "Orange"

4. Add Multiple Elements

const fruits = ["Apple", "Mango"];

fruits.splice(1, 0, "Banana", "Orange");

console.log(fruits);

Output

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

5. Return Value of splice()

splice() returns the removed elements.

const fruits = ["Apple", "Banana", "Mango"];

let removed = fruits.splice(1, 1);

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

Output

["Banana"]

["Apple", "Mango"]

6. Using Negative Index

const fruits = ["Apple", "Banana", "Mango", "Orange"];

fruits.splice(-2, 1);

console.log(fruits);

Output

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

Explanation

-1 → Orange
-2 → Mango
-3 → Banana
-4 → Apple

Start from "Mango" and delete 1 element.
So splice() is the CRUD method of arrays because it can:

Create (add elements)
Read (you can get removed elements)
Update (replace elements)
Delete (remove elements)

JavaScript Array toSpliced()

ES2023 added the Array toSpliced() method as a safe way to splice an array without altering the original array.

The difference between the new toSpliced() method and the old splice() method is that the new method creates a new array, keeping the original array unchanged, while the old method altered the original array.

const months = ["Jan", "Feb", "Mar", "Apr"];
const spliced = months.toSpliced(0, 1);

console.log(months)
console.log(spliced)

Output

['Jan','Feb','Mar','Apr']
['Feb','Mar','Apr']

Here it doesn't modify the original Array so it is safe when we need our original Array in entire code.

JavaScript Array slice()

slice() is used to extract a portion of an array and create a new array.

It does not modify the original array.

Syntax

array.slice(start, end)

start => Starting index (included)
end => Ending index (excluded)

Example 1: Basic Usage

const fruits = ["Apple", "Banana", "Mango", "Orange"];

let result = fruits.slice(1, 3);

console.log(result);

Output

["Banana", "Mango"]

Explanation:

Indexes:

0 -> Apple
1 -> Banana
2 -> Mango
3 -> Orange

slice(1,3) means:
Start from index 1
Stop before index 3
So it returns:

["Banana", "Mango"]

Example 2: Omitting end

const fruits = ["Apple", "Banana", "Mango", "Orange"];

console.log(fruits.slice(2));

Output

["Mango", "Orange"]

It starts from index 2 and takes everything till the end.

Example 3: Copy an Array

const fruits = ["Apple", "Banana", "Mango"];

const copy = fruits.slice();

console.log(copy);

Output

["Apple", "Banana", "Mango"]

This is a common way to create a shallow copy of an array.

Example 4: Negative Index

const fruits = ["Apple", "Banana", "Mango", "Orange"];

console.log(fruits.slice(-2));

Output

["Mango", "Orange"]

Negative indexes count from the end:

-1 -> Orange
-2 -> Mango
-3 -> Banana
-4 -> Apple

Example 5: Original Array Remains Unchanged

const fruits = ["Apple", "Banana", "Mango"];

let result = fruits.slice(1);

console.log(result);
console.log(fruits);

Output

["Banana", "Mango"]
["Apple", "Banana", "Mango"]

Notice that fruits is unchanged.
slice() is used to extract a part of an array and return it as a new array without changing the original array.

References

https://www.w3schools.com/js/js_array_methods.asp
https://www.geeksforgeeks.org/javascript/javascript-array-methods/
https://www.programiz.com/javascript/library/array

Array in JS

Vigneshwaran V — Thu, 25 Jun 2026 16:02:10 +0000

An array is a special object in JavaScript used to store multiple values in a single variable, where each value is stored at a numbered index starting from 0.

An array is a data structure in JavaScript that stores multiple values in a single variable and allows access to those values using their index positions.
This makes data easier to store, access, update, and process using loops and array methods.
Arrays allow us to organize related data by grouping them within a single variable.
An array can store many values in a single variable, making it easy to access them by referring to the corresponding index number.
In JavaScript, an array is heterogeneous.

What is Heterogeneous?

A heterogeneous array can store different types of data in the same array.

Example

let arr = [10, "Vicky", true, null, {age: 21}];

Here the array contains:
10 → Number
"Vicky" → String
true → Boolean
null → Null
{age: 21} → Object

All are different data types, but JavaScript allows them in the same array.

JavaScript arrays are heterogeneous because they can store values of different data types in the same array. However, you can also create homogeneous arrays if you choose to store only one type of data.

Example

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

Instead of:

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

Arrays are Zero Indexed

Index starts from 0, not 1.

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

Array Length

length gives the number of elements.

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

console.log(fruits.length); // 3

Access Elements

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

console.log(fruits[1]); // Banana

Modify Elements

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

fruits[1] = "Orange";

console.log(fruits);

Output

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

Add Elements

push() → Add at End

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

fruits.push("Mango");

console.log(fruits);

Output

["Apple", "Banana", "Mango"]

unshift() → Add at Beginning

fruits.unshift("Orange");

Output

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

Remove Elements

pop() → Remove from End

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

fruits.pop();

console.log(fruits);

Output

["Apple", "Banana"]

shift() → Remove from Beginning

fruits.shift();

Output

["Banana"]

Arrays store multiple values.
Arrays are zero-indexed.
Arrays are dynamic (size can change).
Arrays can store different data types (heterogeneous).
length gives the number of elements.
push() and pop() work at the end.
shift() and unshift() work at the beginning.
Arrays are technically objects in JavaScript.

References

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

Map, Reduce, Filter Methods in Array

Vigneshwaran V — Wed, 24 Jun 2026 18:03:56 +0000

In JavaScript, map(), filter(), and reduce() are built-in array methods used to transform, filter, and aggregate data without mutating the original array. They form the backbone of clean, functional programming in JavaScript.

map()

Use map() when you want to apply the same operation to every item in an array and get a new array of the same length back.

Used to transform every element of an array and return a new array.

Example

let nums = [1, 2, 3, 4];

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

console.log(result);

Output

[2, 4, 6, 8]

What happened?

Original array

[1, 2, 3, 4]

New array

[2, 4, 6, 8]

filter()

The filter() method creates a new array filled with elements that pass a test provided by a function.
The filter() method does not execute the function for empty elements.
The filter() method does not change the original array.
Used to select elements that satisfy a condition.

Example

let nums = [1, 2, 3, 4, 5, 6];

let even = nums.filter(function(num) {
    return num % 2 === 0;
});

console.log(even);

Output

[2, 4, 6]

What happened?

1 x
2 ✔
3 x
4 ✔
5 x
6 ✔

Only the elements for which the condition returns true are kept.

reduce()

The reduce() method executes a reducer function for array element.
The reduce() method returns a single value: the function's accumulated result.
The reduce() method does not execute the function for empty array elements.
The reduce() method does not change the original array.
Used to combine all elements into a single value.

Example

let nums = [1, 2, 3, 4];

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

console.log(sum);

Output

Step-by-step

Initial:

acc = 0

Iteration 1:

acc = 0 + 1 = 1

Iteration 2:

acc = 1 + 2 = 3

Iteration 3:

acc = 3 + 3 = 6

Iteration 4:

acc = 6 + 4 = 10

Final result:

Note

At the first callback, there is no return value from the previous callback.
Normally, array element 0 is used as initial value, and the iteration starts from array element 1.
If an initial value is supplied, this is used, and the iteration starts from array element 0.

map() → "Modify each item"
filter() → "Keep only matching items"
reduce() → "Reduce everything to one value"

reduceRight()

The reduceRight() method executes a reducer function for each array element.
The reduceRight() method works from right to left.
The reduceRight() method returns a single value: the function's accumulated result.
The reduceRight() method does not execute the function for empty elements.

Example

const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

console.log(sum);

Output

How reduceRight() works
It starts from the right side of the array:

[45, 4, 9, 16, 25]
             ↑ start

Since no initial value is given:

total = 25

and iteration starts with:

value = 16

Final result:

The difference between reduce() and reduceRight() is only the direction:

reduce() → left to right
reduceRight() → right to left

For addition, both give 99, but for some operations (like string concatenation), the result can be different.

Note

At the first callback, there is no return value from the previous callback.
Normally, the last array element is used as initial value, and the iteration starts from the element before.
If an initial value is supplied, this is used, and the iteration starts from last element.

Rest Operator (...) and spread (...) operators

The rest (...) and spread (...) operators use the same symbol (...), but they do different jobs depending on where they are used.

1. Rest Operator (...)

Rest means:
Collect multiple values into a single array.

Example:

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

add(10, 20, 30, 40);

Output

[10, 20, 30, 40]

What happened?

10, 20, 30, 40

are collected into

nums = [10, 20, 30, 40]

So ...nums is called the rest parameter.

2. Spread Operator (...)

Spread means:
Expand an array (or object) into individual values.

Example

let nums = [10, 20, 30];

console.log(...nums);

Output

10 20 30

What happened?

[10, 20, 30]

becomes

10, 20, 30

Copy an Array

let arr1 = [1, 2, 3];

let arr2 = [...arr1];

console.log(arr2);

Output

[1, 2, 3]

Rest Operator (...): Collects multiple values into a single array.
Spread Operator (...): Expands an array or object into individual elements/properties.

Reference

https://www.w3schools.com/jsref/jsref_map.asp
https://www.w3schools.com/jsref/jsref_reduce.asp
https://www.w3schools.com/jsref/jsref_filter.asp

Constructor Function in JS

Vigneshwaran V — Wed, 17 Jun 2026 15:49:59 +0000

Constructor Function?

A constructor function in JavaScript is a regular function used as a blueprint to create multiple objects with the same structure. It is explicitly executed using the new operator, which automatically creates and initializes a brand-new object instance.

Core Syntax and Conventions

There are two critical rules when writing constructor functions:

Capitalization: Name the function with a capital first letter (e.g., User, Car) to distinguish it from standard functions.
The new keyword: Always call the function using new. Failing to do so makes it execute like a regular function, which breaks the creation process.

In JavaScript, a constructor function is used to create and initialize objects.

Example

// constructor function
function Person () {
    this.name = "John",
    this.age = 23
}

// create an object
const person = new Person();

// print object attributes
console.log(person.name);
console.log(person.age);

// Output:
// John
// 23

Here, Person() is an object constructor function. And, we use the new keyword to create an object from a constructor function.

Create Multiple Objects With Constructor Function

In JavaScript, you can create multiple objects from a constructor function. For example,

// constructor function
function Person () {
    this.name = "John",
    this.age = 23,

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

// create objects
const person1 = new Person();
const person2 = new Person();

// access properties
console.log(person1.name);  // John
console.log(person2.name);  // John

In the above program, we created two objects (person1 and person2) using the same constructor function.

JavaScript Constructor Function Parameters

You can also create a constructor function with parameters. For example,

// constructor function with parameters
function Person (person_name, person_age, person_gender) {

   // assign parameter values to the calling object
    this.name = person_name,
    this.age = person_age,
    this.gender = person_gender,

    this.greet = function () {
        return (`Hi ${this.name}`);
    }
}

// create objects and pass arguments
const person1 = new Person("John", 23, "male");
const person2 = new Person("Sam", 25, "female");

// access properties
console.log(person1.name); // John
console.log(person2.name); // Sam

In the above example, we have passed arguments to the constructor function during the creation of the object.

const person1 = new Person("John", 23, "male");
const person2 = new Person("Sam", 25, "female");

This allows each object to have different properties:

this keyword in a Constructor Function (JavaScript)

In a constructor function, this refers to the new object being created.
When you use the new keyword:

A new empty object is created.
this points to that new object.
Properties are added to that object.
The object is returned automatically.

Example

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

let s1 = new Student("Vicky", 22);

console.log(s1);

Output

{
  name: "Vicky",
  age: 22
}

How this works here

function Student(name, age) {
    this.name = name; // s1.name = "Vicky"
    this.age = age;   // s1.age = 22
}

When this line runs:

let s1 = new Student("Vicky", 22);

JavaScript internally does something similar to:

let s1 = {};
s1.name = "Vicky";
s1.age = 22;

So this refers to s1.

Constructor with Methods

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

    this.display = function() {
        console.log(this.name, this.age);
    };
}

let s1 = new Student("Vicky", 22);

s1.display();

Output

Vicky 22

In an object method call (object.method()), this refers to the object before the dot (.).

In our program, both times this ends up referring to s1, but for different reasons.
In Student(), this refers to s1 because of the new keyword.
In display(), this refers to s1 because s1 called the method using s1.display().

Definition: In a constructor function, this refers to the newly created object and is used to initialize its properties and methods.

Refernce

https://www.programiz.com/javascript/constructor-function

Objects in JS

Vigneshwaran V — Tue, 16 Jun 2026 18:10:38 +0000

Object

An object in JavaScript is a standalone data structure that stores data as a collection of key-value pairs, where each key (property name) maps to a specific value. Unlike primitive data types that hold a single value, objects group related data and functionalities together.

An object is a dynamic data structure that stores related data as key-value pairs, where each key uniquely identifies its value.
The values of properties can be primitives, objects, or functions (known as methods when defined inside an object).
Objects are mutable and dynamic properties can be added, modified, or deleted at any time.
Objects allow data grouping and encapsulation, making it easier to manage related information and behaviour together.

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: "Sourav",
    age: 23,
    job: "Developer"
};
console.log(obj);

2. Creation Using new Object() Constructor

let obj = new Object();
obj.name= "Sourav",
obj.age= 23,
obj.job= "Developer"

console.log(obj);

Accessing Object Properties

const person = {
  name: "John",
  age: 25,
  city: "New York"
};

console.log(person);

Dot Notation

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

Bracket Notation

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

Adding Properties

person.email = "john@example.com";
person["country"] = "USA";

Updating Properties

person.age = 26;

Deleting Properties

delete person.city;

Object Methods

An object method is a function stored inside an object.

Example

const student = {
    name: "Vicky",
    age: 21,

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

student.greet();

Output

Hello

Here name and age are properties, greet() is a method.

Why use methods?

Methods allow an object to perform actions.

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

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

Output

Useful Object Methods

Object.keys()
Returns all property names (keys).

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

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

Output

["name", "age"]

Object.values()
Returns all values.

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

Output

["Vicky", 21]

Object.entries()
Returns both keys and values as arrays.

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

Output

[
  ["name", "Vicky"],
  ["age", 21]
]

If you want to check whether an object contains a particular property, there are several ways.

1. Using in Operator (Recommended)

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

console.log("name" in student); // true
console.log("city" in student); // false

Output

true
false

2. Using hasOwnProperty()

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

console.log(student.hasOwnProperty("name")); // true
console.log(student.hasOwnProperty("city")); // false

Output

true
false

If you want to check whether an object contains a particular value, use Object.values() along with includes().

Example

const student = {
    name: "Vicky",
    age: 21,
    dept: "CSE"
};

console.log(Object.values(student).includes("Vicky")); // true
console.log(Object.values(student).includes("ECE"));   // false

Output

true
false

Reference

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

Types Of Functions in JS

Vigneshwaran V — Mon, 15 Jun 2026 16:14:42 +0000

Today I have learned about Named function, Anonymous function, Function expression, Arrow function, Immediately Invoked Function Expression (IIFE) in JS.

JavaScript functions can be categorized by how they are defined, how they handle execution context, and how they behave during execution. The primary categories include syntax-based definitions, control-flow variants, and functional design patterns.

1.Named Function

A named function is a function that is declared with a specific name and can be called using that name whenever needed.

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

greet();

Output

Hello

Advantages of Named Functions

Reusable – Call it multiple times.
Readable – The function name describes its purpose.
Debugging is easier – Error messages show the function name.
Hoisted (for function declarations) – Can be called before its declaration.

sayHi();

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

Output

Hi

This works because function declarations are hoisted.

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();

Here, the function has no name, so it is called an anonymous function.
Output

Hello

An anonymous function is a function that does not have a function name and is usually stored in a variable or passed as an argument to another function.

1. Stored in a Variable

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

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

Output

2. Passed as an Argument

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

An anonymous function cannot exist alone as a statement. It is usually:

Assigned to a variable,
Passed as an argument,
Returned from another function.

Valid example:

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

Invalid example:

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

This gives an error because JavaScript expects a function name when a function declaration is used.

3.Function Expression

A Function Expression is a function that is created and assigned to a variable. It can be anonymous or named and is executed by calling the variable that stores it.

A Function Expression is a function that is assigned to a variable.

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

greet → variable name
function() {} → function expression (anonymous function)
The function is stored in the variable greet

Calling the Function

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

greet();

Output

Hello

Example with Parameters

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

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

Output

Function Expression (Not Fully Hoisted)

greet();

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

Error

ReferenceError: Cannot access 'greet' before initialization

Named Function Expression

A function expression can also have its own name:

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

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

Here:

add → variable name
sum → function name (used mainly for debugging)

A common interview question

"Is every anonymous function a function expression?"
Answer: No. Anonymous functions are often used in function expressions, but they can also be used as callbacks:

setTimeout(function() {
    console.log("Hello");
}, 1000);

This is an anonymous function, but it is being passed as an argument rather than assigned to a variable.

4.Arrow Function (ES6)

An Arrow Function is a shorter way to write a function, introduced in ECMAScript 2015 (ES6).

Arrow Function

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

Example with Parameters

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

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

Output

Shorter Syntax for Single Return Statement

If the function has only one statement that returns a value:

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

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

here the function contain only one statement so we don't need to return the value explicitly it happens implicitly without writing any return statement.

JavaScript automatically returns the result.

Single Parameter

Parentheses are optional when there is only one parameter.

let square = n => n * n;

console.log(square(5));

Output

No Parameters

let greet = () => console.log("Hello");

greet();

Output

Hello

Uses => operator
Does not have its own this
Cannot be used as a constructor
No arguments object
Shorter syntax

When to Use Arrow Functions

Callbacks (map, filter, forEach)
Short utility functions
When you want a shorter syntax.

5.Immediately Invoked Function Expression (IIFE)

An IIFE (Immediately Invoked Function Expression) is a function that is defined and executed immediately after it is created.

(function() {
    console.log("I am executed immediately");
})();

How It Works

function() {} → Function definition
(function() {}) → Converts it into a function expression
() → Immediately calls the function

Example with Parameters

(function(name) {
    console.log("Welcome " + name);
})("Vicky");

Output

Welcome Vicky

Why Use IIFE?

Avoid Polluting the Global Scope
Without IIFE:

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

The variable is available globally.
With IIFE:

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

Output

Hello

Outside the function:

console.log(message);

ReferenceError: message is not defined

The variable stays private inside the IIFE.

IIFE with Arrow Function

(() => {
    console.log("Arrow IIFE");
})();

Output

Arrow IIFE

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. It is commonly used to create a private scope and avoid polluting the global namespace.

General Pattern

(function() {
    // code
})();

(() => {
    // code
})();

Why is JavaScript called Single-Threaded?

Because it has one Call Stack and executes one operation at a time.

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

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

first();
second();

Output

First
Second

first() completes before second() starts.

Then How Does JavaScript Handle Timers and API Calls?

JavaScript is single-threaded, but the browser (or Node.js) provides features like:

Timers (setTimeout)
Network requests (fetch)
Event handling
These are handled outside the main thread and their results are queued back to JavaScript when ready.

Example:

console.log("Start");

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

console.log("End");

Output

Start
End
Timer Finished

Even though the timer is started first, JavaScript continues executing the next line instead of waiting.

Interview Definition

JavaScript is a single-threaded language, meaning it executes one task at a time using a single call stack. It relies on the Event Loop, Web APIs, and callback queues to handle asynchronous operations without blocking the main thread.

"JavaScript is single-threaded but non-blocking because of the Event Loop and asynchronous APIs."

Process vs Thread

Process

A process is an independent program that is running.

Examples:

Chrome browser
VS Code
Spotify
Each process has its own memory space.

Thread

A thread is the smallest unit of execution inside a process.
A process can have:

One thread (single-threaded)
Multiple threads (multi-threaded)

Real-Life Example

Imagine a restaurant:

Restaurant = Process
Workers inside the restaurant = Threads
One restaurant can have many workers doing different tasks.

Browser Example

When you use:

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

console.log("Start");

JavaScript remains single-threaded.

The timer is handled by browser APIs, and when it finishes, the callback is placed in a queue. The Event Loop later moves it to the call stack. Output:

Start
Done

Process

A process is an independent running instance of a program with its own memory and resources.

Thread

A thread is the smallest unit of execution within a process. Multiple threads can exist inside a single process and share the same memory.

JavaScript

JavaScript is primarily single-threaded, meaning it executes code on one main thread using a single call stack. Asynchronous operations are handled with the Event Loop and runtime APIs.

Synchronous vs Asynchronous in JavaScript

1. Synchronous (Sync)

Synchronous means tasks execute one after another. The next task waits until the current task finishes.

Example

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

Output

Task 1
Task 2
Task 3

Execution flow:

Task 1 → Task 2 → Task 3

Each task waits for the previous one to complete.

2. Asynchronous (Async)

Asynchronous means a task can start, and JavaScript can continue executing other code without waiting for that task to finish.

Example

console.log("Start");

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

console.log("End");

Output

Start
End
Task Finished

Execution flow:

Start
↓
Timer starts (2 seconds)
↓
End
↓
Task Finished

JavaScript does not wait for the timer to finish.

Real-Life Example

Synchronous
Making tea:

Boil water
↓
Add tea powder
↓
Pour into cup

You must finish one step before the next.
Asynchronous
Ordering food online:

Order food
↓
Continue watching a movie
↓
Food arrives later

You don't sit idle waiting for the food.

Why Async is Needed?

Imagine:

console.log("Start");

// Downloading a huge file (takes 10 seconds)

console.log("End");

If JavaScript waited for every long task, the application would freeze.
Async allows:

Timers (setTimeout)
API calls (fetch)
Database operations
File operations
to happen without blocking the main thread.

Synchronous

Synchronous execution means code runs sequentially, and each operation waits for the previous one to complete.

Asynchronous

Asynchronous execution means long-running operations can run in the background while JavaScript continues executing other code, improving responsiveness and performance.

Reference

https://www.geeksforgeeks.org/javascript/functions-in-javascript/
https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/

ILUGC Meetup-1

Vigneshwaran V — Sun, 14 Jun 2026 07:59:42 +0000

Yesterday I attend the ILUGC Meetup and their I meet lot of people with different age groups and they shared their perspective about the technologies and softwares we used in our daily life.

Linux

They tell lot of things about LINUX like linux is open source and also you have your own freedom by using it.

Most Linux distributions are completely free.
The source code is publicly available, so anyone can inspect, modify, and improve it.
Windows is proprietary software owned by Microsoft.

Participants Feedback about LINUX

And some participants are telling that their system is completely crashed while using Windows that's why now they move to LINUX.
Another one person told that windows os makes his laptop slower so that he use LINUX now and he didn't face any problems now.
They are the community who are willing to use Linux over windows and they also tells the advantages of Linux to the people and also to students.
And they talk about that CLI commond line interface to control your pc with commands. then also they talk about importance of learning commands, we you the GUI to create folders, files, and all the operation but as a developer are as a student we know what actually happened behind It.
Even if we have any problem in our PC. if we tell about the problem to AI to rectify the problems means the AI also gives multiple lines of commands to us to solve that problem that's why learning the Command is important here in LINUX we commands lot compare to WINDOWS.
And their I see lot of people with different age group on that time we see one dad who come their two daughters and he also a working professional It our field. And he know lot of things about LINUX and WINDOWS and he used both for long term. and he suggest a LINUX OS for us to use because he also told that in LINUX there is no issues I face till now. And he tells compare to windows I like LINUX a most like that he told yesterday.
And I think he have a craze on LINUX OS. he also told everyone about that OS and its feature and now he told his daughters to use LINUX instead of WINDOWS.
And he tell one thing 😄, like before he die he wish to change atleast 1000 members from WINDOWS to LINUX, like this they told 😄 yesterday. see how craze he is on LINUX OS.
They are the community who tells about the linux OS features and advantages and they tell how the OS useful for us.

Organisers point of view

the organisers are well knowledgeable persons who shares lot of things like how to secure a file by using encryption and they use some flags and everything is new to me. that was my first meetup so i don't know something about they discussed. but I listen what they all speak.
They tell about mailing list and matrix application for communications and all to contact us.
And they said that fedora is good OS for developers it is also a LINUX OS distribution.
And they shares lot of shortcuts About the linux Commands like how get the Commants in terminal instead of remembering all the Commands they use some shortcuts to display all the commands in terminal.

-One participant tell about the features of PLAYWRIGHT it is used for testing purpose it is used in web-application testing it haves lot of features and it is faster and easier compare to other tools we use. so he suggest us to learn playwright it makes our testing as easy task, he make a presentation about playwright but he started study that tool recently but also he came infront and give the presentation about it. like that the lot of peoples shares their knowledge to us.

This my first meetup I like to thanks to IIT MADRAS and Thanks to our staffs Who tell us about these things and motivate us to parcipate in meetup like this.

Function in JS

Vigneshwaran V — Fri, 12 Jun 2026 17:14:04 +0000

What is function

A JavaScript function is a reusable block of code designed to perform a specific task. Instead of writing the same code multiple times, you wrap it inside a function and execute it whenever needed.

In JavaScript, functions are First-Class Objects, meaning they can be stored in variables, passed as arguments to other functions, and returned from other functions.
In JavaScript, a first-class object (or first-class citizen) means that a value can be treated like any other value in the language.
Because JavaScript treats functions just like other values such as numbers, strings, and objects.

Key Components of a Function

Definition: Creating the function using a specific syntax.
Parameters: Placeholder variables listed inside the parentheses () when defining the function.
Arguments: The actual values passed into the function when you run it.
Return Statement: An optional return keyword used to send a value back to where the function was called. It immediately stops function execution.
Invocation (Calling): Running the function by using its name followed by parentheses ().

Why Use Functions?

Code Reusability: Write your logic once and reuse it across your application.
Organization: Breaks down a complex program into smaller, manageable chunks.
Maintainability: If a task changes, you only need to update the code inside the function.
Scope Isolation: Variables defined inside a function are hidden from the outside world, preventing naming conflicts.

Example

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

greet("Alice");  // "Alice" is the argument

Parameter: name (placeholder inside the function).
Argument: "Alice" (real value given at call time).

Default Parameters

Default parameters are used when no argument is provided during the function call.
If no value is passed, the function automatically uses the default value.

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

greet();           //Hello Guest
greet("Aman");    //Hello Aman

Return Statement

The return statement is used to send a result back from a function.
When return executes, the function stops running at that point.
The returned value can be stored in a variable or used directly.

function add(a, b) {
  return a + b; // returns the sum
}

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

Naming a function

In JavaScript, you can name a function using camelCase (most common convention).

Syntax

function functionName() {
    // code
}

Examples

function greetUser() {
    console.log("Hello User");
}

function calculateSum() {
    console.log(10 + 20);
}

function findLargestNumber() {
    console.log("Finding largest number");
}

Naming rules

Can contain:

Letters (a-z, A-Z)
Numbers (0-9) (but not at the beginning)
_ (underscore)
$ (dollar sign)

function user1() {}
function _display() {}
function $calculate() {}

Best Practices

Use names that describe what the function does:

function getUserData() {}
function calculateEMI() {}
function reverseNumber() {}
function checkLeapYear() {}

Avoid unclear names:

function a() {}      // Bad
function xyz() {}    // Bad

Function names should be meaningful, follow camelCase convention, start with a letter, _, or $, and clearly describe the purpose of the function.

Parameters

Parameters are variables listed in the function definition that receive values when the function is called.

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

greet("Vicky");          // "Vicky" is an argument

Parameter → Variable in the function definition.
Argument → Actual value passed to the function.

Types of Parameters

1. No Parameters

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

greet();

2. Single Parameter

function square(num) {
    console.log(num * num);
}

square(5);

3. Multiple Parameters

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

add(10, 20);

4. Default Parameters

If no argument is passed, the default value is used.

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

greet();         // Hello Guest
greet("Vicky");  // Hello Vicky

5. Rest Parameters (...)

Used when you don't know how many arguments will be passed.

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

sum(10, 20, 30, 40);

Output:

[10, 20, 30, 40]

Common Cases

Case 1: Correct Number of Arguments

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

add(10, 20);

Output:

Case 2: Fewer Arguments than Parameters

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

add(10);

Output:

10 undefined

Because b did not receive a value.

Case 3: More Arguments than Parameters

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

add(10, 20, 30, 40);

Output:

10 20

Extra arguments are ignored (unless using rest parameters).

Case 4: Passing Different Data Types

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

display(100);
display("Hello");
display(true);

Parameter and Argument

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

multiply(5, 4);           // Arguments

Parameters are variables declared in a function definition that receive values (arguments) when the function is called. JavaScript supports normal parameters, multiple parameters, default parameters, and rest parameters.

Formal Arguments and Actual Arguments

function multiply(x, y) {   // Formal arguments
    return x * y;
}

multiply(5, 4);             // Actual arguments

Formal arguments (parameters) are the variables declared in a function definition. Actual arguments are the real values passed to the function when it is called.
Parameters, also called formal arguments, are the variables declared in a function definition that receive values from the Actual arguments passed during a function call.

Return Statement in JavaScript

The return statement is used to send a value back from a function to the place where the function was called.

Syntax

function functionName() {
    return value;
}

Uses of return

1. Return a Value

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

let result = add(10, 20);
console.log(result);

Output:

2. Store the Returned Value

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

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

Output:

3. Use Returned Value in Another Expression

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

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

Output:

return Stops Function Execution

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

test();

Output:

Start

The code after return is never executed.

Multiple Returns with Conditions

function check(num) {
    if (num > 0) {
        return "Positive";
    }
    return "Negative or Zero";
}

Only one return statement executes during a function call.

The return statement is used to exit a function and send a value back to the function caller. It can return any JavaScript data type such as Number, String, Boolean, Object, Array, Function, or undefined. The return statement also immediately stops further execution of the function.

Hoisting in Functions

Hoisting means JavaScript moves declarations to the top of their scope before executing the code.

1. Function Declaration → Hoisted

You can call the function before it is defined.

greet();

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

Output:

Hello

Why?
JavaScript internally treats it like:

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

greet();

So function declarations are fully hoisted.

2. Function Expression with var → Partially Hoisted

greet();

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

Output:

TypeError: greet is not a function

Why?
Only the variable declaration is hoisted:

var greet; // hoisted

greet();   // undefined()

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

So greet exists, but it is undefined when called.

3. Function Expression with let → Not Usable Before Declaration

greet();

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

Output:

ReferenceError

Because let is in the Temporal Dead Zone (TDZ) until its declaration is reached.

Function declarations are fully hoisted, so they can be called before their declaration. Function expressions and arrow functions are not fully hoisted; only variables declared with var are hoisted as undefined, while let and const remain in the Temporal Dead Zone until their declaration is reached.

References

https://www.programiz.com/javascript/function
https://www.geeksforgeeks.org/javascript/functions-in-javascript/

Looping problems in JS

Vigneshwaran V — Thu, 11 Jun 2026 17:51:35 +0000

Looping programs

1) 1 1 1 1 1

let i=1;
let str="";
while(i<=5){
    str=str+" "+1;
    i++;
}
console.log(str)

output:

1 1 1 1 1

2) 1 2 3 4 5

let i=1;
let str="";
while(i<=5){
    str=str+" "+i;
    i++;
}
console.log(str)

output:

1 2 3 4 5

3) 1 3 5 7 9

let i=1;
let num=1;
let str="";
while(num<=5){
    str=str+" "+i;
    i=i+2;
    num++;
}
console.log(str);

output:

1 3 5 7 9

4) 3 6 9 12 15

let i=3;
let num=1;
let str="";
while(num<=5){
    str=str+" "+i;
    i=i+3;
    num++;
}
console.log(str);

output:

3 6 9 12 15

5) Multiples of 3 and 5

let i=1;
while(i<=100){
    if(i%3==0 && i%5==0){
        console.log(i);
    }
    i++;
}

output:

6) Multiples of 3 or 5

let i=1;
while(i<=20){
    if(i%3==0 || i%5==0){
        console.log(i);
    }
    i++;
}

output:

7) Divisors of given number

let num=51;
let i=1;
while(i<=num){
    if(num%i==0){
       console.log(i); 
    }
    i++;
}

output:

8) Count of Divisors of given number

let num=8;
let i=1;
let count=0;
while(i<=num){
    if(num%i==0){
       count++;
    }
    i++;
}
console.log(count);

output:

9) Prime Number

let num=31;
let i=2;
let isprime=true;
while(i<=num/2){
   if(num%i==0){
       isprime=false;
   }
   i++; 
}
console.log(isprime?"Prime number":"Not a prime");

output:

Prime number

10) Reverse Printing a number

let num=2004;

while(num>0){               
    let digit=num%10;   
    console.log(digit);
    num=Math.floor(num/10);  
}

output:

11) Count of Digits

let num=5305;
let count=0;
while(num>0){
    count++;       
    num=Math.floor(num/10);    
}
console.log(count);

output:

12) Sum of Digits

let num=127;
let sum=0;
while(num>0){
    let digit=num%10;
    sum=sum+digit;
    num=Math.floor(num/10);
}
console.log(sum);

output:

13) Reverse the number

let num=4002;
let reverse=0;                      
while(num>0){               
    let digit=num%10;   
    reverse=reverse*10+digit;      
    num=Math.floor(num/10);  
}
console.log(reverse);

output:

14) Palindrome

let num=121;
let n=num;
let reverse=0;
while(n>0){
    let digit=n%10;
    reverse=reverse*10+digit;      
    n=Math.floor(n/10);
}

if(num == reverse){
    console.log(reverse+" Is a Palindrome");
}
else{
    console.log(reverse+"Is not a palindrome");
}

output:

121 Is a palindrome

15) Armstrong Number

let num=153;        
let strnum=String(num);
let digit=strnum.length;
let sum=0;
while(num>0){
   let last=num%10; 
   sum=sum+Math.pow(last,digit); 
   num=Math.floor(num/10);
}
if(strnum==sum){
    console.log(strnum+" Armstrong number");
}
else{
    console.log(strnum+" Not Armstrong number");
}

output:

153 Armstrong number

For loop and Do while loop in JS

Vigneshwaran V — Wed, 10 Jun 2026 17:24:28 +0000

For Loop

In JavaScript, a for loop is a control structure used to repeat a block of code a specific number of times based on a condition. It consolidates variable initialization, condition evaluation, and a final update expression into a single, highly readable statement.

For Loop Syntax

The standard loop statement accepts three optional expressions separated by semicolons:

for (initialization; condition; afterthought) {
  // Code to execute on every iteration
}

Initialization: Evaluates once before the loop begins. It typically declares a local loop counter using let.
Condition: Evaluated before every iteration. If it evaluates to true, the code block runs; if false, the loop exits.
Afterthought: Evaluates at the very end of every loop iteration, right before re-checking the condition. It is generally used to increment or decrement the counter.

Example Code

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

Output

Flow chart

This flowchart shows the working of the for loop in JavaScript. You can see the control flow in the For loop.

do while loop

The do...while statement creates a loop that executes a specified block of code at least once, and then repeats the execution as long as a test condition evaluates to true.

Because the condition is checked at the end of each iteration instead of the beginning, it is classified as an exit-controlled loop.

Syntax

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

Exit Controlled Loops: In this type of loop the test condition is tested or evaluated at the end of the loop body. Therefore, the loop body will execute at least once, irrespective of whether the test condition is true or false. the do-while loop is exit controlled loop.

Example sum1

Condition is True (Loop Repeats)

let i = 1;

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

Output

Explanation:

i = 1 → prints 1
Condition 1 <= 5 → true
Repeats until i becomes 6

Example sum2

Condition is False Initially

let i = 10;

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

Output

Explanation:

The code inside do runs first.
Then condition 10 < 5 is checked.
Condition is false, so loop stops.
Output is printed once.

A while loop checks the condition before executing the loop body, so it may execute zero times. A do...while loop executes the loop body first and checks the condition afterward, so it always executes at least once.

References

https://www.geeksforgeeks.org/javascript/javascript-for-loop/
https://www.geeksforgeeks.org/javascript/javascript-do-while-loop/