DEV Community: Hariharan S J

Why JavaScript Doesn’t Wait: Sync vs Async Explained

Hariharan S J — Fri, 27 Mar 2026 11:43:13 +0000

1.Introduction

JavaScript is a single-threaded language, which means it can do only one task at a time. But if that’s true, how does it handle things like API calls, timers, or file loading without freezing the entire application?

That’s where Synchronous and Asynchronous programming comes in.

In this blog, we’ll break down:

What synchronous and asynchronous code means
Why JavaScript “doesn’t wait”
How it actually works behind the scenes

Before Going into the synchronous and asynchronous You are all having one question which is why Javascript is a single-threaded language?

JavaScript is single-threaded because:

It has one call stack, meaning it can execute only one task at a time.

But WHY was it designed like this?

1. Simplicity (Main Reason)

When JavaScript was created (by Brendan Eich):

It was meant to run inside the browser
Mainly to handle:

Button clicks
Form validation
Simple UI interactions

So, making it single-threaded:

Keeps things simple
Avoids complex issues like thread synchronization

JavaScript is single-threaded because it uses a single call stack to execute code one task at a time. This design simplifies execution and avoids concurrency issues like race conditions, while asynchronous behavior is handled using the event loop and browser APIs

A Simple Program for Single Thread Behaviour

console.log("Match Started");

function batting() {
    console.log("Batsman started batting");

    for (let i = 0; i < 1e9; i++) {} // playing long innings

    console.log("Batsman finished batting");
}

function bowling() {
    console.log("Bowler started bowling");
}

batting();
bowling();

console.log("Match Ended");

Output

Match Started
Batsman started batting
Batsman finished batting
Bowler started bowling
Match Ended

Explanation

First, batsman plays completely
Only after that, bowler starts bowling
Both don’t happen at the same time
One after another execution

Just like in cricket where batting must finish before bowling begins in this example, JavaScript executes one task at a time. Even if multiple functions are called, the next task waits until the current one finishes, proving that JavaScript is single-threaded

Here is Where Synchronus and Asynchronus Comes to play

2.What is Synchronous in JavaScript?

Before going into the technical part of synchronus we shall understand the synchronus non technically

Imagine you are eating chocolates 🍫

You eat one chocolate
Only after finishing it → you take the next chocolate

You don’t eat 2 chocolates at the same time

Likewise in Javascript

Computer also does the same:

It does one work
Waits till it finishes
Then does the next work

Now you get a idea of what synchronus actually do if we deep dive into the technical part you can clearly understand about this topic

JavaScript executes code line by line using a single call stack, where each operation must complete before the next one starts.

Single Thread + Call Stack

JavaScript is single-threaded, so it uses:

One Call Stack (Execution Stack)

Example

function starter() {
    console.log("Starter is served 🍲");
}

function mainCourse() {
    console.log("Main course is served 🍛");
}

function dessert() {
    console.log("Dessert is served 🍰");
}

starter();
mainCourse();
dessert();

Output

Starter is served 🍲
Main course is served 🍛
Dessert is served 🍰

Explanation:

First, you eat starter 🍲

Then main course 🍛

Finally dessert 🍰

You don’t eat everything at the same time

One after another → synchronous

Blocking Nature

Synchronous code is blocking

Example

console.log("Start");

function heavyTask() {
    for (let i = 0; i < 1e9; i++) {} // long work
    console.log("Heavy Task Done");
}

heavyTask();

console.log("End");

What happens?

JS starts execution
Enters heavyTask()
Stays there until loop finishes
Only then moves to next line

Everything else is blocked

Execution Context

Whenever a function runs:

JavaScript creates an Execution Context

Each context has:

Memory (variables)
Code execution phase

Flow:

Global Execution Context created first
Then function contexts are created and pushed to stack

Real-World Impact

Problems with synchronous code:

UI freezing
Slow performance
Poor user experience

Example:

Loading large data
Heavy calculations
File processing

*The Problems in Synchronus is Solved in Asynchronus So lets deep dive into Asynchronus Concept *

3.What is Asynchronous JavaScript

Asynchronous execution means:

JavaScript can delegate long-running tasks and continue executing other code, instead of blocking the main thread.

How JavaScript Actually Handles Async

JavaScript runtime consists of:

Call Stack
Web APIs (Browser / Node APIs)
Callback Queue (Task Queue)
Event Loop

console.log("Match Started 🏏");

setTimeout(() => {
    console.log("Drinks break over 🍹, match resumes");
}, 2000);

console.log("First over is going on...");

Output

