Forem: Jaya Sudha

The Simplest Way to Understand Asynchronous JavaScript

Jaya Sudha — Sat, 28 Mar 2026 12:28:46 +0000

JavaScript is one of the most popular programming languages used to build websites and web applications. But one thing that often confuses beginners is asynchronous programming.

Don't worry — in this article we’ll understand it in the simplest way possible with real-life examples and practical scenarios.

First, Let’s Understand a Simple Problem

Imagine you are at a restaurant.

You place an order for food. The food will take 15 minutes to prepare.

What would you do?

Stand near the kitchen for 15 minutes doing nothing
Sit at your table, talk with friends, and wait until the food is ready

Of course, you will choose option 2.

You continue doing other things while the food is being prepared.

This is exactly how asynchronous JavaScript works.

What is Asynchronous JavaScript?

Asynchronous programming allows JavaScript to do other tasks while waiting for a long operation to finish.

Some tasks take time, like:

Fetching data from an API
Loading images
Waiting for user clicks
Uploading files
Timers and delays

Instead of blocking the program, JavaScript continues executing other code.

Synchronous vs Asynchronous

Synchronous Code (Blocking)

In synchronous code, each line waits for the previous line to finish.

console.log("Start");

function slowTask(){
  for(let i = 0; i < 1000000000; i++){}
}

slowTask();

console.log("End");

Output:

Start
(wait...)
End

The program stops and waits until slowTask finishes.

This can make the website freeze.

Asynchronous Code (Non-Blocking)

Now let’s see asynchronous behavior.

console.log("Start");

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

console.log("End");

Output:

Start
End
Task completed

JavaScript does not wait for the timeout to finish.

It continues running the rest of the code.

Example 1: Ordering Food Online

When you order food on an app like Swiggy or Zomato:

You place the order
The restaurant prepares the food
The delivery person picks it up
You track the delivery

During this time, you continue using your phone.

Your phone doesn’t freeze until the food arrives.

That is asynchronous behavior.

Example 2: Loading Data From an API

Most websites load data from a server.

Example:

Weather apps
News websites
E-commerce sites
Social media feeds

JavaScript fetches data asynchronously.

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

Here JavaScript:

Sends a request to the server
Continues running other code
Displays the data when it arrives

Example 3: User Click Events

When a user clicks a button, JavaScript waits for that event.

button.addEventListener("click", function(){
  console.log("Button clicked");
});

The function runs only when the user clicks.

Until then, JavaScript simply waits in the background.

Example 4: Timers

Sometimes we want something to happen after a delay.

Example: Showing a notification after a few seconds.

setTimeout(() => {
  console.log("Reminder!");
}, 3000);

The message appears after 3 seconds.

The Problem With Callbacks

Before modern JavaScript, asynchronous tasks were handled using callbacks.

Example:

login(function(user){
  getOrders(user, function(orders){
    getPayment(orders, function(payment){
      console.log(payment);
    });
  });
});

This becomes deeply nested and hard to read.

This problem is known as Callback Hell.

The Modern Solution: Promises

Promises make asynchronous code easier to manage.

Example:

fetch("/api/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Promises represent a value that will be available in the future.

They can be:

Pending
Fulfilled
Rejected

Even Better: Async / Await

Modern JavaScript introduced async/await, which makes asynchronous code look cleaner.

async function getUsers(){
  const response = await fetch("/api/users");
  const data = await response.json();
  console.log(data);
}

getUsers();

This looks almost like normal synchronous code, but it still runs asynchronously.

Where Asynchronous JavaScript is Used

Almost every modern web application uses asynchronous programming.

Examples include:

Loading API data
Chat applications
File uploads
Payment processing
Notifications
Real-time updates

Without asynchronous programming, websites would feel slow and unresponsive.

Final Thoughts

Asynchronous programming is a technique in JavaScript that allows the program to perform other tasks while waiting for a long operation to complete. It is commonly implemented using concepts like callbacks, event listeners, timers, promises, and async/await.

This is what makes modern web applications fast, interactive, and user-friendly.

If you are learning JavaScript, understanding asynchronous concepts like callbacks, promises, and async/await will significantly improve your ability to build real-world applications.

Thanks for reading! If this article helped you understand asynchronous JavaScript better, feel free to share your thoughts.

Closures in JavaScript: A Beginner-Friendly Guide

Jaya Sudha — Fri, 27 Mar 2026 06:18:14 +0000

1. What is a Closure?

In simple words:

A Closure is when a function remembers the variables from its outer function even after the outer function has finished executing.

Think of it like a school bag 🎒.

A student goes home.
But the bag still contains books from school.
Even outside school, the books are still accessible.

Similarly:

A function can remember variables from where it was created.

2. Simple Example

function outerFunction() {
  let message = "Hello Students";

  function innerFunction() {
    console.log(message);
  }

  return innerFunction;
}

let myFunction = outerFunction();
myFunction();

Output

Hello Students

3. How This Works

Step by step:

outerFunction() runs.
It creates a variable message.
innerFunction() is created inside it.
outerFunction() returns innerFunction.
Even after outerFunction() finishes, innerFunction() still remembers message.

This memory is called a Closure.
"That ability of remembering the outer variables is called a Closure."

4. Real-Life Example

Imagine a cookie jar 🍪.

function cookieJar() {
  let cookies = 5;

  function takeCookie() {
    cookies--;
    console.log("Cookies left:", cookies);
  }

  return takeCookie;
}

let eatCookie = cookieJar();

eatCookie();
eatCookie();
eatCookie();

Output

Cookies left: 4
Cookies left: 3
Cookies left: 2

Even though cookieJar() finished running, the function still remembers the cookies variable.

5. Why Closures Are Useful

Closures help us to:

Remember data
Protect variables
Create private variables
Build powerful JavaScript features

Many libraries like React and Node.js use closures.

6. Key Points to Remember

✔ A closure is created when

A function is inside another function
The inner function uses variables from the outer function

✔ The inner function remembers those variables even after the outer function ends.

7. Conclusion

Closures may look confusing at first, but they are just about functions remembering their environment.

Whenever an inner function accesses variables from an outer function, a closure is created.

Understanding closures will make you much stronger in JavaScript, because many advanced concepts depend on them.

JavaScript Events Made Simple: A Beginner-Friendly Guide

Jaya Sudha — Thu, 26 Mar 2026 17:17:45 +0000

Modern websites are interactive. When you click a button, type in a search box, or submit a form, something happens.

This behavior is possible because of JavaScript Events.

In this blog, we will learn:

Introduction to Events
How Events Work
Common Event Types
The Event Object
Event Propagation
Event Delegation
Removing Event Listeners

Let’s start.

1. Introduction to Events

An event is an action that happens in the browser.

Events can be triggered by:

User actions
Browser actions

Examples of events

Action	Event
Clicking a button	click
Typing in keyboard	keydown
Submitting a form	submit
Moving mouse over element	mouseover
Page loaded	load

Example

<button id="btn">Click Me</button>

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

Output

When the user clicks the button, an alert message appears.

This is called interactivity.

Without events, websites would be static like a newspaper page.

2. How Events Work

JavaScript uses an event-driven model.

This means the browser waits for events and then runs code.

The process

User performs an action
Browser detects the event
JavaScript runs the event handler

Syntax of addEventListener

element.addEventListener("event", function)

Example

<button id="btn">Click</button>

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

btn.addEventListener("click", function(){
    console.log("Button was clicked");
});

Output

Button was clicked

This message appears in the console when the button is clicked.

3. Common Event Types

JavaScript has many event types.

1. Mouse Events
Triggered by mouse actions.

Event	Description
click	user clicks
dblclick	double click
mouseover	mouse enters element
mouseout	mouse leaves element

Example

<div id="box">Hover over me</div>

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

box.addEventListener("mouseover", function(){
    box.style.background = "yellow";
});

box.addEventListener("mouseout", function(){
    box.style.background = "white";
});

Output
When the mouse enters the box → yellow background
When the mouse leaves → white background

2. Keyboard Events

Triggered when keys are pressed.

Event	Description
keydown	key pressed
keyup	key released
keypress	key pressed (older event)

Example

<input type="text" id="inputBox">

let input = document.getElementById("inputBox");

input.addEventListener("keydown", function(event){
    console.log("Key pressed:", event.key);
});

Output

Typing A B C

Console shows

Key pressed: A
Key pressed: B
Key pressed: C

3. Form Events

Used when working with forms.

Event	Description
submit	form submitted
change	value changed
input	typing
focus	field selected
blur	field left

Example

<form id="form">
<input type="text">
<button>Submit</button>
</form>

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

form.addEventListener("submit", function(event){
    event.preventDefault();
    alert("Form submitted!");
});

Output
The alert appears without refreshing the page.

4. Window / Document Events

These events happen on the browser window.

Event	Description
load	page fully loaded
DOMContentLoaded	HTML loaded
resize	window resized
scroll	page scrolled

Example

window.addEventListener("scroll", function(){
    console.log("User is scrolling");
});

4. The Event Object

Whenever an event occurs, JavaScript creates an event object.

This object contains information about the event.

Example

document.addEventListener("click", function(event){
    console.log(event.target);
});

Important Properties

Property	Meaning
event.target	element clicked
event.type	type of event
event.key	key pressed
event.clientX	mouse X position
event.clientY	mouse Y position

Example

document.addEventListener("click", function(event){
    console.log("Clicked element:", event.target);
    console.log("Event type:", event.type);
});

Prevent Default Behaviour

Some elements have default actions.

Example:

Form reload
Link navigation

We can stop it using:

event.preventDefault()

Example

<a href="https://google.com" id="link">Go to Google</a>

document.getElementById("link").addEventListener("click", function(event){
    event.preventDefault();
    alert("Link prevented!");
});

5. Event Propagation

When an event happens inside nested elements, it travels through the DOM.

This is called event propagation.

There are two phases:

1. Event Bubbling

Event goes from child → parent → document

Example:

<div id="parent">
<button id="child">Click</button>
</div>

document.getElementById("child").addEventListener("click", function(){
    console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function(){
    console.log("Parent clicked");
});

Output

Child clicked
Parent clicked

Because event bubbles up.

2. Event Capturing

Event goes from parent → child

addEventListener("click", function, true)

Example

document.getElementById("parent").addEventListener("click", function(){
    console.log("Parent capturing");
}, true);

stopPropagation()

Stops the event from moving further.

document.getElementById("child").addEventListener("click", function(event){
    event.stopPropagation();
    console.log("Child only");
});

Output

Child only

Parent event will not run.

Example

document
   ↓
body
   ↓
parent
   ↓
child (clicked)
   ↑
parent
   ↑
body
   ↑
document

Capturing → top to bottom
Bubbling → bottom to top

6. Event Delegation

Instead of adding many event listeners, we can add one listener to the parent.

This technique is called event delegation.

It improves performance.

Example 1

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

document.getElementById("list").addEventListener("click", function(event){

    if(event.target.tagName === "LI"){
        console.log("You clicked:", event.target.innerText);
    }

});

Output

Clicking any item shows:(The exact element that was clicked by the user)

You clicked: Item 2

Even if new <li> is added later, it still works.

7. Removing Event Listeners

We can remove an event listener using:

removeEventListener()

But the function must be named.

Example

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

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

btn.addEventListener("click", sayHello);

btn.removeEventListener("click", sayHello);

Anonymous functions cannot be removed easily.

Conclusion
JavaScript events are essential for creating interactive web applications. Understanding how events work helps developers handle user actions effectively and build dynamic user interfaces.

Understanding the DOM in JavaScript: A Complete Beginner’s Guide

Jaya Sudha — Wed, 25 Mar 2026 16:42:42 +0000

Every modern website we interact with today is dynamic. When we click a button, type into a search box, or see new content appear without refreshing the page, JavaScript is working behind the scenes to update the webpage instantly. But how does JavaScript know which part of the page to update?

This is where the Document Object Model (DOM) comes into play.

By the end of this guide, you will have a solid understanding of how the DOM works and why it is one of the most important concepts in front-end development.

1. What is the DOM?
The DOM (Document Object Model) is a programming interface that represents an HTML document as a tree structure of objects.

When the browser loads a webpage, it converts the HTML into a DOM tree, which JavaScript can access and modify.

Example HTML:

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

DOM Tree:

Document
   |
  body
  /   \
 h1    p

Each HTML element becomes a node in the DOM tree.

2. Types of DOM Nodes
The DOM consists of different types of nodes.

Document Node
The root of the entire page.

document

Element Nodes
All HTML elements are element nodes.

Examples:

<h1>
<div>
<ul>
<p>

Text Nodes
The text inside elements.

Example:

<p>Hello World</p>

Here:

<p> → element node
Hello World → text node

Attribute Nodes

Attributes attached to elements.

Example:

<img src="image.jpg" alt="picture">

Attributes:

src
alt

3. Accessing the DOM
The browser provides the** document object** to interact with the DOM.

Example:

console.log(document);

This displays the full DOM structure in the console.

4. Selecting Elements (DOM Selection)
Before modifying anything, JavaScript must select the element.

getElementById()
Select element using ID.

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

document.getElementById("title");

getElementsByClassName()

Select elements with a specific class.

document.getElementsByClassName("box");

Returns an HTMLCollection.

getElementsByTagName()

Select elements by tag name.

document.getElementsByTagName("p");

Returns an HTMLCollection.

querySelector()

Returns the first matching element.

document.querySelector(".box");

querySelectorAll()

Returns all matching elements.

document.querySelectorAll(".box");

Returns a NodeList.

5. DOM Manipulation

DOM manipulation means changing the webpage dynamically using JavaScript.

Main categories include:

• Change text
• Change styles
• Add or remove elements
• Respond to user actions

6. Changing Text Content

innerText - Changes visible text.
textContent -Changes all text including hidden content.
innerHTML - Changes HTML inside the element.

Example:

<div id="box">
  Hello <span style="display:none;">World</span>
</div>

Output

console.log(box.innerText); 
// Hello

console.log(box.textContent);
// Hello World

console.log(box.innerHTML);
// Hello <span style="display:none;">World</span>

7. Changing Styles

JavaScript can directly change CSS properties.

Example:

element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";

Important rule:

CSS property → camelCase in JavaScript

8. Manipulating Classes

The classList property helps manage CSS classes.

Add a class

element.classList.add("active");

Remove a class

element.classList.remove("active");

Toggle a class

element.classList.toggle("active");

Check if class exists

element.classList.contains("active");

9. Creating Elements

JavaScript can create new HTML elements.

let div = document.createElement("div");

Add text:

div.innerText = "Hello";

10. Adding Elements to the DOM

There are several methods to insert elements.

append()

Adds element at the end.

parent.append(child);

Example:

document.body.append(div);

appendChild()

Also adds element at the end.

parent.appendChild(child);

Difference:

appendChild → only one node
append → multiple nodes and text allowed

prepend()

Adds element at the beginning.

parent.prepend(child);

before()

Insert element before another element.

element.before(newElement);

after()

Insert element after another element.

element.after(newElement);

insertAdjacentHTML()

Insert HTML at specific positions.

element.insertAdjacentHTML("beforeend", "<p>Hello</p>");

Positions:

beforebegin
afterbegin
beforeend
afterend

11. Removing Elements

remove()
Removes element directly.

element.remove();

removeChild()

Removes a child from a parent.

parent.removeChild(child);

12. Replacing Elements
replaceWith()

Replace an element with another.

oldElement.replaceWith(newElement);

replaceChild()

parent.replaceChild(newChild, oldChild);

13. Attribute Manipulation

JavaScript can change HTML attributes.

setAttribute()

Add or update attribute.

element.setAttribute("class", "box");

getAttribute()

Get attribute value.

element.getAttribute("class");

removeAttribute()

Remove attribute.

element.removeAttribute("class");

Conclusion
The DOM provides a structured way for JavaScript to interact with HTML documents. By understanding how nodes, elements, traversal, and manipulation work, developers can dynamically control webpage content and structure. Learning the DOM is a foundational skill for building interactive and modern web applications.

JavaScript Array Methods Explained in Simple Words (With Examples)

Jaya Sudha — Wed, 04 Mar 2026 07:09:40 +0000

Arrays are used to store multiple values in one variable.

Example:

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

But how do we add, remove, or change items inside an array?

JavaScript gives us array methods to do that easily.

Let’s learn the most important ones step by step.

1.Adding & Removing Elements

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

const fruits = ["Apple", "Banana"];
fruits.push("Mango");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

It changes the original array.

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

const fruits = ["Apple", "Banana", "Mango"];
fruits.pop();

console.log(fruits);
// ["Apple", "Banana"]

It changes the original array.

unshift() – Add at the Beginning
The unshift() method adds a new element at the beginning.

const fruits = ["Banana", "Mango"];
fruits.unshift("Apple");

console.log(fruits);
// ["Apple", "Banana", "Mango"]

It changes the original array.

shift() – Remove from the Beginning
The shift() method removes the first element.

const fruits = ["Apple", "Banana", "Mango"];
fruits.shift();

console.log(fruits);
// ["Banana", "Mango"]

It changes the original array.

2.Copying & Modifying Arrays

slice() – Copy Part of an Array
The slice() method returns a new array containing selected elements from the original array without modifying it.

Syntax

array.slice(startIndex, endIndex)

startIndex → Where to start (included)
endIndex → Where to stop (NOT included)

Important: endIndex is NOT included.

Example 1

const numbers = [10, 20, 30, 40];

const result = numbers.slice(1, 3);

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

Why?
Start at index 1 → 20
Stop before index 3 → 40 not included
So output = [20, 30]

Example 2 – Copy Full Array

const numbers = [1, 2, 3];
const copy = numbers.slice();

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

This is called a shallow copy.

splice() – Add or Remove Anywhere
The splice() method is used to add, remove, or replace elements in an array.

It can change the array at any position.
It modifies the original array.

Syntax

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

startIndex → Where to start
deleteCount → How many elements to remove
item1, item2... → (Optional) Items to add

Example
Remove Elements

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

numbers.splice(1, 2);

console.log(numbers);
// [1, 4]

Why?

Start at index 1 → value 2
Remove 2 elements → 2 and 3
Result: [1, 4]

Add Elements

const numbers = [1, 4];

numbers.splice(1, 0, 2, 3);

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

Start at index 1
Remove 0 elements
Add 2 and 3

Important rule:

splice() inserts items at the startIndex position, and the existing element at that index shifts to the right.
It does NOT insert after it.
It inserts before the element at that index.

3.Searching Methods
includes() – Check if Value Exists

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

console.log(fruits.includes("Apple"));
// true

Returns true or false.

indexOf() – Find Position

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

console.log(fruits.indexOf("Banana"));
// 1

Returns the index of the element.
If not found, it returns -1.

find() – Find First Matching Element
The find() method is used to:

Find the first element that matches a condition
It returns the element itself
If nothing matches, it returns undefined

Syntax

array.find(function(element) {
  return condition;
});

Example

const numbers = [5, 10, 15, 20];

const result = numbers.find(function(num) {
  return num > 10;
});

console.log(result);
// 15

It stops immediately and returns 15.

Important Rule

find() returns the first matching element only
It stops searching after that

4.Looping Methods

forEach() – Loop Through Array
The forEach() method is used to:

Run a function for each element in the array
It does NOT return a new array
It does NOT change the original array (unless you modify it manually)

Syntax

array.forEach(function(element, index, array) {
  // code to run
});

Parameters:
element → current value
index → position (optional)
array → full array (optional)

Example 1

const numbers = [1, 2, 3];

numbers.forEach(function(num) {
  console.log(num);
});

Output

1
2
3

Important Rule
forEach():

Loops through entire array
Does NOT return anything
Always returns undefined

Example 2 – With Index

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

fruits.forEach(function(fruit, index) {
  console.log(index, fruit);
});

Output

0 Apple
1 Banana
2 Mango

map() – Create a New Array
The map() method is used to:

Transform each element in an array
Return a new array
It does NOT change the original array

Syntax

array.map(function(element, index, array) {
  return newValue;
});

element → current value
index → position (optional)
array → full array (optional)

Example 1

const numbers = [1, 2, 3];

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled);
// [2, 4, 6]

What happened?
1 → 1 × 2 = 2
2 → 2 × 2 = 4
3 → 3 × 2 = 6

map() collects all returned values into a new array.

Important Rule

map() ALWAYS returns a new array
It must have a return statement
It does NOT modify the original array

Example 2 – With Arrow Function (Modern Way)

const numbers = [1, 2, 3];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// [2, 4, 6]

filter() – Filter Based on Condition
The filter() method is used to:

Select elements that match a condition
Return a new array
It does NOT change the original array

Syntax

array.filter(function(element, index, array) {
  return condition;
});

If the condition is:
true → element is kept
false → element is removed

Example 1 – Basic Example

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

const even = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(even);
// [2, 4]

Only even numbers are kept.

Important Rule

filter() always returns a new array
It may return fewer elements
It can even return an empty array

Example 2 – Using Arrow Function

const numbers = [5, 10, 15, 20];
const greaterThan10 = numbers.filter(n => n > 10);

console.log(greaterThan10);
// [15, 20]

reduce() – Combine All Values into One
The reduce() method is used to:

Take all array elements
Combine them into a single value

It can return:

A number
A string
An object
Even another array

Syntax

array.reduce(function(accumulator, currentValue) {
  return updatedValue;
}, initialValue);

accumulator → Stores the result step by step
currentValue → Current element in loop
initialValue → Starting value

Example 1 – Add All Numbers

const numbers = [1, 2, 3, 4];
const total = numbers.reduce(function(sum, num) {
  return sum + num;
}, 0);

console.log(total);
// 10

Example 2 – Multiply Numbers

const numbers = [2, 3, 4];
const result = numbers.reduce(function(total, num) {
  return total * num;
}, 1);

console.log(result);
// 24

JavaScript Array Methods – Quick Comparison

This table helps you quickly understand which methods modify the array and which return a new one.

Conclusion

JavaScript array methods may look overwhelming at first, but once you understand how they are grouped, everything becomes much clearer.

Some methods modify the original array (like push(), pop(), and splice()), while others return a new array or value without changing the original (like slice(), map(), filter(), and find()).

The key is to remember:

🔹 Use mutating methods when you want to change the existing array.
🔹 Use non-mutating methods when you want to keep your original data safe.
🔹 Use iteration methods like map(), filter(), and reduce() for cleaner and more readable code.
🔹 Use search methods like includes(), find(), and indexOf() to quickly locate data.

Start practicing them in small examples, and soon you’ll use them naturally in real-world projects.

JavaScript Arrays: A Beginner’s Guide with Examples

Jaya Sudha — Thu, 26 Feb 2026 18:36:20 +0000

Arrays are one of the most important data structures in JavaScript. They allow us to store multiple values in a single variable instead of creating separate variables for each value.

What Is an Array?
An array is a special variable that can hold multiple values.
Each value inside an array is called an element.

Arrays use zero-based indexing, which means the first element starts at index 0.

Example

let arr = [10, 20, 30];

10 → index 0
20 → index 1
30 → index 2

Different Ways to Create an Array

1. Using Array Literal (Most Common Method)

let arr = [1, 2, 3];

This is the simplest and most commonly used method.

2. Using the Array Constructor
The Array() constructor has two main syntaxes, depending on the arguments provided.

To create an array with specific elements: Pass the elements as arguments.

let arr = new Array(1, 2, 3);

//Result: [1, 2, 3]

Although this works, using array literals ([]) is usually cleaner and easier to read.

To create an empty array of a specified length: Pass a single, non-negative integer argument.

let arr = new Array(4);
// Result: an array with a length of 4 empty slots, not [undefined, undefined, undefined, undefined]
// arr[0] is undefined, but the slot is "empty" (sparse array)

Key Differences from Array Literals
While new Array() and [] seem similar, they differ in the following ways:
Single Numeric Argument: The most significant difference is how a single numeric argument is handled.

new Array(5) creates an array with a length of 5 empty slots.
[5] creates an array with one element, the number 5.

The array literal notation is generally considered more efficient, concise, and easier to read.

3. Creating Empty Array
Creating a empty array and push the values to them.

let arr = [];

Then add values:

arr[0] = 10;
arr.push(20);

4. Using Array.of()
Array.of() creates a new array from the given arguments.

let arr = Array.of(1, 2, 3);
let arr1 = Array.of(3);
console.log(arr);
console.log(arr1);

Output

[1, 2, 3]
[3]

5. Using Array.from()
Creates a new array from an iterable or array-like object.
Used to convert something into array.

Example 1

let str = "Apple";
let arr = Array.from(str);
console.log(arr);

Output

["A", "P", "P", "L", "E"]

Example 2

let arr = Array.from({ length: 5 });
console.log(arr);

Output

[undefined, undefined, undefined, undefined, undefined]

6. Using Spread Operator

Spread operator:

...

We can also create a new array by copying another array using the spread operator (...).

Example 1

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

console.log(b);

Output

[1, 2, 3]

Creates a shallow copy
Does NOT modify original array

Example 2
Merge Arrays

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

let c = [...a, ...b];

console.log(c);

Output

[1, 2, 3, 4]

Accessing Array Elements
We access elements using their index number.
Important: Array index always starts from 0.

let fruits = ["apple", "orange", "guava", "grapes"];

console.log(fruits[0]); // apple
console.log(fruits[1]); // orange

Here:
fruits[0] → First element
fruits[1] → Second element

Accessing the Last Element
To access the last element dynamically:

console.log(names[fruits.length - 1]); // grapes

Why length - 1?

Because:

length is a property
The length property returns the size of the array. It represents the highest index in the array plus one.

In most cases, it shows how many elements are inside the array. However, JavaScript arrays can contain empty slots (also called sparse arrays). In such cases, length reflects the array size, not necessarily the number of filled elements.

const arr = [1, , , 4];

console.log(arr.length); // 4

Even though the array length is 4, only 2 elements actually contain values.

Updating Array Elements
Arrays in JavaScript are mutable, which means we can change their values.

We can update an element by assigning a new value to a specific index.

fruits[1] = "Banana";

console.log(fruits);

Output

["apple", "Banana", "guava", "grapes"]

Here, we updated the second element.

Updating All Elements Using Loop
If we want to modify every element, we can use a loop.

Example: Convert all fruits name to uppercase.

for (let i = 0; i < fruits.length; i++) {
  fruits[i] = fruits[i].toUpperCase();
}

console.log(fruits);

Output

["APPLE", "BANANA", "GUAVA", "GRAPES"]

Using forEach (Modern Way)

fruits.forEach((value, index) => {
  fruits[index] = value.toUpperCase();
});

This method is cleaner and more readable.

Conclusion

Arrays are a fundamental part of JavaScript. They help us store and manage multiple values efficiently. Understanding how to create, access, update, and manipulate arrays is essential for building real-world applications.

JavaScript Fundamentals Every Beginner Should Know

Jaya Sudha — Thu, 12 Feb 2026 04:21:55 +0000

What is JavaScript
JavaScript (JS) is a programming language used to make websites interactive and dynamic.(e.g., having complex animations, clickable buttons, popup menus, etc.).

If HTML is the structure of a website and CSS is the design, then JavaScript is the brain that adds behavior.

Founder of JavaScript

JavaScript was created by Brendan Eich.

Created at: Netscape

Year: 1995

Developed in: Just 10 days!

Original name: Mocha

Later renamed to: LiveScript

Finally renamed to: JavaScript

Why JavaScript is called JavaScript
JavaScript was originally called LiveScript. In 1995, it was renamed to JavaScript as a marketing strategy to take advantage of Java’s popularity, even though the two languages are entirely different in design and functionality.

How JavaScript Code Runs in the Browser
JavaScript runs inside the browser’s JavaScript engine (like V8 in Chrome). The engine first parses the code, then uses Just-In-Time (JIT) compilation to convert it into machine code, which is executed by the CPU.

Simple Flow Diagram

Our Code
⬇
JavaScript Engine (V8) (inside our browser)
⬇
Machine Code (0s & 1s)
⬇
CPU Executes
⬇
Output

Is JavaScript compiled or interpreted?
JavaScript was traditionally considered an interpreted language, but modern engines like V8 use Just-In-Time (JIT) compilation. So it is technically both compiled and interpreted.

Just-In-Time (JIT)
Just-In-Time (JIT) compilation is a technique used by modern JavaScript engines (like Google Chrome's V8 and Firefox's SpiderMonkey) to improve performance by dynamically compiling JavaScript code into native, optimized machine code during execution, rather than interpreting it line by line every time.

Conclusion
JavaScript is a powerful language that plays a major role in modern web development. Understanding how it works inside the browser helps developers write efficient and optimized code.

HTML Basics: Understanding the Basic Structure of an HTML Document

Jaya Sudha — Tue, 06 Jan 2026 17:51:57 +0000

HTML
HTML (HyperText Markup Language) is the standard language used to create webpages. It tells the browser how to display content using tags.

Structure of an HTML Document
An HTML document is a file that contains HTML code. It has a predefined structure that tells the browser how to display the web page.
Let’s understand the structure using a simple example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Structure of HTML Document</title>
</head>
<body>
    <!-- Main content of website -->
    <h1>Welcome</h1>
    <p>Beginner friendly blogs</p>
</body>
</html>

1. <!DOCTYPE html>
This tag indicates the version of the HTML. In this case, it indicates that the document is written in HTML5, which is the latest version of HTML.

2. <html>
The <html> tag is the root element of an HTML document, and the lang="en" attribute specifies that the content language is English, which improves accessibility and SEO.

3. <head>
The <head> section contains configuration information such as the page title, styles, and scripts that are required for the webpage but are not visible to users.

4. <title>Structure of HTML Document</title>
The <title> tag defines the title of the webpage shown in the browser tab.

5. <body>
The <body> tag contains all the content that is visible to users on the webpage. It includes text, images, buttons, forms, etc.


HTML comments are used to document code and it is not displayed in the browser. It is used for code readability and notes for developers.

Common Tags Found Inside the<body>

Text and Structure
<h1> to <h6> are HTML heading tags used to define headings in a web page.
They represent different levels of importance, where:
<h1> is the most important and largest heading
<h6> is the least important and smallest heading

<p>: Paragraphs of text.

<div>: A general-purpose container for grouping other elements for styling with CSS or manipulation with JavaScript.

<span>: An inline element for grouping small parts of text for styling.

<br>: Inserts a single line break.

<hr>: Represents a horizontal line.

Lists

<ul>: Unordered (bulleted) lists.
<ol>: Ordered (numbered) lists.
<li>: Individual list items within <ul> or <ol> tags.

Links and Media
<a>: Hyperlinks, used to link to other pages or resources.
<img>: Embeds an image in the document.
<video>: Embeds video content.
<audio>: Embeds audio content

Note: Embeds are used to display external resources inside a web page.

Tables
<table>: Defines a table for displaying tabular data.
<tr>, <th>, <td>: Table rows, headers, and data cells, respectively.

Semantic Elements
Semantic tags make the code easy to understand, help screen readers, and improve SEO.
For example, replacing <div>tags with semantic tags like <header> and <article> makes the code more readable, accessible, and SEO-friendly.

Screen readers are software programs that read web content aloud for visually impaired users.

SEO stands for Search Engine Optimization. It’s the practice of improving a website so that search engines like Google can understand it and show it higher in search results, helping more people visit your site.

Commonly used semantic HTML tags:

<header>– Represents the header of a page or section (usually contains navigation, logo, etc.).

<nav> – Defines a navigation menu with links.

<main> – Represents the main content of the page (should be unique per page).

<section> – Defines a thematic section of content, usually with a heading.

<article> – Represents independent content, like blog posts, news articles, or forum posts.

<aside> – Defines content aside from the main content, like sidebars, ads, or widgets.

<footer> – Represents the footer of a page or section (usually contains copyright, links, contact info).

Benefits of semantic HTML:

Improves SEO – search engines understand your content.
Increases accessibility – screen readers can read content aloud.
Makes code organized and readable.

Conclusion
Understanding the basic structure of an HTML document is essential for beginners. Use semantic tags, write clear headings, and make your pages accessible. These practices improve both user experience and SEO.

Git Basics for Beginners: Understanding Version Control and Git Workflow

Jaya Sudha — Sun, 04 Jan 2026 16:45:43 +0000

What is GIT
Git(Global Information Tracker) is a distributed version control system used to track changes in source code.
It helps us understand what changes were made, who made them, and when they were made by maintaining a complete version history of files.

Git was created by Linus Torvalds in 2005.

Version control system
A Version Control System (VCS) is a software tool that tracks and manages changes to files, primarily source code.
It acts as a history log for a project, allowing developers to compare versions and revert to earlier states if errors occur.

Types of Version Control Systems
There are three types of version control systems:

1. Local VCS
In a Local VCS, versions are stored only on a single computer.

Example:
Manual file backups (copy–paste folders)

Limitations:

No collaboration
Risk of data loss

2. Centralized VCS
In a Centralized VCS, a single central server stores the project.
All developers connect to this server to get and update code.

Example:
SVN (Subversion)

How it works:
One central server contains the code.
Developers checkout, commit, and update files from the server.

3. Distributed VCS
In a Distributed VCS, every developer has a full copy of the repository, including the complete history.

Examples:
Git

Advantages:

Each developer has complete history
Can work offline
Changes are pushed later to platforms like GitHub or GitLab

How git works
A Git process flow diagram illustrates how changes move between different environments using specific commands.

Working Directory → Staging Area → Local Repository → Remote Repository

Files are edited in the Working Directory
git add moves changes to the Staging Area
git commit saves changes into the Local Repository
git push sends commits to the Remote Repository (GitHub/GitLab)

Working Directory
The working directory is the place where developers modify project files before staging and committing them to Git.

Staging Area
The staging area is an intermediate area where changes are reviewed and added before committing them to the local repository.

Repository
A repository is a storage location where Git tracks all versions of a project’s files and maintains its full history.

Local repository:
A local repository is a Git repository that exists on our computer where changes are committed before being pushed to a remote repository.

Remote repository:
A remote repository is an online Git repository hosted on platforms like GitHub or GitLab.

What is GitLab
GitLab is an online platform that hosts Git repositories, allowing developers to manage code, collaborate on our Git projects online.

How to connect Git with GitLab

1. Create a repository on GitLab

2. Connect your local repo:
git remote add origin https://gitlab.com/username/portfolio.git
git push -u origin main

3. Now your local changes are visible on GitLab.

My First Notes on HTML

Jaya Sudha — Fri, 02 Jan 2026 08:35:26 +0000

HTML
HTML stands for HyperText Markup Language. It is used to communicate with the browser using tags. These tags define the structure of a web page.

Founder of HTML
HTML was created by Tim Berners-Lee in 1991. It is the standard markup language used to create web pages.

What is markup language?
A markup language is a language used to structure and format content using tags. It tells the browser how to display text, images, links, and other elements on a web page.
Examples of markup languages: HTML, XML, XHTML

Difference between HTML vs Markup Language vs Programming language
Markup language structures content, HTML is one markup language used for web pages, and programming languages add logic and functionality.

Example:
A markup language is like a vehicle category, and HTML is a bike in that category and the programming language is like a engine that makes the bike run.
Markup Language → Vehicle category
HTML → Bike
Programming Language → Engine that makes the bike run.

Scripting Language
A scripting language is a type of programming language used to write small programs (scripts) that automate tasks and add dynamic behavior to applications, especially web pages.

Scripting Language vs Programming Language
A scripting language is used for automation and interaction, while a programming language is used to develop complete software applications.