Forem: Pratham

Understanding the `this` Keyword in JavaScript

Pratham — Sun, 10 May 2026 04:09:48 +0000

The most confusing word in JavaScript — explained by asking one simple question.

If there's one concept that made me stare at my screen in genuine confusion, it's this. Not because the idea is complicated, but because this changes its meaning depending on where and how you use it. The same keyword can refer to completely different things in different situations.

I'd write this.name inside a function and get undefined. Then I'd write the exact same thing inside an object method and get the correct value. Why? What changed? Is JavaScript just messing with me?

Turns out, no. There's a clear rule. And once I learned it in the ChaiCode Web Dev Cohort 2026, this stopped being scary and started making complete sense. Let me share that mental model with you.

What Does `this` Represent?

Here's the one-line explanation that makes everything click:

this refers to the object that is calling the function.

That's it. Not where the function was written. Not where it was defined. But who is calling it at the moment of execution.

Think of it like the word "I" in English. When I say "I am Pratham," the word "I" refers to me. When you say "I am [your name]," the same word "I" refers to you. The word doesn't change — the speaker changes.

this works the same way. It's a pronoun for the caller.

"Who is calling this function right now?"

The answer to that question IS the value of `this`.

`this` in the Global Context

When you use this outside any function or object — just floating in the global scope — it refers to the global object.

In the Browser

console.log(this); // Window object
console.log(this === window); // true

In Node.js

console.log(this); // {} (module's exports object in Node)

Global Variables and `this`

var name = "Pratham"; // var attaches to the global object

console.log(this.name); // "Pratham" (in browser)
console.log(window.name); // "Pratham" (same thing)

Note: let and const do not attach to the global object. Only var does.

let age = 22;
console.log(this.age); // undefined — let doesn't attach to window

In practice, you'll rarely use this in the global context deliberately. It's mostly important for understanding why things behave unexpectedly.

`this` Inside Objects — Where It Makes the Most Sense

This is where this is the most intuitive. When a function is called as a method of an object, this refers to that object.

const user = {
  name: "Pratham",
  age: 22,
  greet() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  },
};

user.greet(); // "Hi, I'm Pratham and I'm 22 years old."

Who is calling greet()? → user is. So this = user.

That means this.name is user.name → "Pratham", and this.age is user.age → 22.

Another Example

const car = {
  brand: "Toyota",
  model: "Camry",
  year: 2024,
  describe() {
    return `${this.year} ${this.brand} ${this.model}`;
  },
};

console.log(car.describe()); // "2024 Toyota Camry"

Who called describe()? → car did. So this = car.

Multiple Objects, Same Function

Here's where it gets interesting — the same function can be used by different objects, and this changes accordingly:

function introduce() {
  console.log(`I'm ${this.name} from ${this.city}`);
}

const person1 = { name: "Pratham", city: "Delhi", introduce };
const person2 = { name: "Arjun", city: "Mumbai", introduce };

person1.introduce(); // "I'm Pratham from Delhi"
person2.introduce(); // "I'm Arjun from Mumbai"

Same function. Different callers. Different this.

Visual: Caller → Function Relationship

person1.introduce()
   ↑         ↑
 caller    method
   │
   └──→ this = person1
         └──→ this.name = "Pratham"
         └──→ this.city = "Delhi"

person2.introduce()
   ↑         ↑
 caller    method
   │
   └──→ this = person2
         └──→ this.name = "Arjun"
         └──→ this.city = "Mumbai"

`this` Inside Regular Functions

Here's where things get confusing — and where most beginners trip up.

When a regular function is called on its own (not as a method of an object), this defaults to the global object in non-strict mode, or undefined in strict mode.

Non-Strict Mode

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

showThis(); // Window (in browser) — no one is calling it, so this = global

Who is calling showThis()? → Nobody specific. There's no object.showThis(). So this falls back to the global object.

Strict Mode

"use strict";

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

showThis(); // undefined — strict mode doesn't default to global

Strict mode is more honest about it: if no one is explicitly calling the function, this is undefined instead of silently becoming the global object.

The Classic Gotcha: Nested Functions

const user = {
  name: "Pratham",
  greet() {
    console.log(`Hello, ${this.name}`); // ✅ Works — this = user

    function inner() {
      console.log(`Inner: ${this.name}`); // ❌ undefined!
    }
    inner();
  },
};

user.greet();
// "Hello, Pratham"
// "Inner: undefined"

Wait, what? inner() is called inside a method of user, so why isn't this still user?

Because inner() is called as a standalone function, not as user.inner(). There's no object before the dot. So this defaults to the global object (or undefined in strict mode), where name doesn't exist.

The Fix: Arrow Functions or `that`/`self`

Arrow function fix (modern, preferred):

const user = {
  name: "Pratham",
  greet() {
    const inner = () => {
      console.log(`Inner: ${this.name}`); // ✅ "Pratham"
    };
    inner();
  },
};

user.greet(); // "Inner: Pratham"

Arrow functions don't have their own this. They inherit this from the surrounding scope — which in this case is greet(), where this is user. Problem solved.

that/self fix (older pattern, still common):

const user = {
  name: "Pratham",
  greet() {
    const that = this; // Save the reference

    function inner() {
      console.log(`Inner: ${that.name}`); // ✅ "Pratham"
    }
    inner();
  },
};

user.greet(); // "Inner: Pratham"

You save this into a regular variable (that or self) before the inner function, so it's accessible via normal closure rules.

How Calling Context Changes `this`

This is the key insight: this is NOT determined by where a function is written. It's determined by HOW the function is called.

Let me prove it:

const user = {
  name: "Pratham",
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  },
};

// Called as a method — this = user
user.greet(); // "Hi, I'm Pratham" ✅

// Extracted into a variable — context is lost
const greetFn = user.greet;
greetFn(); // "Hi, I'm undefined" ❌ (or error in strict mode)

When we assign user.greet to greetFn, we're taking the function out of the object. Now greetFn() is called without any object in front of it. No caller → this falls back to global → this.name is undefined.

The Different Calling Contexts — A Summary

┌─────────────────────────────────────────────────────────────┐
│              HOW IS THE FUNCTION CALLED?                     │
├─────────────────────┬───────────────────────────────────────┤
│ Calling Pattern      │ What `this` refers to                │
├─────────────────────┼───────────────────────────────────────┤
│ obj.method()         │ obj (the object before the dot)      │
│ function()           │ global object (or undefined strict)  │
│ arrow function       │ inherited from surrounding scope     │
│ new Constructor()    │ the new object being created         │
│ .call(obj) / .apply(obj) │ explicitly set to obj           │
│ .bind(obj)           │ permanently set to obj               │
├─────────────────────┴───────────────────────────────────────┤
│                                                             │
│  The SIMPLE RULE: Look at what's LEFT of the dot.           │
│  person.greet() → this = person                             │
│  car.start()    → this = car                                │
│  greet()        → this = ??? (no dot = global/undefined)    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Arrow Functions and `this` — The Exception

Arrow functions are the one case where the "who's calling" rule doesn't apply. Arrow functions don't have their own this. They permanently inherit this from whatever scope they were defined in.

const team = {
  name: "ChaiCode",
  members: ["Pratham", "Arjun", "Priya"],
  listMembers() {
    // Arrow function inherits `this` from listMembers()
    this.members.forEach((member) => {
      console.log(`${member} is on team ${this.name}`);
    });
  },
};

team.listMembers();
// "Pratham is on team ChaiCode"
// "Arjun is on team ChaiCode"
// "Priya is on team ChaiCode"

If we used a regular function inside forEach, this.name would be undefined because the callback wouldn't have team as its caller. Arrow functions bypass this problem entirely.

When NOT to Use Arrow Functions

Don't use arrow functions as object methods:

// ❌ Bad — arrow function as method
const user = {
  name: "Pratham",
  greet: () => {
    console.log(`Hi, ${this.name}`); // undefined!
  },
};

user.greet(); // "Hi, undefined"

Why? Because the arrow function doesn't get this from user. It inherits this from the surrounding scope, which is the global scope. And this.name in the global scope is undefined.

// ✅ Good — regular function as method
const user = {
  name: "Pratham",
  greet() {
    console.log(`Hi, ${this.name}`); // "Pratham"
  },
};

Rule of thumb: Use regular functions for object methods. Use arrow functions for callbacks inside those methods.

Let's Practice: Hands-On Assignment

Part 1: `this` in Object Methods

const student = {
  name: "Pratham",
  course: "Web Dev Cohort 2026",
  introduce() {
    console.log(`I'm ${this.name}, enrolled in ${this.course}`);
  },
};

student.introduce(); // "I'm Pratham, enrolled in Web Dev Cohort 2026"

Part 2: Same Function, Different Callers

function displayInfo() {
  console.log(`${this.title} by ${this.author}`);
}

const book1 = { title: "Clean Code", author: "Robert Martin", displayInfo };
const book2 = { title: "Eloquent JS", author: "Marijn Haverbeke", displayInfo };

book1.displayInfo(); // "Clean Code by Robert Martin"
book2.displayInfo(); // "Eloquent JS by Marijn Haverbeke"

Part 3: The Lost Context Problem

const app = {
  name: "FeedPulse",
  start() {
    console.log(`${this.name} is starting...`);
  },
};

app.start(); // "FeedPulse is starting..." ✅

const startFn = app.start;
startFn(); // "undefined is starting..." ❌ — context lost!

Part 4: Arrow Function Fix

const playlist = {
  name: "Chill Vibes",
  songs: ["Lo-fi Beat", "Ocean Waves", "Night Drive"],
  display() {
    this.songs.forEach((song) => {
      console.log(`${song} — from "${this.name}"`);
    });
  },
};

playlist.display();
// "Lo-fi Beat — from "Chill Vibes""
// "Ocean Waves — from "Chill Vibes""
// "Night Drive — from "Chill Vibes""

Key Takeaways

this refers to the object that is calling the function. Ask: "What's to the left of the dot?"
In the global context, this is the global object (window in browsers). In strict mode standalone functions, this is undefined.
Inside object methods, this is the object that owns the method. user.greet() → this = user.
In regular standalone functions, this loses its context and falls back to global. Extracting a method from an object also loses context.
Arrow functions don't have their own this — they inherit it from the surrounding scope. Use them for callbacks, not for object methods.

Wrapping Up

this is one of those concepts that seems unnecessarily complicated until you learn the one rule that governs it: this is determined by the caller, not the author. Once that clicks, you stop guessing and start knowing what this will be in any situation.

I'm working through these concepts in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and understanding this became critical the moment we started working with object methods, event handlers, and class-based patterns. It's a fundamental piece of JavaScript that touches everything.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles on the way as I keep building and learning.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

JavaScript Modules: Import and Export Explained

Pratham — Sun, 10 May 2026 04:00:16 +0000

How to break your code into organized, reusable pieces — and why it changes everything.

Here's what my first JavaScript project looked like: one file, 500 lines, everything jammed together. Helper functions at the top, API calls in the middle, DOM manipulation at the bottom, and a dozen global variables floating around connecting it all.

It worked. But the moment I needed to change something, I was scrolling up and down for ten minutes trying to find where that one function was. And when I accidentally named two variables the same thing? Silent bugs that took an hour to track down.

This is the problem modules solve. Instead of one massive file, you split your code into smaller, focused files — each responsible for one thing. Then you import only what you need, where you need it. No scrolling, no naming conflicts, no chaos.

In the ChaiCode Web Dev Cohort 2026, modules were the moment my code started looking like something a professional would write. Let me show you how they work.

Why Are Modules Needed?

Let's start with the pain points that modules fix.

Problem 1: Everything in One File

app.js (800 lines)
├── Line 1-50:    Utility functions
├── Line 51-200:  User authentication logic
├── Line 201-400: Product listing logic
├── Line 401-600: Cart and checkout logic
└── Line 601-800: DOM manipulation and event handlers

Finding anything requires scrolling through hundreds of lines. Making a change to one feature risks breaking another. And if two developers work on this file simultaneously? Merge conflict nightmare.

Problem 2: Global Variable Pollution

Without modules, every variable and function lives in the global scope. This means:

// In one part of the file
let count = 0; // user count

// ... 200 lines later ...
let count = 10; // product count — OOPS, overwritten the first one!

The more code you write, the higher the chance of name collisions. And in the global scope, everything is accessible to everything — there's no isolation.

Problem 3: No Reusability

What if you write a great formatPrice() function in one project and want to use it in another? You'd have to copy-paste it. If you fix a bug in the original, you have to fix it in every copy. That doesn't scale.

The Solution: Modules

Before (one massive file):
┌──────────────────────────────────────┐
│              app.js                  │
│  utilities + auth + products + cart  │
│  + DOM + events + everything else    │
│           (800 lines)                │
└──────────────────────────────────────┘

After (organized modules):
┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  utils.js    │  │   auth.js    │  │  cart.js     │
│  (50 lines)  │  │  (100 lines) │  │  (80 lines)  │
└──────┬───────┘  └──────┬───────┘  └──────┬───────┘
       │                 │                 │
       └────────┬────────┴────────┬────────┘
                ↓                 ↓
         ┌──────────────────────────────┐
         │           app.js             │
         │  imports what it needs       │
         │  (50 lines — clean & focused)│
         └──────────────────────────────┘

Each file has its own scope. Variables don't leak. Functions are reusable. Everything is organized.

Exporting Functions and Values

To make something from one file available to other files, you export it. JavaScript gives you two ways to export: named exports and default exports.

Named Exports

You can export multiple things from a single file by putting export in front of each one.

// math.js

export const add = (a, b) => a + b;

export const subtract = (a, b) => a - b;

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

export const PI = 3.14159;

Or you can export them all at the bottom:

// math.js

const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const PI = 3.14159;

export { add, subtract, multiply, PI };

Both approaches are identical. I prefer the second style for larger files — it gives you one place to see everything that's exported.

Default Exports

Each file can have one default export. It's the "main thing" that file provides.

// greet.js

const greet = (name) => `Hello, ${name}!`;

export default greet;

You can also export it inline:

// greet.js

export default (name) => `Hello, ${name}!`;

Named vs Default — Side by Side

// utils.js — mixing both

// Named exports (as many as you want)
export const formatPrice = (price) => `₹${price.toFixed(2)}`;
export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

// Default export (only one per file)
const utils = {
  version: "1.0.0",
  author: "Pratham",
};
export default utils;

Importing Modules

Exporting makes things available. Importing brings them into another file.

Importing Named Exports

Use curly braces { } and the exact name used in the export:

// app.js

import { add, subtract, PI } from "./math.js";

console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5
console.log(PI); // 3.14159

You only import what you need. If math.js has 20 exports but you only need add, just import add. The rest stay out of your scope.

Importing Default Exports

No curly braces needed. You can name it anything you want:

// app.js

import greet from "./greet.js";

console.log(greet("Pratham")); // "Hello, Pratham!"

Since it's the default export, you're free to call it whatever makes sense:

import sayHello from "./greet.js"; // Same thing, different name
console.log(sayHello("Pratham")); // "Hello, Pratham!"

Importing Both Named and Default

// app.js

import utils, { formatPrice, capitalize } from "./utils.js";

console.log(utils.version); // "1.0.0"
console.log(formatPrice(499)); // "₹499.00"
console.log(capitalize("pratham")); // "Pratham"

The default comes first (no braces), then named exports in { }.

Renaming Imports with `as`

If a name conflicts with something in your file, rename it:

import { add as sum, subtract as minus } from "./math.js";

console.log(sum(10, 5)); // 15
console.log(minus(10, 5)); // 5

Importing Everything with `*`

If you need everything from a module:

import * as MathUtils from "./math.js";

console.log(MathUtils.add(10, 5)); // 15
console.log(MathUtils.PI); // 3.14159

All exports become properties on the MathUtils object.

Module Import/Export Flow

Here's the complete picture of how data flows between files:

┌─────────────────────────┐         ┌─────────────────────────┐
│       math.js            │         │       helpers.js         │
│                          │         │                          │
│  export const add = ...  │         │  export default          │
│  export const sub = ...  │         │    function format() {}  │
│  export const PI = 3.14  │         │                          │
└────────────┬─────────────┘         └────────────┬─────────────┘
             │                                    │
    named exports                        default export
             │                                    │
             ↓                                    ↓
┌──────────────────────────────────────────────────────────────┐
│                          app.js                              │
│                                                              │
│  import { add, PI } from "./math.js";                        │
│  import format from "./helpers.js";                          │
│                                                              │
│  console.log(add(2, 3));    // 5                             │
│  console.log(PI);           // 3.14                          │
│  console.log(format(...));  // formatted output              │
└──────────────────────────────────────────────────────────────┘

Each file exports what it offers. The consuming file imports only what it needs. Clean, explicit, and traceable.

Default vs Named Exports — When to Use Which

Feature	Named Export	Default Export
How many per file	✅ Unlimited	❌ Only one
Import syntax	`{ name }` (exact match)	`anyName` (your choice)
Renaming	`{ name as alias }`	Name it anything on import
Best for	Multiple utilities from one file	The main "thing" a file provides
Refactoring safety	✅ Name must match — typos caught	⚠️ Any name works — typos silent
Common in	Utility/helper files	Components, classes, configs

My Guideline

File exports one main thing (a component, a class, a primary function) → default export
File exports multiple utilities (helper functions, constants, validators) → named exports
Mixing both → default for the main thing, named for the extras

// ✅ Default — one main component
// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// ✅ Named — multiple utility functions
// validators.js
export const isEmail = (str) => str.includes("@");
export const isNotEmpty = (str) => str.trim().length > 0;
export const isMinLength = (str, min) => str.length >= min;

File Dependency Diagram — A Real Project

Here's what modules look like in a realistic project structure:

project/
├── index.js              ← entry point
├── config.js             ← app configuration
├── utils/
│   ├── format.js         ← formatting utilities
│   └── validate.js       ← validation helpers
├── services/
│   ├── auth.js           ← authentication logic
│   └── api.js            ← API communication
└── components/
    ├── Header.js          ← header component
    └── Footer.js          ← footer component

Dependency flow:

  config.js ──────────────────────────────┐
       ↓                                  │
  api.js ← imports config                 │
       ↓                                  │
  auth.js ← imports api                   │
       ↓                                  │
  index.js ← imports auth, Header, Footer,│config
       ↑                                  │
  Header.js ← imports format ─────────────┘
  Footer.js ← imports format

Each file imports ONLY what it needs.
No file needs to know about files it doesn't use.

