They are not just alternatives. They are purpose-built data structures designed to solve specific problems more cleanly, more predictably, and often more efficiently.

Understanding them properly is a strong signal of maturity as a JavaScript developer.

The Problem with Traditional Objects and Arrays

Before jumping into Map and Set, it is important to understand why they exist.

Problem 1: Objects are not true dictionaries

const user = {};
user["name"] = "Prakash";
user[1] = "one";

console.log(user);

Looks fine, but internally JavaScript converts keys into strings.

console.log(Object.keys(user)); 
// ["1", "name"]

Even if you use numbers or objects as keys, they get coerced into strings. This creates limitations when you need precise key control.

Problem 2: Arrays allow duplicates

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

There is no built-in guarantee of uniqueness. You must manually filter duplicates.

These problems led to the introduction of Map and Set.

What is a Map?

A Map is a collection of key-value pairs where keys can be of any type.

Unlike objects, keys are not restricted to strings or symbols.

Syntax

const map = new Map();

Example

const userMap = new Map();

userMap.set("name", "Prakash");
userMap.set(1, "one");

console.log(userMap.get("name")); // Prakash
console.log(userMap.get(1));      // one

Key Characteristics of Map

1. Keys can be anything

const objKey = { id: 1 };

const map = new Map();
map.set(objKey, "data");

console.log(map.get(objKey)); // data

This is impossible with normal objects.

2. Maintains insertion order

const map = new Map();
map.set("a", 1);
map.set("b", 2);

for (let [key, value] of map) {
  console.log(key, value);
}

Output will always follow insertion order.

3. Built-in methods for better control

map.has("a");   // true
map.delete("a");
map.size;       // number of elements
map.clear();

Conceptual Visualization of Map

Think of Map like a structured table:

Key → Value "name" → "Prakash" 1 → "one" { id: 1 } → "data"

Each key directly maps to a value without type restrictions.

What is a Set?

A Set is a collection of unique values.

It automatically removes duplicates and ensures that each value appears only once.

Syntax

const set = new Set();

Example

const numbers = new Set();

numbers.add(1);
numbers.add(2);
numbers.add(2);

console.log(numbers); // Set {1, 2}

Key Characteristics of Set

1. Only unique values

const set = new Set([1, 2, 2, 3]);

console.log(set); // Set {1, 2, 3}

2. No indexing

Unlike arrays, you cannot access elements by index.

set[0]; // undefined

3. Useful methods

set.has(1);    // true
set.delete(1);
set.size;      
set.clear();

Conceptual Visualization of Set

Think of Set as a filter that removes duplicates automatically:

Input: [1, 2, 2, 3, 3] Output: {1, 2, 3}

No duplicates survive.

Map vs Object

Example Comparison

const obj = {};
obj[{}] = "value";

console.log(obj); 
// key becomes "[object Object]"

const map = new Map();
const key = {};

map.set(key, "value");
console.log(map.get(key)); // correct

Map preserves key identity. Object does not.

Set vs Array

Example Comparison

const arr = [1, 2, 2, 3];
const unique = [...new Set(arr)];

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

Set is often used to remove duplicates from arrays.

When to Use Map

Use Map when:

You need key-value storage with flexible key types You need reliable insertion order You frequently add and remove entries You want better performance for lookups

Example Use Case

const cache = new Map();

function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }

  const result = "expensive computation";
  cache.set(key, result);
  return result;
}

When to Use Set

Use Set when:

You need unique values You want to remove duplicates You want fast existence checks

Example Use Case

const visited = new Set();

function visit(page) {
  if (visited.has(page)) {
    console.log("Already visited");
    return;
  }

  visited.add(page);
  console.log("Visiting:", page);
}

Deep Insight

Map and Set are not just new syntax. They represent a shift in thinking.

Objects were designed for structure. Arrays were designed for ordered lists.

But modern applications need:

Precise control over keys Guaranteed uniqueness Efficient lookups

Map and Set solve these problems directly.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

In JavaScript, one concept controls how functions behave depending on how they are called. That concept is the this keyword. Along with this, three powerful methods — call(), apply(), and bind() — allow you to control what this should be.

If you understand these properly, you gain full control over function execution in JavaScript.

What this Means in JavaScript

this refers to the object that is calling the function.

It is not decided where the function is written. It is decided when the function is called.

Caller → Function → this

Whoever calls the function becomes the value of this.

this Inside Normal Functions

function show() {
  console.log(this);
}

show();

• In non-strict mode → this is the global object

• In strict mode → this is undefined

this Inside Objects

const user = {
  name: "Prakash",
  greet() {
    console.log(this.name);
  }
};

user.greet();

Output:

Prakash

Here, user is calling the function, so this refers to user.

Calling Context Changes this (Very Important)

function show() {
  console.log(this);
}

const obj = {
  show
};

// Direct call
show();        // global / undefined

// Object call
obj.show();    // obj

This proves one rule:

this is decided at call time, not at definition time.

Function Borrowing Problem

Sometimes you want to use a method of one object with another object without copying it.

const user1 = {
  name: "Prakash",
  greet() {
    console.log(this.name);
  }
};

const user2 = {
  name: "Rahul"
};

user1.greet(); // Prakash

Now we want user2 to use greet. This is where call(), apply(), and bind() help.

What call() Does

call() allows you to set this manually and immediately execute the function.

Syntax

functionName.call(thisArg, arg1, arg2)

Example

user1.greet.call(user2);

Output:

Rahul

What apply() Does

apply() is similar to call(), but it takes arguments as an array.

Syntax

functionName.apply(thisArg, [arg1, arg2])

Example

function introduce(city, country) {
  console.log(`\({this.name} lives in \){city}, ${country}`);
}

const user = { name: "Prakash" };

introduce.apply(user, ["Roorkee", "India"]);

What bind() Does

bind() does not execute the function immediately. It returns a new function with this permanently set.

Syntax

const newFn = functionName.bind(thisArg)

Example

function greet() {
  console.log(this.name);
}

const user = { name: "Prakash" };

const boundFn = greet.bind(user);
boundFn();

Real-World Use of bind()

const user = {
  name: "Prakash",
  greet() {
    console.log(this.name);
  }
};

setTimeout(user.greet.bind(user), 1000);

Without bind(), this would be lost.

Arrow Functions and this (Important)

const user = {
  name: "Prakash",
  greet: () => {
    console.log(this.name);
  }
};

user.greet(); // undefined

Explanation:

• Arrow functions do not have their own this

• They take this from their surrounding scope

Visual Understanding

• call() → sets this and runs immediately

• apply() → sets this, runs immediately, takes array

• bind() → returns a new function

Difference Between call, apply, and bind

Combined Example

const person1 = { name: "Prakash" };
const person2 = { name: "Aman" };

function greet(age) {
  console.log(`\({this.name} is \){age} years old`);
}

// call
greet.call(person1, 21);

// apply
greet.apply(person2, [22]);

// bind
const fn = greet.bind(person1);
fn(25);

Practice Example :

const car = {
  brand: "Tesla",
  show() {
    console.log(this.brand);
  }
};

const bike = {
  brand: "Yamaha"
};

// call
car.show.call(bike);

// apply
function info(speed, type) {
  console.log(`\({this.brand} runs at \){speed} and is ${type}`);
}

info.apply(bike, ["120km/h", "sports"]);

// bind
const boundInfo = info.bind(car);
boundInfo("200km/h", "electric");

Common Mistakes

Losing this

const user = {
  name: "Prakash",
  greet() {
    console.log(this.name);
  }
};

const fn = user.greet;
fn(); // undefined

Fix

const fixed = user.greet.bind(user);
fixed();

Quick Summary of Rules

• Normal function → depends on how it is called

• Object method → this is the object

• call/apply → manually set this

• bind → returns a function with fixed this

• Arrow function → no own this

Conclusion

The this keyword becomes simple when you focus on one rule:

this depends on the caller

The methods call(), apply(), and bind() give you full control over that behavior.

If you master these concepts, you will write cleaner code, reuse functions efficiently, and avoid common bugs in JavaScript applications.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

The this keyword is one of the most confusing concepts in JavaScript for beginners. The reason is simple: its value is not fixed. It changes depending on how and where a function is called.

Instead of thinking of this as something complicated, you should understand one simple rule:

this refers to the object that is calling the function.

Once you understand the caller, you understand this.

What is this

In JavaScript, this is a special keyword that refers to the execution context of a function. In simpler terms, it points to the object that is currently calling the function.

Think of it like this:

Caller → Function → this

Whoever calls the function becomes the value of this.

this in Global Context

In the global scope, this refers to the global object.

In Browser

console.log(this); 

Output:

window

In Node.js

console.log(this);

Output:

{}

The value depends on the environment, but the idea remains the same: global context means this points to the global object.

this Inside Objects

When a function is inside an object and is called using that object, this refers to the object.

Example

const user = {
  name: "Prakash",
  greet: function () {
    console.log(this.name);
  }
};

user.greet();

Output:

Prakash

Here, user is calling greet(), so this refers to user.

Visual Understanding

Object → Method → this = object

this Inside Functions

This is where most confusion happens.

Example

function show() {
  console.log(this);
}

show();

In non-strict mode (browser), this will point to the global object.

In strict mode:

"use strict";

function show() {
  console.log(this);
}

show();

Output:

undefined

So inside normal functions, this depends on how the function is called, not where it is written.

How Calling Context Changes this

This is the most important concept.

The value of this depends on the call site.

Case 1: Direct Function Call

function test() {
  console.log(this);
}

test();

this → global object (or undefined in strict mode)

Case 2: Object Method Call

const obj = {
  name: "JavaScript",
  show() {
    console.log(this.name);
  }
};

obj.show();

this → obj

Case 3: Assigning Method to Variable

const obj = {
  name: "JavaScript",
  show() {
    console.log(this.name);
  }
};

const fn = obj.show;
fn();

Output:

undefined

Here, the caller is no longer obj. It becomes a normal function call.

Caller-Based Model

Different calls → Different this

• obj.method() → this = obj

• function() → this = global/undefined

• detached function → this lost

Before vs After Understanding

Confusing Approach

const user = {
  name: "Prakash",
  greet: function () {
    console.log(this.name);
  }
};

const greetFn = user.greet;
greetFn(); // undefined

Correct Thinking

Do not look at where the function is defined. Look at how it is called.

Common Mistakes

Mistake 1: Thinking this is fixed

const obj = {
  value: 10,
  show() {
    return this.value;
  }
};

const fn = obj.show;
console.log(fn()); // undefined

Mistake 2: Losing Context

const user = {
  name: "Prakash",
  greet() {
    console.log(this.name);
  }
};

setTimeout(user.greet, 1000); // undefined

Because the function is passed as a callback, it loses its original caller.

Simple Rule to Remember

If you remember only one thing, remember this:

this = the object that calls the function

If there is no object, this becomes global or undefined.

Benefits of Understanding this

Understanding this helps you:

• Write correct object-oriented code

• Avoid bugs in callbacks and event handlers

• Work effectively with frameworks like React and Node.js

• Debug unexpected undefined values