Match Started 🏏
First over is going on...
Drinks break over 🍹, match resumes

Explanation

Match starts

First over continues immediately

Meanwhile:

Drinks break is scheduled ⏳ (setTimeout)

JavaScript does NOT wait

It continues the match

After 2 seconds:

Drinks break message comes

What This Shows

Even though drinks break was set:

Match didn’t stop
Other things continued

This is asynchronous behavior

Event Loop (Heart of Async)

The event loop continuously checks:

Is Call Stack empty?
If yes → take task from queue → execute

This is why JS feels non-blocking

Types of Async Tasks

Macro Tasks (Callback Queue)

setTimeout
setInterval
DOM events

Micro Tasks (Priority Queue)

Promises
queueMicrotask

Microtasks run before macrotasks

Okay this will lead up to the methods of asynchronus in Javascript

4.Methods Used in Asynchronous JavaScript

In JavaScript, async behavior is achieved using different techniques (methods):

What is a Promise in JavaScript

A Promise in JavaScript is an object that represents the eventual completion or failure of an asynchronous operation, allowing developers to handle results using methods like then, catch, and finally.

Basic Structure of a Promise

const promise = new Promise((resolve, reject) => {
    // async work
});

It has 2 important functions:

resolve() → success
reject() → failure

Promise States

A Promise has 3 states:

Pending → Initial state
Fulfilled → Success (resolve called)
Rejected → Failed (reject called)

const foodOrder = new Promise((resolve, reject) => {
    let foodReady = true;

    if (foodReady) {
        resolve("Your food is ready ");
    } else {
        reject("Sorry, food is not available ");
    }
});

foodOrder
    .then(message => console.log(message))
    .catch(error => console.log(error));

Output (if foodReady = true)

Your food is ready

Output (if foodReady = false)

Sorry, food is not available

Explanation

You order food

Kitchen checks:

If food is ready → serve it (resolve)
If not → say unavailable (reject)

Customer (your code):

.then() → handles success
.catch() → handles failure

A Promise in JavaScript is like ordering food—either the food gets delivered successfully (resolve) or the order fails (reject), and we handle both outcomes using then and catch.

Promise Chaining

You can chain multiple .then()

function getData() {
    return new Promise(resolve => {
        setTimeout(() => resolve(10), 1000);
    });
}

getData()
    .then(num => num * 2)
    .then(num => num + 5)
    .then(result => console.log(result)); // 25

Each .then() passes value to next

async / await(To Be Discussed)

fetch() API(To Be Discussed)

JavaScript DOM Basics: A Beginner’s Guide

Hariharan S J — Wed, 25 Mar 2026 10:00:09 +0000

1. Introduction

JavaScript DOM (Document Object Model) is a programming interface that allows developers to interact with HTML elements. It helps in making web pages dynamic by allowing changes in content, structure, and style using JavaScript. In this blog, we will learn the basics of DOM in a simple way.

2. What is DOM?

The DOM represents a web page as a tree structure where each element is treated as an object. Using JavaScript, we can access and modify these elements easily.

HTML page → tree structure → JavaScript control pannum

3. DOM Structure (Tree Concept)

The Document Object Model (DOM) represents an HTML page as a tree structure.
Each part of the HTML document is treated as a node (object) in this tree.

Main Parts of the DOM Tree

Document → The entire web page
HTML → Root element
Head → Contains metadata (title, links, etc.)
Body → Contains visible content
Elements → Tags like

,

, etc.

Example HTML

<html>
  <body>
    <h1>Hello</h1>
    <p>Welcome</p>
  </body>
</html>

💡 Explanation

The document is the top-level object
Inside it, we have the html element
The body contains all visible content
Elements like

and

are child nodes

This tree structure helps JavaScript easily access, modify, and update elements on a web page.

4. Selecting Elements (DOM Methods)

Most important basics

document.getElementById("id")
document.getElementsByClassName("class")
document.getElementsByTagName("p")
document.querySelector("p")

Short explanation

ID → single element
class/tag → multiple elements

5. Changing Content

document.getElementById("title").innerHTML = "Hello JavaScript";

Use:

innerHTML
textContent

5.Creating Elements in DOM

JavaScript allows us to create new HTML elements dynamically using the DOM. This is useful when we want to add content to a web page without reloading it.

1. Creating a New Element

We use document.createElement() to create a new element.

let newElement = document.createElement("p");

This creates a new

element, but it is not yet visible on the page.

2. Adding Content to the Element

We can add text using textContent or innerHTML.

newElement.textContent = "This is a new paragraph";

3. Adding the Element to the Page

To display the element, we must append it to an existing element.

document.body.appendChild(newElement);

Now the paragraph will appear on the webpage.

Full Example

let newElement = document.createElement("p");
newElement.textContent = "Hello, this is added using DOM!";
document.body.appendChild(newElement);

Key Points

createElement() → creates element
textContent → adds text
appendChild() → adds element to page

6.Changing Attributes

We can modify HTML attributes like id, class, or src.

let img = document.getElementById("myImage");
img.setAttribute("src", "image2.jpg");

Common methods

setAttribute()
getAttribute()
removeAttribute()

7. Event Listeners

A modern way to handle events in JavaScript.

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
  alert("Button clicked!");
});

8.Conclusion.

The Document Object Model (DOM) is a fundamental concept in JavaScript that allows developers to interact with and manipulate web pages dynamically. By understanding DOM basics such as selecting elements, creating and removing elements, handling events, and modifying content and styles, beginners can start building interactive and responsive websites. Mastering the DOM is an important first step toward becoming a skilled web developer.

Understanding JavaScript Core Concepts: Spread Operator, Constructor Functions, and Built-in Objects

Hariharan S J — Mon, 16 Mar 2026 12:36:13 +0000

Spread Operator in JavaScript

Before technical part of spread operator we shall understand the spread operator by non technically

Imagine you have a bag of candies 🍬.

Inside the bag there are 3 candies:

[🍬, 🍬, 🍬]

Now you want to pour all the candies out on the table.

When you open the bag and spread the candies on the table, that is like the Spread Operator (...) in JavaScript.

Simple Example

You have a box:

box1 = [1, 2, 3]

Now you open the box and spread everything into another box

let box1 = [1,2,3];
let box2 = [...box1];

Now box2 also has the same toys.

box2 = [1,2,3]

Simple Meaning

Spread Operator (...) = Open a box and spread everything inside it.

Now lets deep dive into the technical part of spread operator

What is Spread Operator?

The Spread Operator (...) is used to expand (spread) the elements of an iterable (like an array or string) or the properties of an object into individual elements.

It was introduced in ES6 (ECMAScript 2015) and is commonly used for copying, merging, and passing values.

Basic Idea of Spread Operator

The spread operator takes a collection and spreads its values one by one

let arr = [10, 20, 30];

console.log(...arr);

Output

10 20 30

Explanation:

arr is an array.
...arr spreads the values inside the array

Instead of:

[10,20,30]

It Becomes

10,20,30

Spread Operator with Arrays

Copying an Array

Normally if you copy arrays like this

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

Both variables point to the same memory reference

So if you change b, a will also change

Using Spread

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

b.push(4);

console.log(a); 
console.log(b);

Output

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

Explanation:

...a creates a new copy of the array

This is called Shallow Copy.

Merging Arrays

Spread operator is commonly used to combine multiple arrays

Example

let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [...arr1, ...arr2];

console.log(arr3);

Output

[1,2,3,4]

Here:

...arr1 spreads 1,2
...arr2 spreads 3,4

Final array becomes [1,2,3,4]

Adding Elements While Merging

You can also add new values.

let arr1 = [2,3];

let arr2 = [1, ...arr1, 4];

console.log(arr2);

Output

[1,2,3,4]

Spread operator does not have to be at the start.
It can be used anywhere in the array.

Spread Operator with Objects

Spread operator can also copy or merge objects

Example

let user = {name:"Hari"};
let details = {age:21};

let person = {...user, ...details};

console.log(person);

Output

Explanation:

...user spreads object properties
...details spreads other properties

Result is a merged object

Spread Operator with Nested Arrays

Spread Operator with Nested Arrays

Example

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

b[0][0] = 100;

console.log(a);

Output

[[100,2],[3,4]]

Explanation

The inner arrays still share memory

Spread operator copies only the first level

Constructor Function In Javascript

before going into the technical part of constructor function lets all first understand it non technically

Imagine you have a toy machine 🏭.

This machine can make many toy cars 🚗.

You just press a button and tell the machine:

Color
Name

Then the machine creates a new toy car.

The Toy Machine = Constructor Function

In JavaScript, a constructor function is like that toy-making machine.

It helps us create many similar objects.

Now lets understand the constructor function concept technically

What is mean by constructor function in javascript?

A Constructor Function in JavaScript is a special type of function used to create and initialize objects. It acts as a blueprint (template) for creating multiple objects with similar properties and methods.

Constructor functions were the main way of creating objects before ES6 classes were introduced.

In Another words it can say as

A constructor function is simply a regular function that is used with the new keyword to create objects.

Example

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

Here:

Person → constructor function
name, age → parameters
this → refers to the new object being created

Creating Objects Using Constructor

To create an object we use the new keyword

let user1 = new Person("Hari", 21);
let user2 = new Person("Surya", 25);

console.log(user1);
console.log(user2);

Output

{ name: "Hari", age: 21 }
{ name: "Surya", age: 25 }

Here we created two objects using the same constructor function.

What Happens Internally When new is Used

When we write:

let user = new Person("Hari",21);

JavaScript performs 4 important steps internally.

Step 1 — Create a new empty object

{}

Step 2 — Set this to the new object

Inside the function:

this → {}

Step 3 — Add properties to the object

this.name = "Hari"
this.age = 21

Object becomes:

{ name:"Hari", age:21 }

Step 4 — Return the object

JavaScript automatically returns the new object.

Final Result

user = { name:"Hari", age:21 }

Why this is Used in Constructor Functions

this refers to the object that is being created.

Example

function Car(brand) {
  this.brand = brand;
}

let car1 = new Car("Toyota");
let car2 = new Car("BMW");

Objects Created

car1 → { brand: "Toyota" }
car2 → { brand: "BMW" }

Here this.brand stores the value in each new object.

Problem if new is Not Used

Example:

function Person(name) {
  this.name = name;
}

let user = Person("Hari");

console.log(user);

Output

undefined

Because:

this refers to the global object, not a new object.

Constructor Naming Convention

Constructor functions usually start with a capital letter.

Example:

Person
User
Car
Student
Employee

This is not mandatory but is a common JavaScript convention.

Using Prototype with Constructor Functions

To avoid copying methods for every object, we use prototype.

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello " + this.name);
};

let user1 = new Person("Hari");
let user2 = new Person("Surya");

user1.sayHello();
user2.sayHello();

Now:

sayHello exists only once in memory
All objects share it

This improves memory efficiency.

Constructor Function Returning Values

Normally constructors return the object automatically.

But if you return another object manually:

function Test() {
  this.name = "Hari";

  return { age: 21 };
}

let obj = new Test();

console.log(obj);

Output:

{ age: 21 }

The returned object replaces the default object.

Advantages of Constructor Functions

Create multiple objects easily
Reusable object structure
Works with prototypes
Foundation for JavaScript’s object-oriented programming

Build In Objects In Javascript

before going into this topic we shall discuss this topic non technically

Imagine you have a magic calculator box 🧮✨.

This magic box can help you do many math things like:

finding the biggest number
finding the smallest number
rounding numbers
giving random numbers
finding square roots

In JavaScript, this magic box is called the Math Object.

Think Like This

Math = Magic Math Box

Whenever you need help with math, you ask the box.

Example-Biggest Number

You ask the box:

Math.max(5, 10, 2)

The Box Says

Because 10 is the biggest.

Now lets deep dive in by technically

What is Mean By Json Object In Javascript

JSON stands for JavaScript Object Notation.
It is a lightweight data format used to store and exchange data between systems.

Even though it comes from JavaScript, JSON is now language-independent, meaning it can be used with:

JavaScript
Python
Java
PHP
C#

Why JSON Exists

Before JSON, systems used formats like XML to transfer data.

Example XML:

<user>
  <name>Hari</name>
  <age>21</age>
</user>

This format is long and complex.

JSON solved this by being shorter and easier to read.

JSON Version:

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

JSON.stringify()

JSON.stringify() converts a JavaScript object into a JSON string.

Example:

let user = {
  name: "Hari",
  age: 21
};

let jsonData = JSON.stringify(user);

console.log(jsonData);

Output:

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

Conversion

JavaScript Object → JSON String

JSON.parse()

JSON.parse() converts a JSON string into a JavaScript object.

Example:

let jsonData = '{"name":"Hari","age":21}';

let user = JSON.parse(jsonData);

console.log(user.name);

Output:

Hari

Conversion:

JSON String → JavaScript Object

Math Object In Javascript.

The Math object in JavaScript is a built-in global object that provides mathematical constants and functions for performing calculations.

Important point:

The Math object is not a constructor, so we do not use new Math().

Why the Math Object Exists

Programming often requires mathematical operations like:

1.rounding numbers

2.finding maximum or minimum values

3.generating random numbers

4.trigonometric calculations

5.powers and square roots

Instead of writing these algorithms manually, JavaScript provides the Math object with built-in methods.

Math Methods

Math.max()

Returns the largest value

Math.max(10, 50, 20)

Output

Internally it compares numbers and returns the maximum.

Math.round()

Rounds a number to the nearest integer.

Math.round(4.6)

Output

Rules:

0.5 or greater → round up
less than 0.5 → round down

Example:

Math.round(4.4) → 4
Math.round(4.5) → 5

Math.floor()

Rounds down to the nearest integer.

Math.floor(4.9)

Output

Example:

Math.floor(8.99) → 8
Math.floor(3.1) → 3

Math.trunc()

Removes the decimal part.

Math.trunc(5.9)

Output:

Math.sqrt()

Calculates square root.

Math.sqrt(625)

Output

Math.crbt()

Calculates Cube root.

Math.cbrt(27)

Output

JavaScript String Methods Explained with Examples

Hariharan S J — Tue, 10 Mar 2026 15:21:56 +0000

1.String in Javascript

A string in JavaScript is a data type used to store text.
It is a sequence of characters such as letters, numbers, symbols, or spaces enclosed within quotes.

Example

`let name = "Hariharan";
let city = 'Chennai';
let message = "Hai";`

In the above examples

"Hariharan" is a string
"Chennai" is a string
"Hai" is a string

Important Points

Strings can be created using single quotes (' '), double quotes (" "), or backticks ( ).
Strings are used to store text values.
A string can contain letters, numbers, symbols, and spaces.

2.Why We Use Strings in JavaScript

We use strings in JavaScript to store and work with text data. Most applications need to handle text such as names, messages, addresses, or descriptions.

3.String Methods in JavaScript

In JavaScript, a string is a sequence of characters used to represent text. JavaScript provides many built-in string methods that allow developers to manipulate, analyze, and transform text data easily.

These methods help perform operations such as finding characters, extracting parts of a string, changing case, removing spaces, and replacing text.

One important thing to remember is that strings in JavaScript are immutable. This means string methods do not change the original string. Instead, they return a new string with the result.

1.Length

Returns the length of a string.

`let text = "Hari";
console.log(text.length);`

Output
10

2.charAt()

Returns the character at a specific index.

`let text = "Hariharan";
console.log(text.charAt(4));`

`Output
h`

3.charCodeAt()

Returns the Unicode value of a character.

`let text = "A";
console.log(text.charCodeAt(0));`

`Output
65`

What is Unicode

Unicode is a universal character encoding standard used to represent characters from almost all languages in the world.

It assigns a unique numeric code (number) to every character.

This allows computers to store and display text consistently across different systems and languages.

4.String Concat

The concat() method in JavaScript is used to join two or more strings together and return a new combined string.

It does not modify the original strings.

`let text1 = "Bumrah";
let text2 = "Bowls a Yorker";

let result = text1.concat(" ", text2);

console.log(result);`

`Output
Bumrah Bowls a Yorker`

5.toLowerCase()

Converts all characters to lowercase.

`let text = "HARIHARAN";
console.log(text.toLowerCase());`

`Output
hariharan`

6.toUppercase()

Converts all characters to uppercase

`let text = "hariharan";
console.log(text.toLowerCase());`

`Output
HARIHARAN`

6.Slice

Extracts a portion of a string

`let text = "JavaScript";
console.log(text.slice(0,4));`

`Output
Java`

7.trim()

Removes extra spaces from the beginning and end of a string

`let text = "   Hello   ";
console.log(text.trim());`

`Output
Hello`

String Search

JavaScript indexOf() Method

The indexOf() method in JavaScript is used to find the position (index) of the first occurrence of a specified value in a string.

If the specified value is not found, the method returns -1.

`let text = "Hello World";

console.log(text.indexOf("World"));`

`Output
6`

Important Points

indexOf() returns the first occurrence of a value.
If the value is not found, it returns -1.
It is case-sensitive.

JavaScript Array Basics: Methods & Iteration Explained

Hariharan S J — Mon, 02 Mar 2026 12:18:41 +0000

1.Definition of Method in JavaScript

A method in JavaScript is a function that is associated with an object. It is used to perform a specific task or operation on that object.

Example:

let name = "Hari";

console.log(name.toUpperCase());

Here, toUpperCase() is a method of the String object.

In simple words

Function → standalone
Method → function inside an object

2.Array Method in JavaScript

In JavaScript, array methods are built-in functions that allow us to perform different operations on arrays like adding, removing, updating, searching, and iterating elements.

Example

let fruits = ["apple", "banana", "orange"];

fruits.push("mango");  // add element

console.log(fruits);

Here, push() is an array method used to add a new element to the array.

In simple words

Array methods make array operations easy, fast, and clean.

3.Why should we use array methods in JavaScript

We should use array methods because they make our code simple, clean, readable, and efficient while working with arrays

Simple Example

Without array method (using loop)

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

for(let i = 0; i < nums.length; i++) {
  squares.push(nums[i] * nums[i]);
}

console.log(squares);

With array method

let nums = [1, 2, 3, 4];
let squares = nums.map(n => n * n);

console.log(squares);

4.Basic Array Methods in JavaScript

JavaScript basic array methods help developers efficiently add, remove, search, modify, and manage array elements. These methods improve code readability, reduce complexity, and enhance performance in real-world applications

Basic array methods mainly help us perform CRUD operations (Create, Read, Update, Delete) on array data

1.push() – Add Elements at the End

Purpose

Adds one or more elements to the end of an array

Key Points

Can add multiple values
Modifies the original array
Returns the new length of the array

let arr = [10, 20, 30];
let newLength = arr.push(40, 50);

console.log(arr);        // [10, 20, 30, 40, 50]
console.log(newLength); // 5

Real-world use case

Adding a new product to a shopping cart

2.pop() – Remove Last Element

Purpose

Removes the last element from an array

Key Points

Removes the last value
Returns the removed value
Modifies the original array

let arr = [1, 2, 3, 4];
let removed = arr.pop();

console.log(arr);     // [1, 2, 3]
console.log(removed); // 4

Use case

Undo operations, stack implementation (LIFO concept).

3.unshift() – Add Elements at the Beginning

Purpose

Adds one or more elements to the start of an array

Key Points

Existing elements shift to the right
Slightly slower than push() for large arrays

let arr = [20, 30];
arr.unshift(10);

console.log(arr); // [10, 20, 30]

Use case

Displaying latest notifications or messages at the top

4.shift() – Remove First Element

Purpose

Removes the first element from an array

Key Points

All remaining elements shift to the left
Used in queue operations (FIFO)

let arr = [10, 20, 30];
let removed = arr.shift();

console.log(arr);     // [20, 30]
console.log(removed); // 10

5.shift() – Remove First Element

Purpose

Removes the first element from an array

Key Points

All remaining elements shift to the left
Used in queue operations (FIFO)

let arr = [10, 20, 30];
let removed = arr.shift();

console.log(arr);     // [20, 30]
console.log(removed); // 10

6.length – Size of the Array

Purpose

Returns the number of elements in an array

let arr = [1, 2, 3, 4];
console.log(arr.length); // 4

Advanced Concept

You can manually modify the length property to truncate an array

let arr = [1, 2, 3, 4, 5];
arr.length = 3;

console.log(arr); // [1, 2, 3]

5.JavaScript Array Iteration Methods

In JavaScript, array iteration methods are built-in functions that loop through array elements and apply a callback function to each element to perform specific operations such as transformation, filtering, aggregation, and searching

1. forEach() – Execute Function for Each Element

Purpose

Executes a function once for each array element

Key Points

Does not return a new array
Used mainly for side effects (logging, updating UI, etc.)

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

arr.forEach((value, index) => {
  console.log(`Index ${index} → Value ${value}`);
});

Use case

Displaying items in UI, logging data, API response handling.

2. map() – Transform Each Element

Purpose

Creates a new array by transforming each element

Key Points:

Returns a new array
Does not change original array

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

let squares = numbers.map(n => n * n);

console.log(squares); // [1, 4, 9, 16]

Use case

Data transformation, UI rendering, calculations.

3. filter() – Select Elements Based on Condition

Purpose

Returns a new array containing only elements that pass a condition

let numbers = [10, 15, 20, 25, 30];

let even = numbers.filter(n => n % 2 === 0);

console.log(even); // [10, 20, 30]

Use case

Search results, category filtering, validations

4. reduce() – Reduce Array to Single Value

Purpose

Reduces the array into a single output value

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

let sum = numbers.reduce((total, value) => total + value, 0);

console.log(sum); // 10

Use cases

Sum, average, max/min value, grouping data

5. find() – Find First Matching Element

Purpose

Returns the first element that matches a condition

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

let result = users.find(user => user.id === 2);

console.log(result); // { id: 2, name: "Karthi" }

6. findIndex() – Find Index of First Match

Purpose

Returns the index of first matching element

let nums = [5, 12, 8, 130, 44];

let index = nums.findIndex(n => n > 10);

console.log(index); // 1

6.What is Method Chaining in JavaScript

Method chaining in JavaScript is a programming technique in which multiple methods are invoked sequentially on the same object, where each method returns the object itself or another object, enabling continuous chained calls.

Why Use Method Chaining?

Makes code short and clean
Improves readability
Avoids unnecessary temporary variables
Encourages functional programming style
Makes logic more expressive

Simple Example

let result = [1, 2, 3, 4, 5]
  .filter(n => n % 2 === 0)
  .map(n => n * 10)
  .reduce((sum, n) => sum + n, 0);

console.log(result); // 60

Explanation

filter() → selects even numbers → [2, 4]
map() → multiplies by 10 → [20, 40]
reduce() → sums → 60

Functions in JavaScript – Learn Once, Use Everywhere

Hariharan S J — Tue, 24 Feb 2026 05:54:31 +0000

1.Function Definition

A function is a set of instructions that performs a particular job when we call it.

(Or)

A function in JavaScript is a block of reusable code that is designed to perform a specific task. It runs only when it is called (invoked), and it helps to reduce code repetition, improve readability, and make programs easier to manage.

Example

function makeParotta() {
    console.log("Kothu Parotta is Ready");
}

makeParotta();  // calling the function

2.Rules for Declaring a Function

Starts with lower case
No Space Allowed
No Special Characters are allowed except Underscore(_) and Dollar($)

function myFunction() { }
function _test() { }
function $demo() { }

JavaScript keywords cannot be used as function names

Reserved words like if, else, for, while, etc. cannot be used.

function if() { }   // ❌
function for() { }  // ❌

Parameters in Function

Definition

Parameters are the variables listed in the function definition. They act as placeholders to receive values when the function is called.

function add(a, b) {   // a and b are parameters
  return a + b;
}

Here, a and b are parameters.

Arguments in Function

Definition

Arguments are the actual values passed to the function when calling it.

add(5, 3);   // 5 and 3 are arguments

Here, 5 and 3 are arguments.

Simple One-Line Definition:

Parameter: Variable in function definition.

Argument: Value passed to the function.

Easy to Remember Trick:

P → Parameter → Placeholders
A → Argument → Actual values

Difference between Parameters and Arguments

Return Statement in a Function

A return statement gives the output of a function back to the caller.

(Or)

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

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

let result = add(5, 3);
console.log(result);   // Output: 8

Explanation

return a + b; → sends the value 8 back
result receives 8

Important Points

A function can return only one value at a time.
Any code after the return statement will not execute.
If no return statement is used, the function returns undefined.

Understanding JavaScript the Easy Way

Hariharan S J — Fri, 13 Feb 2026 14:49:39 +0000

History of JavaSript

1. The Birth of JavaScript (1995)

JavaScript was created by Brendan Eich in 1995 while he was working at Netscape.

Initially named Mocha
Later renamed to LiveScript
Finally renamed JavaScript (because Java was very popular at that time, and the name helped in marketing)

Interestingly, the first version of JavaScript was developed in just 10 days.

2. Standardization (1997)

In 1997, JavaScript was standardized by ECMA International under the name ECMAScript (ES).

This ensured that different browsers followed the same core rules and reduced compatibility issues.

Variables in javascript

Variables in JavaScript are used to store data values.
You can think of a variable as a container that holds information.

How to Declare Variables

In JavaScript, there are three ways to declare variables:

1.Var(Old Method)

`var name = "Hari";
`

Function-scoped
Can be re-declared
Not recommended in modern JavaScript

2.let(Modern & Recommended)

`let age = 22;
`

Block-scoped
Can be updated
Cannot be re-declared in the same scope

3.const(Constant Value)

`const country = "India";
`

Block-scoped
Cannot be updated
Cannot be re-declared

Rules for Naming Variables

Must start with a letter, _, or $
Cannot start with a number
Case-sensitive (name and Name are different)
Avoid reserved keywords (like if, for, while)

Datatypes in javascript

In JavaScript, data types define the type of value a variable can hold
JavaScript has two main categories of data types:

1.Primitive Datatype
2. Non Primitive Datatype

1.Primitive Datatype

Primitive data types are basic data types that store a single value directly in memory
They are immutable, meaning their value cannot be changed once created (a new value is created instead).

1.Number

Represents both integers and decimal values.

`let age = 21;
let price = 105.234;
`

2.String

Represents text (written inside quotes).

`let name = "Hari";
let message = 'Hello World';
`

3.Boolean

Represents true or false values.

`let isLoggedIn = true;
let isAdmin = false;
`

4.Undefined

A variable that is declared but not assigned a value.

`let x;
console.log(x); // undefined
`

5.Null

Represents an intentional empty value.

`let data = null;

`

6.BigInt

Used for very large numbers.

`let bigNumber = 123456789012345678901234567890n;
`

7.Symbol

Used to create unique identifiers (mostly used in advanced concepts).

`let id = Symbol("unique");
`

2.Non Primitive Datatype

Non-primitive data types (also called reference data types) store collections of values or complex data
They are stored as references (memory addresses) instead of storing the actual value directly

They are mutable, meaning their contents can be changed.

1.Object

Stores data in key–value pairs.

`let person = {
  name: "Hari",
  age: 21
};
`

2.Array

Used to store multiple values in a single variable.

`let numbers = [1, 2, 3, 4];
`

3.Function

Functions are also treated as objects in JavaScript.

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

Semantic Tags in HTML

Hariharan S J — Wed, 21 Jan 2026 14:25:32 +0000

1.What is mean by semantic tags in html?

Semantic tags are HTML tags that tell both the browser and the developer what type of content they contain.

Example

❌ Non-semantic:

<div>This is a header</div>

✅ Semantic:

<header>This is a header</header>

2.Why semantic tags is used in html

Semantic tags are used in HTML to define the meaning and structure of web content, improving readability, SEO, and accessibility.

i)Better understanding of content

Example: tells it is a header, tells it is footer

ii)Improves SEO (Search Engine Optimization)

iii)Better accessibility

iv)Clean and readable code

v)Standard and professional layout

Example

❌ Without semantic tags:

<div id="header">Header</div>
<div id="nav">Menu</div>

✅ With semantic tags:

<header>Header</header>
<nav>Menu</nav>

3.Various semantic tags in html

🔹 Page Structure Semantic Tags

i) <header>

Represents top/intro content

Logo, heading, navigation

ii) <nav>

Navigation links

iii) <main>

Main content of the webpage (only one per page)

iv) <section>

Groups related content

v) <article>

Independent, self-contained content (blogs, news)

vi) <aside>

Side or related content

vii) <footer>

Bottom section (copyright, contact info)

🔹 Content Semantic Tags

i)<figure>

Image, diagram, illustration

ii) <figcaption>

Caption for figure

iii) <time>

Represents date or time

<time datetime="2026-01-21">Jan 21, 2026</time>

🔹 Text-Level Semantic Tags

i) <mark>

Highlights text

ii) <strong>

Important text (strong importance)

iii) <em>

Emphasized text

iv) <address>

Contact information

🔹 Media & Data Semantic Tags

i) <details>

Expandable content

ii) <summary>

Heading for details

<details>
  <summary>More Info</summary>
  Content here
</details>

4.Advantages of semantic tag

i)Better code readability

ii)Improves SEO

iii)Better accessibility

iv)Clear page structure

v)Easy maintenance

5.Disadvantages of semantic tags

i)Limited styling by default

ii)Learning curve for beginners

iii)Overuse or misuse

iv)Browser support issues (older browsers)

v)Not suitable for every situation

Day 1 Of Payilagam

Hariharan S J — Tue, 06 Jan 2026 14:54:13 +0000

1.Introduction of both HTML And CSS

Basic concept of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure of a webpage by using elements called tags.

HTML is not a programming language; it is a markup language.

Structure of an HTML Document

<!DOCTYPE html>

My First Web Page

Welcome

This is my first HTML page.

Common HTML Tags
Tag
Purpose

to

Headings

Paragraph
Line break

Horizontal line Image Link Container Inline container Attributes in HTML Attributes provide additional information about elements. Example: Visit Site href is an attribute Attributes are written inside the opening tag HTML Headings HTML has 6 levels of headings:

Main Heading

Sub Heading

is the most important and

is the least.

Paragraphs and Line Breaks
Paragraph →

Line break →

This is a paragraph.
This is next line.

HTML Links
Links are created using tag:
Google

Basic concept of CSS

CSS (Cascading Style Sheets) is used to style and design HTML web pages.
It controls the layout, colors, fonts, spacing, and responsiveness of a website.
HTML gives structure, CSS gives style.

Inline CSS
Applied directly inside an HTML tag.

Hello World

text-align: center aligns the text to the center of its container.

HTML Box model

The HTML Box Model is a basic concept in CSS that explains how every HTML element is treated as a rectangular box on a web page.
This box controls spacing, size, and layout of elements.
Components of the Box Model
Every HTML element consists of four layers:

+-------------------------+
| Margin |
| +-------------------+ |
| | Border | |
| | +-------------+ | |
| | | Padding | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +-------------+ | |
| +-------------------+ |
+-------------------------+

Where margin is outside the box and padding is
Inside the Box