Benefits of Modular Code

Let me lay out why modules aren't just "nice to have" — they're essential:

Benefit	Explanation
Organization	Each file has a single responsibility. Finding code is instant.
No naming conflicts	Each module has its own scope. Two files can have a `count` variable.
Reusability	Write once, import anywhere — across files and projects.
Maintainability	Change one module without touching the rest of the app.
Team collaboration	Developers work on separate files without merge conflicts.
Testability	Test each module independently with its own inputs and outputs.
Lazy loading	Load modules only when needed — better performance.

Before Modules vs After Modules

// ❌ Before — everything global, no structure
function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function formatPrice(price) { return "₹" + price; }
function validateEmail(email) { return email.includes("@"); }
// ... 50 more functions, all global, all in one file

// ✅ After — separated, scoped, importable
// math.js       → add, subtract
// format.js     → formatPrice
// validate.js   → validateEmail
// app.js        → imports only what it needs

Setting Up Modules in Practice

In the Browser

Add type="module" to your script tag:

<script type="module" src="app.js"></script>

Without type="module", import/export won't work and you'll get a syntax error.

In Node.js

Either add "type": "module" to your package.json:

{
  "type": "module"
}

Or use the .mjs file extension instead of .js.

Let's Practice: Hands-On Assignment

Part 1: Create a Math Module

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;
export const divide = (a, b) => (b !== 0 ? a / b : "Cannot divide by zero");

Part 2: Create a Greeting Module with Default Export

// greet.js
const greet = (name, time = "day") => {
  const greetings = {
    morning: `Good morning, ${name}! ☀️`,
    afternoon: `Good afternoon, ${name}! 🌤️`,
    evening: `Good evening, ${name}! 🌇`,
    day: `Hello, ${name}! 👋`,
  };
  return greetings[time] || greetings.day;
};

export default greet;

Part 3: Import and Use Both in app.js

// app.js
import greet from "./greet.js";
import { add, multiply } from "./math.js";

console.log(greet("Pratham", "morning"));
// "Good morning, Pratham! ☀️"

console.log(`10 + 5 = ${add(10, 5)}`);
// "10 + 5 = 15"

console.log(`4 × 7 = ${multiply(4, 7)}`);
// "4 × 7 = 28"

Part 4: Mix Named and Default, Use Renaming

// app.js
import greet, { add as sum, subtract as minus } from "./math.js";
// Note: this assumes math.js has a default export too

// Or import everything
import * as Math from "./math.js";
console.log(Math.add(3, 4)); // 7
console.log(Math.divide(10, 3)); // 3.333...

Key Takeaways

Modules split your code into separate files, each with its own scope. No global pollution, no naming conflicts, no 800-line monster files.
export makes functions, variables, or values available to other files. Use named exports for multiple items and default export for the main item.
import brings exported values into your file. Named imports use { } with exact names. Default imports can be named anything.
Named exports are safer for refactoring (names must match). Default exports are flexible (name them anything on import).
Modules make code organized, reusable, testable, and maintainable — which is why every modern framework (React, Vue, Node.js) is built entirely around them.

Wrapping Up

Modules were the point where my code stopped looking like a student project and started looking like something professional. The concepts are simple — export what you want to share, import what you need — but the impact on code quality is massive. Cleaner files, fewer bugs, easier collaboration, and code you can actually navigate.

I'm building all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and modules became essential the moment we started working with React, where every component is a module. Understanding import/export now means you won't be confused later.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles on the way as the journey continues.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Map and Set in JavaScript

Pratham — Sun, 10 May 2026 03:37:23 +0000

Two data structures that solve problems objects and arrays can't — and when you should reach for them.

For a while, I thought JavaScript only had two ways to store data: objects (key-value pairs) and arrays (ordered lists). They handle most situations, so I never questioned whether there was something better.

Then I ran into two problems that made me realize their limitations:

Problem 1: I needed an object where the keys were other objects, not just strings. Regular objects can't do that — every key gets converted to a string.

Problem 2: I needed an array with no duplicates. I kept adding values and then manually checking "wait, is this already in there?" before each insertion.

Both problems have clean solutions: Map and Set. They were introduced in ES6 (2015), and once you understand what they do, you'll wonder why you didn't learn them sooner.

Let me walk you through both.

What Is a Map?

A Map is a collection of key-value pairs — similar to an object — but with some important upgrades.

The biggest difference: Map keys can be anything. Objects, arrays, numbers, functions — literally any value can be a key. With regular objects, keys are always converted to strings.

Creating and Using a Map

const userRoles = new Map();

// Setting key-value pairs
userRoles.set("Pratham", "admin");
userRoles.set("Arjun", "editor");
userRoles.set("Priya", "viewer");

// Getting values
console.log(userRoles.get("Pratham")); // "admin"
console.log(userRoles.get("Arjun")); // "editor"

// Checking if a key exists
console.log(userRoles.has("Priya")); // true
console.log(userRoles.has("Rahul")); // false

// Size
console.log(userRoles.size); // 3

// Deleting
userRoles.delete("Arjun");
console.log(userRoles.size); // 2

You Can Also Initialize with Values

const config = new Map([
  ["theme", "dark"],
  ["language", "en"],
  ["fontSize", 16],
]);

console.log(config.get("theme")); // "dark"

Visual: Map Key-Value Storage

┌──────────────────────────────────────┐
│              Map                     │
├──────────────┬───────────────────────┤
│     KEY      │        VALUE          │
├──────────────┼───────────────────────┤
│  "Pratham"   │       "admin"         │
│  "Arjun"     │       "editor"        │
│  "Priya"     │       "viewer"        │
├──────────────┴───────────────────────┤
│  .get(key) → value                   │
│  .set(key, value) → adds/updates     │
│  .has(key) → true/false              │
│  .delete(key) → removes pair         │
│  .size → number of pairs             │
└──────────────────────────────────────┘

The Superpower: Any Value as a Key

This is where Map pulls ahead of regular objects:

const scores = new Map();

// Object as key — impossible with regular objects
const student1 = { name: "Pratham" };
const student2 = { name: "Arjun" };

scores.set(student1, 95);
scores.set(student2, 88);

console.log(scores.get(student1)); // 95
console.log(scores.get(student2)); // 88

With a regular object, both keys would become the string "[object Object]" and overwrite each other. Map keeps them as separate, distinct keys.

// Number as key
const cache = new Map();
cache.set(404, "Not Found");
cache.set(200, "OK");
console.log(cache.get(404)); // "Not Found"

// Function as key
const fn = () => "hello";
cache.set(fn, "greeting function");
console.log(cache.get(fn)); // "greeting function"

Iterating Over a Map

Maps maintain insertion order and are directly iterable:

const fruits = new Map([
  ["apple", 3],
  ["banana", 5],
  ["mango", 2],
]);

// for...of with destructuring
for (const [fruit, count] of fruits) {
  console.log(`${fruit}: ${count}`);
}
// apple: 3
// banana: 5
// mango: 2

// Individual iterators
console.log([...fruits.keys()]); // ["apple", "banana", "mango"]
console.log([...fruits.values()]); // [3, 5, 2]
console.log([...fruits.entries()]); // [["apple", 3], ["banana", 5], ["mango", 2]]

Map vs Object — When Each One Wins

This was my biggest question: "Why not just use a regular object?" Here's the honest comparison:

Feature	Object	Map
Key types	Strings and Symbols only	Any value (objects, numbers, etc.)
Key order	Not guaranteed (mostly works)	✅ Guaranteed insertion order
Size	Manual: `Object.keys(obj).length`	Direct: `map.size`
Iteration	Indirect (`Object.keys/entries`)	Direct (`for...of`, `.forEach`)
Performance	Slower for frequent add/delete	✅ Optimized for frequent changes
Default keys	Has prototype keys (toString, etc.)	✅ No default keys — clean
JSON support	✅ Direct `JSON.stringify()`	Needs manual conversion
Destructuring/spread	✅ `{ ...obj }`	Not directly

When to Use Object

JSON data from APIs
Configuration objects with known string keys
When you need destructuring or spread
Simple, static key-value structures

When to Use Map

Keys that aren't strings (objects, numbers, DOM elements)
Frequent additions and deletions
When insertion order matters
When you need .size instead of counting manually
Caching or lookup tables

// ✅ Object — perfect for API data
const user = { name: "Pratham", age: 22, city: "Delhi" };

// ✅ Map — perfect for tracking DOM elements
const clickCounts = new Map();
// clickCounts.set(buttonElement, 0);
// clickCounts.set(linkElement, 0);

What Is a Set?

A Set is a collection of unique values. No duplicates allowed — ever. If you try to add a value that already exists, the Set simply ignores it.

Think of it like a guest list at a party. Each person can only appear once. You can try writing "Pratham" ten times — the list still only shows "Pratham" once.

Creating and Using a Set

const skills = new Set();

skills.add("JavaScript");
skills.add("React");
skills.add("Node.js");
skills.add("JavaScript"); // Duplicate — silently ignored

console.log(skills); // Set(3) {"JavaScript", "React", "Node.js"}
console.log(skills.size); // 3 — not 4!

Set Methods

const colors = new Set(["red", "green", "blue"]);

// Check if a value exists
console.log(colors.has("red")); // true
console.log(colors.has("purple")); // false

// Delete a value
colors.delete("green");
console.log(colors); // Set(2) {"red", "blue"}

// Clear everything
colors.clear();
console.log(colors.size); // 0

Visual: Set Uniqueness

Adding values to a Set:

  .add("JS")     → Set: { "JS" }
  .add("React")  → Set: { "JS", "React" }
  .add("Node")   → Set: { "JS", "React", "Node" }
  .add("JS")     → Set: { "JS", "React", "Node" }  ← IGNORED (duplicate)
  .add("React")  → Set: { "JS", "React", "Node" }  ← IGNORED (duplicate)
  .add("Vue")    → Set: { "JS", "React", "Node", "Vue" }

  Only unique values survive. Duplicates are silently rejected.

The Killer Use Case: Removing Duplicates from an Array

This is the most common reason you'll reach for Set:

const numbers = [1, 3, 5, 3, 7, 1, 9, 5, 3];

// One line — duplicates gone
const unique = [...new Set(numbers)];
console.log(unique); // [1, 3, 5, 7, 9]

Before Set, you'd need a loop with an includes() check or a filter with indexOf. Now it's one line.

// Works with strings too
const tags = ["js", "react", "js", "node", "react", "css"];
const uniqueTags = [...new Set(tags)];
console.log(uniqueTags); // ["js", "react", "node", "css"]

Iterating Over a Set

Sets maintain insertion order and are directly iterable:

const fruits = new Set(["Apple", "Mango", "Banana"]);

for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Banana

// Convert to array anytime
const fruitArray = [...fruits];
console.log(fruitArray); // ["Apple", "Mango", "Banana"]

Set vs Array — When Each One Wins

Feature	Array	Set
Duplicates	✅ Allowed	❌ Automatically removed
Order	✅ Index-based	✅ Insertion order
Access by index	✅ `arr[0]`	❌ No index access
Check existence	`.includes()` — O(n)	`.has()` — O(1) ⚡
Size	`.length`	`.size`
Methods	`map`, `filter`, `reduce`, etc.	`add`, `delete`, `has`
Best for	Ordered lists, transformation	Unique values, fast lookups

The performance difference in .has() vs .includes() is worth highlighting. For small arrays, you won't notice. But if you're checking whether a value exists in a collection of 10,000 items, Set is dramatically faster because it uses a hash-based lookup (constant time) instead of scanning every element (linear time).

When to Use Array

You need index-based access
Order and position matter
You need map(), filter(), reduce()
Duplicates are acceptable or expected

When to Use Set

You need guaranteed uniqueness
You frequently check "does this value exist?"
You're removing duplicates from data
You don't need index-based access

Practical Use Cases

1. Tracking Unique Visitors

const visitors = new Set();

// As users visit
visitors.add("user_101");
visitors.add("user_202");
visitors.add("user_101"); // Returning visitor — not counted again

console.log(`Unique visitors: ${visitors.size}`); // 2

2. Caching API Results with Map

const apiCache = new Map();

const fetchUser = async (userId) => {
  if (apiCache.has(userId)) {
    console.log("Cache hit!");
    return apiCache.get(userId);
  }

  console.log("Fetching from API...");
  // const response = await fetch(`/api/users/${userId}`);
  // const data = await response.json();
  const data = { id: userId, name: "Pratham" }; // simulated

  apiCache.set(userId, data);
  return data;
};

3. Counting Word Frequency with Map

const text = "the cat sat on the mat the cat";
const words = text.split(" ");

const frequency = new Map();
for (const word of words) {
  frequency.set(word, (frequency.get(word) || 0) + 1);
}

console.log(frequency);
// Map(5) { "the" => 3, "cat" => 2, "sat" => 1, "on" => 1, "mat" => 1 }

4. Finding Common Elements Between Arrays

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

const set2 = new Set(arr2);
const common = arr1.filter((item) => set2.has(item));
console.log(common); // [3, 4, 5]

Using a Set for the lookup makes this O(n) instead of O(n²) — a real performance win for large arrays.

5. Map for Readable Enums / Lookups

const httpStatus = new Map([
  [200, "OK"],
  [201, "Created"],
  [400, "Bad Request"],
  [401, "Unauthorized"],
  [404, "Not Found"],
  [500, "Internal Server Error"],
]);

console.log(httpStatus.get(404)); // "Not Found"
console.log(httpStatus.get(200)); // "OK"

Let's Practice: Hands-On Assignment

Part 1: Map Basics

const studentGrades = new Map();

studentGrades.set("Pratham", "A");
studentGrades.set("Arjun", "B+");
studentGrades.set("Priya", "A+");

console.log(studentGrades.get("Priya")); // "A+"
console.log(studentGrades.has("Rahul")); // false
console.log(studentGrades.size); // 3

for (const [name, grade] of studentGrades) {
  console.log(`${name}: ${grade}`);
}

Part 2: Set — Remove Duplicates

const rawData = [10, 20, 30, 20, 40, 10, 50, 30, 60];

const uniqueData = [...new Set(rawData)];
console.log(uniqueData); // [10, 20, 30, 40, 50, 60]

Part 3: Map with Non-String Keys

const config = new Map();

config.set(1, "First Priority");
config.set(true, "Feature Enabled");
config.set({ id: 1 }, "Object Key");

console.log(config.get(1)); // "First Priority"
console.log(config.get(true)); // "Feature Enabled"
console.log(config.size); // 3

Part 4: Set Operations — Union, Intersection, Difference

const setA = new Set([1, 2, 3, 4, 5]);
const setB = new Set([4, 5, 6, 7, 8]);

// Union — all unique values from both
const union = new Set([...setA, ...setB]);
console.log([...union]); // [1, 2, 3, 4, 5, 6, 7, 8]

// Intersection — values in both
const intersection = new Set([...setA].filter((x) => setB.has(x)));
console.log([...intersection]); // [4, 5]

// Difference — values in A but not in B
const difference = new Set([...setA].filter((x) => !setB.has(x)));
console.log([...difference]); // [1, 2, 3]

Key Takeaways

Map is a key-value collection where keys can be any value — objects, numbers, functions, not just strings. Use it when regular objects fall short.
Set is a collection of unique values. Duplicates are automatically rejected. The fastest way to deduplicate an array: [...new Set(arr)].
Map vs Object: Use Map for non-string keys, frequent add/delete, guaranteed order, and .size. Use Object for JSON data and simple config.
Set vs Array: Use Set for uniqueness and fast .has() lookups. Use Array for ordered data with index access and transformation methods.
Both are iterable and maintain insertion order. They work seamlessly with for...of, spread, and destructuring.

Wrapping Up

Map and Set aren't replacements for objects and arrays — they're complements. Each has its strengths, and knowing when to reach for which one is a sign of a developer who thinks about the right tool for the job, not just the first tool that comes to mind.

I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg. Map and Set were one of those topics where I initially thought "do I really need these?" — and now I use them regularly, especially Set for deduplication and Map for caching. They're worth learning early.

Connect with me on LinkedIn or visit PrathamDEV.in to follow along. More articles coming as the journey continues.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

String Polyfills and Common Interview Methods in JavaScript

Pratham — Sun, 10 May 2026 03:35:46 +0000

Understanding how string methods work under the hood — and building them yourself.

Here's something that changed how I think about JavaScript: anyone can use .trim() or .includes(). You call the method, it works, you move on. But can you build it from scratch? Can you explain what happens inside when you call .split() or .repeat()?

That's exactly what interviewers want to know. Not whether you've memorized the API, but whether you understand the logic behind it. And the best way to prove that? Write the method yourself — a polyfill.

In the ChaiCode Web Dev Cohort 2026, this shift from "using tools" to "understanding tools" was a turning point. Let me walk you through the most common string methods, how they work conceptually, and how to build your own versions.

What Are String Methods?

String methods are built-in functions that every string in JavaScript comes with. They let you manipulate, search, transform, and inspect text without writing manual loops.

const name = "  Pratham Bhardwaj  ";

console.log(name.trim()); // "Pratham Bhardwaj"
console.log(name.toUpperCase()); // "  PRATHAM BHARDWAJ  "
console.log(name.includes("Pratham")); // true
console.log(name.split(" ")); // ["", "", "Pratham", "Bhardwaj", "", ""]

One line, one method, one result. But what's happening inside each of these calls? That's what we're going to explore.

Strings Are Immutable

Before we go further, remember this: strings in JavaScript cannot be changed. Every string method returns a new string — the original stays untouched.

const greeting = "hello";
const shouted = greeting.toUpperCase();

console.log(greeting); // "hello" — unchanged
console.log(shouted); // "HELLO" — new string

This is important for polyfills — your implementations should always return new values, never mutate the input.

Why Do Developers Write Polyfills?

A polyfill is a piece of code that provides the functionality of a newer feature in environments that don't natively support it. But beyond browser compatibility, writing polyfills serves two bigger purposes:

1. Deep Understanding

When you build .trim() from scratch, you have to understand exactly what it does: strip whitespace from both ends, leave everything in the middle alone. You can't fake that understanding.

2. Interview Preparation

"Implement String.prototype.includes" is a real interview question. Interviewers don't care that the method already exists. They want to see:

Can you break a problem into steps?
Do you understand string indexing and iteration?
Can you handle edge cases?

The Polyfill Mental Model

Built-in method:   "hello".includes("ell")  →  true
                         ↓
                   (black box — you call it, it works)