Conclusion

The this keyword is not complicated once you stop thinking about where the function is written and start focusing on how it is called.

Every time you see this, ask one question: Who is calling this function?

That answer will always give you the correct value of this.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

When writing real-world JavaScript applications, extracting values from arrays and objects often becomes repetitive and verbose. Destructuring solves this problem by allowing you to unpack values into variables in a concise and readable way. It is one of the most useful features introduced in modern JavaScript and is widely used in frontend and backend development.

What is Destructuring

Destructuring is a syntax that allows you to extract values from arrays or properties from objects and assign them directly to variables.

Without Destructuring

const user = {
  name: "Prakash",
  age: 21,
  city: "Roorkee"
};

const name = user.name;
const age = user.age;
const city = user.city;

console.log(name, age, city);

With Destructuring

const user = {
  name: "Prakash",
  age: 21,
  city: "Roorkee"
};

const { name, age, city } = user;

console.log(name, age, city);

Destructuring removes repetition and makes code easier to read.

Destructuring Arrays

Array destructuring is based on position (index).

Basic Example

const numbers = [10, 20, 30];

const [a, b, c] = numbers;

console.log(a); // 10
console.log(b); // 20
console.log(c); // 30

Skipping Values

const numbers = [10, 20, 30];

const [first, , third] = numbers;

console.log(first); // 10
console.log(third); // 30

Using Rest Operator

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

const [first, ...rest] = numbers;

console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]

Swapping Variables

let a = 5;
let b = 10;

[a, b] = [b, a];

console.log(a); // 10
console.log(b); // 5

Destructuring Objects

Object destructuring is based on property names, not position.

Basic Example

const user = {
  name: "Prakash",
  age: 21
};

const { name, age } = user;

console.log(name); // Prakash
console.log(age);  // 21

Renaming Variables

const user = {
  name: "Prakash",
  age: 21
};

const { name: userName, age: userAge } = user;

console.log(userName); // Prakash
console.log(userAge);  // 21

Nested Object Destructuring

const user = {
  name: "Prakash",
  address: {
    city: "Roorkee",
    state: "Uttarakhand"
  }
};

const { address: { city, state } } = user;

console.log(city);  // Roorkee
console.log(state); // Uttarakhand

Destructuring in Function Parameters

function printUser({ name, age }) {
  console.log(`Name: \({name}, Age: \){age}`);
}

const user = { name: "Prakash", age: 21 };

printUser(user);

This pattern is heavily used in React components and backend APIs.

Default Values in Destructuring

Default values help when a property or index is missing.

Object Default Values

const user = {
  name: "Prakash"
};

const { name, age = 18 } = user;

console.log(name); // Prakash
console.log(age);  // 18

Array Default Values

const numbers = [10];

const [a, b = 20] = numbers;

console.log(a); // 10
console.log(b); // 20

Before vs After Comparison

Without Destructuring

function getUserData(user) {
  const name = user.name;
  const age = user.age;
  const city = user.city;

  console.log(name, age, city);
}

With Destructuring

function getUserData({ name, age, city }) {
  console.log(name, age, city);
}

Array Example Without

const arr = [1, 2, 3];

const first = arr[0];
const second = arr[1];

Array Example With

const [first, second] = [1, 2, 3];

Benefits of Destructuring

Destructuring reduces repetitive code and improves readability. It allows you to extract only the data you need, making functions cleaner and easier to maintain. It is especially useful when working with APIs, React props, and configuration objects. It also helps prevent errors caused by repeatedly accessing deeply nested properties.

Advanced Patterns

Nested with Default

const user = {
  name: "Prakash",
  address: {}
};

const {
  address: { city = "Unknown" }
} = user;

console.log(city); // Unknown

Rest with Objects

const user = {
  name: "Prakash",
  age: 21,
  city: "Roorkee"
};

const { name, ...rest } = user;

console.log(name); // Prakash
console.log(rest); // { age: 21, city: "Roorkee" }

Function Return Destructuring

function getData() {
  return {
    id: 1,
    title: "JavaScript"
  };
}

const { id, title } = getData();

console.log(id, title);

Mental Model

For objects, destructuring works by matching property names to variables. For arrays, destructuring works based on index positions. Understanding this difference helps avoid most common mistakes.

Common Mistakes

Wrong Property Name

const user = { name: "Prakash" };

const { username } = user; // undefined

Unsafe Nested Destructuring

const user = {};

const { address: { city } } = user; // error

Safe Fix

const { address: { city } = {} } = user;

Conclusion

Destructuring is not just a syntax improvement but a better way of writing JavaScript. It simplifies data extraction, reduces code repetition, and makes your logic more expressive. Once you start using it consistently, it becomes a natural part of how you write modern JavaScript.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Arrays are one of the most fundamental data structures in JavaScript. In simple cases, they store values in a single, linear structure. But as applications grow, data often becomes more complex — and that’s where nested arrays come into play.

Nested arrays allow us to represent hierarchical or grouped data. However, working with deeply nested structures can quickly become difficult.

This is where array flattening becomes an essential concept.

Flattening transforms a nested array into a single-level array, making it easier to process, iterate, and manipulate.

Understanding Nested Arrays

A nested array is simply an array that contains other arrays as its elements.

const data = [1, 2, [3, 4], [5, [6, 7]]];

In this example:

• The array contains numbers

• It also contains arrays inside it

• Those arrays can themselves contain more arrays

This creates a multi-level structure, similar to a tree.

Conceptual View

Think of it like this:

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

Each level introduces another layer of depth.

Why Flattening Matters

At first glance, nested arrays might seem harmless. But in real-world scenarios, they introduce complexity.

1. Simplifying Data Processing

Most array operations in JavaScript — like map, filter, and reduce — work best on flat arrays.

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

If you want to process all values uniformly, flattening becomes necessary:

[1, 2, 3, 4]

2. Working with API Data

APIs often return deeply nested JSON structures.

const users = [
  ["Prakash", "Rahul"],
  ["Aman", ["Riya", "Neha"]]
];

To extract meaningful data, flattening helps convert it into a usable format.

3. Cleaner Logic and Readability

Flat arrays:

• Reduce nested loops

• Simplify conditions

• Improve readability

4. Real Application Use Cases

• Rendering lists in UI frameworks

• Data normalization before storing in databases

• Processing logs or analytics data

• Handling recursive structures like comments or folders

The Core Idea of Flattening

Flattening is not just a function — it’s a way of thinking.

At its core:

“If an element is an array, break it down further. If it’s not, keep it.”

Example

Input:
[1, [2, [3, 4]], 5]

Output:
[1, 2, 3, 4, 5]

Step-by-Step Thought Process

Start:
[1, [2, [3, 4]], 5]

Take 1 → keep it

Encounter [2, [3, 4]] → open it

Take 2 → keep it

Encounter [3, 4] → open it

Take 3, 4 → keep both

Take 5 → keep it

Final:
[1, 2, 3, 4, 5]

This mental model is the foundation of all flattening techniques.

Approaches to Flatten Arrays

There are multiple ways to flatten arrays in JavaScript. Each approach reflects a different way of thinking.

1. Using flat() — The Built-in Method

JavaScript provides a built-in method for flattening arrays.

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

arr.flat(2);
// [1, 2, 3, 4]

The number passed defines the depth.

For unknown depth:

arr.flat(Infinity);

Why It’s Useful

• Clean and readable

• No manual logic required

• Ideal for everyday usage

2. Recursive Approach — Breaking the Problem Down

Recursion mirrors the structure of nested arrays perfectly.

function flattenArray(arr) {
  let result = [];

  for (let item of arr) {
    if (Array.isArray(item)) {
      result = result.concat(flattenArray(item));
    } else {
      result.push(item);
    }
  }

  return result;
}

Deep Understanding

This works because:

• Each nested array is treated as a smaller version of the same problem

• The function keeps calling itself until no arrays remain

This is similar to how tree traversal works.

3. Functional Approach with reduce()

This method uses a more declarative style.

function flatten(arr) {
  return arr.reduce((acc, curr) => {
    return Array.isArray(curr)
      ? acc.concat(flatten(curr))
      : acc.concat(curr);
  }, []);
}

Insight

Instead of building step-by-step manually:

• You accumulate results

• Combine them recursively

This approach is common in functional programming.

4. Iterative Approach Using a Stack

Recursion is elegant, but not always ideal for very deep structures.

An alternative is using a stack:

function flatten(arr) {
  const stack = [...arr];
  const result = [];

  while (stack.length) {
    const item = stack.pop();

    if (Array.isArray(item)) {
      stack.push(...item);
    } else {
      result.push(item);
    }
  }

  return result.reverse();
}

Key Idea

• Replace recursion with manual control

• Use a stack to simulate depth traversal

Understanding Depth in Flattening

Not all flattening needs to be complete.

Sometimes you only want to flatten one or two levels.

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

arr.flat(1);
// [1, 2, [3, 4]]

This is useful when:

• You want partial transformation

• You want to preserve some structure

Edge Cases to Consider

Real-world data is rarely clean.

1. Empty Arrays

[1, [], [2, []]]

2. Mixed Data Types

[1, "text", [true, [null]]]

3. Deeply Nested Structures

[[[[[1]]]]]

4. Sparse Arrays

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

Good implementations handle all of these gracefully.

Performance Considerations

Different approaches behave differently depending on data size.

Recursion

• Easy to write

• May cause stack overflow for very deep arrays

Iterative (Stack)

• More control

• Safer for large data

flat()

• Optimized internally

• Best for most practical use cases

Conceptual Connection

Flattening is more than just an array problem.

It connects to:

• Tree traversal

• Recursion patterns

• Depth-first search

• Data transformation pipelines

Understanding flattening deeply strengthens your ability to solve complex problems.

Final Thoughts

Array flattening might look like a small utility problem, but it teaches an important lesson:

Complex structures can often be simplified by breaking them down step by step.

Once you understand the idea of:

• Identifying structure

• Decomposing it

• Rebuilding it

You unlock a powerful way of thinking that applies far beyond arrays.

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

Strings are one of the most commonly used data types in JavaScript. In the early days of JavaScript, developers relied on string concatenation using the + operator to build dynamic strings. While functional, this approach quickly becomes difficult to read and maintain as applications grow.

With the introduction of ES6 (ECMAScript 2015), JavaScript provided a better alternative: Template Literals. They simplify string handling, improve readability, and allow embedding expressions directly inside strings.

This article explores template literals in depth, from basics to real-world usage.

Problems with Traditional String Concatenation

Before template literals, developers used + to combine strings and variables.

Example: Basic Concatenation

const name = "Prakash";
const age = 21;

const message = "My name is " + name + " and I am " + age + " years old.";
console.log(message);

This works, but introduces several issues:

• Reduced readability

• Repetitive syntax

• Higher chance of missing quotes or operators

Example: Complex UI String

const product = "Laptop";
const price = 50000;

const html = "<div>" +
               "<h1>" + product + "</h1>" +
               "<p>Price: ₹" + price + "</p>" +
             "</div>";

Problems:

• Structure is hard to visualize