Polyfill:          "hello".includes("ell")  →  true
                         ↓
                   Your code:
                   - Loop through each position
                   - At each position, check if substring matches
                   - If found, return true
                   - If loop ends, return false

Same input → same output. You just built the black box.

Common String Methods — Concept + Polyfill

Let's go through the most commonly asked string methods. For each one, I'll explain what it does, show the built-in version, and then build it from scratch.

1. `trim()` — Remove Whitespace from Both Ends

What it does: Removes spaces, tabs, and newlines from the start and end of a string.

// Built-in
console.log("  hello  ".trim()); // "hello"
console.log("\t  hi \n".trim()); // "hi"

Polyfill:

const myTrim = (str) => {
  let start = 0;
  let end = str.length - 1;

  // Move start forward past whitespace
  while (start <= end && str[start] === " ") {
    start++;
  }

  // Move end backward past whitespace
  while (end >= start && str[end] === " ") {
    end--;
  }

  // Extract the substring between start and end (inclusive)
  return str.slice(start, end + 1);
};

console.log(myTrim("  hello  ")); // "hello"
console.log(myTrim("   ")); // ""
console.log(myTrim("no spaces")); // "no spaces"

How it works: Two pointers — one from the left, one from the right — move inward past whitespace characters. Whatever's between them is the trimmed result.

Input:   "   hello   "
          ↑         ↑
        start      end

Step 1:  start moves right past spaces → lands on 'h'
Step 2:  end moves left past spaces → lands on 'o'

Result:  str.slice(start, end + 1) → "hello"

2. `includes()` — Check If a Substring Exists

What it does: Returns true if the string contains the specified substring, false otherwise.

// Built-in
console.log("JavaScript".includes("Script")); // true
console.log("JavaScript".includes("Python")); // false

Polyfill:

const myIncludes = (str, target) => {
  if (target.length > str.length) return false;

  for (let i = 0; i <= str.length - target.length; i++) {
    if (str.slice(i, i + target.length) === target) {
      return true;
    }
  }

  return false;
};

console.log(myIncludes("JavaScript", "Script")); // true
console.log(myIncludes("JavaScript", "Python")); // false
console.log(myIncludes("hello", "")); // true (empty string is always found)

How it works: Slide a window of target.length across the string. At each position, extract a chunk and compare it to the target.

String:  "JavaScript"
Target:  "Script"  (length: 6)

Position 0:  "JavaSc" === "Script"?  No
Position 1:  "avaSci" === "Script"?  No
Position 2:  "vaScrip" — wait, let me recalculate
Position 4:  "Script" === "Script"?  ✅ Yes → return true

3. `repeat()` — Repeat a String N Times

What it does: Returns a new string with the original repeated n times.

// Built-in
console.log("ha".repeat(3)); // "hahaha"
console.log("⭐".repeat(5)); // "⭐⭐⭐⭐⭐"

Polyfill:

const myRepeat = (str, count) => {
  if (count <= 0) return "";

  let result = "";
  for (let i = 0; i < count; i++) {
    result += str;
  }
  return result;
};

console.log(myRepeat("ha", 3)); // "hahaha"
console.log(myRepeat("abc", 0)); // ""
console.log(myRepeat("-", 10)); // "----------"

How it works: Start with an empty string. Loop count times, concatenating the original string each time.

myRepeat("ha", 3):

  i=0:  result = "" + "ha"     → "ha"
  i=1:  result = "ha" + "ha"   → "haha"
  i=2:  result = "haha" + "ha" → "hahaha"

  Return: "hahaha"

4. `startsWith()` and `endsWith()` — Check Beginning/End

What they do: Check if a string starts or ends with a given substring.

// Built-in
console.log("Pratham".startsWith("Pra")); // true
console.log("Pratham".endsWith("ham")); // true

Polyfills:

const myStartsWith = (str, target) => {
  if (target.length > str.length) return false;
  return str.slice(0, target.length) === target;
};

const myEndsWith = (str, target) => {
  if (target.length > str.length) return false;
  return str.slice(str.length - target.length) === target;
};

console.log(myStartsWith("Pratham", "Pra")); // true
console.log(myStartsWith("Pratham", "ham")); // false
console.log(myEndsWith("Pratham", "ham")); // true
console.log(myEndsWith("Pratham", "Pra")); // false

How it works: Extract a chunk from the beginning (or end) with the same length as the target. Compare directly.

myStartsWith("Pratham", "Pra"):
  str.slice(0, 3) → "Pra"
  "Pra" === "Pra" → true ✅

myEndsWith("Pratham", "ham"):
  str.slice(7 - 3) → str.slice(4) → "ham"
  "ham" === "ham" → true ✅

5. `indexOf()` — Find the Position of a Substring

What it does: Returns the index of the first occurrence of a substring. Returns -1 if not found.

// Built-in
console.log("JavaScript".indexOf("Script")); // 4
console.log("JavaScript".indexOf("Python")); // -1

Polyfill:

const myIndexOf = (str, target) => {
  if (target === "") return 0;
  if (target.length > str.length) return -1;

  for (let i = 0; i <= str.length - target.length; i++) {
    if (str.slice(i, i + target.length) === target) {
      return i;
    }
  }

  return -1;
};

console.log(myIndexOf("JavaScript", "Script")); // 4
console.log(myIndexOf("JavaScript", "Java")); // 0
console.log(myIndexOf("JavaScript", "Python")); // -1
console.log(myIndexOf("hello hello", "hello")); // 0 (first occurrence)

Notice how similar this is to includes()? The logic is nearly identical — the only difference is that includes() returns true/false while indexOf() returns the position.

6. `charAt()` — Get Character at Index

What it does: Returns the character at a given index.

// Built-in
console.log("Pratham".charAt(0)); // "P"
console.log("Pratham".charAt(3)); // "t"

Polyfill:

const myCharAt = (str, index) => {
  if (index < 0 || index >= str.length) return "";
  return str[index];
};

console.log(myCharAt("Pratham", 0)); // "P"
console.log(myCharAt("Pratham", 6)); // "m"
console.log(myCharAt("Pratham", 10)); // ""

This one's almost too simple — but interviewers use it as a warm-up before harder questions.

Common Interview String Problems

Beyond polyfills, these are the string problems that show up constantly in interviews:

1. Reverse a String

const reverseString = (str) => {
  let reversed = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
};

console.log(reverseString("hello")); // "olleh"
console.log(reverseString("JavaScript")); // "tpircSavaJ"

Or the one-liner:

const reverseString = (str) => str.split("").reverse().join("");

Interview tip: Know both approaches. The loop shows you understand the logic. The one-liner shows you know the language.

2. Check If a String Is a Palindrome

const isPalindrome = (str) => {
  const cleaned = str.toLowerCase().replace(/[^a-z0-9]/g, "");
  let left = 0;
  let right = cleaned.length - 1;

  while (left < right) {
    if (cleaned[left] !== cleaned[right]) return false;
    left++;
    right--;
  }

  return true;
};

console.log(isPalindrome("racecar")); // true
console.log(isPalindrome("Race Car")); // true
console.log(isPalindrome("hello")); // false

"racecar" — check from both ends:

  r ← → r  ✅
   a ← → a  ✅
    c ← → c  ✅
     e (center — done)

Result: true (it's a palindrome)

3. Count Character Occurrences

const charCount = (str) => {
  const counts = {};
  for (const char of str) {
    counts[char] = (counts[char] || 0) + 1;
  }
  return counts;
};

console.log(charCount("hello"));
// { h: 1, e: 1, l: 2, o: 1 }

console.log(charCount("javascript"));
// { j: 1, a: 2, v: 1, s: 1, c: 1, r: 1, i: 1, p: 1, t: 1 }

4. Capitalize First Letter of Each Word

const capitalizeWords = (str) => {
  return str
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
    .join(" ");
};

console.log(capitalizeWords("hello world")); // "Hello World"
console.log(capitalizeWords("javaScript is FUN")); // "Javascript Is Fun"

5. Check If Two Strings Are Anagrams

const isAnagram = (str1, str2) => {
  const normalize = (s) => s.toLowerCase().split("").sort().join("");
  return normalize(str1) === normalize(str2);
};

console.log(isAnagram("listen", "silent")); // true
console.log(isAnagram("hello", "world")); // false
console.log(isAnagram("Dormitory", "Dirty Room")); // false (spaces matter here)

Why Understanding Built-In Behavior Matters

Let me be direct about this: knowing how to use string methods isn't enough anymore.

In interviews, knowing that .includes() exists gets you zero points. But explaining that it works by sliding a window across the string and comparing substrings at each position? That shows you think like a developer.

Here's what building polyfills teaches you:

Skill	How Polyfills Build It
String indexing	You manually access `str[i]` and work with positions
Loop construction	You build `for` loops with correct boundaries
Edge case thinking	Empty strings, out-of-bounds indexes, targets longer than source
Algorithm design	Sliding window, two pointers, accumulation patterns
Problem decomposition	Breaking "trim this string" into concrete, implementable steps

These aren't just interview skills — they're engineering skills. Every complex feature you'll ever build requires breaking problems into steps, handling edge cases, and understanding what your tools are doing under the surface.

String Processing Flow — The General Pattern

Most string polyfills follow the same general flow:

┌─────────────────────┐
│   Receive input      │
│   (string + args)    │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│   Handle edge cases  │
│   (empty, null, etc) │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│   Iterate through    │
│   the string         │
│   (char by char or   │
│    window by window) │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│   Apply logic at     │
│   each position      │
│   (compare, count,   │
│    accumulate)        │
└──────────┬──────────┘
           ↓
┌─────────────────────┐
│   Return result      │
│   (new string, index,│
│    boolean)           │
└─────────────────────┘

Once you see this pattern, every string polyfill becomes a variation of the same structure. The only thing that changes is the logic in the middle.

Let's Practice: Hands-On Assignment

Part 1: Build `myTrim()`

// Implement your own trim function
const myTrim = (str) => {
  let start = 0;
  let end = str.length - 1;

  while (start <= end && str[start] === " ") start++;
  while (end >= start && str[end] === " ") end--;

  return str.slice(start, end + 1);
};

// Test it
console.log(myTrim("   hello world   ")); // "hello world"
console.log(myTrim("no spaces")); // "no spaces"
console.log(myTrim("     ")); // ""

Part 2: Build `myIncludes()`

const myIncludes = (str, target) => {
  for (let i = 0; i <= str.length - target.length; i++) {
    if (str.slice(i, i + target.length) === target) return true;
  }
  return false;
};

// Test it
console.log(myIncludes("ChaiCode", "Chai")); // true
console.log(myIncludes("ChaiCode", "Tea")); // false

Part 3: Reverse a String Without Built-In Methods

const myReverse = (str) => {
  let result = "";
  for (let i = str.length - 1; i >= 0; i--) {
    result += str[i];
  }
  return result;
};

console.log(myReverse("Pratham")); // "mahtarP"
console.log(myReverse("12345")); // "54321"

Part 4: Count Vowels in a String

const countVowels = (str) => {
  const vowels = "aeiouAEIOU";
  let count = 0;

  for (const char of str) {
    if (vowels.includes(char)) count++;
  }

  return count;
};

console.log(countVowels("Pratham Bhardwaj")); // 4
console.log(countVowels("JavaScript")); // 3

Key Takeaways

String methods are built-in functions that transform, search, and inspect text. They always return new values — strings are immutable.
Polyfills are custom implementations of built-in features. Writing them proves you understand the logic, not just the API.
Most string polyfills follow the same pattern: handle edge cases → iterate through the string → apply logic → return result.
Common interview problems — reverse, palindrome, anagram, character count — all build on the same fundamental skills: string indexing, loops, and comparison.
Understanding beats memorizing. Knowing how .includes() works makes you a better debugger, a better problem solver, and a stronger interview candidate.

Wrapping Up

There's a big difference between a developer who uses string methods and a developer who understands them. Polyfills bridge that gap. They force you to think about what actually happens when you call .trim() or .indexOf() — and that kind of thinking is exactly what separates junior developers from strong ones.

I'm building this depth of understanding through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg. Writing polyfills has been one of the most valuable exercises so far — not because I'll use them in production (I won't, the built-in methods are great), but because the process of building them made me a significantly better problem solver.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles coming as I keep leveling up.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Array Flatten in JavaScript

Pratham — Sun, 10 May 2026 03:26:35 +0000

Turning messy nested arrays into clean, flat ones — and understanding why it matters.

At some point, you'll run into an array that looks like this:

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

Arrays inside arrays. Arrays inside arrays inside arrays. It's like opening a box and finding more boxes inside, and inside those boxes — even more boxes.

This is a nested array, and while they show up naturally in real-world data (think category trees, API responses, multi-level menus), they're a pain to work with when you just need a simple, flat list of values. That's where flattening comes in.

When I first encountered this concept in the ChaiCode Web Dev Cohort 2026, it seemed like a niche problem. But it kept showing up — in coding challenges, interview questions, and even real project scenarios. Let me walk you through it.

What Are Nested Arrays?

A nested array is simply an array that contains other arrays as elements. The "depth" of nesting refers to how many levels deep the arrays go.

// Depth 1 — arrays inside an array
const depth1 = [1, [2, 3], [4, 5]];

// Depth 2 — arrays inside arrays inside an array
const depth2 = [1, [2, [3, 4]], [5, [6]]];

// Depth 3 — you get the idea
const depth3 = [1, [2, [3, [4, 5]]]];

Visual: Nested Array Structure

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

Level 0:  [ 1,  ┌──────┐,  ┌──────┐ ]
               │ 2, 3 │   │ 4, 5 │
               └──────┘   └──────┘

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

Level 0:  [ 1,  ┌──────────────┐,  ┌──────────┐ ]
               │ 2, ┌──────┐ │   │ 5, ┌───┐ │
               │    │ 3, 4 │ │   │    │ 6 │ │
               │    └──────┘ │   │    └───┘ │
               └──────────────┘   └──────────┘

Nested arrays create a tree-like structure. The deeper the nesting, the harder it is to access and process individual values.

How Do Nested Arrays Happen?

They're more common than you'd think:

// Grouping data by category
const menu = [
  ["Pizza", "Burger", "Pasta"],
  ["Coke", "Juice", "Water"],
  ["Ice Cream", "Brownie"],
];

// API response with nested structures
const apiData = [
  { name: "Pratham", skills: ["JS", "React"] },
  { name: "Arjun", skills: ["Python", "Django"] },
];

// Matrix / grid data
const grid = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

Why Is Flattening Useful?

Flattening means converting a nested array into a single-level array where all values are at the same depth.

// Before (nested)
[1, [2, 3], [4, [5, 6]]]

// After (flattened)
[1, 2, 3, 4, 5, 6]

But why would you want this?

1. Easier Iteration

Try running .map() or .filter() on a nested array — it doesn't reach the inner elements:

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

// This doesn't work as expected
const doubled = nested.map((item) => item * 2);
console.log(doubled); // [2, NaN, NaN]
// Arrays can't be multiplied by 2!

Flatten first, then process:

const flat = nested.flat();
const doubled = flat.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10] ✅

2. Combining Multiple Lists

// Multiple API pages returned separate arrays
const page1 = ["Item A", "Item B"];
const page2 = ["Item C", "Item D"];
const page3 = ["Item E"];

const allPages = [page1, page2, page3];
console.log(allPages); // [["Item A", "Item B"], ["Item C", "Item D"], ["Item E"]]

const allItems = allPages.flat();
console.log(allItems); // ["Item A", "Item B", "Item C", "Item D", "Item E"]

3. Simplifying Data Before Searching

const categories = [
  ["JavaScript", "TypeScript"],
  ["React", "Vue", "Angular"],
  ["Node.js", "Express"],
];

// Can't do .includes() directly on nested arrays
console.log(categories.includes("React")); // false ❌

// Flatten first
console.log(categories.flat().includes("React")); // true ✅

The Concept of Flattening — Step by Step

Let's trace what flattening does to a nested array, one level at a time:

Flatten One Level

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

Step 1:    1 → stays as is (not an array)
Step 2:    [2, 3] → unwrap → 2, 3
Step 3:    [4, [5, 6]] → unwrap → 4, [5, 6]  (only one level!)
Step 4:    7 → stays as is

Result:   [1, 2, 3, 4, [5, 6], 7]

Notice that [5, 6] is still nested. Flattening by one level only removes one layer of nesting. To go deeper, you either flatten multiple times or flatten completely.

Flatten All Levels (Deep Flatten)

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

                    ↓ remove ALL nesting ↓

Result:   [1, 2, 3, 4, 5, 6, 7]

Transformation Visual

NESTED:
┌───┬───────────┬─────────────────┬───┐
│ 1 │ ┌───┬───┐ │ ┌───┬─────────┐ │ 7 │
│   │ │ 2 │ 3 │ │ │ 4 │ ┌───┬───┐│ │   │
│   │ └───┴───┘ │ │   │ │ 5 │ 6 ││ │   │
│   │           │ │   │ └───┴───┘│ │   │
│   │           │ └───┴─────────┘ │   │
└───┴───────────┴─────────────────┴───┘

FLATTENED:
┌───┬───┬───┬───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │
└───┴───┴───┴───┴───┴───┴───┘

All values on the same level. No nesting. Clean and simple.

Different Approaches to Flatten Arrays

JavaScript gives you several ways to flatten arrays. Let's go from simplest to most advanced.

Approach 1: `Array.flat()` — The Built-In Way

ES2019 introduced .flat(), and it's by far the easiest option.

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

// Flatten one level (default)
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]]

// Flatten two levels
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6]

// Flatten ALL levels (no matter how deep)
console.log(nested.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

.flat() with no argument flattens one level
.flat(2) flattens two levels deep
.flat(Infinity) flattens everything, no matter how deeply nested

// Even crazy nesting:
const deep = [1, [2, [3, [4, [5, [6]]]]]];
console.log(deep.flat(Infinity)); // [1, 2, 3, 4, 5, 6]

This is the approach you should use in 99% of cases. It's clean, readable, and built right into the language.

Approach 2: `concat()` + Spread — Flatten One Level

Before .flat() existed, this was a common pattern:

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

const flat = [].concat(...nested);
console.log(flat); // [1, 2, 3, 4, 5]

How it works: ...nested spreads the outer array into individual arguments for concat(). Arrays get merged, non-arrays stay as-is. But this only works for one level of nesting.

// Doesn't work for deeper nesting
const deep = [1, [2, [3, 4]]];
console.log([].concat(...deep)); // [1, 2, [3, 4]] — inner array still nested

Approach 3: `reduce()` + `concat()` — Flatten One Level

Another pre-.flat() pattern:

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

const flat = nested.reduce((acc, item) => acc.concat(item), []);
console.log(flat); // [1, 2, 3, 4, 5]

For each element: if it's an array, concat merges it. If it's a value, concat appends it. The accumulator builds up the flat result step by step.

Approach 4: Recursion — Deep Flatten From Scratch

This is the approach that shows up in interviews. Can you write a flatten function yourself?

const deepFlat = (arr) => {
  const result = [];

  for (const item of arr) {
    if (Array.isArray(item)) {
      // If it's an array, recursively flatten it and add the results
      result.push(...deepFlat(item));
    } else {
      // If it's a regular value, just add it
      result.push(item);
    }
  }

  return result;
};

const nested = [1, [2, [3, [4, [5]]]]];
console.log(deepFlat(nested)); // [1, 2, 3, 4, 5]

How the Recursion Works — Traced Step by Step

deepFlat([1, [2, [3, [4]]]])

→ 1 is not an array → push 1
→ [2, [3, [4]]] IS an array → recurse:
    → deepFlat([2, [3, [4]]])
      → 2 is not an array → push 2
      → [3, [4]] IS an array → recurse:
          → deepFlat([3, [4]])
            → 3 is not an array → push 3
            → [4] IS an array → recurse:
                → deepFlat([4])
                  → 4 is not an array → push 4
                  → return [4]
            → push ...[ 4] → result: [3, 4]
            → return [3, 4]
      → push ...[3, 4] → result: [2, 3, 4]
      → return [2, 3, 4]
→ push ...[2, 3, 4] → result: [1, 2, 3, 4]

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

The function keeps calling itself whenever it finds an array, going deeper and deeper until it hits a regular value. Then the results bubble back up and get combined.

Approach 5: `reduce()` + Recursion — Compact Deep Flatten

A more concise recursive version:

const deepFlat = (arr) =>
  arr.reduce(
    (acc, item) =>
      Array.isArray(item) ? [...acc, ...deepFlat(item)] : [...acc, item],
    []
  );

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

Same logic, just packed into a reduce call. It's elegant but can be harder to read for beginners.

Approach Comparison

Approach	Depth	Readability	Interview Use	When to Use
`.flat()`	Configurable	⭐⭐⭐⭐⭐	Mention it	Production code — always
`concat` + spread	1 level	⭐⭐⭐⭐	Rarely	Quick one-level flatten
`reduce` + `concat`	1 level	⭐⭐⭐	Sometimes	Understanding reduce
Recursive function	All levels	⭐⭐⭐⭐	✅ Common	Interviews & deep flatten
`reduce` + recursion	All levels	⭐⭐	Sometimes	Showing off conciseness

Common Interview Scenarios

Flattening arrays is a very popular interview topic. Here are the variations you're most likely to see:

Scenario 1: "Flatten This Array"

The most basic question. They give you a nested array and ask you to flatten it.

// Input
const input = [1, [2, 3], [4, [5, 6, [7]]]];

// Expected output
// [1, 2, 3, 4, 5, 6, 7]

// Your answer
console.log(input.flat(Infinity));
// Or write the recursive version to show understanding

Tip: Mention .flat(Infinity) for production code, then offer to write the recursive version. This shows you know both the practical and the conceptual approach.

Scenario 2: "Flatten to a Specific Depth"

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

// Flatten to depth 1
console.log(arr.flat(1)); // [1, 2, [3, [4]]]

// Flatten to depth 2
console.log(arr.flat(2)); // [1, 2, 3, [4]]

For the custom implementation:

const flatToDepth = (arr, depth = 1) => {
  if (depth === 0) return [...arr];

  return arr.reduce(
    (acc, item) =>
      Array.isArray(item)
        ? [...acc, ...flatToDepth(item, depth - 1)]
        : [...acc, item],
    []
  );
};

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

Scenario 3: "Flatten and Remove Duplicates"

A combined problem — flatten first, then deduplicate:

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

const result = [...new Set(nested.flat(Infinity))];
console.log(result); // [1, 2, 3, 4, 5, 6]

Scenario 4: "Flatten an Array of Objects"

Sometimes the "nesting" isn't arrays inside arrays — it's nested properties:

const departments = [
  { name: "Engineering", members: ["Pratham", "Arjun"] },
  { name: "Design", members: ["Priya", "Neha"] },
  { name: "Marketing", members: ["Rahul"] },
];

// Get a flat list of all members
const allMembers = departments.flatMap((dept) => dept.members);
console.log(allMembers); // ["Pratham", "Arjun", "Priya", "Neha", "Rahul"]

.flatMap() is like .map() followed by .flat(1) — perfect for cases where each element maps to an array and you want the results merged.

Let's Practice: Hands-On Assignment

Part 1: Basic Flattening

const nested = [["a", "b"], ["c", "d"], ["e"]];

const flat = nested.flat();
console.log(flat); // ["a", "b", "c", "d", "e"]

Part 2: Deep Flattening

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

console.log(deep.flat()); // [1, 2, [3, [4, [5]]]] — only one level
console.log(deep.flat(Infinity)); // [1, 2, 3, 4, 5] — all levels

Part 3: Write Your Own Flatten Function

const myFlat = (arr) => {
  const result = [];

  for (const item of arr) {
    if (Array.isArray(item)) {
      result.push(...myFlat(item));
    } else {
      result.push(item);
    }
  }

  return result;
};

console.log(myFlat([1, [2, [3, [4]]]])); // [1, 2, 3, 4]
console.log(myFlat(["a", ["b", ["c", "d"]], "e"])); // ["a", "b", "c", "d", "e"]

Part 4: Flatten + Process

const scores = [[85, 92], [78, 95], [88, 76]];

const allScores = scores.flat();
const average = allScores.reduce((sum, s) => sum + s, 0) / allScores.length;

console.log("All scores:", allScores); // [85, 92, 78, 95, 88, 76]
console.log("Average:", average.toFixed(1)); // "85.7"

Key Takeaways

Nested arrays are arrays inside arrays. They occur naturally in grouped data, API responses, and matrix-like structures.
Flattening converts a nested array into a single-level array. Use .flat() for one level, .flat(depth) for a specific depth, and .flat(Infinity) for everything.
.flat() is the standard approach for production code. It's clean, built-in, and handles any depth.
Recursive flattening is the approach interviewers want to see. It demonstrates your understanding of recursion and Array.isArray().
.flatMap() combines mapping and flattening — useful when each element maps to an array and you want a flat result.

Wrapping Up

Array flattening might seem like a niche topic, but it sits at the intersection of practical data manipulation and interview-ready problem solving. In real projects, .flat() handles it in one method call. In interviews, writing the recursive version shows you understand how arrays, iteration, and recursion work together.

I'm learning these patterns through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and flattening arrays was one of those "aha" moments where recursion finally made intuitive sense. If you're struggling with recursion, start here — it's one of the cleanest examples of a recursive problem.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles coming as I keep building and learning.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Array Methods You Must Know

Pratham — Sun, 10 May 2026 03:21:48 +0000

The six methods that turn JavaScript arrays from basic lists into powerful tools.

When I first learned arrays, I thought I was done. Create an array, access elements by index, loop through them with for — what else is there? Then I discovered array methods, and it felt like upgrading from a bicycle to a car.

Array methods are built-in functions that every array comes with. They let you add, remove, transform, filter, and reduce data — often in a single line of code. No manual loops, no index tracking, no off-by-one errors. Just tell the array what you want, and it handles the how.

In the ChaiCode Web Dev Cohort 2026, array methods came up almost immediately after we learned the basics. And honestly, these six methods cover probably 90% of what you'll ever do with arrays in real projects. Let's go through each one.

1. `push()` and `pop()` — Adding and Removing from the End

These two are the simplest array methods. They work on the end of the array.

`push()` — Add to the End

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

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

fruits.push("Grapes", "Orange"); // You can push multiple at once
console.log(fruits); // ["Apple", "Mango", "Banana", "Grapes", "Orange"]

push() modifies the original array and returns the new length.

const newLength = fruits.push("Kiwi");
console.log(newLength); // 6

`pop()` — Remove from the End

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

const removed = fruits.pop();
console.log(removed); // "Banana" — the removed element
console.log(fruits); // ["Apple", "Mango"] — Banana is gone

pop() removes the last element, returns it, and shrinks the array by one.

Before and After

push("Banana"):
  Before: ["Apple", "Mango"]             → length: 2
  After:  ["Apple", "Mango", "Banana"]   → length: 3
                              ↑ added

pop():
  Before: ["Apple", "Mango", "Banana"]   → length: 3
  After:  ["Apple", "Mango"]             → length: 2
                              ↑ removed (returned "Banana")

2. `shift()` and `unshift()` — Adding and Removing from the Start

These work just like push() and pop(), but on the beginning of the array.

`unshift()` — Add to the Start

const tasks = ["Study", "Exercise"];
console.log(tasks); // ["Study", "Exercise"]

tasks.unshift("Wake up");
console.log(tasks); // ["Wake up", "Study", "Exercise"]

`shift()` — Remove from the Start

const tasks = ["Wake up", "Study", "Exercise"];
console.log(tasks); // ["Wake up", "Study", "Exercise"]

const first = tasks.shift();
console.log(first); // "Wake up"
console.log(tasks); // ["Study", "Exercise"]

Quick Reference: The Four Basic Methods

Method	What It Does	Position	Modifies Original	Returns
`push()`	Adds element(s)	End	✅ Yes	New length
`pop()`	Removes one element	End	✅ Yes	Removed element
`unshift()`	Adds element(s)	Start	✅ Yes	New length
`shift()`	Removes one element	Start	✅ Yes	Removed element

Think of it this way: push/pop work on the right side. unshift/shift work on the left side.

3. `forEach()` — Do Something with Each Element

forEach() is the simplest iteration method. It runs a function once for every element in the array. It's basically a cleaner replacement for a for loop when you just want to do something with each element (not transform or filter).

Traditional `for` Loop

const names = ["Pratham", "Arjun", "Priya"];

for (let i = 0; i < names.length; i++) {
  console.log(`Hello, ${names[i]}!`);
}

Same Thing with `forEach()`

const names = ["Pratham", "Arjun", "Priya"];

names.forEach((name) => {
  console.log(`Hello, ${name}!`);
});
// Hello, Pratham!
// Hello, Arjun!
// Hello, Priya!

No index tracking, no .length check, no i++. You just tell it what to do with each element.

The Callback Gets Three Arguments

const scores = [85, 92, 78];

scores.forEach((score, index, array) => {
  console.log(`Score ${index + 1}: ${score} (out of ${array.length} total)`);
});
// Score 1: 85 (out of 3 total)
// Score 2: 92 (out of 3 total)
// Score 3: 78 (out of 3 total)

Most of the time you'll only use the first argument (the element). The index and full array are there if you need them.

Important: `forEach()` Returns Nothing

const result = [1, 2, 3].forEach((n) => n * 2);
console.log(result); // undefined

forEach() is for side effects — logging, updating DOM elements, making API calls. If you need a new array back, use map().

4. `map()` — Transform Every Element

map() is one of the most important array methods you'll ever learn. It creates a new array by running a function on every element of the original array.

Think of it as: "Take each item, transform it, and give me back a new array of the results."

Example: Doubling Numbers

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

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

console.log(doubled); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] — original unchanged

Traditional `for` Loop vs `map()`

// ❌ Traditional way — manual, more code
const numbers = [1, 2, 3, 4, 5];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

// ✅ With map() — one line, declarative
const doubled = numbers.map((num) => num * 2);

Same result. But map() is shorter, doesn't require creating an empty array first, and clearly states its intent: "I'm transforming each element."

Flowchart: How `map()` Works

Original Array:    [1,    2,    3,    4,    5]
                    ↓     ↓     ↓     ↓     ↓
Callback:        num*2  num*2  num*2  num*2  num*2
                    ↓     ↓     ↓     ↓     ↓
New Array:         [2,    4,    6,    8,    10]

• Each element goes through the callback function
• Each result lands in the same position in the NEW array
• Original array is UNTOUCHED

More Examples

// Convert names to uppercase
const names = ["pratham", "arjun", "priya"];
const uppercased = names.map((name) => name.toUpperCase());
console.log(uppercased); // ["PRATHAM", "ARJUN", "PRIYA"]

// Extract a property from objects
const users = [
  { name: "Pratham", age: 22 },
  { name: "Arjun", age: 21 },
  { name: "Priya", age: 23 },
];
const userNames = users.map((user) => user.name);
console.log(userNames); // ["Pratham", "Arjun", "Priya"]

// Add formatting
const prices = [100, 250, 500];
const formatted = prices.map((price) => `₹${price}.00`);
console.log(formatted); // ["₹100.00", "₹250.00", "₹500.00"]

5. `filter()` — Keep Only What Matches

filter() creates a new array containing only the elements that pass a test (return true from the callback).

Think of it as: "Go through each item. Keep it if the condition is true. Throw it away if it's false."

Example: Get Even Numbers

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter((num) => num % 2 === 0);

console.log(evens); // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, ..., 10] — original unchanged

Flowchart: How `filter()` Works

Original Array:  [1,     2,     3,     4,     5,     6]
                  ↓      ↓      ↓      ↓      ↓      ↓
Test:           odd?   even?  odd?   even?  odd?   even?
                  ↓      ↓      ↓      ↓      ↓      ↓
Result:         false   true   false  true   false  true
                  ✗      ✓      ✗      ✓      ✗      ✓
                         ↓             ↓             ↓
New Array:             [ 2,            4,             6]

• Each element is tested by the callback
• true → element is KEPT in the new array
• false → element is EXCLUDED
• Original array is UNTOUCHED

Traditional `for` Loop vs `filter()`

// ❌ Traditional way
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evens.push(numbers[i]);
  }
}

// ✅ With filter() — one line
const evens = numbers.filter((num) => num % 2 === 0);

More Examples

// Filter adults
const ages = [15, 22, 17, 30, 12, 25, 8];
const adults = ages.filter((age) => age >= 18);
console.log(adults); // [22, 30, 25]

// Filter active users
const users = [
  { name: "Pratham", active: true },
  { name: "Arjun", active: false },
  { name: "Priya", active: true },
];
const activeUsers = users.filter((user) => user.active);
console.log(activeUsers);
// [{ name: "Pratham", active: true }, { name: "Priya", active: true }]

// Filter long strings
const words = ["hi", "hello", "hey", "greetings", "yo"];
const longWords = words.filter((word) => word.length > 3);
console.log(longWords); // ["hello", "greetings"]

6. `reduce()` — Boil Everything Down to One Value

reduce() is the most powerful — and the most confusing at first — array method. It takes an entire array and reduces it down to a single value by accumulating a result as it goes through each element.

Think of it as a snowball rolling downhill, picking up snow as it goes. It starts small and gets bigger with each element it processes.

Basic Syntax

array.reduce((accumulator, currentValue) => {
  // do something
  return updatedAccumulator;
}, initialValue);

accumulator — the running total (the snowball)
currentValue — the current element being processed
initialValue — what the accumulator starts as

Example: Sum of Numbers

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

const total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total); // 100

Visual: How `reduce()` Accumulates

Initial value: 0

Step 1:  sum = 0   + 10  →  10
Step 2:  sum = 10  + 20  →  30
Step 3:  sum = 30  + 30  →  60
Step 4:  sum = 60  + 40  →  100

Final result: 100

Think of it as:
[10, 20, 30, 40]  →  0 + 10 + 20 + 30 + 40  →  100
 entire array          accumulated step by step    one value

Step-by-Step Breakdown

Let me trace through each iteration so there's zero confusion:

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

const total = numbers.reduce((sum, num) => {
  console.log(`sum: ${sum}, num: ${num}, result: ${sum + num}`);
  return sum + num;
}, 0);

// sum: 0, num: 10, result: 10
// sum: 10, num: 20, result: 30
// sum: 30, num: 30, result: 60
// sum: 60, num: 40, result: 100

console.log(total); // 100

Each time, the returned value becomes the new sum for the next iteration. The final returned value is the result.

More Examples

// Find the maximum value
const scores = [85, 92, 78, 95, 88];

const highest = scores.reduce((max, score) => (score > max ? score : max), 0);
console.log(highest); // 95

// Count occurrences
const votes = ["yes", "no", "yes", "yes", "no", "yes"];

const tally = votes.reduce((counts, vote) => {
  counts[vote] = (counts[vote] || 0) + 1;
  return counts;
}, {});
console.log(tally); // { yes: 4, no: 2 }

Don't worry if reduce() feels tricky right now. It took me a few days of practice before I stopped needing to trace through every step manually. The key is to always ask: "What is the accumulator, and how does each element change it?"

`map()` vs `filter()` vs `forEach()` — When to Use Which

Method	Returns	Use When	Modifies Original
`forEach()`	`undefined`	You want to do something (side effects)	❌ No
`map()`	New array	You want to transform each element	❌ No
`filter()`	New array	You want to keep elements that pass a test	❌ No
`reduce()`	Single value	You want to accumulate into one result	❌ No

Rule of thumb:

Need to log or update something? → forEach()
Need a new array of transformed values? → map()
Need a new array with some elements removed? → filter()
Need one final value from the whole array? → reduce()

Let's Practice: Hands-On Assignment

Part 1: Create an Array of Numbers

const numbers = [3, 7, 12, 5, 18, 22, 9, 15, 2, 30];
console.log("Original:", numbers);
// Original: [3, 7, 12, 5, 18, 22, 9, 15, 2, 30]

Part 2: Use `map()` to Double Each Number

const doubled = numbers.map((num) => num * 2);
console.log("Doubled:", doubled);
// Doubled: [6, 14, 24, 10, 36, 44, 18, 30, 4, 60]

Part 3: Use `filter()` to Get Numbers Greater Than 10

const greaterThanTen = numbers.filter((num) => num > 10);
console.log("Greater than 10:", greaterThanTen);
// Greater than 10: [12, 18, 22, 15, 30]

Part 4: Use `reduce()` to Calculate Total Sum

const totalSum = numbers.reduce((sum, num) => sum + num, 0);
console.log("Total sum:", totalSum);
// Total sum: 123

Part 5: Combine Them (Bonus)

// Double the numbers, keep only those above 20, then sum them
const result = numbers
  .map((num) => num * 2)
  .filter((num) => num > 20)
  .reduce((sum, num) => sum + num, 0);

console.log("Final result:", result);
// Doubled: [6, 14, 24, 10, 36, 44, 18, 30, 4, 60]
// Filtered (>20): [24, 36, 44, 30, 60]
// Sum: 194

I know I said "avoid chaining initially" — but once you understand each method individually, seeing them chained together shows you why these methods are so powerful. Each one passes its result to the next.

Key Takeaways

push()/pop() add and remove from the end. unshift()/shift() add and remove from the start. All four modify the original array.
forEach() runs a function on each element for side effects. It returns nothing.
map() transforms every element and returns a new array. The original stays unchanged.
filter() tests every element and returns a new array with only the ones that passed. The original stays unchanged.
reduce() accumulates the entire array into a single value. Start with the accumulator and initial value, and build up step by step.

Wrapping Up

These six methods are the workhorses of JavaScript. In real projects — whether you're building a to-do app, filtering search results, calculating cart totals, or rendering lists in React — you'll reach for map(), filter(), and reduce() constantly. The basic push(), pop(), shift(), and unshift() handle the simpler add/remove operations.

My advice: open your browser console right now and try every example in this article. Don't just read them — type them. Change the numbers. Break things. That's how these methods become second nature.

I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and array methods were the turning point where JavaScript started feeling genuinely fun. Once you can transform, filter, and reduce data in one line, you feel like you can build anything.

Connect with me on LinkedIn or visit PrathamDEV.in. More articles coming as the journey continues.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Spread vs Rest Operators in JavaScript

Pratham — Sun, 10 May 2026 03:05:49 +0000

Same three dots, two completely different jobs.

JavaScript has this funny thing where the exact same syntax — ... (three dots) — does two opposite things depending on where you use it. In one context, it spreads values out. In another, it collects values together.

When I first encountered this in the ChaiCode Web Dev Cohort 2026, I kept mixing them up. "Wait, is ... expanding or gathering here?" It took a few examples before the distinction clicked. And once it did, I started seeing both operators everywhere — in function parameters, array manipulation, object merging, you name it.

Let me break it down the way I wish someone had explained it to me.

The Core Idea: Expanding vs Collecting

Before we look at any syntax, understand this one concept:

Spread = expanding a collection into individual pieces
Rest = collecting individual pieces into a collection

That's the entire difference. One unpacks, the other packs.

SPREAD (expanding):
[1, 2, 3]  →  1, 2, 3
"Take this group and spread it out into individual items"

REST (collecting):
1, 2, 3  →  [1, 2, 3]
"Take these individual items and gather them into a group"

Both use ... — the difference is context.

The Spread Operator — Expanding Values

The spread operator takes an iterable (like an array or object) and spreads its contents out into individual elements.

Spread with Arrays

Copying an Array

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

console.log(copy); // [1, 2, 3]
console.log(copy === original); // false — it's a new, independent array

Without spread, you might use original.slice() or Array.from(original). Spread is just cleaner.

Merging Arrays

const fruits = ["Apple", "Mango"];
const veggies = ["Carrot", "Spinach"];

const food = [...fruits, ...veggies];
console.log(food); // ["Apple", "Mango", "Carrot", "Spinach"]

Each array gets spread into individual elements, and they all land in the new array. No loops, no concat() — just clean, readable merging.

Adding Elements While Spreading

const numbers = [2, 3, 4];

const extended = [1, ...numbers, 5, 6];
console.log(extended); // [1, 2, 3, 4, 5, 6]

You can mix spread elements with regular values freely.

Visual: Spread Expanding Elements

const nums = [10, 20, 30];

Before spread:   nums = [10, 20, 30]   ← one package

                        ...nums
                         ↓ ↓ ↓
After spread:          10, 20, 30       ← individual values

Usage:  [...nums, 40]  →  [10, 20, 30, 40]
        Math.max(...nums)  →  Math.max(10, 20, 30)  →  30

Spread with Objects

Spread works on objects too — it copies all key-value pairs into a new object.

Copying an Object

const user = { name: "Pratham", age: 22 };
const userCopy = { ...user };

console.log(userCopy); // { name: "Pratham", age: 22 }
console.log(userCopy === user); // false — independent copy

Merging Objects

const defaults = { theme: "light", fontSize: 14, language: "en" };
const userPrefs = { theme: "dark", fontSize: 18 };

const settings = { ...defaults, ...userPrefs };
console.log(settings);
// { theme: "dark", fontSize: 18, language: "en" }

When properties collide, the last one wins. Here, userPrefs.theme ("dark") overwrites defaults.theme ("light"). This is a super common pattern for merging configurations.

Adding/Overriding Properties

const product = { name: "Laptop", price: 75000 };

const updatedProduct = { ...product, price: 65000, inStock: true };
console.log(updatedProduct);
// { name: "Laptop", price: 65000, inStock: true }

The original product object stays untouched. You get a new object with the updated price and the new inStock property.

Spread in Function Calls

You can spread an array as individual arguments to a function:

const scores = [85, 92, 78, 95, 88];

// Without spread — awkward
console.log(Math.max(85, 92, 78, 95, 88)); // 95

// With spread — clean
console.log(Math.max(...scores)); // 95
console.log(Math.min(...scores)); // 78

Math.max() doesn't accept an array — it wants individual numbers. Spread converts the array into exactly that.

The Rest Operator — Collecting Values

The rest operator does the opposite of spread. It collects multiple individual elements into a single array or object.

Rest in Function Parameters

The most classic use case. When you don't know how many arguments a function will receive:

const sum = (...numbers) => {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
};

console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100
console.log(sum(5)); // 5

The ...numbers parameter collects all arguments into an array called numbers. You can pass any number of arguments and they'll all be gathered up.

Visual: Rest Collecting Values

Function call:   sum(10, 20, 30, 40)
                      ↓   ↓   ↓   ↓

Parameter:       (...numbers)
                      ↓   ↓   ↓   ↓
                  numbers = [10, 20, 30, 40]   ← collected into one array

"Take all these individual values and pack them into an array"

Rest with Regular Parameters

You can combine rest with named parameters — rest just has to come last:

const introduce = (greeting, ...names) => {
  for (const name of names) {
    console.log(`${greeting}, ${name}!`);
  }
};

introduce("Hello", "Pratham", "Arjun", "Priya");
// Hello, Pratham!
// Hello, Arjun!
// Hello, Priya!

greeting gets the first argument ("Hello"), and ...names collects everything else into an array.

Rest in Destructuring — Arrays

We touched on this in the destructuring article, but it's worth repeating:

const scores = [95, 88, 76, 82, 91];

const [first, second, ...rest] = scores;

console.log(first); // 95
console.log(second); // 88
console.log(rest); // [76, 82, 91]

first and second get their values by position. ...rest gathers everything that's left.

Rest in Destructuring — Objects

const user = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  course: "Web Dev",
  isActive: true,
};

const { name, age, ...details } = user;

console.log(name); // "Pratham"
console.log(age); // 22
console.log(details); // { city: "Delhi", course: "Web Dev", isActive: true }

name and age are extracted. Everything else is collected into details. This is incredibly useful when you need to separate certain properties from the rest.

Spread vs Rest — The Differences

Here's the thing that confuses everyone: they look identical. Both are .... The difference is entirely about where they appear.

Feature	Spread `...`	Rest `...`
What it does	Expands/unpacks values	Collects/gathers values
Direction	One → Many	Many → One
Where used	Array literals, object literals, function calls	Function parameters, destructuring
Example	`[...arr]`, `{...obj}`, `fn(...arr)`	`(...args)`, `[a, ...rest]`
Result	Individual elements	An array or object

The Simple Rule

If ... appears on the right side of = (or in a function call), it's SPREAD.

If ... appears on the left side of = (or in a function parameter), it's REST.

// SPREAD — right side, expanding
const newArr = [...oldArr];
//              ^^^ spreading oldArr's values into newArr

// REST — left side, collecting
const [first, ...others] = someArray;
//            ^^^ collecting remaining values into others

// SPREAD — in a function call, expanding
console.log(Math.max(...numbers));
//                    ^^^ spreading array into individual arguments

// REST — in a function parameter, collecting
const sum = (...nums) => { /* ... */ };
//           ^^^ collecting arguments into an array

Practical Use Cases

1. Immutable Updates (Don't Mutate the Original)

This is huge in React and modern JavaScript. Instead of modifying an object or array directly, you create a new one with spread:

// Adding an item to an array without mutating
const todos = ["Buy groceries", "Clean room"];
const newTodos = [...todos, "Study JavaScript"];
console.log(newTodos); // ["Buy groceries", "Clean room", "Study JavaScript"]
console.log(todos); // ["Buy groceries", "Clean room"] — unchanged!

// Updating an object property without mutating
const user = { name: "Pratham", age: 22 };
const updatedUser = { ...user, age: 23 };
console.log(updatedUser); // { name: "Pratham", age: 23 }
console.log(user); // { name: "Pratham", age: 22 } — unchanged!

2. Flexible Functions with Rest

const logAll = (label, ...items) => {
  console.log(`--- ${label} ---`);
  items.forEach((item, i) => console.log(`${i + 1}. ${item}`));
};

logAll("My Skills", "JavaScript", "React", "Node.js", "MongoDB");
// --- My Skills ---
// 1. JavaScript
// 2. React
// 3. Node.js
// 4. MongoDB

3. Combining Arrays with Deduplication

const frontend = ["HTML", "CSS", "JavaScript", "React"];
const backend = ["Node.js", "Express", "JavaScript", "MongoDB"];

const allSkills = [...new Set([...frontend, ...backend])];
console.log(allSkills);
// ["HTML", "CSS", "JavaScript", "React", "Node.js", "Express", "MongoDB"]
// JavaScript appears only once!

4. Cloning and Extending API Responses

const apiResponse = {
  id: 101,
  name: "Pratham",
  email: "pratham@prathamdev.in",
};

// Add local metadata without touching the original response
const enriched = {
  ...apiResponse,
  fetchedAt: new Date().toISOString(),
  source: "user-api",
};

console.log(enriched);
// { id: 101, name: "Pratham", email: "pratham@...", fetchedAt: "...", source: "user-api" }

5. Separating Props in Components (React Preview)

// This pattern is everywhere in React
const Button = ({ label, onClick, ...otherProps }) => {
  console.log(label); // "Submit"
  console.log(onClick); // function
  console.log(otherProps); // { className: "btn-primary", disabled: false }
};

Button({
  label: "Submit",
  onClick: () => console.log("clicked"),
  className: "btn-primary",
  disabled: false,
});

Rest destructuring lets you pull out the props you know about and forward the rest — a pattern you'll use constantly in React.

Let's Practice: Hands-On Assignment

Part 1: Spread — Merge and Extend Arrays

const morningTasks = ["Exercise", "Breakfast", "Read news"];
const eveningTasks = ["Cook dinner", "Study", "Sleep"];

const allTasks = [...morningTasks, "Lunch break", ...eveningTasks];
console.log(allTasks);
// ["Exercise", "Breakfast", "Read news", "Lunch break", "Cook dinner", "Study", "Sleep"]

Part 2: Spread — Merge Objects with Override

const baseConfig = {
  theme: "light",
  language: "en",
  notifications: true,
};

const userConfig = {
  theme: "dark",
  fontSize: 18,
};

const finalConfig = { ...baseConfig, ...userConfig };
console.log(finalConfig);
// { theme: "dark", language: "en", notifications: true, fontSize: 18 }

Part 3: Rest — Flexible Function

const average = (...numbers) => {
  const total = numbers.reduce((sum, n) => sum + n, 0);
  return total / numbers.length;
};

console.log(average(80, 90, 70)); // 80
console.log(average(95, 88, 76, 82, 91)); // 86.4

Part 4: Rest in Destructuring

const student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
  city: "Delhi",
  email: "pratham@prathamdev.in",
};

const { name, email, ...academic } = student;
console.log(name); // "Pratham"
console.log(email); // "pratham@prathamdev.in"
console.log(academic); // { age: 22, course: "Web Dev Cohort 2026", city: "Delhi" }

Key Takeaways

Spread (...) expands an array or object into individual elements. Use it to copy, merge, and extend collections without mutating the original.
Rest (...) collects multiple individual values into a single array or object. Use it in function parameters and destructuring to handle variable-length inputs.
They look identical — the difference is context. Right side / function call = spread. Left side / function parameter = rest.
Spread is essential for immutable updates — creating new arrays and objects instead of modifying existing ones. This is a core pattern in React.
Both operators are used constantly in modern JavaScript. Array manipulation, object merging, flexible functions, destructuring, React components — they're everywhere.

Wrapping Up

Three dots, two behaviors, infinite use cases. The spread and rest operators are one of those ES6 features that seem simple on the surface but fundamentally change how you write JavaScript. Once the "expanding vs collecting" mental model clicks, you'll find yourself reaching for ... in almost every file you write.

I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and these operators come up in virtually every lesson — especially as we get into React where immutable state updates with spread are the norm. Getting comfortable with them now has already paid off.

Connect with me on LinkedIn or visit PrathamDEV.in to follow along. More articles on the way.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Destructuring in JavaScript

Pratham — Sun, 10 May 2026 02:55:25 +0000

Unpack values from arrays and objects into neat, individual variables — in a single line.

Here's a pattern I used to write all the time before I learned about destructuring:

const user = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
};

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

console.log(name); // "Pratham"
console.log(age); // 22
console.log(city); // "Delhi"

Three lines just to pull values out of an object and assign them to variables. It works, but it's repetitive. You're typing user. three times, and if the object had 10 properties, you'd have 10 lines of essentially the same pattern.

Destructuring lets you do all of that in one line:

const { name, age, city } = user;

Same result. One line. No repetition. When I first saw this in the ChaiCode Web Dev Cohort 2026, it felt like a cheat code. Let me show you how it works.

What Does Destructuring Mean?

Destructuring is a JavaScript syntax that lets you extract values from arrays or objects and assign them to variables — all in a single, clean statement.

Think of it like unpacking a suitcase. Instead of reaching in and pulling out items one at a time:

Suitcase → reach in → grab shirt → put on shelf
Suitcase → reach in → grab pants → put on shelf
Suitcase → reach in → grab shoes → put on shelf

You dump everything out at once and each item goes to its labeled spot:

Suitcase → { shirt, pants, shoes } → all on their shelves instantly

That's destructuring. One operation, multiple variables created.

Destructuring Objects

Object destructuring is the one you'll use most often. It lets you pull out specific properties by name.

Basic Syntax

const { property1, property2, property3 } = object;

The variable names inside { } must match the property names in the object.

Example

const student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
};

// Without destructuring
const name = student.name;
const age = student.age;
const course = student.course;

// With destructuring — same result, one line
const { name, age, course } = student;

console.log(name); // "Pratham"
console.log(age); // 22
console.log(course); // "Web Dev Cohort 2026"

Visual: Object → Variable Extraction

const student = {
  name: "Pratham",        ──→  const name = "Pratham"
  age: 22,                ──→  const age = 22
  course: "Web Dev 2026"  ──→  const course = "Web Dev 2026"
};

         ⬇  Destructuring does this in ONE step  ⬇

const { name, age, course } = student;
         ↑     ↑      ↑
         │     │      └── matches key "course" → gets "Web Dev 2026"
         │     └── matches key "age" → gets 22
         └── matches key "name" → gets "Pratham"

You Don't Have to Extract Everything

You can pick only the properties you need. The rest are simply ignored.

const product = {
  title: "Laptop",
  price: 75000,
  brand: "Dell",
  inStock: true,
};

// I only need title and price
const { title, price } = product;

console.log(title); // "Laptop"
console.log(price); // 75000
// brand and inStock are still in the object, just not extracted

Renaming Variables

What if the property name conflicts with an existing variable, or you just want a different name? Use the : syntax:

const person = {
  name: "Pratham",
  age: 22,
};

// Rename 'name' to 'userName' and 'age' to 'userAge'
const { name: userName, age: userAge } = person;

console.log(userName); // "Pratham"
console.log(userAge); // 22
// console.log(name);  // ❌ ReferenceError — 'name' wasn't created, 'userName' was

The syntax reads as: "take the property name and store it as userName."

Nested Object Destructuring

Objects inside objects? You can destructure those too:

const user = {
  name: "Pratham",
  address: {
    city: "Delhi",
    state: "Delhi",
    pin: 110001,
  },
};

const {
  name,
  address: { city, pin },
} = user;

console.log(name); // "Pratham"
console.log(city); // "Delhi"
console.log(pin); // 110001

Destructuring Arrays

Array destructuring works by position instead of by name. The first variable gets the first element, the second gets the second, and so on.

Basic Syntax

const [var1, var2, var3] = array;

Example

const colors = ["red", "green", "blue"];

// Without destructuring
const first = colors[0];
const second = colors[1];
const third = colors[2];

// With destructuring
const [first, second, third] = colors;

console.log(first); // "red"
console.log(second); // "green"
console.log(third); // "blue"

Visual: Array Destructuring Mapping

const colors = ["red", "green", "blue"];
                  ↓       ↓        ↓
const [first,  second,  third] = colors;
         ↓       ↓        ↓
       "red"  "green"   "blue"

Position 0 → first  = "red"
Position 1 → second = "green"
Position 2 → third  = "blue"

Skipping Elements

Don't need the second element? Just leave an empty slot with a comma:

const scores = [95, 82, 78, 90];

const [best, , , fourth] = scores;
//          ↑ ↑
//     skipped positions

console.log(best); // 95
console.log(fourth); // 90

Swapping Variables

One of the coolest tricks with array destructuring — swapping two variables without a temporary variable:

let a = 1;
let b = 2;

// Traditional swap (needs a temp variable)
// let temp = a;
// a = b;
// b = temp;

// Destructuring swap — one line, no temp
[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

The Rest Pattern (`...rest`)

Want to grab the first couple of elements and dump the rest into another array?

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

const [first, second, ...remaining] = numbers;

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

The ...remaining collects everything that's left into a new array. This works with objects too:

const user = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  course: "Web Dev",
};

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

console.log(name); // "Pratham"
console.log(otherDetails); // { age: 22, city: "Delhi", course: "Web Dev" }

Default Values

What happens if the property or element you're trying to destructure doesn't exist? You get undefined. Default values let you set a fallback.

Object Defaults

const settings = {
  theme: "dark",
  language: "en",
};

const { theme, language, fontSize = 16 } = settings;

console.log(theme); // "dark"
console.log(language); // "en"
console.log(fontSize); // 16 — not in the object, so the default kicks in

If fontSize existed in settings, its actual value would be used. The default only applies when the value is undefined.

Array Defaults

const rgb = [255, 100];

const [red, green, blue = 0] = rgb;

console.log(red); // 255
console.log(green); // 100
console.log(blue); // 0 — no third element, default is used

Combining Defaults with Renaming (Objects)

const config = {
  apiUrl: "https://api.example.com",
};

const { apiUrl: url, timeout: requestTimeout = 5000 } = config;

console.log(url); // "https://api.example.com"
console.log(requestTimeout); // 5000

This reads as: "take apiUrl and call it url; take timeout and call it requestTimeout, but if it doesn't exist, default to 5000."

Before vs After Destructuring

Let's see the transformation across different scenarios:

Extracting Object Properties

// ❌ Before
const name = person.name;
const age = person.age;
const city = person.city;

// ✅ After
const { name, age, city } = person;

Extracting Array Elements

// ❌ Before
const first = scores[0];
const second = scores[1];
const third = scores[2];

// ✅ After
const [first, second, third] = scores;

Function Parameters

// ❌ Before
function displayUser(user) {
  console.log(user.name);
  console.log(user.age);
  console.log(user.city);
}

// ✅ After — destructure right in the parameter
function displayUser({ name, age, city }) {
  console.log(name);
  console.log(age);
  console.log(city);
}

displayUser({ name: "Pratham", age: 22, city: "Delhi" });

This last one — destructuring in function parameters — is incredibly common in modern JavaScript and React. You'll see it everywhere.

Benefits of Destructuring

Let's summarize why destructuring isn't just a "nice to have" but a genuine improvement:

Benefit	Explanation
Less repetition	No more `obj.property` over and over
Cleaner code	One line instead of many for extracting values
Better readability	You instantly see which properties are being used
Default values	Handle missing data gracefully without extra `if` checks
Function params	Destructure right in the parameter list — cleaner function signatures
Modern standard	Used everywhere in ES6+, React, Node.js, and APIs

Let's Practice: Hands-On Assignment

Part 1: Object Destructuring

const movie = {
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010,
  rating: 8.8,
};

// Destructure title and director
const { title, director } = movie;
console.log(`${title} by ${director}`); // "Inception by Christopher Nolan"

Part 2: Array Destructuring

const topCities = ["Tokyo", "Delhi", "Shanghai", "São Paulo", "Mumbai"];

const [first, second, ...others] = topCities;
console.log(`#1: ${first}`); // "#1: Tokyo"
console.log(`#2: ${second}`); // "#2: Delhi"
console.log(`Others:`, others); // Others: ["Shanghai", "São Paulo", "Mumbai"]

Part 3: Default Values

const userProfile = {
  username: "pratham16",
  email: "pratham@prathamdev.in",
};

const { username, email, bio = "No bio yet." } = userProfile;
console.log(username); // "pratham16"
console.log(bio); // "No bio yet."

Part 4: Destructuring in Function Parameters

const printStudent = ({ name, age, course }) => {
  console.log(`${name}, ${age} — enrolled in ${course}`);
};

printStudent({
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
});
// "Pratham, 22 — enrolled in Web Dev Cohort 2026"

Part 5: Variable Swap

let x = 100;
let y = 200;

console.log(`Before: x=${x}, y=${y}`); // Before: x=100, y=200

[x, y] = [y, x];

console.log(`After: x=${x}, y=${y}`); // After: x=200, y=100

Key Takeaways

Destructuring extracts values from objects (by key name) and arrays (by position) into individual variables — all in one line.
Object destructuring uses { } and matches variable names to property names. You can rename with : and skip properties you don't need.
Array destructuring uses [ ] and matches by position. You can skip elements with commas and collect leftovers with ...rest.
Default values (= fallback) kick in when a property or element is undefined. They're perfect for handling missing data.
Destructuring is the modern standard — you'll see it in function parameters, API responses, React props, and virtually all modern JavaScript code.

Wrapping Up

Destructuring is one of those ES6 features that fundamentally changes how you write JavaScript. Before it, extracting values was tedious and repetitive. After it, your code becomes tighter, more readable, and more expressive. And the best part? Once you start using it, it becomes second nature — you'll destructure without even thinking about it.

I'm working through all of this in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and destructuring comes up in nearly every lesson now. Array methods, React components, API responses — it's everywhere. Getting comfortable with it early is one of the best investments you can make.

Connect with me on LinkedIn or visit PrathamDEV.in to follow along. More articles on the way as the learning continues.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Arrow Functions in JavaScript: A Simpler Way to Write Functions

Pratham — Sun, 10 May 2026 02:40:46 +0000

Less typing, cleaner syntax, and the modern way to write JavaScript functions.

The first time I saw an arrow function, I thought someone had accidentally deleted half the code. No function keyword? No curly braces? No return statement? And it still works?

const square = n => n * n;

That's a complete, working function. It takes a number, squares it, and returns the result. Compare that to the traditional version:

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

Same behavior, half the characters. Arrow functions were introduced in ES6 (2015), and they've become the default way to write functions in modern JavaScript. In the ChaiCode Web Dev Cohort 2026, they show up in almost every lesson — callbacks, array methods, event handlers, React components. If you're going to write modern JS, you need to be comfortable with them.

Let's break it down step by step.

What Are Arrow Functions?

An arrow function is a shorter, more concise syntax for writing function expressions. It uses the => (fat arrow) instead of the function keyword.

That's really it. Arrow functions aren't some completely different concept — they're just a cleaner way to write the function expressions you already know.

The Name

The => symbol looks like an arrow, which is why they're called "arrow functions." Some people also call them "fat arrow functions" because => uses the equals sign (fat) rather than a thin hyphen (->).

Arrow Function Syntax — The Transformation

Let me show you how a regular function transforms into an arrow function, step by step. This is the mental model that made it click for me.

Starting Point: A Regular Function Expression

const greet = function(name) {
  return `Hello, ${name}!`;
};

Step 1: Remove the `function` Keyword, Add `=>`

const greet = (name) => {
  return `Hello, ${name}!`;
};

Step 2: If the Body Is a Single Expression, Remove `{}` and `return`

const greet = (name) => `Hello, ${name}!`;

Step 3: If There's Only One Parameter, Remove the Parentheses

const greet = name => `Hello, ${name}!`;

Done. Four lines became one. Let's visualize that transformation:

REGULAR FUNCTION:
const greet = function(name) {
                ↑        ↑
            keyword   params
  return `Hello, ${name}!`;
    ↑
  explicit return
};

         ⬇ Transform ⬇

ARROW FUNCTION:
const greet = name => `Hello, ${name}!`;
                 ↑  ↑         ↑
             param arrow   implicit return
                         (no return keyword needed)

Arrow Functions with One Parameter

When your function takes exactly one parameter, you can skip the parentheses around it. This is the shortest form of an arrow function.

// With parentheses — works fine
const double = (n) => n * 2;

// Without parentheses — also works, slightly cleaner
const double = n => n * 2;

console.log(double(5));  // 10
console.log(double(12)); // 24

More Examples

const shout = message => message.toUpperCase() + "!!!";
console.log(shout("hello")); // "HELLO!!!"

const isPositive = num => num > 0;
console.log(isPositive(5));  // true
console.log(isPositive(-3)); // false

const getLength = str => str.length;
console.log(getLength("Pratham")); // 7

Each of these is a complete function — one parameter in, one value out. Clean and readable.

Arrow Functions with Multiple Parameters

When you have zero or more than one parameter, the parentheses are required.

Zero Parameters

const sayHello = () => "Hello, World!";
console.log(sayHello()); // "Hello, World!"

The () is mandatory here — you can't just write => "Hello, World!" with nothing before the arrow.

Two or More Parameters

const add = (a, b) => a + b;
console.log(add(10, 5)); // 15

const fullName = (first, last) => `${first} ${last}`;
console.log(fullName("Pratham", "Bhardwaj")); // "Pratham Bhardwaj"

const max = (a, b) => a > b ? a : b;
console.log(max(15, 22)); // 22

Quick Reference: When to Use Parentheses

Parameters	Parentheses	Example
Zero	✅ Required	`() => "hello"`
One	❌ Optional	`n => n * 2` or `(n) => n * 2`
Two or more	✅ Required	`(a, b) => a + b`

My personal preference: I always include parentheses even with one parameter. (n) => n * 2 is barely longer than n => n * 2, and it's consistent with the other cases. But both are valid — pick a style and stick with it.

Implicit Return vs Explicit Return

This is probably the thing that confuses beginners the most about arrow functions, so let me be very clear about it.

Implicit Return — No `{}`, No `return` Keyword

When the function body is a single expression, you can omit the curly braces and the return keyword. The result of the expression is automatically returned.

// Implicit return — the expression after => is returned automatically
const square = n => n * n;
const greet = name => `Hello, ${name}!`;
const isEven = n => n % 2 === 0;

console.log(square(4));       // 16
console.log(greet("Pratham")); // "Hello, Pratham!"
console.log(isEven(7));       // false

No curly braces = implicit return. The arrow function evaluates the expression and gives it back. Simple.

Explicit Return — With `{}` and `return`

When the function body has multiple statements or you use curly braces for any reason, you must write return explicitly. Without it, the function returns undefined.

// Explicit return — curly braces mean you MUST write return
const calculateDiscount = (price, percentage) => {
  const discount = price * percentage / 100;
  const finalPrice = price - discount;
  return finalPrice;
};

console.log(calculateDiscount(1000, 20)); // 800

The Gotcha: Forgetting `return` with Curly Braces

This is a real bug that I've made more than once:

// ❌ BUG — curly braces but no return
const multiply = (a, b) => {
  a * b;  // This computes the value but doesn't return it!
};
console.log(multiply(3, 4)); // undefined 😱

// ✅ FIXED — add return
const multiply = (a, b) => {
  return a * b;
};
console.log(multiply(3, 4)); // 12 ✅

The rule is dead simple:

No curly braces → result is returned automatically (implicit)
Curly braces → you must write return yourself (explicit)

Visual Comparison

IMPLICIT RETURN (single expression, no braces):
const add = (a, b) => a + b;
                       ↑
                 this value is returned automatically

EXPLICIT RETURN (multiple statements, with braces):
const add = (a, b) => {
  const sum = a + b;    ← statement 1
  return sum;           ← you MUST return manually
};

Arrow Function vs Normal Function: The Basic Differences

At a beginner level, here are the main differences you need to know:

Feature	Normal Function	Arrow Function
Syntax	`function name(params) {}`	`(params) => {}`
`function` keyword	✅ Required	❌ Not used
Implicit return	❌ Always needs `return`	✅ Yes, for single expressions
Parentheses (1 param)	✅ Required	❌ Optional
Hoisting	✅ Declarations are hoisted	❌ Not hoisted (they're expressions)
Best for	Standalone, named functions	Callbacks, inline functions

Hoisting Difference — Quick Reminder

// Normal function declaration — hoisted, works before definition
console.log(add(2, 3)); // 5 ✅

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

// Arrow function — NOT hoisted, fails before definition
// console.log(multiply(2, 3)); // ❌ ReferenceError

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

console.log(multiply(2, 3)); // 6 ✅ — works after definition

Arrow functions are always function expressions assigned to variables. And as we covered in a previous article, function expressions aren't hoisted.

💡 Note: Arrow functions also behave differently with this keyword compared to regular functions. That's an important topic, but it involves concepts like execution context and binding that go beyond beginner territory. For now, just know the difference exists — we'll tackle it when we're ready.

Arrow Functions in Action: Real-World Use Cases

Arrow functions truly shine when used as callbacks — functions passed as arguments to other functions. This is where you'll use them the most.

With `map()` — Transform Every Element

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

// Normal function
const doubled1 = numbers.map(function(num) {
  return num * 2;
});

// Arrow function — so much cleaner
const doubled2 = numbers.map(num => num * 2);

console.log(doubled2); // [2, 4, 6, 8, 10]

With `filter()` — Keep Only What Matches

const ages = [15, 22, 17, 30, 12, 25];

const adults = ages.filter(age => age >= 18);
console.log(adults); // [22, 30, 25]

With `forEach()` — Do Something with Each Element

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

fruits.forEach(fruit => console.log(`I like ${fruit}`));
// I like Apple
// I like Mango
// I like Banana

With `setTimeout()` — Delayed Execution

setTimeout(() => {
  console.log("This runs after 2 seconds ⏰");
}, 2000);

See how natural the arrow function looks as a callback? No function keyword cluttering things up, no unnecessary return. It's exactly why arrow functions became the modern standard for inline functions.

Let's Practice: Hands-On Assignment

Part 1: Normal Function → Arrow Function

// Normal function: square of a number
function square(n) {
  return n * n;
}
console.log(square(5)); // 25

// Rewrite as arrow function
const squareArrow = n => n * n;
console.log(squareArrow(5)); // 25

Part 2: Even or Odd Checker

const checkEvenOdd = n => n % 2 === 0 ? "Even" : "Odd";

console.log(checkEvenOdd(4));  // "Even"
console.log(checkEvenOdd(7));  // "Odd"
console.log(checkEvenOdd(0));  // "Even"
console.log(checkEvenOdd(13)); // "Odd"

Part 3: Arrow Function Inside `map()`

const prices = [100, 250, 500, 1200, 3000];

// Add 18% GST to each price
const withGST = prices.map(price => Math.round(price * 1.18));
console.log(withGST); // [118, 295, 590, 1416, 3540]

// Format as currency strings
const formatted = prices.map(price => `₹${price}`);
console.log(formatted); // ["₹100", "₹250", "₹500", "₹1200", "₹3000"]

Part 4: Multiple Conversions — Normal to Arrow

// Convert each of these to arrow functions:

// 1. Normal
function greet(name) {
  return `Hello, ${name}!`;
}

// Arrow
const greetArrow = name => `Hello, ${name}!`;

// 2. Normal
function getArea(length, width) {
  return length * width;
}

// Arrow
const getAreaArrow = (length, width) => length * width;

// 3. Normal
function getCurrentYear() {
  return new Date().getFullYear();
}

// Arrow
const getCurrentYearArrow = () => new Date().getFullYear();

// Test them all
console.log(greetArrow("Pratham"));       // "Hello, Pratham!"
console.log(getAreaArrow(10, 5));         // 50
console.log(getCurrentYearArrow());       // 2026

Arrow Function Syntax Breakdown — Complete Reference

┌─────────────────────────────────────────────────────────────────┐
│                   ARROW FUNCTION ANATOMY                        │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  const functionName = (param1, param2) => expression;           │
│        ↑                ↑          ↑    ↑      ↑                │
│     variable       parameters     fat arrow  implicit return    │
│     name           (inputs)       symbol     (single expr)      │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  const functionName = (param1, param2) => {                     │
│    // multiple statements                                       │
│    return result;  ← explicit return required                   │
│  };                                                             │
│                                                                 │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  SHORTHAND RULES:                                               │
│  • 1 param → parentheses optional:    n => n * 2                │
│  • 0 params → parentheses required:   () => "hello"             │
│  • 2+ params → parentheses required:  (a, b) => a + b           │
│  • 1 expression → braces optional:    n => n * 2  (auto return) │
│  • 2+ statements → braces required:   (n) => { ... return; }    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Takeaways

Arrow functions are a shorter syntax for function expressions. They use => instead of the function keyword.
With one parameter, parentheses are optional. With zero or multiple parameters, parentheses are required.
Implicit return: if the body is a single expression (no curly braces), the result is returned automatically. Explicit return: if you use curly braces, you must write return.
Arrow functions are not hoisted — you must define them before calling them, just like any function expression.
They're the modern standard for callbacks and inline functions — map(), filter(), forEach(), setTimeout(), and beyond.

Wrapping Up

Arrow functions felt like magic when I first saw them, but they're really just syntactic sugar — a shorter, cleaner way to write function expressions. The key is understanding when you can use implicit return (single expression, no braces) vs when you need explicit return (multiple statements, with braces). Once that clicks, you'll naturally reach for arrow syntax every time.

I'm working through all of this in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and arrow functions are one of those things that show up in every single lesson now. Array methods, event handlers, React components — they all use arrow functions. Getting comfortable with them early pays off immediately.

Connect with me on LinkedIn or visit PrathamDEV.in to follow my journey. More articles coming as I keep building and learning.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Template Literals in JavaScript

Pratham — Sun, 10 May 2026 02:23:34 +0000

The small syntax upgrade that makes a massive difference in how you write strings.

If you've written even a little bit of JavaScript, you've done string concatenation. You've jammed variables and text together with + signs, fought with quote marks, and probably ended up with something that looked like this:

let name = "Pratham";
let age = 22;
let city = "Delhi";

let intro = "Hi, my name is " + name + ". I am " + age + " years old and I live in " + city + ".";
console.log(intro);

It works. But look at it. Really look at it. Count the quotes. Count the + signs. Count the spaces you had to manually add. Now imagine this string is three lines long with six variables. Welcome to concatenation hell.

Template literals fix all of this. They were introduced in ES6 (2015), and once I started using them in the ChaiCode Web Dev Cohort 2026, I genuinely couldn't go back. Let me show you why.

The Problem with Traditional String Concatenation

Before template literals existed, the + operator was the only way to build strings that included variables or expressions. It works, but it comes with some real pain points.

Pain Point 1: Readability Gets Destroyed

let product = "Laptop";
let price = 75000;
let discount = 10;

let message = "The " + product + " costs ₹" + price + " but you get " + discount + "% off. Final price: ₹" + (price - (price * discount / 100)) + ".";
console.log(message);
// "The Laptop costs ₹75000 but you get 10% off. Final price: ₹67500."

Try reading that concatenation line. Your eyes jump between strings and variables, you lose track of what's text and what's a value, and the inline math expression makes it even worse. It works, but it's not pleasant to write or read.

Pain Point 2: Quotes Inside Strings Are a Nightmare

// Trying to include a quote inside a string
let sentence = "She said, \"JavaScript is awesome!\"";
console.log(sentence); // She said, "JavaScript is awesome!"

You have to escape quotes with backslashes. It's ugly. And if you mix single and double quotes:

let html = '<div class="card"><p>Hello, ' + name + '!</p></div>';

You're constantly juggling which quote type to use on the outside vs the inside. One wrong move and you get a syntax error.

Pain Point 3: Multi-Line Strings Are Painful

// Want to write HTML on multiple lines? Good luck.
let card = "<div class=\"card\">\n" +
           "  <h2>" + name + "</h2>\n" +
           "  <p>Age: " + age + "</p>\n" +
           "</div>";

You need \n for line breaks and + at the end of every line. It's fragile, hard to edit, and looks nothing like the actual output.

The Root Problem

Traditional concatenation forces you to think about the syntax (quotes, plus signs, escape characters, line breaks) more than the actual content of your string. Template literals flip that around.

Template Literal Syntax

Template literals use backticks ` ` instead of single or double quotes, and ${} to embed variables or expressions directly inside the string.

The Basics

let name = "Pratham";
let age = 22;

// Old way — concatenation
let intro1 = "Hi, I'm " + name + " and I'm " + age + " years old.";

// New way — template literal
let intro2 = `Hi, I'm ${name} and I'm ${age} years old.`;

console.log(intro1); // Hi, I'm Pratham and I'm 22 years old.
console.log(intro2); // Hi, I'm Pratham and I'm 22 years old.

Same output. But look at the template literal version — it reads like a normal sentence. No +, no quote juggling, no manual spaces. You just write the string as you want it to appear and drop in variables where you need them.

Where's the Backtick Key?

The backtick ` is usually on the top-left of your keyboard, below the Esc key and next to the 1 key. It's the same key as the tilde ~. If you've never used it before, now you will — a lot.

Embedding Variables in Strings (String Interpolation)

The ${} syntax inside a template literal is called string interpolation. Whatever you put between the curly braces gets evaluated and inserted into the string.

Variables

let course = "Web Dev Cohort 2026";
let platform = "ChaiCode";

console.log(`I'm enrolled in ${course} at ${platform}.`);
// I'm enrolled in Web Dev Cohort 2026 at ChaiCode.

Expressions

You're not limited to just variable names. You can put any valid JavaScript expression inside ${}:

let price = 1200;
let quantity = 3;

console.log(`Total: ₹${price * quantity}`);
// Total: ₹3600

console.log(`Is expensive? ${price > 1000 ? "Yes" : "No"}`);
// Is expensive? Yes

console.log(`Half of 50 is ${50 / 2}`);
// Half of 50 is 25

Function Calls

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

console.log(`Message: ${greet("Pratham")}`);
// Message: Hello, Pratham!

String Interpolation — Visual

Here's what happens under the hood when JavaScript processes a template literal:

Template:   `Hi, ${name}! You are ${age} years old.`
                   │                 │
                   ▼                 ▼
Evaluate:     name = "Pratham"   age = 22
                   │                 │
                   ▼                 ▼
Result:     "Hi, Pratham! You are 22 years old."

JavaScript scans the template, finds each ${}, evaluates the expression inside, converts the result to a string, and splices it in. You get one final, clean string.

Multi-Line Strings

This is one of my favorite things about template literals. With backticks, line breaks in your code become actual line breaks in the output. No \n, no +, no nonsense.

Old Way

let html = "<div class=\"card\">\n" +
           "  <h2>Pratham</h2>\n" +
           "  <p>Web Developer</p>\n" +
           "</div>";
console.log(html);

Template Literal Way

let html = `<div class="card">
  <h2>Pratham</h2>
  <p>Web Developer</p>
</div>`;
console.log(html);

Both produce the exact same output:

<div class="card">
  <h2>Pratham</h2>
  <p>Web Developer</p>
</div>

But the template literal version looks like actual HTML. You can read it, edit it, and understand it at a glance. And notice — no need to escape the double quotes inside the HTML either, because the string is wrapped in backticks, not quotes.

Combining Multi-Line + Interpolation

This is where template literals really shine — building dynamic, multi-line output:

let name = "Pratham";
let role = "Full-Stack Developer";
let skills = ["JavaScript", "React", "Node.js"];

let profile = `
=========================
  Developer Profile
=========================
  Name:   ${name}
  Role:   ${role}
  Skills: ${skills.join(", ")}
=========================
`;

console.log(profile);

Output:

=========================
  Developer Profile
=========================
  Name:   Pratham
  Role:   Full-Stack Developer
  Skills: JavaScript, React, Node.js
=========================

Try building that with + and \n. It's doable, but it would be three times as long and ten times as ugly.

Before vs After: A Side-by-Side Comparison

Let's put traditional concatenation and template literals head to head across different scenarios:

Simple Variable Insertion

// ❌ Before (concatenation)
let msg1 = "Welcome, " + name + "!";

// ✅ After (template literal)
let msg2 = `Welcome, ${name}!`;

Multiple Variables

// ❌ Before
let bio1 = "I'm " + name + ", " + age + " years old, from " + city + ".";

// ✅ After
let bio2 = `I'm ${name}, ${age} years old, from ${city}.`;

Expressions Inside Strings

// ❌ Before
let total1 = "Total: ₹" + (price * qty) + " (including " + (price * qty * 0.18) + " GST)";

// ✅ After
let total2 = `Total: ₹${price * qty} (including ${price * qty * 0.18} GST)`;

Multi-Line HTML

// ❌ Before
let card1 = "<div>\n  <h1>" + title + "</h1>\n  <p>" + desc + "</p>\n</div>";

// ✅ After
let card2 = `<div>
  <h1>${title}</h1>
  <p>${desc}</p>
</div>`;

Quotes Inside Strings

// ❌ Before
let quote1 = "He said, \"JavaScript is the best!\"";

// ✅ After
let quote2 = `He said, "JavaScript is the best!"`;

The pattern is clear: template literals are shorter, cleaner, and easier to read in every case.

Use Cases in Modern JavaScript

Template literals aren't just a "nice to have." They're everywhere in modern JavaScript. Here are the most common places you'll use them:

1. Dynamic UI Content

let user = { name: "Pratham", notifications: 5 };

let greeting = `Hello, ${user.name}! You have ${user.notifications} new notifications.`;
console.log(greeting);
// Hello, Pratham! You have 5 new notifications.

2. Building HTML Dynamically

let products = [
  { name: "Laptop", price: 75000 },
  { name: "Phone", price: 25000 },
  { name: "Headphones", price: 3000 }
];

let html = products.map(p => `<li>${p.name} — ₹${p.price}</li>`).join("\n");
console.log(`<ul>\n${html}\n</ul>`);
// <ul>
// <li>Laptop — ₹75000</li>
// <li>Phone — ₹25000</li>
// <li>Headphones — ₹3000</li>
// </ul>

3. API URLs with Dynamic Parameters

let userId = 42;
let endpoint = `https://api.example.com/users/${userId}/posts`;
console.log(endpoint);
// https://api.example.com/users/42/posts

Compare that to: "https://api.example.com/users/" + userId + "/posts". No contest.

4. Console Logging for Debugging

let x = 10;
let y = 20;

console.log(`x = ${x}, y = ${y}, sum = ${x + y}`);
// x = 10, y = 20, sum = 30

5. Error Messages

let field = "email";
let minLength = 5;

throw new Error(`Validation failed: "${field}" must be at least ${minLength} characters.`);
// Error: Validation failed: "email" must be at least 5 characters.

Let's Practice: Hands-On Assignment

Part 1: Basic Interpolation

let name = "Pratham";
let age = 22;
let city = "Delhi";

// Using template literals
let intro = `My name is ${name}. I'm ${age} years old and I live in ${city}.`;
console.log(intro);
// My name is Pratham. I'm 22 years old and I live in Delhi.

Part 2: Expression Inside Template Literal

let price = 499;
let quantity = 4;

console.log(`Subtotal: ₹${price * quantity}`);
// Subtotal: ₹1996

console.log(`GST (18%): ₹${(price * quantity * 0.18).toFixed(2)}`);
// GST (18%): ₹359.28

console.log(`Grand Total: ₹${(price * quantity * 1.18).toFixed(2)}`);
// Grand Total: ₹2355.28

Part 3: Multi-Line Student Profile

let student = {
  name: "Pratham Bhardwaj",
  course: "Web Dev Cohort 2026",
  skills: ["JavaScript", "React", "Node.js"],
  isActive: true
};

let profile = `
┌────────────────────────────────────┐
│         Student Profile            │
├────────────────────────────────────┤
│ Name:    ${student.name}
│ Course:  ${student.course}
│ Skills:  ${student.skills.join(", ")}
│ Active:  ${student.isActive ? "Yes ✅" : "No ❌"}
└────────────────────────────────────┘
`;

console.log(profile);

Part 4: Rewrite Concatenation as Template Literals

// ❌ Old way — rewrite this using template literals
let old = "Dear " + name + ",\nThank you for enrolling in " + student.course + ".\nYour " + student.skills.length + " skills are noted.\nBest regards.";

// ✅ Your rewrite
let modern = `Dear ${student.name},
Thank you for enrolling in ${student.course}.
Your ${student.skills.length} skills are noted.
Best regards.`;

console.log(modern);

Key Takeaways

Traditional concatenation with + is messy, hard to read, and error-prone — especially with multiple variables, expressions, or multi-line strings.
Template literals use backticks ` and ${} for interpolation. They produce the exact same result but with dramatically better readability.
Any JavaScript expression works inside ${} — variables, math, ternaries, function calls, property access — all of it.
Multi-line strings just work with template literals. Line breaks in your code become line breaks in the output. No \n needed.
Template literals are the standard in modern JavaScript. You'll see them in dynamic HTML, API URLs, error messages, console logs, and everywhere else strings are built dynamically.

Wrapping Up

Template literals are one of those features where you wonder, "How did anyone write JavaScript before this?" The answer is: painfully, with lots of + signs and escaped quotes. ES6 gave us a better way, and there's no reason not to use it.

If you take away just one habit from this article, let it be this: every time you reach for + to build a string with variables, stop — and use a template literal instead. Your code will be cleaner, your debugging will be faster, and anyone reading your code will thank you.

I'm building these habits through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and writing about it helps me internalize these patterns. If you're on a similar learning path, I hope this helped.

Connect with me on LinkedIn or check out PrathamDEV.in. More articles coming as the journey continues.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Understanding Objects in JavaScript

Pratham — Sun, 10 May 2026 01:35:24 +0000

The data structure that mirrors the real world — and the backbone of nearly everything in JS.

In my last article, we talked about arrays — ordered lists of values accessed by index. Arrays are great when you have a collection of similar things: a list of fruits, a bunch of scores, a set of tasks. But what happens when you need to describe a single thing with multiple properties?

Let's say I want to represent myself in code. I have a name, an age, a city, an email, and a skill set. Do I create five separate variables? Do I shove them all into an array?

// Option 1: Separate variables — messy, no connection between them
let name = "Pratham";
let age = 22;
let city = "Delhi";

// Option 2: An array — but what does index 0 mean? What's index 2?
let person = ["Pratham", 22, "Delhi"];
// person[0]? Is that the name? The age? No way to tell without checking.

Neither option is great. What you actually want is a way to label each piece of data. And that's exactly what objects give you.

What Is an Object?

An object is a collection of key-value pairs. Each key is a label (also called a property name), and each value is the data associated with that label.

Think of it like an ID card. Your ID card doesn't just dump random values — it organizes them:

┌──────────────────────────────┐
│         ID CARD              │
├──────────────┬───────────────┤
│  Name        │  Pratham      │
│  Age         │  22           │
│  City        │  Delhi        │
│  IsStudent   │  true         │
│  Email       │  pratham@...  │
└──────────────┴───────────────┘
   (keys)          (values)

Every piece of information has a name (key) and a value. You don't need to remember positions — you just ask for the property by name. "What's the person's city?" → person.city. Clear, readable, intuitive.

Why Do We Need Objects?

Let me make the case with a direct comparison.

Without Objects — Disconnected Variables

let studentName = "Pratham";
let studentAge = 22;
let studentCourse = "Web Dev Cohort 2026";
let studentIsActive = true;

These variables happen to be about the same student, but JavaScript doesn't know that. They're four completely unrelated values floating around in your code.

With an Object — Everything Together

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true
};

Now all the data about this student is bundled into one variable. You can pass student to a function, log it, send it to an API — it travels as one cohesive unit. That's the power of objects.

Creating Objects

The most common way to create an object is with object literal syntax — curly braces {} with key-value pairs inside.

Syntax

let objectName = {
  key1: value1,
  key2: value2,
  key3: value3
};

Rules for Keys and Values

Keys are always strings (or Symbols, but ignore that for now). If the key is a simple word, you don't need quotes.
Values can be anything — strings, numbers, booleans, arrays, even other objects.

Examples

// A person object
let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  isStudent: true
};

// An object with an array as a value
let developer = {
  name: "Pratham",
  skills: ["JavaScript", "React", "Node.js"],
  yearsOfExperience: 1
};

// An empty object (you'll add properties later)
let config = {};

Key-Value Structure — Visual

let person = {
    name: "Pratham",      ←  key: "name"       value: "Pratham"
    age: 22,              ←  key: "age"        value: 22
    city: "Delhi",        ←  key: "city"       value: "Delhi"
    isStudent: true       ←  key: "isStudent"  value: true
};

Each line inside the object is a property. A property = a key + a value. That's the whole structure.

Accessing Properties

You have two ways to access the value of a property: dot notation and bracket notation.

Dot Notation — The Clean Way

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

console.log(person.name); // "Pratham"
console.log(person.age);  // 22
console.log(person.city); // "Delhi"

Dot notation is what you'll use 90% of the time. It's clean, readable, and easy to type.

Bracket Notation — The Flexible Way

console.log(person["name"]); // "Pratham"
console.log(person["age"]);  // 22
console.log(person["city"]); // "Delhi"

Bracket notation uses a string inside square brackets. It looks a bit like array indexing, but instead of a number, you use the property name as a string.

When Do You Actually Need Bracket Notation?

Dot notation has a limitation: the key must be a valid JavaScript identifier (no spaces, no starting with numbers, no special characters). Bracket notation handles all of these:

let product = {
  "product-name": "Laptop",       // Has a hyphen — dot won't work
  "price in INR": 75000,          // Has spaces — dot won't work
  2024: "Current year"            // Starts with a number — dot won't work
};

// console.log(product.product-name);   // ❌ SyntaxError
console.log(product["product-name"]);   // ✅ "Laptop"
console.log(product["price in INR"]);   // ✅ 75000
console.log(product[2024]);             // ✅ "Current year"

And here's the other big use case — dynamic property access using a variable:

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

let key = "name";
console.log(person[key]);   // "Pratham" ✅
// console.log(person.key); // undefined ❌ — looks for a property literally named "key"

This is hugely important when you don't know the property name ahead of time — like when you're looping through keys or reading user input.

Quick Comparison

Feature	Dot Notation	Bracket Notation
Syntax	`obj.key`	`obj["key"]`
Readability	✅ Cleaner	Slightly verbose
Dynamic keys (variables)	❌ No	✅ Yes
Keys with spaces/hyphens	❌ No	✅ Yes
When to use	Most of the time	Dynamic or unusual keys

Updating Object Properties

Changing a property value is straightforward — just assign a new value to the key.

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi"
};

// Updating the city
person.city = "Gurugram";
console.log(person.city); // "Gurugram"

// Updating the age
person.age = 23;
console.log(person.age); // 23

console.log(person);
// { name: "Pratham", age: 23, city: "Gurugram" }

Works with bracket notation too:

person["city"] = "Mumbai";
console.log(person.city); // "Mumbai"

The original object is modified directly. Objects in JavaScript are mutable — you change them in place.

Adding and Deleting Properties

Objects in JavaScript aren't fixed. You can add new properties and remove existing ones at any time.

Adding a New Property

Just assign a value to a key that doesn't exist yet. JavaScript will create it for you.

let person = {
  name: "Pratham",
  age: 22
};

// Adding new properties
person.city = "Delhi";
person.isStudent = true;
person.skills = ["JavaScript", "React"];

console.log(person);
// {
//   name: "Pratham",
//   age: 22,
//   city: "Delhi",
//   isStudent: true,
//   skills: ["JavaScript", "React"]
// }

Deleting a Property

Use the delete keyword:

let person = {
  name: "Pratham",
  age: 22,
  city: "Delhi",
  tempNote: "Remove this later"
};

delete person.tempNote;

console.log(person);
// { name: "Pratham", age: 22, city: "Delhi" }
// tempNote is completely gone

delete removes the property entirely — not just the value, but the key too. After deletion, person.tempNote would return undefined, and the key won't show up if you loop through the object.

Visual: Before and After

BEFORE delete:                      AFTER delete person.tempNote:
┌──────────┬───────────────────┐    ┌──────────┬───────────────────┐
│ name     │ "Pratham"         │    │ name     │ "Pratham"         │
│ age      │ 22                │    │ age      │ 22                │
│ city     │ "Delhi"           │    │ city     │ "Delhi"           │
│ tempNote │ "Remove this..."  │    └──────────┴───────────────────┘
└──────────┴───────────────────┘     (tempNote is gone — not just empty, GONE)

Looping Through Object Keys

Unlike arrays, you can't use a regular for loop with an index to iterate over objects. Objects don't have numeric indexes. Instead, you use for...in or Object.keys().

Method 1: `for...in` Loop

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true
};

for (let key in student) {
  console.log(key + ": " + student[key]);
}
// name: Pratham
// age: 22
// course: Web Dev Cohort 2026
// isActive: true

Notice that inside the loop, key is a string (the property name), so you must use bracket notation student[key] to access the value. student.key would look for a literal property named "key" and return undefined.

Method 2: `Object.keys()` + `for...of`

Object.keys() returns an array of the object's keys, which you can then loop through:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

let keys = Object.keys(student);
console.log(keys); // ["name", "age", "course"]

for (let key of keys) {
  console.log(key + " → " + student[key]);
}
// name → Pratham
// age → 22
// course → Web Dev Cohort 2026

Method 3: `Object.values()` — Just the Values

If you only care about the values and not the keys:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

let values = Object.values(student);
console.log(values); // ["Pratham", 22, "Web Dev Cohort 2026"]

Method 4: `Object.entries()` — Both Keys and Values

This gives you an array of [key, value] pairs:

let student = {
  name: "Pratham",
  age: 22,
  course: "Web Dev Cohort 2026"
};

for (let [key, value] of Object.entries(student)) {
  console.log(key + " = " + value);
}
// name = Pratham
// age = 22
// course = Web Dev Cohort 2026

This is my personal favorite — clean, gives you both key and value, and doesn't require bracket notation inside the loop.

Array vs Object — When to Use Which

This was a question I had early on: "Both can store multiple values. When do I use an array and when do I use an object?"

Here's the simple answer:

Feature	Array	Object
Structure	Ordered list of values	Unordered key-value pairs
Access by	Numeric index (`arr[0]`)	Named key (`obj.name`)
Best for	Lists of similar items	Describing a single entity
Order matters?	✅ Yes — order is preserved	⚠️ Not guaranteed (usually is in modern JS)
Example	List of students, list of scores	One student's details

Visual Comparison

ARRAY — A list of students (multiple items, same structure):
┌─────────┬─────────┬─────────┬─────────┐
│  [0]    │  [1]    │  [2]    │  [3]    │
│ "Arjun" │ "Priya" │ "Rahul" │ "Neha"  │
└─────────┴─────────┴─────────┴─────────┘
 → "Who is at position 2?"  →  "Rahul"


OBJECT — One student's details (one item, multiple properties):
┌──────────┬───────────────────┐
│ name     │ "Pratham"         │
│ age      │ 22                │
│ course   │ "Web Dev 2026"    │
│ isActive │ true              │
└──────────┴───────────────────┘
 → "What is the student's course?"  →  "Web Dev 2026"

Use arrays when you have a list of things. Use objects when you need to describe one thing with named properties.

And in real projects? You'll combine them. An array of objects is one of the most common patterns in JavaScript:

let students = [
  { name: "Pratham", age: 22, course: "Web Dev" },
  { name: "Arjun", age: 21, course: "Data Science" },
  { name: "Priya", age: 23, course: "Web Dev" }
];

console.log(students[1].name); // "Arjun" — index 1, then key "name"

Let's Practice: Hands-On Assignment

Part 1: Create a Student Object

let student = {
  name: "Pratham Bhardwaj",
  age: 22,
  course: "Web Dev Cohort 2026",
  isActive: true,
  city: "Delhi"
};

console.log(student);
// { name: "Pratham Bhardwaj", age: 22, course: "Web Dev Cohort 2026", isActive: true, city: "Delhi" }

Part 2: Access Some Properties

console.log("Name:", student.name);        // Name: Pratham Bhardwaj
console.log("Course:", student.course);    // Course: Web Dev Cohort 2026
console.log("City:", student["city"]);     // City: Delhi

Part 3: Update a Property

// Moved from Delhi to Gurugram
student.city = "Gurugram";
console.log("Updated city:", student.city); // Updated city: Gurugram

Part 4: Add and Delete Properties

// Adding a new property
student.email = "pratham@prathamdev.in";
console.log("Email added:", student.email); // Email added: pratham@prathamdev.in

// Deleting a property
delete student.isActive;
console.log(student);
// { name: "Pratham Bhardwaj", age: 22, course: "Web Dev Cohort 2026", city: "Gurugram", email: "pratham@prathamdev.in" }

Part 5: Loop Through All Keys and Values

console.log("--- Student Details ---");

for (let [key, value] of Object.entries(student)) {
  console.log(key + ": " + value);
}
// name: Pratham Bhardwaj
// age: 22
// course: Web Dev Cohort 2026
// city: Gurugram
// email: pratham@prathamdev.in

Key Takeaways

Objects are collections of key-value pairs. They let you group related data under one variable with meaningful labels.
Use dot notation (obj.key) for clean, everyday access. Use bracket notation (obj["key"]) for dynamic keys, keys with spaces, or keys stored in variables.
Objects are mutable — you can update, add, and delete properties at any time.
Loop through objects using for...in, Object.keys(), Object.values(), or Object.entries().
Arrays are for ordered lists of similar items. Objects are for describing a single entity with named properties. In real code, you'll often use arrays of objects.

Wrapping Up

Objects are everywhere in JavaScript. When you fetch data from an API, it comes back as objects. When you work with the DOM, elements are objects. When you build React components, props and state are objects. Understanding how to create, read, update, and delete object properties isn't just a beginner topic — it's a skill you'll use in literally every project you ever build.

I'm learning all of this through the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and objects were the moment JavaScript started feeling like a real-world tool rather than an academic exercise. Once you see how data is structured in APIs and databases, you'll realize that objects are the language's way of modeling reality.

Connect with me on LinkedIn or visit PrathamDEV.in if you want to follow along with my learning journey. More articles coming soon — next stop: array methods and DOM manipulation.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

JavaScript Arrays 101

Pratham — Sun, 10 May 2026 01:19:39 +0000

Your first real data structure — and the one you'll use more than any other.

Let me paint a picture. You're building a to-do app. You've got 5 tasks. So you do the "logical" thing:

let task1 = "Buy groceries";
let task2 = "Finish homework";
let task3 = "Call mom";
let task4 = "Go to gym";
let task5 = "Read a chapter";

Five variables for five tasks. Now imagine you have 50 tasks. Or 500. Are you going to create 500 separate variables? Obviously not. That's insane. And even with just 5, how do you loop through them? How do you add a new one? How do you remove one?

This is exactly the problem arrays solve. And once you get comfortable with them, you'll wonder how you ever wrote JavaScript without them.

What Is an Array?

An array is an ordered collection of values stored under a single variable name. Instead of creating a separate variable for each value, you put them all in one place — like a numbered list.

Think of it as a row of lockers. Each locker has a number (its index) and can hold one item (a value). You can look at any locker, change what's inside, or walk down the entire row checking each one.

┌─────────┬─────────┬─────────┬─────────┬─────────┐
│  Index 0│  Index 1│  Index 2│  Index 3│  Index 4│
├─────────┼─────────┼─────────┼─────────┼─────────┤
│ "Buy    │ "Finish │ "Call   │ "Go to  │ "Read a │
│ grocer- │ home-   │  mom"   │  gym"   │ chapter"│
│  ies"   │  work"  │         │         │         │
└─────────┴─────────┴─────────┴─────────┴─────────┘

One variable. Five values. Organized, indexed, and easy to work with.

Why Do We Need Arrays?

Let's compare the two approaches directly:

Without Arrays — A Variable for Each Value

let fruit1 = "Apple";
let fruit2 = "Mango";
let fruit3 = "Banana";
let fruit4 = "Grapes";
let fruit5 = "Orange";

console.log(fruit1);
console.log(fruit2);
console.log(fruit3);
console.log(fruit4);
console.log(fruit5);

Five variables. Five console.log calls. And if you want to add a sixth fruit? Create another variable, add another log. It doesn't scale.

With an Array — One Variable, All Values

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

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

One variable. One loop. Add 50 more fruits and the loop still works without changing a single line. That's the power of arrays.

How to Create an Array

Creating an array in JavaScript is simple. You use square brackets [] and separate the values with commas.

Syntax

let arrayName = [value1, value2, value3, ...];

Examples

// Array of strings
let cities = ["Delhi", "Mumbai", "Bangalore", "Gurugram"];

// Array of numbers
let marks = [85, 92, 78, 95, 88];

// Array of booleans
let answers = [true, false, true, true, false];

// Mixed array (JavaScript allows this — but use it sparingly)
let mixed = ["Pratham", 22, true, null];

// Empty array (you'll fill it later)
let todoList = [];

JavaScript arrays are flexible — they can hold any data type, and you can even mix types in a single array. That said, in real-world code, you'll almost always keep arrays to one type for consistency and readability.

Accessing Elements Using Index

Every item in an array has a position called its index. And here's the thing that trips up every single beginner:

Array indexing starts at 0, not 1.

The first element is at index 0, the second at index 1, and so on.

Visual: How Indexing Works

Array:   ["Delhi", "Mumbai", "Bangalore", "Gurugram"]
Index:       0         1          2            3

Accessing Elements

let cities = ["Delhi", "Mumbai", "Bangalore", "Gurugram"];

console.log(cities[0]); // "Delhi"      — first element
console.log(cities[1]); // "Mumbai"     — second element
console.log(cities[2]); // "Bangalore"  — third element
console.log(cities[3]); // "Gurugram"   — fourth (last) element

What Happens If You Use an Invalid Index?

console.log(cities[10]); // undefined — no error, just undefined
console.log(cities[-1]); // undefined — negative indexes don't work like Python

JavaScript won't throw an error. It'll just quietly return undefined. Keep this in mind — it can cause silent bugs if you're not careful.

Accessing the Last Element

A common pattern you'll use all the time:

let cities = ["Delhi", "Mumbai", "Bangalore", "Gurugram"];

let lastCity = cities[cities.length - 1];
console.log(lastCity); // "Gurugram"

Why cities.length - 1? Because if there are 4 elements, the last index is 3 (remember, we start at 0). So length - 1 always gives you the last index.

Updating Elements

Changing a value in an array is as simple as assigning a new value to a specific index.

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

// Let's say I changed my mind about Banana
fruits[2] = "Strawberry";
console.log(fruits); // ["Apple", "Mango", "Strawberry", "Grapes"]

You just point to the index and overwrite the value. The array updates in place — you don't need to create a new one.

A Practical Example

let scores = [70, 85, 60, 90, 75];

// Student at index 2 retook the exam and improved
scores[2] = 82;

console.log(scores); // [70, 85, 82, 90, 75]

Adding to the End (Quick Preview)

You can also add new elements beyond the current length:

let colors = ["Red", "Blue"];

colors[2] = "Green"; // Adding at index 2
console.log(colors); // ["Red", "Blue", "Green"]

But be careful — if you skip an index:

let colors = ["Red", "Blue"];

colors[5] = "Green"; // Skipping indexes 2, 3, 4
console.log(colors); // ["Red", "Blue", empty × 3, "Green"]
console.log(colors.length); // 6 — includes the empty slots!

This creates "holes" in your array with empty slots. Don't do this intentionally — it leads to unexpected behavior.

The `length` Property

Every array has a built-in length property that tells you how many elements it contains.

let movies = ["Inception", "Interstellar", "The Dark Knight", "Tenet"];

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

Why Is `length` Useful?

You'll use it constantly:

Finding the last element: array[array.length - 1]
Looping through arrays: as the upper bound for your loop
Checking if an array is empty: array.length === 0

let tasks = [];

if (tasks.length === 0) {
  console.log("No tasks! You're free. 🎉");
}
// Output: "No tasks! You're free. 🎉"

Important: `length` Is Not the Last Index

This is a subtle but important distinction:

Array:   ["A", "B", "C", "D"]
Indexes:   0    1    2    3
Length:  4

Last index = length - 1 = 3 ✅
Last index ≠ length = 4 ❌ (this would be out of bounds)

I've seen this cause off-by-one errors more times than I can count. Remember: last index = length minus 1.

Looping Over Arrays

This is where arrays start to shine. The ability to process every element with a loop is what makes arrays so powerful.

1. The Classic `for` Loop

The most fundamental way to iterate through an array:

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

for (let i = 0; i < fruits.length; i++) {
  console.log(i + ": " + fruits[i]);
}
// 0: Apple
// 1: Mango
// 2: Banana
// 3: Grapes
// 4: Orange

Let me break this down:

let i = 0 — start at the first index
i < fruits.length — keep going as long as i is less than the total count
i++ — move to the next index after each iteration
fruits[i] — access the element at the current index

2. The `for...of` Loop (Cleaner Syntax)

If you don't need the index and just want the values, for...of is cleaner:

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

for (let fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Banana
// Grapes
// Orange

No index tracking, no length check — just the values, one at a time. I use this whenever I don't need to know which position the element is at.

3. The `while` Loop (Less Common for Arrays)

You can use a while loop too, though it's less common for simple iteration:

let fruits = ["Apple", "Mango", "Banana", "Grapes", "Orange"];
let i = 0;

while (i < fruits.length) {
  console.log(fruits[i]);
  i++;
}

Same result, just a different way to structure the loop. I'd stick with for or for...of for arrays — they're more readable and less prone to accidentally creating infinite loops.

When to Use Which Loop

Loop	When to Use
`for`	When you need the index or want full control
`for...of`	When you just want the values — cleanest syntax
`while`	When the stopping condition isn't index-based

Memory-Style Block Diagram

Here's how you can think about an array stored in memory — each block has an index and a value:

Variable: fruits
    │
    ▼
┌────────────────────────────────────────────────────────────┐
│                     Array in Memory                        │
├──────────┬──────────┬──────────┬──────────┬────────────────┤
│ [0]      │ [1]      │ [2]      │ [3]      │ [4]           │
│ "Apple"  │ "Mango"  │ "Banana" │ "Grapes" │ "Orange"      │
├──────────┴──────────┴──────────┴──────────┴────────────────┤
│ length: 5                                                  │
└────────────────────────────────────────────────────────────┘

Accessing: fruits[2]  →  goes to block [2]  →  returns "Banana"
Updating:  fruits[3] = "Kiwi"  →  block [3] changes from "Grapes" to "Kiwi"

The key insight: array elements are stored contiguously (next to each other) and accessed by index — which makes looking up any element fast regardless of the array size.

Let's Practice: Hands-On Assignment

Part 1: Create an Array of 5 Favorite Movies

let movies = [
  "Inception",
  "Interstellar",
  "The Dark Knight",
  "Dangal",
  "3 Idiots"
];

console.log(movies);
// ["Inception", "Interstellar", "The Dark Knight", "Dangal", "3 Idiots"]

Part 2: Print the First and Last Element

console.log("First movie:", movies[0]);
// First movie: Inception

console.log("Last movie:", movies[movies.length - 1]);
// Last movie: 3 Idiots

Part 3: Change One Value and Print the Updated Array

// I changed my mind — replacing "Dangal" with "Oppenheimer"
movies[3] = "Oppenheimer";

console.log("Updated array:", movies);
// Updated array: ["Inception", "Interstellar", "The Dark Knight", "Oppenheimer", "3 Idiots"]

Part 4: Loop Through the Array and Print All Elements

console.log("--- My Favorite Movies ---");

for (let i = 0; i < movies.length; i++) {
  console.log((i + 1) + ". " + movies[i]);
}
// 1. Inception
// 2. Interstellar
// 3. The Dark Knight
// 4. Oppenheimer
// 5. 3 Idiots

Or with a for...of loop:

console.log("--- Movie List ---");

for (let movie of movies) {
  console.log("🎬 " + movie);
}
// 🎬 Inception
// 🎬 Interstellar
// 🎬 The Dark Knight
// 🎬 Oppenheimer
// 🎬 3 Idiots

Key Takeaways

Arrays are ordered collections of values stored in a single variable. They solve the problem of managing multiple related values without creating separate variables for each.
Indexing starts at 0. The first element is array[0], not array[1]. The last element is always array[array.length - 1].
Updating is simple — just assign a new value to a specific index: array[index] = newValue.
The length property tells you how many elements the array contains. It's not the same as the last index (length - 1 is).
Loops are how you process every element in an array. Use for when you need the index, for...of when you just want the values.

Wrapping Up

Arrays are probably the single most important data structure you'll work with in JavaScript. Every real project I've seen — from e-commerce product lists to social media feeds to to-do apps — uses arrays under the hood. Getting comfortable with creating, accessing, updating, and looping through them is foundational to everything that comes next: array methods, objects, APIs, and beyond.

I'm working through all of this in the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and I have to say — arrays were the first topic where I started feeling like I could actually build things, not just learn theory.

If this helped you, feel free to connect with me on LinkedIn or check out PrathamDEV.in. I'll keep writing as I keep learning — next up, array methods and objects.

Happy coding! 🚀

Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Forem: Pratham

Understanding the `this` Keyword in JavaScript

What Does this Represent?

this in the Global Context

In the Browser

In Node.js

Global Variables and this

this Inside Objects — Where It Makes the Most Sense

Another Example

Multiple Objects, Same Function

Visual: Caller → Function Relationship

this Inside Regular Functions

Non-Strict Mode

Strict Mode

The Classic Gotcha: Nested Functions

The Fix: Arrow Functions or that/self

How Calling Context Changes this

The Different Calling Contexts — A Summary

Arrow Functions and this — The Exception

When NOT to Use Arrow Functions

Let's Practice: Hands-On Assignment

Part 1: this in Object Methods

Part 2: Same Function, Different Callers

Part 3: The Lost Context Problem

Part 4: Arrow Function Fix

Key Takeaways

Wrapping Up

JavaScript Modules: Import and Export Explained

Why Are Modules Needed?

Problem 1: Everything in One File

Problem 2: Global Variable Pollution

Problem 3: No Reusability

The Solution: Modules

Exporting Functions and Values

Named Exports

Default Exports

Named vs Default — Side by Side

Importing Modules

Importing Named Exports

Importing Default Exports

Importing Both Named and Default

Renaming Imports with as

Importing Everything with *

Module Import/Export Flow

Default vs Named Exports — When to Use Which

My Guideline

File Dependency Diagram — A Real Project

Benefits of Modular Code

Before Modules vs After Modules

Setting Up Modules in Practice

In the Browser

In Node.js

Let's Practice: Hands-On Assignment

Part 1: Create a Math Module

Part 2: Create a Greeting Module with Default Export

Part 3: Import and Use Both in app.js

Part 4: Mix Named and Default, Use Renaming

Key Takeaways

Wrapping Up

Map and Set in JavaScript

What Is a Map?

Creating and Using a Map

You Can Also Initialize with Values

Visual: Map Key-Value Storage

The Superpower: Any Value as a Key

Iterating Over a Map

Map vs Object — When Each One Wins

When to Use Object

When to Use Map

What Is a Set?

Creating and Using a Set

Set Methods

Visual: Set Uniqueness

The Killer Use Case: Removing Duplicates from an Array

Iterating Over a Set

Set vs Array — When Each One Wins

When to Use Array

When to Use Set

Practical Use Cases

1. Tracking Unique Visitors

What Does `this` Represent?

`this` in the Global Context

Global Variables and `this`

`this` Inside Objects — Where It Makes the Most Sense

`this` Inside Regular Functions

The Fix: Arrow Functions or `that`/`self`

How Calling Context Changes `this`

Arrow Functions and `this` — The Exception

Part 1: `this` in Object Methods

Renaming Imports with `as`

Importing Everything with `*`

1. `trim()` — Remove Whitespace from Both Ends

2. `includes()` — Check If a Substring Exists

3. `repeat()` — Repeat a String N Times

4. `startsWith()` and `endsWith()` — Check Beginning/End

5. `indexOf()` — Find the Position of a Substring

6. `charAt()` — Get Character at Index

Part 1: Build `myTrim()`

Part 2: Build `myIncludes()`

Approach 1: `Array.flat()` — The Built-In Way

Approach 2: `concat()` + Spread — Flatten One Level

Approach 3: `reduce()` + `concat()` — Flatten One Level

Approach 5: `reduce()` + Recursion — Compact Deep Flatten