• Debugging becomes difficult

• Not scalable for larger templates

Example: Multi-line Strings

const text = "Line 1\n" +
             "Line 2\n" +
             "Line 3";

Problems:

• Use of \n reduces clarity

• Not visually aligned with output

• Harder to maintain

What are Template Literals?

Template literals are string literals enclosed by backticks (`) instead of single (') or double (") quotes.

They provide:

• Built-in string interpolation

• Multi-line string support

• Embedded expressions

• Cleaner syntax

Template Literal Syntax

const str = `This is a template literal`;

Key distinction:

• " " and ' ' → traditional strings

• ` ` → template literals

Embedding Variables (String Interpolation)

Instead of concatenation, template literals allow embedding variables using ${}.

const name = "Prakash";
const age = 21;

const message = `My name is \({name} and I am \){age} years old.`;
console.log(message);

Benefits:

• Eliminates +

• Improves readability

• Makes strings more natural to write

Embedding Expressions

Template literals allow execution of JavaScript expressions inside ${}.

const a = 10;
const b = 20;

console.log(`Sum is ${a + b}`);

console.log(`Random number: ${Math.random()}`);

console.log(`Is adult: ${age >= 18}`);

This makes template literals highly flexible and powerful.

Multi-line Strings

Template literals support multi-line strings without special characters.

Traditional approach

const text = "Line 1\n" +
             "Line 2\n" +
             "Line 3";

Template literal approach

const text = `Line 1
Line 2
Line 3`;

Advantages:

• Cleaner syntax

• Matches actual output visually

• Easier to edit and maintain

Real-World Use Cases

1. Dynamic HTML Generation

const user = {
  name: "Prakash",
  role: "Developer"
};

const card = `
  <div class="card">
    <h2>${user.name}</h2>
    <p>${user.role}</p>
  </div>
`;

Used in:

• Frontend rendering

• Server-side templates

• Email generation

2. Logging and Debugging

const id = 101;
const status = "success";

console.log(`Request \({id} completed with status: \){status}`);

Improves clarity in logs and debugging.

3. API Responses

function greet(user) {
  return `Welcome \({user.name}, your balance is ₹\){user.balance}`;
}

4. SQL Query Construction (with caution)

const table = "users";

const query = `SELECT * FROM ${table}`;

Note: Avoid direct interpolation in production queries. Use parameterized queries to prevent SQL injection.

5. Conditional Rendering

const isLoggedIn = true;

const message = `User is ${isLoggedIn ? "logged in" : "not logged in"}`;

Before vs After Comparison

Before (Concatenation)

const name = "Prakash";
const msg = "Hello " + name + ", welcome to our platform!";

After (Template Literal)

const msg = `Hello ${name}, welcome to our platform!`;

Before (Complex Structure)

const html = "<ul>" +
               "<li>" + item1 + "</li>" +
               "<li>" + item2 + "</li>" +
             "</ul>";

After (Cleaner Version)

const html = `
  <ul>
    <li>${item1}</li>
    <li>${item2}</li>
  </ul>
`;

Readability Improvement

Template literals significantly improve:

• Code clarity

• Maintainability

• Team collaboration

• Debugging efficiency

They reduce visual noise and make code closer to natural language.

Advanced Concept: Tagged Templates

Template literals can be customized using tagged functions.

function highlight(strings, value) {
  return `\({strings[0]}**\){value}**${strings[1]}`;
}

const result = highlight`Hello ${"Prakash"}!`;
console.log(result);

Output:

Hello **Prakash**!

Use cases:

• Styling libraries (e.g., styled-components)

• Internationalization

• Security sanitization

Common Mistakes

1. Using quotes instead of backticks

// Incorrect
const msg = "Hello ${name}";

// Correct
const msg = `Hello ${name}`;

2. Overcomplicating expressions

// Hard to read
`${user.age > 18 ? user.name.toUpperCase() : "Minor"}`

Better approach:

const displayName = user.age > 18 ? user.name.toUpperCase() : "Minor";
`${displayName}`

Why Template Literals Matter in Modern JavaScript

Template literals are widely used in:

• React applications

• Node.js backends

• Logging systems

• API responses

• Dynamic UI rendering

They are considered standard practice in modern JavaScript development.

Conclusion

Template literals are more than a syntactic improvement. They fundamentally change how developers work with strings by making code cleaner, more expressive, and easier to maintain.

They:

• Replace complex concatenation

• Enable dynamic string creation

• Improve readability

• Support scalable development

Adopting template literals is essential for writing modern JavaScript.

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

When you begin learning JavaScript, one of the most important concepts you encounter is operators. Operators are fundamental because they allow your program to perform actions such as calculations, comparisons, and logical decisions.

Every real-world application—whether it is an e-commerce website, authentication system, or dashboard relies heavily on operators.

In this blog, we will move step by step:

• From basic understanding

• To real-world usage

• To practical coding patterns

What Are Operators?

Operators are symbols used to perform operations on values (operands).

let result = 10 + 5;

In this example:

• 10 and 5 are operands

• + is the operator

• The result is 15

Operators tell JavaScript what action needs to be performed.

1. Arithmetic Operators

Arithmetic operators are used for mathematical calculations.

Basic Example

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.33
console.log(a % b); // 1

Real-World Example: Shopping Cart Calculation

In an e-commerce application, arithmetic operators are used to calculate total price:

let price = 499;
let quantity = 2;
let discount = 100;

let total = (price * quantity) - discount;

console.log("Total price:", total);

This is exactly how most online platforms calculate totals before checkout.

Modulus Operator in Real Use

console.log(10 % 2); // 0
console.log(7 % 2);  // 1

Use cases:

• Checking even or odd numbers

• Alternating UI elements (for example, table rows)

• Pagination logic

2. Comparison Operators

Comparison operators compare two values and return a boolean (true or false).

Basic Example

console.log(5 > 3); // true
console.log(2 < 1); // false

Critical Concept: == vs ===

console.log(5 == "5");   // true
console.log(5 === "5");  // false

• == performs type conversion

• === checks both value and type

Real-World Problem

let input = "0";

if (input == 0) {
  console.log("Accepted");
}

This may lead to unexpected behavior because "0" is converted to 0.

Best Practice

Always prefer strict comparison:

if (input === 0) {
  // safer comparison
}

Real-World Example: Authentication

let enteredPassword = "1234";
let actualPassword = 1234;

if (enteredPassword === actualPassword) {
  console.log("Login successful");
} else {
  console.log("Invalid credentials");
}

This prevents logical and security issues.

3. Logical Operators

Logical operators are used to combine multiple conditions.

AND Operator (&&)

All conditions must be true.

let age = 20;
let hasID = true;

if (age > 18 && hasID) {
  console.log("Access granted");
}

Real-world usage:

• Verification systems

• Entry conditions

• Form validation

OR Operator (||)

At least one condition must be true.

let isAdmin = false;
let isEditor = true;

if (isAdmin || isEditor) {
  console.log("Access granted");
}

Real-world usage:

• Role-based permissions

• Feature access control

NOT Operator (!)

Reverses a boolean value.

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in");
}

Truth Tables

AND (&&)

OR (||)

4. Assignment Operators

Assignment operators are used to assign and update values.

Example

let balance = 1000;

balance += 500; // deposit
balance -= 200; // withdrawal

console.log(balance); // 1300

Real-World Use Case

These operators are commonly used in:

• Banking systems

• Counters (likes, views)

• Inventory updates

Mini Project: Combining All Operators

Let’s simulate a small real-world scenario.

Problem

• Calculate total price

• Apply discount if user is eligible

• Display final result

Solution

let price = 200;
let quantity = 3;
let age = 22;
let isMember = true;

// Step 1: Calculate total
let total = price * quantity;

// Step 2: Apply discount
if (isMember && age > 18) {
  total -= 100;
}

// Step 3: Output result
console.log("Final amount:", total);

Common Mistakes

1. Using == instead of ===

// Incorrect
if (value == "10")

// Correct
if (value === "10")

2. Unexpected Type Conversion

console.log("5" + 2); // "52"

JavaScript converts numbers to strings in this case.

3. Misunderstanding Logical Conditions

if (true && false) // always false

Understanding truth tables is important.

Operator Categories Summary

Conclusion

Operators are the foundation of JavaScript logic. They allow you to:

• Perform calculations

• Make decisions

• Control application flow

Without operators, writing meaningful programs would not be possible.

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

When we use Linux, we mostly interact with it through commands. But those commands are only interfaces.

The real system exists underneath, inside the filesystem.

Linux follows a powerful design philosophy: the operating system exposes its internal state through files. If you know where to look, you can understand how everything works — users, processes, networking, services, and even hardware.

In this exploration, I moved beyond basic commands and investigated how Linux actually works internally by studying its filesystem structure.

Starting Point — The Root of Everything

Linux begins from a single root directory:

/

Unlike operating systems that separate drives (like C:, D:), Linux builds everything under one unified tree.

This structure organizes the system clearly:

• Configuration → /etc

• Processes → /proc

• Devices → /dev

• Logs → /var/log

• Boot system → /boot

This unified design solves fragmentation problems and makes the system easier to inspect, debug, and understand.

1. /etc — Where System Behavior Is Defined

The /etc directory contains configuration files that control how the system behaves.

User Management — /etc/passwd and /etc/shadow

• /etc/passwd → stores user information (username, UID, home directory, shell)

• /etc/shadow → stores encrypted passwords

Problem

If password data were stored in a publicly readable file, it would create a major security risk.

Solution

Linux separates user identity and authentication:

• /etc/passwd → readable by all programs

• /etc/shadow → restricted access

Insight

Security in Linux is not only about permissions, but also about data separation and system design.

2. DNS Resolution — How Linux Finds Websites

To understand how Linux connects to websites, I explored:

• /etc/hosts

• /etc/resolv.conf

• /etc/nsswitch.conf

How it works

When you access a domain:

1. Linux checks /etc/hosts (local mapping)

2. If not found, it queries DNS servers from /etc/resolv.conf

3. The lookup order is defined in /etc/nsswitch.conf

Problem

Systems need a reliable way to resolve domain names, even without external DNS.

Solution

Linux provides a flexible, file-based resolution system.

Real-world use

Developers use /etc/hosts to override domains locally for testing applications.

Insight

Networking behavior in Linux is not hidden — it is fully configurable through simple files.

3. /proc — The Kernel’s Live Interface

The /proc directory is not stored on disk. It is a virtual filesystem created by the kernel in real time.

What it exposes

• Process information → /proc/[PID]/status

• Open files → /proc/[PID]/fd

• System stats → /proc/cpuinfo, /proc/meminfo

Problem

Applications and tools need access to internal system state (processes, memory, CPU usage).

Solution

Instead of complex APIs, Linux exposes this data as files.

Investigation

When I explored /proc/$$, I could directly see details about the current running shell process.

Insight

Tools like ps, top, and lsof are not special — they simply read from /proc. This means the system is transparent and you can build your own monitoring tools.

4. Network Routing — How Data Finds Its Path

Routing information is available in:

• /proc/net/route

• ip route output

What it represents

The routing table defines:

• Where packets should go

• Which interface to use

• Which gateway to use

Problem

Without routing rules, the system would not know how to send data across networks.

Solution

Linux maintains routing information in structured, readable form.

Insight

Even complex networking decisions are exposed as data. Linux does not hide its networking logic — it makes it inspectable.

5. systemd — Service Management Through Files

Modern Linux systems use systemd to manage services.

Where configuration lives

• /etc/systemd/system/

• /lib/systemd/system/

Each service is defined using a configuration file.

Problem

Managing system services manually would be complex and inconsistent.

Solution

Linux uses declarative configuration files to define:

• How services start

• Dependencies

• Restart policies

Insight

Enabling a service does not install anything new. It simply creates links that include the service in the boot process.

6. /var/log — The System’s Memory

Logs are stored in /var/log.

What logs contain

• Login attempts

• System errors

• Service activity

• Kernel messages

Problem

Without logs, debugging and monitoring system behavior would be extremely difficult.

Solution

Linux records system activity in structured log files.

Real-world use

System administrators use logs to debug production issues and detect security threats.

Insight

Linux is highly observable. If something goes wrong, the evidence is usually already recorded.

7. /dev — Everything Is a Device File

The /dev directory represents hardware and virtual devices as files.

Examples

• /dev/null → discards output

• /dev/zero → generates zero bytes

• /dev/urandom → generates random data

Problem

Programs need a consistent way to interact with hardware.

Solution

Linux abstracts devices into files, allowing standard operations like read and write.

Insight

This reflects a core Unix philosophy: everything is treated as a file, making the system consistent and simple.

8. File Permissions — The Security Model

Linux controls access using permissions:

• Owner

• Group

• Others

Special Case — SUID

Some binaries have a special permission:

-rwsr-xr-x

This allows them to run with the owner’s privileges.

Problem

Some programs require elevated privileges but giving full root access is dangerous.

Solution

Linux allows controlled privilege escalation using mechanisms like SUID.

Insight

Linux security is granular. It enables limited privilege access instead of unrestricted control.

9. /boot — How the System Starts

The /boot directory contains files required to start the system.

Contents

• Kernel (vmlinuz)

• Initial RAM disk (initrd)

• Bootloader files

Boot process

1. Firmware starts the system

2. Bootloader loads the kernel

3. Kernel initializes hardware

4. systemd starts services

Problem

The system needs a way to load essential components before the full OS is available.

Solution

Linux uses an initial temporary environment (initrd) to prepare the system.

Insight

Linux solves complex startup problems using staged initialization rather than a single step.

10. Hardware Information — Direct from the Kernel

System information is available in:

• /proc/cpuinfo

• /proc/meminfo

Observation

Memory may appear “used” even when the system is idle.

Problem

Unused memory is wasted memory.

Solution

Linux uses free memory for caching to improve performance.

Insight

Linux prioritizes efficiency — it uses available resources instead of leaving them idle.

Conclusion

This exploration changed how I understand Linux.

Instead of seeing it as a command-line system, I now see it as a system built around files:

• Configuration is stored in files

• System state is exposed through files

• Hardware is accessed through files

This design makes Linux:

• Transparent

• Debuggable

• Flexible

Linux is not a black box. It is a system you can inspect, understand, and even reconstruct from its filesystem.

Understanding the filesystem is not just a skill — it is the key to understanding how Linux actually works.

If you’ve ever been confused about when to use each one, this guide will clear things up with simple explanations and practical examples.

What is the Spread Operator?

The spread operator (...) is used to expand elements from an iterable (like an array or object) into individual elements.

Think of it as: “spreading things out”

Example with Arrays :

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

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

Here, the spread operator takes each element from numbers and expands it into the new array.

Example with Objects :

const user = { name: "Rahul", age: 22 };
const updatedUser = { ...user, city: "Jodhpur" };

console.log(updatedUser);
// { name: "Rahul", age: 22, city: "Jodhpur" }

What is the Rest Operator?

The rest operator (...) does the opposite. It collects multiple elements and packs them into a single structure (usually an array).

Think of it as: “gathering things together”

Example in Function Parameters :

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4));
// 10

Here, all arguments are collected into the numbers array.

Example with Destructuring :

const [first, ...rest] = [10, 20, 30, 40];

console.log(first); // 10
console.log(rest);  // [20, 30, 40]

Spread vs Rest: Key Differences

Expanding vs Collecting (Core Idea)

• Spread = Expanding values

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

• Rest = Collecting values

  function demo(...args) {
    console.log(args);
  }
  demo(1, 2, 3); // [1, 2, 3]
  

Using Spread with Arrays and Objects

1. Copying Arrays (Shallow Copy)

const original = [1, 2, 3];
const copy = [...original];

2. Merging Arrays

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

3. Copying Objects

const obj1 = { a: 1 };
const obj2 = { ...obj1 };

4. Merging Objects

const objA = { name: "Rahul" };
const objB = { age: 22 };

const combined = { ...objA, ...objB };

Practical Use Cases

1. Cloning State (React Example)

const newState = { ...oldState, isLoggedIn: true };

2. Updating Arrays Without Mutation

const items = ["apple", "banana"];
const newItems = [...items, "orange"];

3. Flexible Function Arguments

function logAll(...args) {
  args.forEach(arg => console.log(arg));
}

4. Removing Elements Using Destructuring

const [remove, ...remaining] = [1, 2, 3];

Visualizing the Concept

Spread (Expanding)

[1, 2, 3]  →  1, 2, 3

Rest (Collecting)

1, 2, 3  →  [1, 2, 3]

Common Mistakes

• Using rest outside valid positions (e.g., not at the end of parameters)

• Confusing spread with deep copy (it’s only a shallow copy)

• Overwriting properties unintentionally in object spread

Conclusion

Even though they share the same syntax (...), the spread and rest operators serve opposite roles:

• Spread → expands values

• Rest → collects values

Mastering these operators will make your JavaScript code cleaner, more flexible, and easier to maintain—especially in modern frameworks like React.

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

Your index.js became 800 lines long. You had functions named doStuff() and handleThing() that you were scared to delete because you didn't know what depended on them. Variables were clashing. You were scrolling forever just to find the function you wrote last week.

Sound familiar?

This is exactly the problem JavaScript modules were built to solve.

Why Modules Are Needed

Imagine building a house and putting every single thing — furniture, plumbing, wiring, walls — in one giant room. Technically it might work, but it would be a nightmare to maintain, fix, or extend.

That's what happens when all your JavaScript lives in one file.

Here's a real-world scenario. You're building a web app that handles user authentication, fetches data from an API, formats dates, and handles UI interactions. Without modules, your file might look like this:

Everything dumped in one file — auth logic, API calls, date formatting, UI code... 1,200 lines later...

You can't reuse any of it easily. If your teammate wants to use your formatDate() function in another project, they'd have to copy-paste it manually. If you rename a variable, you might break something three screens away. Testing becomes a guessing game.

Modules fix this by letting you split your code into small, focused files — each doing one job well. Then you connect them together using import and export.

Exporting — Sharing Code from a Module

When you want to make something available from a file, you export it.

Think of a file as a shop. By default, everything inside that shop is private — customers can't see it. Exporting is like putting something in the display window so others can use it.

There are two ways to export in JavaScript:

1. Named Exports

You can export multiple things from a single file by name.

mathUtils.js

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

export const PI = 3.14159;

Each of these is exported individually, and each has its own name. You can have as many named exports as you want in a file.

2. Default Export

A default export is the "main thing" a file exports. There can only be one default export per file.

greet.js

export default function greet(name) { 
    return Hello, ${name}!; 
}

Think of it as the star product of the shop — the one thing that represents what this file is primarily about.

Importing — Using Code from Another Module

Once something is exported, you can import it into another file and use it.

Importing Named Exports

When you import named exports, you use curly braces and the exact name used during export.

app.js

 import { add, subtract, PI } from './mathUtils.js';

 console.log(add(5, 3)); //Output : 8
 console.log(subtract(10, 4)); // 6 
 console.log(PI); // 3.14159

The names inside the curly braces must match the exported names exactly. This is important.

Importing Default Exports

When importing a default export, you don't use curly braces, and you can give it any name you like.

app.js

import greet from './greet.js';

console.log(greet('Arjun')); // Hello, Arjun!

Since there's only one default export per file, JavaScript knows exactly what you're asking for.

Importing Everything

If you want to import all named exports from a file at once, you can use the * syntax and give it a namespace:

import * as MathUtils from './mathUtils.js';

console.log(MathUtils.add(2, 3)); // 5 
console.log(MathUtils.PI); // 3.14159

Renaming Imports

You can also rename named imports to avoid conflicts:

import { add as addNumbers } from './mathUtils.js';

console.log(addNumbers(1, 2)); // 3

Default vs Named Exports — Which One to Use?

This is a common question, and the short answer is: it depends on what the file is for.

Use named exports when:

• Your file exports multiple related utilities (like a math or string helper file)

• You want callers to be explicit about what they're using

• You're building a library or utility module

stringUtils.js

export function capitalize(str) { ... } 
export function trim(str) { ... } 
export function slugify(str) { ... }

Use default exports when:

• Your file represents one main thing — a component, a class, a single function

• You want flexibility in naming on the consumer side

UserCard.js

export default function UserCard({ name, email }) { ... }

Can you use both?

Yes! A file can have both named exports and a default export.

api.js

export const BASE_URL = 'https://api.example.com'; 
export const TIMEOUT = 5000;

export default async function fetchUser(id) { 
const response = await fetch(\({BASE_URL}/users/\){id}); 
return response.json(); 
}

Then you import them like this:

import fetchUser, { BASE_URL, TIMEOUT } from './api.js';

A Real-World Example

Let's put it all together with a mini project structure.

Imagine you're building a simple blog app. Here's how you'd split it into modules:

File: utils/formatDate.js

export function formatDate(dateString) { 
const date = new Date(dateString); 
return date.toLocaleDateString('en-IN', { year: 'numeric', month: 'long', day: 'numeric', }); 
}

File: api/posts.js

const API_URL = 'https://jsonplaceholder.typicode.com';

export async function fetchPosts() { 
const res = await fetch(${API_URL}/posts); 
return res.json(); 
}

export async function fetchPostById(id) { 
const res = await fetch(\({API_URL}/posts/\){id}); 
return res.json(); 
}

File: components/renderPost.js

import { formatDate } from '../utils/formatDate.js';

export default function renderPost(post) { 
return <article> 
        <h2>${post.title}</h2> 
        <p>${post.body}</p> 
        <small> Posted on: ${formatDate(post.date)}</small> 
</article> ; 
}

File: app.js (main entry point)

import { fetchPosts } from './api/posts.js'; 
import renderPost from './components/renderPost.js';

async function init() { 
const posts = await fetchPosts(); 
const container = document.getElementById('app'); container.innerHTML = posts.map(renderPost).join(''); 
}

init();

Each file has a single clear job. formatDate.js handles dates. posts.js handles API calls. renderPost.js renders HTML. app.js connects everything.

This is the power of modules.

Benefits of Modular Code

Let's make it crystal clear why you should care.

1. Maintainability When a bug appears in date formatting, you go straight to formatDate.js. You don't dig through 900 lines of mixed code. Each file has one job, so you always know where to look.

2. Reusability Your formatDate.js can be imported in ten different files across your project — or even in a completely different project. Write once, use everywhere.

3. Avoiding Naming Conflicts In old-school JavaScript without modules, all variables and functions lived in the global scope. Two libraries using a variable called data would clash. With modules, each file has its own scope. There's no pollution, no conflicts.

4. Better Collaboration In a team, different developers can work on different modules without stepping on each other's code. Merge conflicts become rare because everyone is working in their own file.

5. Easier Testing Small, focused modules are easy to test in isolation. You can import just formatDate.js and write unit tests for it without bringing in the entire application.

6. Lazy Loading (Performance) Modern bundlers and browsers can load modules on demand — only when they're needed. This means your app doesn't have to load everything upfront, leading to faster initial load times.

How to Use Modules in the Browser

If you're running JavaScript directly in the browser (without a bundler like Webpack or Vite), just add type="module" to your script tag:

That's it. The browser will handle the imports and exports natively.

Note: Modules must be served over a server (even a local dev server). They won't work if you just open an HTML file directly in your browser because of CORS restrictions. Use VS Code's Live Server extension or npx serve during development.

Quick Reference — Cheat Sheet

NAMED EXPORT: export function myFunction() {} export const myValue = 42;

NAMED IMPORT: import { myFunction, myValue } from './myFile.js';

DEFAULT EXPORT: export default function myFunction() {}

DEFAULT IMPORT: import myFunction from './myFile.js';

IMPORT ALL: import * as MyModule from './myFile.js';

RENAME ON IMPORT: import { myFunction as renamed } from './myFile.js';

MIXED (default + named): import defaultExport, { namedExport } from './myFile.js';

Wrapping Up

JavaScript modules aren't just a syntax feature — they're a mindset shift. They push you to think about your code in terms of small, independent, reusable pieces rather than one giant tangled mess.

Start small. Next time you write a utility function, put it in its own file and export it. Import it where needed. As your project grows, you'll thank yourself for this habit.

The best codebases aren't the ones with the cleverest tricks — they're the ones where every file does exactly one thing, and does it well.

That's what modules give you.

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

An array like ["MacBook", 16, 2026] doesn't tell us much. What does the 16 mean? RAM? Screen size? Price in thousands?

That is where Objects come to the rescue!

1. Why Objects? The Problem with Arrays

Before we learn what objects are, let's understand the problem they solve. Imagine you're building a user profile for a website. You might start with an array:

// What does each value mean?? 
const user = ["Prakash", 20, "Rajasthan", true, "developer"];

// To get the profession, you need to remember it's at index 4
console.log(user[4]); // "developer" — but why 4? Who knows!

This is a nightmare. Index numbers are meaningless. If you add a new field in the middle, every index after it breaks. Your code becomes impossible to read and maintain.

Now here's the same data as an object:

// Crystal clear — no guessing!
const user = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  isLoggedIn: true,
  profession: "developer"
};

// Now it's obvious what you're getting
console.log(user.profession); // "developer" — perfectly readable!

💡 Rule of Thumb: Use an Array when you have a list of similar items (e.g., a list of product names). Use an Object when you're describing a single thing with multiple different attributes.

2. What Are Objects? The Key-Value Structure

In JavaScript, an object is a standalone entity that holds related data together. Think of it like a real-world object. A car has a color, a brand, and a top speed. In code, an object allows us to group these related variables into one neat package.

Objects work on a key-value pair system:

• Key → The name/label of the property (e.g., name)

• Value → The data assigned to that label (e.g., "Prakash")

Think of it like filling out a form:

Values can be any data type - strings, numbers, booleans, arrays, or even other objects.

3. Creating an Object

The most common way to create an object is using Object Literals the curly braces {}.

// A real-world example: A Person Object
const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

Each key-value pair is separated by a comma. The key and value are separated by a colon.

You might also see the new Object() syntax in older code:

// The verbose way — avoid this in modern JS
const person = new Object();
person.name = "Prakash";
person.age = 20;
person.state = "Rajasthan";

Best Practice: Always use Object Literals {}. They're shorter, more readable, and the standard in modern JavaScript.

4. Accessing Properties — Two Ways

Once you have an object, you need to read its data. JavaScript gives you two ways to do this.

A. Dot Notation (Most Common)

Use this when you know the property name upfront. Clean and readable.

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  skills: ["JavaScript", "React", "Node.js"]
};

console.log(person.name);      // "Prakash"
console.log(person.age);       // 20
console.log(person.skills);    // ["JavaScript", "React", "Node.js"]

// You can chain it to access items inside an array!
console.log(person.skills[0]); // "JavaScript"

B. Bracket Notation

Use this when the key has a space, starts with a number, or when you're using a variable to look up a key dynamically.

const profile = {
  name: "Prakash",
  age: 20,
  "full name": "Prakash Kumar",  // key with a SPACE
  "2024score": 95                // key starting with a number
};

// CASE 1: Key has a space (dot notation would crash here!)
console.log(profile["full name"]); // "Prakash Kumar"
// profile.full name ← this would be a SYNTAX ERROR ❌

// CASE 2: Dynamic access with a variable
const query = "age";
console.log(profile[query]);       // 20 — reads the variable, not literal "query"

// CASE 3: Looping with bracket notation
const keys = ["name", "age"];
keys.forEach(key => {
  console.log(profile[key]); // "Prakash", then 20
});

Pro Tip: Bracket notation is incredibly useful when building search features or filters — any time the key is determined at runtime (from user input, for example).

5. Updating, Adding & Deleting Properties

Objects are mutable - you can freely change them after creation. Even if you declare the object with const, its properties can still be modified.

Updating a Property

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

person.age = 21; // Prakash just had a birthday! 🎂
console.log(person.age); // 21

Adding a New Property

person.isStudent = true;
person.college = "IIT Jodhpur";

console.log(person);
// { name: "Prakash", age: 21, state: "Rajasthan", isStudent: true, college: "IIT Jodhpur" }

Deleting a Property

delete person.state;

console.log(person.state); // undefined

Checking if a Property Exists

console.log("isStudent" in person); // true
console.log("state" in person);     // false — we deleted it!

Why const doesn't freeze objects: const prevents you from doing person = {} (reassigning the variable). But it doesn't stop you from modifying what's inside the object. Use Object.freeze(person) if you truly want an immutable object.

6. Array vs Object — What's the Difference?

This trips up a lot of beginners. Here's the definitive breakdown:

// Use ARRAY when all items are the same kind of thing
const students = ["Prakash", "Riya", "Arjun", "Meera"];
const scores   = [85, 92, 78, 96];

// Use OBJECT when describing one specific entity
const student = {
  name: "Prakash",
  score: 85,
  grade: "A",
  passed: true
};

// COMBINE BOTH: Array of Objects — an extremely common pattern!
const classroom = [
  { name: "Prakash", score: 85, grade: "A"  },
  { name: "Riya",    score: 92, grade: "A+" },
  { name: "Arjun",   score: 78, grade: "B+" }
];

// Access: first student's name
console.log(classroom[0].name);  // "Prakash"
console.log(classroom[1].grade); // "A+"

Array of Objects is one of the most common patterns in real-world JavaScript — you'll see this in every API response, database query result, and React component.

7. Looping Through an Object

To walk through every key-value pair in an object, we use the for...in loop.

const person = {
  name: "Prakash",
  age: 21,
  isStudent: true,
  college: "IIT Jodhpur"
};

// for...in gives you each KEY one at a time
for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Prakash
// age: 21
// isStudent: true
// college: IIT Jodhpur

Object Utility Methods

JavaScript also provides three handy built-in methods to extract parts of an object as arrays:

const person = { name: "Prakash", age: 21, college: "IIT Jodhpur" };

// Object.keys() → array of all keys
console.log(Object.keys(person));
// ["name", "age", "college"]

// Object.values() → array of all values
console.log(Object.values(person));
// ["Prakash", 21, "IIT Jodhpur"]

// Object.entries() → array of [key, value] pairs
console.log(Object.entries(person));
// [["name","Prakash"], ["age",21], ["college","IIT Jodhpur"]]

// Practical use: loop with destructuring
for (const [key, value] of Object.entries(person)) {
  console.log(`\({key} → \){value}`);
}

8. Nested Objects & Methods

Objects can contain other objects inside them — this is called nesting. Objects can also hold functions as values — these are called methods.

Nested Objects

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

  // Nested object: address lives inside student
  address: {
    city: "Jodhpur",
    state: "Rajasthan",
    pincode: "342001"
  },

  // Array inside an object
  skills: ["JavaScript", "React", "Node.js"]
};

// Access nested properties: chain the dots
console.log(student.address.city);   // "Jodhpur"
console.log(student.address.state);  // "Rajasthan"
console.log(student.skills[0]);      // "JavaScript"

// Update a nested property
student.address.city = "Jaipur"; // Prakash moved cities!

Methods — Functions Inside Objects

const calculator = {
  brand: "Casio",

  // Functions stored as values are called "methods"
  add: function(a, b) {
    return a + b;
  },

  // Modern shorthand (preferred)
  multiply(a, b) {
    return a * b;
  },

  subtract(a, b) {
    return a - b;
  }
};

console.log(calculator.add(10, 5));      // 15
console.log(calculator.multiply(4, 3));  // 12
console.log(calculator.subtract(9, 4));  // 5

9. Real-World Example - E-Commerce Product

Let's put everything together with the kind of data structure you'd actually use when building an e-commerce site.

const product = {
  id: "MBP-001",
  name: "MacBook Pro 14",
  brand: "Apple",
  price: 199999,       // in rupees ₹
  inStock: true,
  rating: 4.8,
  reviewCount: 2341,

  // Nested object
  specs: {
    chip: "Apple M3 Pro",
    ram: 18,
    storage: 512,
    display: "14.2-inch Liquid Retina XDR",
    battery: "22 hours"
  },

  // Array of strings
  colors: ["Space Black", "Silver"],

  // Array of objects
  reviews: [
    { user: "Riya_Dev",  stars: 5, comment: "Incredible performance!" },
    { user: "TechArjun", stars: 4, comment: "Great but expensive" }
  ],

  // Methods
  getDescription() {
    return `\({this.name} by \){this.brand} — ₹${this.price.toLocaleString()}`;
  },

  isAffordable(budget) {
    return this.price <= budget;
  }
};

// Reading various properties
console.log(product.name);              // "MacBook Pro 14"
console.log(product.specs.ram);         // 18
console.log(product.colors[0]);         // "Space Black"
console.log(product.reviews[0].user);   // "Riya_Dev"
console.log(product.reviews[0].stars);  // 5

// Calling methods
console.log(product.getDescription());
// "MacBook Pro 14 by Apple — ₹1,99,999"

console.log(product.isAffordable(150000)); // false
console.log(product.isAffordable(250000)); // true

// Looping through specs
console.log("=== Tech Specs ===");
for (let spec in product.specs) {
  console.log(`  \({spec}: \){product.specs[spec]}`);
}
// chip: Apple M3 Pro
// ram: 18
// storage: 512
// display: 14.2-inch Liquid Retina XDR
// battery: 22 hours

This is almost exactly the kind of data you'd receive from a backend API. The ability to navigate nested objects, loop through properties, and call methods is a daily reality as a JavaScript developer.

Where You'll Use Objects Every Day

• User Auth & Profiles — { id, name, email, role, avatar }

• Shopping Cart — { productId, qty, price, discount }

• API Responses — Every REST API returns JSON, which is just objects

• Config & Settings — { theme, language, notifications }

• React State & Props — Almost always objects under the hood

Conclusion

Objects are the backbone of JavaScript. They make your data readable, searchable, and organized. By mastering:

• Key-Value pairs

• Dot and Bracket notation

• Updating, Adding, Deleting

• Nested objects and methods

• Looping with for...in and Object.entries()

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

• Node.js is single-threaded

• Node.js is non-blocking

• Node.js uses an Event Loop

But what actually happens inside Node.js when we run a program?

What happens when we execute:

node index.js

How does Node.js handle:

• File reading

• API calls

• Timers

• Database queries

while still remaining fast and scalable?

To understand this, we must understand three core components of Node.js:

1. V8 Engine – executes JavaScript

2. libuv – handles asynchronous operations

3. Event Loop – coordinates everything

Let’s explore them step by step.

1. What Exactly is Node.js?

Before diving deeper, we must clear one important confusion.

Node.js is NOT a programming language.

Node.js is a JavaScript runtime environment.

This means Node.js provides everything required to run JavaScript outside the browser.

A Node.js runtime contains multiple components:

• JavaScript Engine (V8)

• Event Loop

• libuv threadpool

• OS bindings

• memory management

• networking APIs

In simple terms:

2. Understanding Runtime with a Simple Analogy

Similarly:

Your Code → JavaScript

Player → Node.js Runtime

Node.js provides the environment required to run JavaScript.

3. What is a JavaScript Engine?

A JavaScript engine is a program that executes JavaScript code. Most engines today are built with similar core components:

• Parser: Transforms source code into an Abstract Syntax Tree (AST)

• Interpreter: Executes the code line-by-line initially

• JIT Compiler: Compiles hot code paths into optimized machine code

• Garbage Collector: Reclaims memory no longer in use

❊ Key JavaScript Engines

4. The V8 Engine – The Heart of Node.js

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++.

At the core of Node.js lies the V8 JavaScript Engine.

V8 was developed by Google and is also used in Chrome.

Its job is simple:

Convert JavaScript code into machine code so the computer can execute it.

❊ What V8 Actually Does

V8 performs several critical tasks:

• Parses JavaScript

• Compiles JavaScript into machine code

• Executes code

• Manages memory

• Runs garbage collection

• Maintains the call stack

Workflow

1. Parsing: JavaScript is parsed into an AST.

2. Ignition (Interpreter): Executes unoptimized bytecode quickly.

3. Turbofan (JIT Compiler): Optimizes frequently executed code into fast machine code.

Example

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

console.log(square(5)); // 25

• Initially run by Ignition

• Optimized by Turbofan if called repeatedly

5. Call Stack – Where Code Executes

Inside the V8 engine there is a Call Stack.

The call stack keeps track of which function is currently executing.

Example:

function greet() {
  sayHello();
}

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

greet();

Execution order:

Call Stack

 console.log 
 sayHello()  
 greet()     
 global()    

Functions enter the stack when called and leave after execution.

This is why JavaScript is called single-threaded execution.

Only one function executes at a time in the call stack.

6. The Problem with Synchronous Code

Imagine Node.js handled everything synchronously.

Example:

const fs = require("fs");

const data = fs.readFileSync("bigFile.txt");
console.log(data);

If the file takes 5 seconds to read, the entire program stops.

Nothing else runs.

This is called blocking behavior.

Node.js solves this problem using asynchronous architecture.

And that is where libuv comes in.

7. libuv – The Hidden Power of Node.js

libuv is a C library used internally by Node.js.

Its job is to handle asynchronous operations.

Examples:

• File system operations

• DNS lookups

• compression

• cryptography

• background tasks

❊ libuv Threadpool

libuv provides a threadpool.

By default:

Threadpool Size = 4 threads

These threads run heavy operations in the background.

Example:

Read File
Hash Password
Compress Data
Write File

These tasks are executed without blocking the main thread.

You can even change the threadpool size:

process.env.UV_THREADPOOL_SIZE = 8;

8. Event Loop – The Coordinator

The Event Loop is the central coordinator of Node.js.

It constantly checks:

Is the call stack empty?

If the stack is empty, it pulls tasks from queues and executes them.

❊ Simple Event Loop Flow

This loop runs continuously while the Node.js process is alive.

❊ Example to Understand Event Loop

console.log("Start");

setTimeout(() => {
  console.log("Timer finished");
}, 0);

console.log("End");

Output:

Start
End
Timer finished

❊ Step-by-Step Execution

Step 1

console.log("Start")

Executed immediately.

Step 2

setTimeout(...)

Timer is handled by libuv timers system.

Callback waits in queue.

Step 3

console.log("End")

Runs immediately.

Step 4

Timer finishes → callback enters queue.

Step 5

Event loop pushes callback to stack.

Timer finished

❊ Event Loop Phases (Advanced)

Node.js Event Loop has multiple phases.

Order:

1 Timers
2 Pending Callbacks
3 Idle / Prepare
4 Poll
5 Check
6 Close Callbacks

Examples:

setTimeout → Timers phase
I/O callbacks → Poll phase
setImmediate → Check phase

This is how Node.js schedules asynchronous work efficiently.

❊ Complete Node.js Architecture

Here is the complete flow:

Your JavaScript Code
        ↓
V8 Engine executes synchronous code
        ↓
Async operations detected
        ↓
libuv handles background tasks
        ↓
Callbacks added to queues
        ↓
Event Loop picks them
        ↓
Callback executed by V8

❊ Real-World Analogy (Restaurant System)

Imagine a restaurant.

Actors:

Restaurant → Node.js Runtime
Waiter → Event Loop
Manager → V8 Engine
Chefs → libuv Threadpool
Customers → Users
Food Orders → JavaScript Tasks

Workflow:

1️⃣ Customer places order

2️⃣ Waiter forwards order to chefs

3️⃣ Chefs cook food in kitchen

4️⃣ Waiter serves when ready

The waiter never cooks.

Similarly:

Event Loop does NOT execute code
V8 executes the code

The event loop simply manages tasks.

❊ Conclusion

Whenever you run Node.js, remember this pipeline:

JavaScript Code
       ↓
V8 Engine executes code
       ↓
Async tasks sent to libuv
       ↓
Callbacks stored in queues
       ↓
Event Loop pushes callbacks
       ↓
V8 executes them

This architecture is the reason Node.js can handle thousands of concurrent connections efficiently.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Instead of writing scattered functions and variables, OOP helps us organize code into objects and classes.

JavaScript supports OOP concepts, making code more reusable, modular, and easier to maintain.

❊ What is Object-Oriented Programming?

⤑ Object-Oriented Programming is a way of writing code where we create objects that represent real-world entities.

These objects contain:

• Properties → data about the object
• Methods → actions the object can perform

❊ Example: Car Object

Instead of listing properties and methods separately, we can visualize a Car object that contains both data (properties) and behavior (methods).

In this example, the Car object has:

Properties (data)
• brand
• color
• speed

Methods (behavior)
• start()
• stop()
• accelerate()

Instead of writing separate variables and functions, Object-Oriented Programming groups them together inside a single object.

❊ Real World Analogy: Blueprint → Objects

Think of a class as a blueprint.

Example:

Blueprint → Car Design
Object → Actual Car

One blueprint can create many cars.

❊ What is a Class in JavaScript?

⤑ A class is a template used to create objects.

It defines the properties and methods that objects will have.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " car started");
  }
}

Here:

Car → class
brand, color → properties
start() → method

❊ Creating Objects from a Class

⤑ Once we define a class, we can create objects using the new keyword.

Example:

const car1 = new Car("Toyota", "Red");
const car2 = new Car("BMW", "Black");

car1.start();
car2.start();

Output:

Toyota car started
BMW car started

Each object has its own data but shares the same structure.

❊ Constructor Method

⤑ The constructor() method is a special method used to initialize object properties.

It automatically runs when a new object is created.

Example:

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

const p1 = new Person("Rahul", 22);
console.log(p1.name);

Output:

Rahul

The constructor helps us assign values when creating objects.

❊ Methods Inside a Class

⤑ Methods define the behavior of objects.

Example:

class Dog {
  constructor(name) {
    this.name = name;
  }

  bark() {
    console.log(this.name + " is barking");
  }
}

const dog1 = new Dog("Rocky");
dog1.bark();

Output:

Rocky is barking

Methods allow objects to perform actions.

❊ Basic Idea of Encapsulation

⤑ Encapsulation means bundling data and methods together inside a class.

It helps protect data and organize code.

Example:

class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  getBalance() {
    return this.balance;
  }
}

Here:

balance → data
deposit() → modifies data
getBalance() → accesses data

All related functionality is inside the class.

❊ Why Use Object-Oriented Programming?

OOP helps developers:

• Organize code better
• Reuse code easily
• Reduce duplication
• Model real-world systems
• Maintain large applications

Many modern frameworks and applications rely on OOP concepts.

❊ Conclusion

⤑ Object-Oriented Programming is an important concept in JavaScript that helps structure code effectively.

In this blog we learned:

• What Object-Oriented Programming means
• Blueprint → Object analogy
• What classes are in JavaScript
• Creating objects using classes
• Constructor methods
• Methods inside classes
• Basic idea of encapsulation

Understanding OOP will help you write clean, scalable, and maintainable JavaScript applications.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine a normal day in your life.

You wake up and think:

• If it is morning, I will brush my teeth

• If it is Sunday, I will rest

• If it is Monday, I will go to work

Your brain is constantly making decisions.

Programming works the same way.

A computer program also needs to decide:

• Should this code run?

• Or should another code run?

• Or should it skip something?

This process is called Control Flow.

Definition

Control Flow determines the order in which instructions are executed in a program.

Without control flow, a program would execute every line from top to bottom with no decision-making.

❊Example Without Control Flow

console.log("Wake up");
console.log("Go to gym");
console.log("Go to office");
console.log("Sleep");

The program will run every line.

But what if today is Sunday?

You might not want to go to the office.

This is where control flow statements come into play.

❊ Types of Control Flow Statements

The most common ones are:

1. if statement

2. if-else statement

3. else-if ladder

4. switch statement

These help programs make decisions.

2. The if Statement

The if statement executes code only if a condition is true.

Syntax

if (condition) {
    // code runs if condition is true
}

❊ Real Life Example

Imagine a school rule:

If a student’s marks are greater than 40, they pass.

let marks = 50;

if (marks > 40) {
  console.log("You passed the exam");
}

Step-by-Step Execution

1. Program reads the value of marks

2. It checks the condition marks > 40

3. If the condition is true, the code inside {} runs

4. If the condition is false, the program skips it

Example Output

You passed the exam

When the condition is false

let marks = 30;

if (marks > 40) {
  console.log("You passed");
}

Output:

(no output)

Because the condition is false.

3. The if-else Statement

Sometimes we want the program to do something else if the condition is false.

That is where if-else is used.

Syntax

if (condition) {
   // runs if condition is true
} else {
   // runs if condition is false
}

❊ Real Life Example

At a movie theatre:

• If age ≥ 18 → Allowed

• Else → Not allowed

Example

let age = 16;

if (age >= 18) {
  console.log("You can watch the movie");
} else {
  console.log("You are not allowed");
}

❊ Step-by-Step Execution

1. Program checks age >= 18

2. If true → first block runs

3. If false → else block runs

Output

You are not allowed

4. The Else If Ladder

Sometimes there are multiple conditions.

Example: grading system

This is where else-if ladder is useful.

Syntax

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Example

let marks = 82;

if (marks >= 90) {
  console.log("Grade A");
} 
else if (marks >= 75) {
  console.log("Grade B");
}
else if (marks >= 50) {
  console.log("Grade C");
}
else {
  console.log("Fail");
}

⤑ Step-by-Step Execution

Marks = 82

1. Check marks >= 90 → false

2. Check marks >= 75 → true

3. Program prints Grade B

4. Remaining conditions are skipped

Output

Grade B

5. The Switch Statement

The switch statement is used when there are many possible fixed values.

It is commonly used for:

• menus

• days of week

• months

• options

⤑ Syntax

switch(expression) {

  case value1:
    code
    break;

  case value2:
    code
    break;

  default:
    code
}

⤑ Example: Day of Week

let day = 3;

switch(day) {

  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid day");
}

⤑ Step-by-Step Execution

1. day = 3

2. Switch checks cases

3. case 3 matches

4. Prints Wednesday

❊ Understanding break in Switch

break stops execution.

Without break, the program continues executing the next cases.

⤑ Example Without break

let day = 2;

switch(day) {

  case 1:
    console.log("Monday");

  case 2:
    console.log("Tuesday");

  case 3:
    console.log("Wednesday");
}

Output

Tuesday
Wednesday

This happens because there is no break.

6. When to Use Switch vs If-Else

⤑ Use if-else when:

• conditions are ranges

Example:

marks > 90
age >= 18
temperature > 30

⤑ Use switch when:

• checking specific values

Example:

day = Monday
role = admin
menu option = 1

⤑ Example

Good for if-else

if (marks > 90)

Good for switch

switch(day)

❊ Comparison Table

❊ Conclusion

Control flow is one of the most fundamental concepts in programming.

It allows programs to:

• make decisions

• run different code paths

• handle real-world logic

The most important control flow statements are:

• if

• if-else

• else-if ladder

• switch

Understanding when to use each of them will make your programs cleaner and easier to understand.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

In programming, things often take time like downloading a large image or fetching data from a server. Instead of making the whole program wait and freeze, JavaScript uses "Promises" to manage these tasks.

1. What is a Promise?

⤑ Imagine Jethalal wants to impress Babita Ji by bringing her a special "Chocolate Gunda" from Ahmedabad.

• The Promise: Jethalal tells Babita Ji, "I will bring you the sweets by evening."

• The Wait: Babita Ji doesn't know yet if she will get the sweets or if Jethalal will forget. She just has his "Promise."

⤑ In JavaScript, a Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.

2. The Three States of a Promise

⤑ Just like Jethalal’s commitment, every Promise goes through three stages:

1. Pending: Jethalal is currently on his way. The result is unknown.

2. Fulfilled (Resolved): Jethalal arrives with the sweets! Babita Ji is happy.

3. Rejected: Jethalal gets stuck in a traffic jam or Bagha forgets to order them. Babita Ji is disappointed.

3. The Basic Methods: Handling One Promise

⤑ When you have a single promise, you use these three methods to handle the result.

then() – The Success Story

⤑ If Jethalal successfully brings the sweets, what should Babita Ji do? She handles the success using .then().

myPromise.then((message) => {
  console.log("Success: " + message);
});

⤑ This code says, "If the promise is fulfilled, take the result and do something with it."

catch() – The Backup Plan

⤑ If Jethalal fails (the promise is rejected), Babita Ji needs to handle the error. She uses .catch().

myPromise.catch((error) => {
  console.log("Error: " + error);
});

⤑ This code says, "If something goes wrong, tell me what the error is so I can fix it."

finally() – The Final Word

⤑ Whether Jethalal brings the sweets or fails, Bapuji will definitely give him a lecture. This happens no matter what.

myPromise.finally(() => {
  console.log("Process finished. Bapuji starts his lecture.");
});

⤑ This code runs at the very end, regardless of whether the promise succeeded or failed.

4. Handling Multiple Promises (Static Methods)

⤑ Sometimes, we have many promises happening at once. This is where things get interesting in Gokuldham!

Promise.all() – The Team Player

⤑ Scenario: Tapu Sena (Tapu, Sonu, Goli) decides to clean the clubhouse.

• If all of them finish their work, the party starts.

• If even one person fails, the whole plan is cancelled.

Promise.all([promiseTapu, promiseSonu, promiseGoli])
  .then((results) => console.log("Clubhouse is clean!"))
  .catch((err) => console.log("Someone failed, party cancelled!"));

⤑ It waits for all to succeed. If one fails, the whole thing fails immediately.

Promise.allSettled() – The Report Card

⤑ Scenario: Bhide gives different tasks to everyone for Ganpati Festival.

• Bhide wants a report of who finished and who failed.

• He doesn't stop the festival if one person fails; he just wants to know the status of everyone.

Promise.allSettled([task1, task2, task3])
  .then((results) => console.log("Here is the status of every task."));

⤑ Behavior: It waits for all promises to finish (either success or failure) and returns an array of results.

Promise.race() – The Fast and Curious

⤑ Scenario: Jethalal, Bhide, and Iyer are all racing to reach the Soda Shop first to talk to Abdul.

• The person who reaches first wins.

• It doesn't matter if they succeeded or failed; the first one to "cross the finish line" (settle) wins.

Promise.race([jethaRun, bhideRun, iyerRun])
  .then((winner) => console.log("The first person reached!"));

⤑ Behavior: It returns the result of the first promise that finishes, whether it's a success or an error.

Promise.any() – The First Success

⤑ Scenario: Popatlal is looking for a marriage proposal. He sends his profile to three different matchmakers.

• He only cares about the first one who says "Yes!" (success).

• If the first one says "No," he waits for the second one.

• He only gets sad if everyone says "No."

Promise.any([matchMaker1, matchMaker2, matchMaker3])
  .then((firstYes) => console.log("Popatlal is getting married!"))
  .catch((err) => console.log("All rejected. Cancel the umbrella."));

⤑ Behavior: It waits for the first successful promise. It only fails if every single promise fails.

❊ Table :

❊ Conclusion

JavaScript Promises are just like the commitments made in Gokuldham Society. They help us manage time, handle failures gracefully, and coordinate between different tasks. Just remember: keep your promises like Jethalal tries to (mostly) and handle your errors like Bhide handles his "Zamana!"

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

If you're learning JS, arrow functions will quickly become your favorite feature.

Let’s understand them step by step.

❋ What Are Arrow Functions?

Arrow functions are a shorter way to write functions in JavaScript.

They were introduced in ES6 (2015) to reduce boilerplate code and improve readability.

Instead of writing:

function greet(name) {
  return "Hello " + name;
}

We can write:

const greet = (name) => {
  return "Hello " + name;
};

❋ Basic Arrow Function Syntax

Here is the general syntax:

const functionName = (parameters) => {
  // code
};

• const → storing function in a variable

• (parameters) → input values

• => → arrow symbol

• {} → function body

❋ Arrow Function with One Parameter

If there is only one parameter, you can remove parentheses.

Normal function:

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

Arrow function:

const square = num => {
  return num * num;
};

❋ Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

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

Example:

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

❋ Implicit Return vs Explicit Return

This is the most powerful feature.

🔹 Explicit Return (using return keyword)

const multiply = (a, b) => {
  return a * b;
};

🔹 Implicit Return (no return keyword)

If your function has only one expression, you can remove {} and return.

const multiply = (a, b) => a * b;

JavaScript automatically returns the value.

That’s called implicit return.

❋ Basic Difference: Normal Function vs Arrow Function

❋ Why Arrow Functions Matter

• Less boilerplate

• Cleaner callbacks

• Perfect for array methods like:

  • map()

  • filter()

  • reduce()

• Modern JavaScript standard

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

• API data comes in arrays

• Database results come in arrays

• UI lists are rendered from arrays

If you master array methods, your code becomes:

• Cleaner

• Shorter

• More readable

• More professional

Let’s understand the most important ones.

push()

This method adds new element(s) to the end of the attached JavaScript array, changing the original array, and returns the new length of the array. This method accepts the elements you wish to add at the end of the array as parameters.

myArray.push(element1, element2, ..., elementX);

Let’s now create a new array then add some more fruits using the push() method:

pop()

This method removes the last element of the attached JavaScript array, altering the original array, and returns the removed element.

myArray.pop();

Note : You don’t pass anything as a parameter to the pop() method.

Here’s an example showing how to use the pop() method:

shift()

The shift() method removes the first element of an array. It works similarly to the pop() method, but instead of removing from the end, it removes from the beginning of the attached array. It returns the removed/shifted element.

myArray.shift();

Let’s now create a new array of animal names and then learn how to use the shift() method to remove the first name from the array:

unshift()

The unshift() method works similarly to the push() method as it is used to add new elements to an array, but to the beginning of an array. This method takes the element(s) you wish to add at the beginning of the array as parameters. It also returns the new length of the array.

myArray.unshift(element1, element2, ..., elementX);

Let’s now create a new array of food names and then add more food names to the array using the unshift() method:

❋ Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

Let's Understand these concepts :

✤ Map

map() creates a new array by transforming each element.

⤑ It does NOT modify the original array.

Syntax

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

In the callback, only the array element is required. Usually some action is performed on the value and then a new value is returned.

Traditional For Loop vs map()

🔸 Using For Loop

🔸 Using map()

So basically the map function maps each every value in the array and transforms it based on a given condition.

✤ Filter()

The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

Syntax

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

The syntax for filter is similar to map, except the callback function should return true to keep the element, or false otherwise. In the callback, only the element is required.

Examples

In the following example, odd numbers are "filtered" out, leaving only even numbers.

In the next example, filter() is used to get all the students whose grades are greater than or equal to 90.

✤ Reduce()

The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

Syntax

arr.reduce(callback[, initialValue])

The callback argument is a function that will be called once for every item in the array. This function takes four arguments, but often only the first two are used.

• accumulator - the returned value of the previous iteration

• currentValue - the current item in the array

• index - the index of the current item

• array - the original array on which reduce was called

• The initialValue argument is optional. If provided, it will be used as the initial accumulator value in the first call to the callback function.

Examples

The following example adds every number together in an array of numbers.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

In the next example, reduce() is used to transform an array of strings into a single object that shows how many times each string appears in the array. Notice this call to reduce passes an empty object {} as the initialValue parameter. This will be used as the initial value of the accumulator (the first argument) passed to the callback function.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

✤ forEach()

The JavaScript Array forEach() method is a built-in function that executes a provided function once for each array element. It does not return a new array and does not modify the original array. It's commonly used for iteration and performing actions on each array element.

Return value

It does not return a new array. It returns undefined. This method may or may not change the original array provided as it depends upon the functionality of the argument function.

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine you have a webpage with:

• headings

• paragraphs

• buttons

• cards

• links

CSS needs a way to answer one simple question:

Which element should I style?

That’s exactly what CSS selectors do.

Selectors are used to choose HTML elements so CSS can apply styles to them.

Without selectors, CSS wouldn’t know where to apply styles.

CSS Selectors = Ways to Choose Elements

Think of CSS selectors like addressing people.

• “All students” → element selector

• “Students wearing red shirts” → class selector

• “That one student with roll no. 12” → ID selector

CSS works the same way.

Element Selector

The element selector selects HTML elements by their tag name.

Example

HTML

<p>This is a paragraph</p>
<p>This is another paragraph</p>

CSS

p {
  color: blue;
}

Result

All <p> elements become blue.

Use element selectors when:

• You want to style all elements of the same type

Class Selector

The class selector targets elements with a specific class.

Syntax

.class-name

Example

HTML

<p class="highlight">Important text</p>
<p>Normal text</p>

CSS

.highlight {
  color: red;
}

Result

Only the paragraph with class highlight is red.

Use class selectors when:

• You want to style multiple specific elements

ID Selector

The ID selector targets a single unique element.

Syntax

#id-name

Example

HTML

<h1 id="main-title">Welcome</h1>

CSS

#main-title {
  color: green;
}

Result

Only that one heading is styled.

Rules:

• IDs must be unique

• Use IDs sparingly

Group Selectors

Group selectors let you apply the same style to multiple selectors.

Example

CSS

h1, h2, p {
  font-family: Arial;
}

Result

h1, h2, and p all use Arial.

Use group selectors to:

• Avoid repeating CSS

• Keep styles clean

Descendant Selectors

Descendant selectors target elements inside other elements.

Syntax

parent child

Example

HTML

<div class="card">
  <p>This text is inside card</p>
</div>

<p>This text is outside card</p>

CSS

.card p {
  color: blue;
}

Result

Only the paragraph inside .card turns blue.

This is very useful for layouts and components.

Basic Selector Priority (High-Level Only)

Sometimes multiple selectors target the same element.

CSS follows a simple priority rule:

ID selector > Class selector > Element selector

Example

p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}

If an element has all three:

<p id="special" class="text">Hello</p>

Red wins because ID has higher priority.

Don’t worry about memorizing this now.
Just remember: ID is stronger than class, class is stronger than element.

CSS works like this:

1. Read selector

2. Find matching elements

3. Apply styles

Why CSS Selectors Are So Important

Selectors are the foundation of CSS.

If you understand selectors:

• Styling becomes easy

• Layouts make sense

• Debugging becomes faster

Everything in CSS starts with:

Which element am I targeting?

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Type this by hand:

<div class="container">
  <header class="header">
    <h1>Welcome</h1>
  </header>
  <main class="content">
    <p>This is a paragraph.</p>
  </main>
</div>

That's a lot of typing. Opening tags, closing tags, attributes, indentation. Every single character.

Now imagine building a full webpage with dozens or hundreds of elements. It gets tedious fast.

There has to be a better way.

What Is Emmet?

Emmet is a shortcut language that lets you write HTML incredibly fast.

Instead of typing full HTML tags, you type a short abbreviation and press Tab. Emmet expands it into complete HTML.

Example:

Type this:

div.container

Press Tab

Get this:

<div class="container"></div>

Emmet isn't a separate tool you install. It's built into most modern code editors like VS Code, Sublime Text, and Atom. It just works.

Why Beginners Should Use Emmet

1. Write HTML 10x faster Less typing means you focus on structure, not syntax.

2. Fewer mistakes Emmet generates valid HTML. No forgotten closing tags or typos.

3. Learn HTML structure better Emmet forces you to think in terms of hierarchy and nesting.

4. Industry standard Professional developers use Emmet daily. Learning it early gives you good habits.

5. It's optional You can always type HTML manually. Emmet is there when you want speed.

How Emmet Works

Emmet watches what you type in your editor. When it recognizes an abbreviation, it offers to expand it.

Step-by-step:

1. Type an Emmet abbreviation: p

2. Press Tab (or Enter in some editors)

3. Emmet expands it: <p></p>

4. Your cursor is inside the tag, ready to add content

Most editors with Emmet support:

• VS Code (built-in)

• Sublime Text (built-in)

• Atom (built-in)

• WebStorm (built-in)

If you're using VS Code, Emmet works out of the box. Just type and press Tab.

Basic Emmet Syntax

Creating Elements

Type the tag name and press Tab.

h1    →    <h1></h1>
p     →    <p></p>
div   →    <div></div>
span  →    <span></span>

Adding Classes

Use a dot (.) for classes.

div.container    →    <div class="container"></div>
p.intro          →    <p class="intro"></p>

Multiple classes:

div.card.shadow    →    <div class="card shadow"></div>

Adding IDs

Use a hash (#) for IDs.

div#main      →    <div id="main"></div>
header#top    →    <header id="top"></header>

Combining Classes and IDs

div#main.container    →    <div id="main" class="container"></div>

Order doesn't matter:

div.container#main    →    <div class="container" id="main"></div>

Implicit Tag Names

If you don't specify a tag, Emmet assumes div.

.container       →    <div class="container"></div>
#header          →    <div id="header"></div>
.card.shadow     →    <div class="card shadow"></div>

Adding Attributes

Use square brackets [] for custom attributes.

a[href="#"]                →    <a href="#"></a>
img[src="photo.jpg"]       →    <img src="photo.jpg" alt="">
input[type="text"]         →    <input type="text">

Multiple attributes:

img[src="car.jpg" alt="Red car"]    →    <img src="car.jpg" alt="Red car">

Creating Nested Elements

Use the > symbol to create child elements.

div>p    →    <div><p></p></div>

More complex nesting:

header>h1

Expands to:

<header>
  <h1></h1>
</header>

Deeper nesting:

div>header>h1

Expands to:

<div>
  <header>
    <h1></h1>
  </header>
</div>

Sibling Elements

Use the + symbol to create elements at the same level.

header+main

Expands to:

<header></header>
<main></main>

Multiple siblings:

header+main+footer

Expands to:

<header></header>
<main></main>
<footer></footer>

Combining Nesting and Siblings

div>header+main+footer

Expands to:

<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

More complex:

div.container>header>h1^main>p^footer

The ^ climbs back up one level.

Expands to:

<div class="container">
  <header>
    <h1></h1>
  </header>
  <main>
    <p></p>
  </main>
  <footer></footer>
</div>

Repeating Elements with Multiplication

Use * to create multiple copies.

li*3

Expands to:

<li></li>
<li></li>
<li></li>

Real-world example:

ul>li*5

Expands to:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

With classes:

div.card*3

Expands to:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Auto-Numbering with $

Use $ to add auto-incrementing numbers.

div.item$*3

Expands to:

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

In IDs:

section#section$*3

Expands to:

<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>

Adding Text Content

Use curly braces {} for text.

h1{Welcome}

Expands to:

<h1>Welcome</h1>

With nested elements:

div>h1{Title}+p{Description}

Expands to:

<div>
  <h1>Title</h1>
  <p>Description</p>
</div>

Numbered text:

li{Item $}*3

Expands to:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Generating HTML Boilerplate

The most powerful Emmet trick: generate a full HTML template instantly.

Type:

!

Press Tab

Get this:

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

</body>
</html>

This saves you from typing 10+ lines every time you create a new HTML file.

Alternative syntax (does the same thing):

html:5

Real-World Examples

Navigation Menu

nav>ul>li*4>a

Expands to:

<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

Card Grid

div.grid>div.card*3>h2+p

Expands to:

<div class="grid">
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
</div>

Form

form>input[type="text"]+input[type="email"]+button{Submit}

Expands to:

<form action="">
  <input type="text">
  <input type="email">
  <button>Submit</button>
</form>

Table

table>tr*3>td*4

Expands to:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Emmet Cheat Sheet

For Cheat Sheet You can visit here : Official Documentation

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

HTML (HyperText Markup Language) is used to create the structure of a webpage.

When you open a website, the browser first reads HTML code to know:

• What text to show

• What is a heading

• What is a paragraph

• Where images and links are placed

Think of HTML as the skeleton of a webpage.

HTML = Skeleton of a Webpage

<h1>My Website</h1>
<p>Welcome to my page</p>

Without HTML, the browser has nothing to display.

What Is an HTML Tag?

An HTML tag is written inside angle brackets < >.

Example:

<p>

This tag tells the browser:

“This is a paragraph.”

Some common tags:

<h1>
<p>
<div>
<span>

Opening Tag, Closing Tag, and Content

Most HTML tags have:

• an opening tag

• content

• a closing tag

Example:

<p>Hello World</p>

Breakdown:

• <p> → opening tag

• Hello World → content

• </p> → closing tag

Think of it like a box:

<p>        ← open
Hello World
</p>       ← close

What Is an HTML Element?

This is very important

HTML element = opening tag + content + closing tag

Example:

<h1>This is a heading</h1>

• <h1> → tag

• </h1> → tag

• Whole line → HTML element

Tag ≠ Element

Self-Closing (Void) Elements

Some elements do not have content.

Example:

<img src="photo.jpg" />
<br />
<input type="text" />

These are called self-closing (void) elements.

They:

• Don’t wrap text

• Don’t need closing tags

Block-Level Elements

Block elements:

• Start on a new line

• Take full width

Example:

<h1>Heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>

They appear like this:

[ Heading          ]
[ Paragraph        ]
[ Div              ]

Inline Elements

Inline elements:

• Stay in the same line

• Take only required space

Example:

<p>
  This is <span>inline text</span> inside a paragraph.
</p>

Inline elements behave like words in a sentence.

Commonly Used HTML Tags (Beginner-Friendly)

<h1>Main heading</h1>
<h2>Sub heading</h2>

<p>This is a paragraph.</p>

<div>
  <p>Paragraph inside div</p>
</div>

<span>Small inline text</span>

<a href="https://blog.prakashtsx.me">Visit my blog</a>

<img src="image.png" alt="My image" />

These tags are more than enough to start.

Inspect HTML in the Browser (Must Try)

1. Open any website

2. Right-click → Inspect

3. Look at the Elements tab

You’ll see real HTML like:

<div>
  <h1>Title</h1>
  <p>Text</p>
</div>

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn