• Redis for real-time game state

• PostgreSQL for relational and durable core data

• Cassandra/Astra DB for high-volume event-style data (chat + move logs)

• Docker for consistent local and production deployments

The examples below align with the current codebase (React + Bun + Socket.io + Prisma + Redis + Astra Data API).

1) Redis: What It Is, How It Works, and Why It Fits Chess

What is Redis?

Redis is an in-memory key-value data store. It is extremely fast (sub-millisecond operations in most cases) and supports rich data structures like:

• Strings

• Hashes

• Sets

• Lists

• Sorted sets

Because multiplayer chess needs very low-latency updates, Redis is a strong choice for volatile game/session state.

How Redis Works (Conceptually)

Redis keeps data in RAM, so reads/writes are very fast. Your app sends commands like:

• HSET / HGETALL for game objects

• SADD / SCARD for spectators

• EXPIRE for automatic cleanup

In this project:

• Room game state is stored as a Redis hash (game:<roomCode>)

• Players are mapped in a hash (players:<roomCode>)

• Spectators are tracked in a set (spectators:<roomCode>)

• Socket-to-room mapping uses a string (socket:<socketId>)

• TTL is 6 hours (21600 seconds)

How Redis Is Integrated in This Chess App

server/src/config/redis.ts creates a shared ioredis client, sets retry behavior, and key helpers.

server/src/services/RoomService.ts uses Redis as the real-time authority for:

• Room creation and initial FEN/time settings

• Join/rejoin/disconnect flows

• Spectator add/remove/count

• Fast room lookup by socket ID

• TTL refresh (touchKeys) to keep active games alive

Redis Data Flow Diagram

flowchart LR
  C1[Player A Client] -->|Socket Event| API[Bun + Socket.io Server]
  C2[Player B Client] -->|Socket Event| API
  C3[Spectator Client] -->|Socket Event| API

  API -->|HSET/HGETALL game:room| R[(Redis)]
  API -->|HSET/HGETALL players:room| R
  API -->|SADD/SCARD spectators:room| R
  API -->|SET socket:socketId| R
  API -->|EXPIRE 21600s| R

  API -->|Broadcast state| C1
  API -->|Broadcast state| C2
  API -->|Broadcast state| C3

2) PostgreSQL: What It Is, How It Works, and Why It Fits Chess

What is PostgreSQL?

PostgreSQL is an advanced relational database (SQL, ACID transactions, strong consistency). It is ideal for structured and durable business data.

How PostgreSQL Works (Conceptually)

Data is stored in tables with relations and constraints. You query/update rows using SQL (or ORM abstractions such as Prisma).

In a chess app, relational data typically includes:

• Users and ratings

• Official game records

• Match results and PGN metadata

How PostgreSQL Is Integrated in This Chess App

server/src/config/db.ts initializes Prisma client and manages connect/disconnect lifecycle.

Business services use Prisma:

• server/src/services/UserService.ts

  • Create/find users

  • Update ELO

  • Increment win/loss/draw stats

• server/src/services/GameService.ts

  • Create game records

  • Find an active game by room

  • Persist result/winner/PGN and mark end time

This design separates:

• Redis: live/ephemeral game state

• PostgreSQL: durable source of truth for user/game records

PostgreSQL Data Flow Diagram

flowchart TB
  API[Bun API Layer] --> PRISMA[Prisma Client]
  PRISMA --> PG[(PostgreSQL)]

  API -->|create/update user| PRISMA
  API -->|create game record| PRISMA
  API -->|save result + PGN| PRISMA

Common PostgreSQL commands (CLI reference)

These are typical operations when setting up or adjusting a database outside Prisma migrations. Connect as a superuser (e.g. postgres) with psql or run docker compose exec postgres psql -U postgres.

Create a database

CREATE DATABASE chess_app;

Create a user (role) and set a password

CREATE USER 'db_name_user' WITH PASSWORD 'choose_a_strong_password';
-- Or use a role that can log in:
CREATE ROLE 'db_name_user' LOGIN PASSWORD 'choose_a_strong_password';

Grant access to the database and schema defaults

GRANT CONNECT ON DATABASE  'db_name' TO 'db_name_user';
GRANT USAGE ON SCHEMA public TO 'db_name_user';
GRANT CREATE ON SCHEMA public TO 'db_name_user';  -- optional: allow creating tables

Create a table

CREATE TABLE players (
  id         SERIAL PRIMARY KEY,
  username   TEXT NOT NULL UNIQUE,
  elo_rating INTEGER NOT NULL DEFAULT 1500,
  created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
)

Insert and update rows

INSERT INTO players (username, elo_rating) VALUES ('alice', 1600);

UPDATE players
SET elo_rating = 1650
WHERE username = 'alice';

Modify table structure (ALTER)

-- Add a column
ALTER TABLE players ADD COLUMN games_played INTEGER NOT NULL DEFAULT 0;

-- Change a column type (example: widen text)
ALTER TABLE players ALTER COLUMN username TYPE VARCHAR(64);

-- Rename a column
ALTER TABLE players RENAME COLUMN elo_rating TO rating;

-- Add a constraint
ALTER TABLE players ADD CONSTRAINT rating_non_negative CHECK (rating >= 0)

Handy psql commands

- `\l` — list databases  
- `\c chess_app` — connect to a database  
- `\dt` — list tables  
- `\d players` — describe table `players`  
- `\q` — quit  

PostgreSQL cheat sheet (this project: chess_db + Docker)

The root docker-compose.yml uses container name chess_postgres, database chess_db, and user chess_user (password from POSTGRES_PASSWORD in your env).

1. Connect

- Docker (into the running container):

docker exec -it chess_postgres psql -U chess_user -d chess_db

- Local host (when Postgres is exposed, e.g. docker-compose.dev.yml maps 5432:5432):

psql -U chess_user -d chess_db

 If you use a non-default port: psql -U chess_user -d chess_db -p 5433 (adjust to match your DATABASE_URL).

2. List all databases

\l

3. Connect to a database (from inside psql)

\c chess_db

4. List all tables

\dt

5. Table structure (replace users with your table name; Prisma often uses plural model names)

\d users

6. View data

SELECT * FROM users;

7. List database roles (users)

\du

8. Current session user

SELECT current_user;

9. Delete data

- Specific row:

DELETE FROM users WHERE id = 1;

- All rows (table and schema stay):

DELETE FROM users;

- Faster clear (often used in dev); keeps table:

TRUNCATE TABLE users;

11. Drop a database

Exit the DB first \q), then connect as a role that may drop databases (often the superuser created by the image). With the official Postgres image, it POSTGRES_USER is chess_user, that user is typically a superuser and can drop chess_db:

\q

psql -U chess_user -d postgres

DROP DATABASE chess_db;

If your user cannot drop the database, connect as postgres (or the image’s superuser) and run DROP DATABASE chess_db;.

12. Drop a role (user)

You cannot be connected as the role you are dropping. Connect as another superuser, then:

DROP USER chess_user;

Shortcuts

| Command | Meaning        |
|---------|----------------|
| `\dt`   | List tables    |
| `\l`    | List databases |
| `\du`   | List roles     |
| `\q`    | Quit `psql`    |

Common errors

- relation "users" does not exist — List tables with \dt and use the exact table name from your Prisma schema (could be User mapped to "users" or another name).

- permission denied — Grant privileges (run as superuser or owner), for example:

GRANT ALL PRIVILEGES ON DATABASE chess_db TO chess_user;

  Also, grant on schema/tables if needed after migrations.

Docker + Prisma tip

Avoid manually dropping tables whenever you want a clean dev database aligned with migrations. From server/:

npx prisma migrate reset

That reapplies migrations and optional seed; it is safer than ad-hoc DROP TABLE When the app is driven by Prisma.

Prisma vs SQL (quick mapping)

| Goal | Prisma (CLI) | Raw SQL / `psql` |
|------|----------------|------------------|
| Apply migrations | `npx prisma migrate deploy` | Run migration `.sql` files by hand |
| Dev: reset DB | `npx prisma migrate reset` | `DROP` / `TRUNCATE` tables yourself |
| Inspect schema | `npx prisma studio` or open `schema.prisma` | `\d table_name` |
| Create migration after model change | `npx prisma migrate dev --name ...` | `CREATE TABLE` / `ALTER TABLE` yourself |

3) Cassandra / Astra DB: What It Is, How It Works, and Why It Fits Chess Logs

What is Cassandra / Astra DB?

Apache Cassandra is a distributed NoSQL database optimized for high write throughput, horizontal scaling, and fault tolerance.

DataStax Astra DB is a managed cloud platform for Cassandra. In this project, the Astra Data API is used for persistence.

How Cassandra Works (Conceptually)

Instead of relational joins, Cassandra models data around query patterns and partitions. It is excellent for time-series/event-like workloads where writes are frequent and volume is high.

For chess, that fits:

• Chat messages

• Move-by-move logs

How Astra Is Integrated in This Chess App

server/src/config/cassandra.ts:

• Reads ASTRA_DB_ENDPOINT and ASTRA_DB_TOKEN

• Normalizes endpoint to selected keyspace path

• Enables/disables Astra persistence gracefully based on env vars

server/src/services/CassandraService.ts:

• Sends HTTP POST requests to Astra Data API collections

• Writes to:

  • chat_messages

  • move_log

• Reads ordered messages/moves for room replay/history

• Handles failures with non-fatal warnings (keeps the game server resilient)

Cassandra/Astra Data Flow Diagram

flowchart LR
  API[Bun + Socket Handlers] --> CS[CassandraService]
  CS -->|POST insertOne/find| ASTRA[(Astra Data API)]

  API -->|saveMessage| CS
  API -->|saveMove| CS
  API -->|getMessages/getMoves| CS

4) Docker: What It Is, How It Works, and How Client + Server Are Built

What is Docker?

Docker packages applications and dependencies into containers so they run consistently across machines (local, CI, VPS, cloud).

How Docker Works (Conceptually)

• Dockerfile defines how to build an image.

• docker compose defines multiple services and networking.

• Containers communicate via internal service names (DNS), e.g. postgres, redis, app.

How Docker Is Used in This Project (Current Setup)

Root docker-compose.yml runs:

• postgres (postgres:16-alpine)

• redis (redis:7-alpine)

• app (built from server/Dockerfile)

• nginx (reverse proxy + TLS + WebSocket upgrade)

server/Dockerfile is multi-stage:

1. Base stage with Bun + OpenSSL

2. Development stage (bun run dev)

3. Builder stage (prisma generate, TypeScript build)

4. Production stage (copy only runtime artifacts + bun run start)

Production Container Architecture Diagram

flowchart TB
  U[Browser / Client App] -->|HTTPS + Socket.io| N[Nginx Container]
  N -->|Proxy /api + /socket.io| A[App Container: Bun Server]
  A -->|Prisma| P[(PostgreSQL Container)]
  A -->|ioredis| R[(Redis Container)]
  A -->|HTTPS Data API| X[(Astra DB Cloud)]

How to Containerize Both Client and Server (Optional Full-Container Deployment)

Right now, the client is designed for Vercel deployment, while the backend is containerized.
If you want both client and server in Docker:

1. Add a client/Dockerfile that builds Vite assets and serves them with Nginx.

2. Add client service in compose.

3. Route /api and /socket.io to app, and / to client.

Example client/Dockerfile:

FROM oven/bun:1.2.8 AS builder
WORKDIR /app
COPY package.json bun.lock* ./
RUN bun install
COPY . .
ARG VITE_SERVER_URL
ENV VITE_SERVER_URL=${VITE_SERVER_URL}
RUN bun run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Example compose idea:

services:
  client:
    build:
      context: ./client
      args:
        VITE_SERVER_URL: https://yourdomain.com
    container_name: chess_client
    restart: unless-stopped
    networks: [chess_network]

Then Nginx can reverse proxy:

• / -> client:80

• /api + /socket.io -> app:4000

Client + Server Container Diagram

flowchart LR
  Browser --> NginxEdge[Nginx Reverse Proxy]
  NginxEdge -->|/| Client[Client Container - static build]
  NginxEdge -->|/api, /socket.io| Server[Server Container - Bun API]
  Server --> Postgres[(PostgreSQL)]
  Server --> Redis[(Redis)]
  Server --> Astra[(Astra DB)]

Why This Hybrid Storage Design Works for Multiplayer Chess

• Redis gives low-latency real-time room state.

• PostgreSQL keeps durable, relational entities and outcomes.

• Cassandra/Astra handles event-style history at scale.

• Docker gives reproducible deploys and clean service boundaries.

This separation keeps gameplay responsive while preserving long-term data correctly.

Quick Integration Checklist

• Redis:

  • Define key naming convention and TTL strategy

  • Store only hot/ephemeral room/session data

• PostgreSQL:

  • Keep users, ratings, and final game metadata

  • Use Prisma migrations + schema discipline

• Astra/Cassandra:

  • Persist high-write chat/move history collections

  • Model for query paths (by room + order)

• Docker:

  • Use service DNS names (postgres, redis, app)

  • Add health checks and depends_on conditions

  • Keep multi-stage images for a smaller production footprint

In this article, we’ll walk through OOP in JavaScript step by step, using simple examples and analogies:

• What OOP means

• Blueprint → object analogy

• What a class is in JavaScript

• Creating objects using classes

• The constructor method

• Methods inside a class

• Basic idea of encapsulation

• A small assignment: build a Student class

What Is Object-Oriented Programming (OOP)?

Object-Oriented Programming (OOP) is a way of organizing code around objects instead of just functions and data.

An object is a bundle of:

• Data (called properties), and

• Behavior (called methods, which are functions attached to the object).

OOP focuses on:

• Modeling real-world entities (like Car, Person, Student) in code.

• Keeping related data and behavior together.

• Reusing code through classes and instances.

Real-World Analogy: Blueprint → Objects

Think of a car factory:

• The blueprint describes:

  • What a car looks like

  • Parts it has (wheels, engine, seats)

  • What it can do (start, stop, accelerate)

• From this one blueprint, the factory creates many cars.

In OOP terms:

• The blueprint is a class.

• Each car built from that blueprint is an object (also called an instance of the class).

So:

• Class → definition/template

• Object → actual thing created using that template

What Is a Class in JavaScript?

A class in JavaScript is a template for creating objects with the same structure and behavior.

Inside a class, you typically define:

• The constructor (how objects are initialized)

• Properties (data each object will have)

• Methods (functions each object can use)

Basic class example: Car

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

  start() {
    console.log(`\({this.brand} \){this.model} is starting...`);
  }

  stop() {
    console.log(`\({this.brand} \){this.model} is stopping.`);
  }
}

Here:

• Car is the class (blueprint).

• brand and model These are the properties each car will have.

• start and stop are methods (behaviors).

Creating Objects Using Classes (Instantiating)

To create an object from a class, you use the new keyword.

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Tesla", "Model 3");

car1.start(); // "Toyota Corolla is starting..."
car2.start(); // "Tesla Model 3 is starting..."

• car1 and car2 are different objects (instances) of the Car class.

• They share the same structure and behavior, but can hold different data.

This is where reusability shines:

• Write the class once.

• Create as many objects as you like.

The Constructor Method

The constructor is a special method inside a class that runs when you create a new object.

class ClassName {
  constructor(parameter1, parameter2) {
    // initialization code
  }
}

• constructor is a reserved name.

• It’s used to set up the initial state (properties) of the object.

Example: Person class

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

  introduce() {
    console.log(`Hi, I'm \({this.name}, \){this.age} years old from ${this.city}.`);
  }
}

const person1 = new Person("Alice", 25, "Delhi");
const person2 = new Person("Rahul", 30, "Mumbai");

person1.introduce(); // "Hi, I'm Alice, 25 years old from Delhi."
person2.introduce(); // "Hi, I'm Rahul, 30 years old from Mumbai."

Methods Inside a Class

Methods are functions that belong to the class and operate on that object’s data.

Example: Student with methods

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

  printDetails() {
    console.log(`Student: \({this.name}, Age: \){this.age}, Course: ${this.course}`);
  }

  celebrateBirthday() {
    this.age += 1;
    console.log(`Happy birthday, \({this.name}! You are now \){this.age}.`);
  }
}

const student1 = new Student("Neha", 19, "Computer Science");

student1.printDetails();     // "Student: Neha, Age: 19, Course: Computer Science"
student1.celebrateBirthday(); // "Happy birthday, Neha! You are now 20."
student1.printDetails();     // "Student: Neha, Age: 20, Course: Computer Science"

Key points:

• Methods live inside the class body (not inside the constructor).

• Inside methods, this refers to the specific object calling the method.

• Methods help keep data + behavior together, which is core to OOP.

Basic Idea of Encapsulation

Encapsulation is about bundling data and methods together and hiding internal details as much as possible.

In simpler terms:

• An object should protect its own data.

• Other parts of your code should interact with the object through its methods, not by directly messing with every internal detail.

In our Student example:

• name, age, and course are the data.

• printDetails() and celebrateBirthday() are the behaviors related to that data.

Instead of writing:

student1.age = student1.age + 1;
console.log(student1.age);

We call:

student1.celebrateBirthday();

Benefits:

• If you ever change how birthdays are handled (e.g., logging, validations), you only change it inside the class.

• Outside code doesn’t need to know the details; it just calls the method.

In more advanced OOP, encapsulation involves access modifiers (like private, protected), but for now, just remember:

• Encapsulation = keeping related data and functions together, and exposing a clean, simple interface (methods) to the outside.

Another Simple Example: Car Blueprint Revisited

Let’s revisit our car analogy with a full mini example:

class Car {
  constructor(brand, model, year) {
    this.brand = brand;
    this.model = model;
    this.year = year;
    this.isRunning = false;
  }

  start() {
    if (!this.isRunning) {
      this.isRunning = true;
      console.log(`\({this.brand} \){this.model} started.`);
    } else {
      console.log(`\({this.brand} \){this.model} is already running.`);
    }
  }

  stop() {
    if (this.isRunning) {
      this.isRunning = false;
      console.log(`\({this.brand} \){this.model} stopped.`);
    } else {
      console.log(`\({this.brand} \){this.model} is already stopped.`);
    }
  }
}

const carA = new Car("Honda", "Civic", 2020);
const carB = new Car("Maruti", "Swift", 2018);

carA.start(); // "Honda Civic started."
carA.stop();  // "Honda Civic stopped."

carB.start(); // "Maruti Swift started."

• The class defines what every car knows and can do.

• Each instance (carA, carB) has its own state (isRunning, brand, model, year).

• The methods enforce a simple encapsulated behavior (e.g., don’t start an already running car).

Assignment: Build a Student Class

Here’s a practical assignment you can copy into a .js file or console.

1. Create a class called Student

• Add properties name and age use the constructor.

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

  printDetails() {
    console.log(`Student: \({this.name}, Age: \){this.age}`);
  }
}

2. Create multiple student objects

const student1 = new Student("Rahul", 20);
const student2 = new Student("Sara", 22);
const student3 = new Student("Amit", 19);

student1.printDetails(); // "Student: Rahul, Age: 20"
student2.printDetails(); // "Student: Sara, Age: 22"
student3.printDetails(); // "Student: Amit, Age: 19"

3. Extend the assignment (optional)

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

  printDetails() {
    console.log(`Student: \({this.name}, Age: \){this.age}, Course: ${this.course}`);
  }
}

const s1 = new Student("Rahul", 20, "Computer Science");
const s2 = new Student("Anita", 21, "Information Technology");

s1.printDetails();
s2.printDetails();

You can easily convert these into simple diagrams.

1. Blueprint

• Box labeled Class: Car:

  • Properties: brand, model, year

  • Methods: start(), stop()

• Arrows from the class to several smaller boxes:

  • car1: brand = Toyota, model = Corolla

  • car2: brand = Tesla, model = Model 3

  • car3: brand = Honda, model = City

Label this as: “One blueprint, many objects”.

2. Class → Instance relationship visual

• On the left: class Student { ... }

• On the right: several bubbles/boxes:

  • student1: { name: "Rahul", age: 20 }

  • student2: { name: "Sara", age: 22 }

• Arrows from the Student class to each student object.

Label: “Class → Instance (Object)”.

Summary

• OOP organizes your code around objects that combine data and behavior.

• A class is a blueprint; an object is a real instance built from that blueprint.

• The constructor sets up the initial state (properties) of each object.

• Methods inside a class define what the objects can do.

• Encapsulation is about keeping data + methods together and exposing a clean interface, improving reusability and maintainability.

• You can model real-world concepts like Car, Person, and Student directly in your code using classes and objects.

Happy Coding!

• A person with name, age, and city

• A product with title, price, and stock

• A student with name, course, and grade

In JavaScript, the most common way to represent this kind of structured data is with an object.

This article will cover:

• What objects are and why we need them

• How to create objects

• How to access and update properties

• How to add and delete properties

• How to loop through object keys

• A clear comparison between arrays and objects

• A simple assignment to practice

What Is an Object in JavaScript?

An object is a collection of key–value pairs.

• The key (also called a “property name”) is usually a string.

• The value can be anything: number, string, boolean, array, another object, or even a function.

Real-world analogy:

• Think of an object like a dictionary:

  • Each word (key) has a meaning (value).

• Or like a record in a form:

  • Name: Alice

  • Age: 25

  • City: Delhi

Example: person object

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

Here:

• name, age, city → keys (property names)

• "Alice", 25, "Delhi" → values

We use objects to group related data together in a meaningful way.

Why Do We Need Objects?

Without objects, we might do something like this:

const name = "Alice";

const age = 25;

const city = "Delhi";

This works, but:

• All three variables belong together.

• It’s harder to pass them around as one unit.

• If you want to manage many people, it gets messy fast.

With objects:

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

Benefits:

• Organized: related data is grouped.

• Readable: person.name clearly tells you what it is.

• Scalable: you can create many person objects (e.g., in an array of people).

Creating Objects

There are multiple ways to create objects. The simplest and most common is the object literal.

1. Object literal syntax (recommended for beginners)

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

• Curly braces {} Define the object.

• Inside, you list key: value pairs, separated by commas.

2. Creating an empty object, then adding properties

const person = {}; // empty object

person.name = "Alice";

person.age = 25;

person.city = "Delhi";

Both approaches are valid. Use the one that makes your code clearer.

Accessing Object Properties

You can access properties in two main ways:

• Dot notation

• Bracket notation

Dot notation

This is the most common and easiest to read.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person.name); // "Alice"

console.log(person.age);  // 25

Use dot notation when:

• You know the property name in advance.

• The property name is a valid identifier (no spaces, no special characters, doesn’t start with a number).

Bracket notation

Bracket notation works like indexing into a map of keys.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person["name"]); // "Alice"
console.log(person["city"]); // "Delhi"

You must use bracket notation when:

• The property name is stored in a variable.

• The key has spaces, hyphens, or other special characters.

Example with a variable key:

const key = "age";

console.log(person[key]); // 25

Example with a space in the key:

const weirdObject = {

"favorite color": "blue"

};

console.log(weirdObject["favorite color"]); // "blue"
// weirdObject.favorite color (not valid)

Rule of thumb:

• Prefer dot notation when possible.

• Use bracket notation when you need dynamic or unusual keys.

Updating Object Properties

You can change a property’s value using either dot or bracket notation.

Example

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

person.age = 26;           // update using dot

person["city"] = "Mumbai"; // update using bracket

console.log(person.age);  // 26

console.log(person.city); // "Mumbai"

If the property already exists, it gets overwritten with the new value.

Adding New Properties

Adding a new property is the same as updating—if the key does not exist yet, JavaScript creates it.

const person = {

name: "Alice",

age: 25

};

person.city = "Delhi";            // new property

person["country"] = "India";      // another new property

console.log(person.city);    // "Delhi"

console.log(person.country); // "India"

You don’t need any special method—just assign a value to a new key.

Deleting Properties

To remove a property from an object, you use the delete operator.

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

delete person.city;

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

• After delete person.city, the city property is no longer part of the object.

• Accessing it returns undefined.

Use delete when you truly want to remove the key from the object structure.

Looping Through Object Keys

Often, you want to process all keys and values in an object.

The most common way for beginners is for...in.

Using for...in

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

for (const key in person) {

const value = person[key];

console.log(key, ":", value);

}

Output:

name : Alice

age : 25

city : Delhi

• key will be "name", then "age", then "city".

• person[key] gives you the corresponding value.

Using Object.keys() (slightly more advanced but very common)

const keys = Object.keys(person); // ["name", "age", "city"]

keys.forEach(function(key) {

console.log(key, ":", person[key]);

});

For now, for...in It is enough to understand the basic idea.

Array vs Object: What’s the Difference?

Both arrays and objects can store multiple values, but they are used for different purposes.

Arrays: an ordered list of values

• Use arrays when you have an ordered collection.

• Elements are accessed by index (0, 1, 2, ...).

Example:

const cities = ["Delhi", "Mumbai", "Bengaluru"];

console.log(cities[0]); // "Delhi"

console.log(cities[1]); // "Mumbai"

Arrays are best for lists like:

• List of numbers

• List of users

• List of tasks

Objects: key–value pairs (labeled data)

• Use objects when you care more about labels (keys) than order.

• Each value has a name (key) attached.

Example:

const person = {

name: "Alice",

age: 25,

city: "Delhi"

};

console.log(person.name); // "Alice"

console.log(person.age);  // 25

Objects are best for:

• Representing a single entity with properties:

  • One person, one product, one student, one book.

Visual comparison

You can imagine these diagrams:

Array (index-based):

Index: 0 → Value: "Delhi"


Index: 1 → Value: "Mumbai"


Index: 2 → Value: "Bengaluru"

Object (key-based):

Key: name → Value: "Alice"


Key: age → Value: 25


Key: city → Value: "Delhi"

Rule of thumb:

• Use an array when position/order matters and you have many of the same type of things.

• Use an object when you have one thing with many named properties.

Assignment: Working with a Student Object

Here’s a practice exercise you can try in a .js file or console.

Step 1: Create an object representing a student

It should have properties like:

• name

• age

• course

Example:

const student = {

name: "Rahul",

age: 20,

course: "Computer Science"

};

Step 2: Update one property

Change the course or age.

student.course = "Information Technology"; // updating property

Step 3: Add a new property

Add, for example, city or isEnrolled.

student.city = "Pune";

Step 4: Print all keys and values using a loop

Use for...in:

for (const key in student) {

const value = student[key];

console.log(key, ":", value);

}

You should see something like:

name : Rahul

age : 20

course : Information Technology

city : Pune

This exercise will help you:

• Create objects

• Update properties

• Add properties

• Loop through all keys and values

Diagram Ideas (For Visual or Slide Use)

You can sketch or design these as simple diagrams.

1. Object key–value structure

Draw a box labeled person:

• Inside it, three rows:

  • name → "Alice"

  • age → 25

  • city → "Delhi"

This makes it clear that an object is a container of labeled values.

2. Array vs Object comparison diagram

Two side-by-side boxes:

• Array:

  • Indices: [0, 1, 2]

  • Values: ["Delhi", "Mumbai", "Bengaluru"]

• Object:

  • Keys: [name, age, city]

  • Values: ["Alice", 25, "Delhi"]

Label them:

• “Array: ordered, index-based.”

• “Object: labeled, key-based.”

Summary

• A JavaScript object is a collection of key–value pairs that represents structured data, such as a person, product, or student.

• You can:

  • Create objects with {} key–value pairs.

  • Access properties using dot or bracket notation.

  • Update and add properties by simple assignment.

  • Delete properties with delete.

  • Loop through keys using for...in.

• Use objects when you have one entity with multiple named properties, and arrays when you have a list of items in order.

• If the user is logged in, show the dashboard.

• If the score is above 90, show “A grade”.

• If today is Sunday, send a summary email.

This “decision-making” is called control flow.

In this article, we’ll go through:

• What does control flow mean?

• if, if-else, else if ladder

• switch statement

• When to use switch vs if-else

• Simple, practical examples and assignment ideas

What Is Control Flow?

Control flow is the order in which your code runs.

Normally, JavaScript runs your code top to bottom, one line at a time.

But with control flow statements, you can say:

• “If this condition is true, run this block.”

• “Otherwise, run something else.”

• “Choose one of many options depending on a value.”

This is like real life:

• If it’s raining → take an umbrella

• Else if it’s cloudy → take a light jacket

• Else → no extra gear needed

Programming gives you similar tools.

The if Statement

Use if when you want to run code only if a condition is true.

if (condition) {
  // code to run if condition is true
}

Example: check age

const age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

• age >= 18 is the condition.

• If it’s true, the code inside { ... } runs.

• If it’s false, JavaScript skips that block.

The if-else Statement

Use if-else when you want two possible paths:

• One if the condition is true

• Another if it is false

Syntax

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

Example: pass or fail

const marks = 45;

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

• If marks is 40 or more → “You passed.”

• Otherwise → “You failed.”

This is like:

• If you have ₹100 or more → you can buy the item

• Else → you cannot buy it

The else if Ladder

Sometimes you have more than two possibilities:

• Grade A

• Grade B

• Grade C

• Fail

The else if ladder lets you chain multiple conditions.

Syntax

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition1 is false AND condition2 is true
} else if (condition3) {
  // runs if previous are false AND condition3 is true
} else {
  // runs if none of the above conditions are true
}

Example: grading system

const marks = 78;

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

How it runs step by step:

1. Check marks >= 90 → 78 >= 90? No → skip.

2. Check marks >= 75 → 78 >= 75? Yes → print "Grade B".

3. The rest of the ladder is not checked once one block matches.

This is like:

• If marks ≥ 90 → A

• Else if ≥ 75 → B

• Else if ≥ 60 → C

• Else → D

Only one block runs.

The switch Statement

switch is another way to handle multiple choices based on one value.

Instead of many if-else checks on the same variable, switch can be cleaner.

Syntax

switch (expression) {
  case value1:
    // code if expression === value1
    break;

  case value2:
    // code if expression === value2
    break;

  // more cases...

  default:
    // code if no case matches
}

Important: break in switch

• break stops the switch from continuing to the next case.

• Without break, JavaScript will “fall through” and run the next case’s code too, which is usually not what you want (at least when starting out).

Example: day of the week

const dayNumber = 3;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day number";
}

console.log(dayName); // "Wednesday"

Step by step:

1. dayNumber is 3.

2. switch compares it to each case:

   • 1? No.

   • 2? No.

   • 3? Yes → run that block.

3. It sets dayName = "Wednesday";

4. break; tells JavaScript: stop checking further cases.

If no case matches, the default block runs.

When to Use switch vs if-else

Both can do similar things, but they shine in different situations.

Use if / if-else / else if when:

• You have range-based conditions:

  • marks >= 90

  • temperature < 0

  • age >= 18 && age < 60

• Your conditions are more complex than “is it equal to this value?”

Example (ranges fit if-else better):

const temperature = 32;

if (temperature <= 0) {
  console.log("Freezing");
} else if (temperature <= 20) {
  console.log("Cold");
} else if (temperature <= 35) {
  console.log("Warm");
} else {
  console.log("Hot");
}

Use switch when:

• You are checking one variable against many possible fixed values:

  • Day of week (1–7)

  • User role ("admin", "editor", "viewer")

  • Menu choice ("start", "help", "exit")

Example (cleaner with switch):

const role = "editor";

switch (role) {
  case "admin":
    console.log("Full access");
    break;
  case "editor":
    console.log("Edit access");
    break;
  case "viewer":
    console.log("Read-only access");
    break;
  default:
    console.log("Unknown role");
}

Rule of thumb:

• Ranges / complex conditions → if-else.

• One value with many discrete options → switch.

Assignment 1: Positive, Negative, or Zero

Task

Write a program that checks if a number is:

• Positive

• Negative

• Zero

Example using if-else

const number = 0;

if (number > 0) {
  console.log("The number is positive.");
} else if (number < 0) {
  console.log("The number is negative.");
} else {
  console.log("The number is zero.");
}

Why use if-else?

• You’re dealing with ranges and comparisons:

  • > 0

  • < 0

  • == 0

• This fits if-else better than switch.

Assignment 2: Day of the Week Using switch

Task

Write a program that prints the day of the week given a number 1–7.

• 1 → Monday

• 2 → Tuesday

• ...

• 7 → Sunday

Example solution

const dayNumber = 5;
let dayName;

switch (dayNumber) {
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  case 7:
    dayName = "Sunday";
    break;
  default:
    dayName = "Invalid day number";
}

console.log(dayName);

Why use switch here?

• You’re checking one variable (dayNumber) against multiple exact values (1 to 7).

• switch makes this pattern clean and easy to read.

1. If-Else Flowchart

Start →
     Check condition: number > 0?
      Yes → “Positive” → End
      No → Check number < 0?
      Yes → “Negative” → End
      No → “Zero” → End

This shows how only one path is followed based on conditions.

2. Switch-Case Branching Diagram

Start with dayNumber
  Arrow to a box: switch(dayNumber)
   Branches:
   1 → “Monday”
   2 → “Tuesday”
   ...
   7 → “Sunday”
   default → “Invalid day”

Each branch ends after a break, showing that only the matching case runs.

Summary

• Control flow controls how your program decides what to run next.

• Use:

  • if for simple “run this only if true”.

  • if-else When there are exactly two paths.

  • else if ladder when there are multiple ordered conditions (often ranges).

  • switch When checking one value against many fixed options.

• break in switch stops execution from falling through into the next case.

• Choose your control structure based on:

  • Type of conditions (ranges vs fixed values).

  • Readability and clarity of your code.

Happy Coding!

In this article, we’ll go from what functions are to function declarations vs function expressions, with hoisting explained in simple terms and practical examples you can try immediately.

What Is a Function and Why Do We Need It?

A function is a reusable block of code that performs a specific task.

Instead of repeating the same code over and over, you:

• Define it once as a function.

• Call (or “invoke”) it whenever you need it.

Simple example: adding two numbers

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

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

Why this is useful:

• Reusability: you can call add(3, 5), add(100, 25), etc.

• Organization: complex logic can be broken into smaller named functions.

• Readability: add(price, tax) It is easier to understand than to do price + tax everywhere.

Function Declaration Syntax

A function declaration is the “classic” way to define a function in JavaScript.

Syntax:

function functionName(parameter1, parameter2, ...) {
  // function body
  // optional: return something
}

Example: multiply two numbers:

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

console.log(multiply(4, 6)); // 24

Key points:

• Starts with the function keyword.

• Has a name (multiply).

• Can have parameters (a, b).

• Can be used return to send a value back.

Characteristics of function declarations

• Named: they always have a name.

• Hoisted: You can call them before their definition in the code (we’ll explain hoisting soon).

• Typically used for top-level, reusable utilities that you want available everywhere in a file.

Function Expression Syntax

A function expression is when you create a function and assign it to a variable.

Syntax:

const functionName = function(parameter1, parameter2, ...) {
  // function body
};

or with an anonymous function:

const functionName = function(a, b) {
  return a * b;
};

Example: multiply two numbers (function expression)

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

console.log(multiply(4, 6)); // 24

Here:

• function(a, b) { ... } is a function expression.

• It has no name (this is an anonymous function).

• It is assigned to a variable called multiply.

You can also use arrow functions (a more modern syntax), but we’ll stick to regular function expressions for clarity.

Function Declaration vs Function Expression (Side by Side)

Let’s see the same logic written both ways.

Function declaration

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

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

Function expression

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

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

At runtime, once everything is defined, both work similarly:

• You call them with greet("Alice").

• They return the same result.

The big differences are:

• How they are defined in the code (syntax).

• How do they behave with hoisting?

• How you use them in the design and structure of your code.

Key Differences: Declaration vs Expression

Here’s a high-level comparison.

1. Syntax and Style

• Declaration

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

• Expression

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

• Declarations feel more “global” and top-level.

• Expressions feel more “value-like”: a function as data assigned to a variable.

2. Hoisting Behavior

Hoisting is the JavaScript behavior where certain things are effectively “moved” to the top of their scope before the code runs.

At a very high level:

• Function declarations are fully hoisted.

• Function expressions (assigned to variables) are not usable before the line where they are defined.

We’ll show concrete examples in the hoisting section below.

3. Naming and Flexibility

• Declarations: always named.

• Expressions: can be anonymous or named.

This allows function expressions to be:

• Passed as arguments to other functions.

• Stored in objects or arrays.

• Created conditionally.

Example: function expression as a callback

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

Here we didn’t even save it to a variable—we just used the function expression directly.

4. When You Might Prefer One Over the Other

• Function declarations:

  • Good for core utilities and helpers.

  • Good when you want functions available throughout the file.

  • Good when readability is improved by seeing all the “main” functions at the top.

• Function expressions:

  • Good for callbacks (e.g., event handlers, array methods).

  • Good when you want to control the scope and not pollute the global or outer scope with many names.

  • Good when you treat functions like values (assign, pass around, etc.).

We’ll go deeper into “when to use which” later.

Hoisting: Simple, Practical Explanation

Let’s keep hoisting high-level and practical, without going deeply into execution contexts or spec details.

The mental model

You can think of JavaScript as doing two simple steps:

1. Setup phase: It scans your code and:

   • Registers function declarations.

   • Reserves space for variables.

2. Execution phase: It runs your code line by line.

Because of this:

• You can call function declarations before their actual code appears.

• But you cannot reliably use a function expression before the line where it’s defined.

Hoisting with Function Declarations

You can do this:

sayHello("Alice"); //  Works, even though sayHello is defined later

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

Why it works:

• During the setup phase, JavaScript sees the function declaration function sayHello(...) { ... } and registers it.

• When it starts executing line by line, sayHello it already exists.

Hoisting with Function Expressions

You cannot safely do this:

sayHello("Alice"); //  Error (or undefined), depending on how it's declared

const sayHello = function(name) {
  console.log(`Hello, ${name}!`);
};

Why it fails:

• During setup, JavaScript knows there is a variable sayHello, but it does not yet assign the function to it.

• At the time you call sayHello("Alice"), sayHello is not ready.

• Result: you get an error like “Cannot access 'sayHello' before initialization” or similar.

Same idea with let or var, but details differ. The safe rule of thumb:

- Do not call function expressions before their line of definition.

When to Use Function Declarations vs Function Expressions

Both are valid and useful. The trick is choosing based on intent and code organization.

Use Function Declarations When…

• You’re defining main utilities or core helpers in a file.

• You like having your API-like functions at the top of the file.

• You want them to be fully available anywhere in that scope (because of hoisting).

Example: core helpers

function calculateTotal(price, taxRate) {
  return price + price * taxRate;
}

function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

// Usage below...

Use Function Expressions When…

• You’re defining functions inside other functions.

• You’re using callbacks (e.g., map, filter, setTimeout, event handlers).

• You want to limit the scope and avoid putting lots of function names in the outer level.

• You’re building objects or modules where functions are properties.

Examples:

// 1. Callback in array methods
const numbers = [1, 2, 3];

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

// 2. Methods in an object
const calculator = {
  add: function(a, b) {
    return a + b;
  },
  multiply: function(a, b) {
    return a * b;
  }
};

Assignment Idea (Hands-On Practice)

Here’s a small assignment you can try in a .js file or DevTools console.

1. Function Declaration: multiply two numbers

Write a function declaration that multiplies two numbers:

function multiplyDeclaration(a, b) {
  return a * b;
}

2. Function Expression: same logic

Write a function expression with the same logic:

const multiplyExpression = function(a, b) {
  return a * b;
};

3. Call both functions and print the results

console.log("Declaration result:", multiplyDeclaration(3, 4)); // 12
console.log("Expression result:", multiplyExpression(3, 4));  // 12

4. Try calling them BEFORE their definitions

Now, let’s experiment with hoisting.

Try this version:

console.log(multiplyDeclaration(2, 5)); // What happens?
console.log(multiplyExpression(2, 5));  // What happens?

function multiplyDeclaration(a, b) {
  return a * b;
}

const multiplyExpression = function(a, b) {
  return a * b;
};

What you should observe:

• multiplyDeclaration(2, 5) works.

• multiplyExpression(2, 5) throws an error (because the variable is not initialized yet at that point).

This small experiment makes hoisting very concrete.

Visual: Comparison Table (Declaration vs Expression)

You can imagine/translate this into a diagram or table in your slides or notes.

Visual: Simple Execution Flow of a Function Call

Here’s a conceptual, text-based “diagram” of a function call flow.

1. Your code:

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

const result = add(2, 3);
console.log(result);

1. High-level flow:

• add is defined (either by declaration or expression).

• You call add(2, 3).

• JavaScript:

  • Takes a = 2, b = 3.

  • Runs the function body.

  • Reaches return a + b.

  • Gives back 5.

• result becomes 5.

• console.log(result) prints 5.

No need to think about execution contexts or call stacks at this stage—just follow input → function → output.

Summary

• Functions are reusable blocks of code that take input, optionally process it, and optionally return a result.

• Function declarations use function name(...) { ... }, are hoisted and are great for core helpers.

• Function expressions create functions as values and assign them to variables; they’re not callable before their line, and are perfect for callbacks, inlining, and scoped utilities.

• Hoisting (simple rule):

  • You can call function declarations before they appear.

  • You should not call function expressions before their line of definition.

If you internalize these ideas, you’ll have a solid foundation for understanding more advanced topics like:

• Arrow functions

• Methods in classes and objects

• Closures and higher-order functions

• Async functions and callbacks

Happy coding!

What Are Arrays and Why Do We Need Them?

Imagine you need to store the names of fruits you want to buy. Without arrays, you might do this:

const fruit1 = "Apple";
const fruit2 = "Banana";
const fruit3 = "Mango";
const fruit4 = "Orange";
// ... and so on

Problems with this approach:

- Too many variables to manage

- Hard to "go through" all values (e.g. print or process each one)

- Adding or removing items is messy

An array is a single variable that holds a collection of values in order. Same example with an array:

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

One variable, multiple values, in a fixed order. You can add more items, loop over them, and access any value by its position. That’s why we need arrays.

How to Create an Array

You can create an array in two common ways.

1. Square brackets [] (array literal) — most common

const fruits = ["Apple", "Banana", "Mango"];
const marks = [85, 92, 78, 88];
const tasks = ["Read", "Code", "Exercise"];

2. Using the Array constructor

const colors = new Array("Red", "Green", "Blue");

For everyday use, prefer the square bracket syntax: it’s short and clear.

Arrays can hold any mix of types (numbers, strings, booleans, etc.):

const mixed = [1, "hello", true, 42, "world"];

Accessing Elements Using Index

Each slot in an array has a position number called an index. In JavaScript, indexing starts from 0.

- First element → index 0

- Second element → index 1

- Third element → index 2

- and so on.

Visual: array index and values

Index:    0        1        2        3        4
            ┌────────┬────────┬────────┬────────┬────────┐
   Value:   │ "Apple"│"Banana"│ "Mango"│"Orange"│ "Grape"│
            └────────┴────────┴────────┴────────┴────────┘

You access an element by putting the index in square brackets:

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

console.log(fruits[0]);   // "Apple"  (first)
console.log(fruits[1]);   // "Banana" (second)
console.log(fruits[4]);   // "Grape"  (last in this array)

Accessing an index that doesn’t exist returns undefined:

console.log(fruits[10]);  // undefined

Updating Elements

You can change a value at any index by assigning to that index:

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

fruits[1] = "Berry";   // change index 1
console.log(fruits);   // ["Apple", "Berry", "Mango"]

You’re not adding a new slot; you’re replacing the value at that position.

Array Length Property

Every array has a length property: the number of elements in it.

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

Why it’s useful:

- To get the last element without knowing the size: use length - 1 (because index starts at 0).

const lastIndex = fruits.length - 1;
console.log(fruits[lastIndex]);   // "Orange"

Memory-style idea: think of the array as a row of boxes; length is how many boxes you have.

 Array:  [ "Apple" ] [ "Banana" ] [ "Mango" ] [ "Orange" ]
  Index:      0            1           2           3
  Length = 4  ← number of boxes

Basic Looping Over Arrays

To do something with every element, loop through the array. The most straightforward way is a for loop using the index and length.

Print each element:

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

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Apple
// Banana
// Mango

- i starts at 0 (first index)

- Loop runs while i < fruits.length

- Each time we use fruits[i] to get the current element

Sum of numbers in an array:

const marks = [85, 92, 78];
let total = 0;

for (let i = 0; i < marks.length; i++) {
  total += marks[i];
}
console.log(total);   // 255

This article stays with this basic loop; advanced methods (like forEach, map, etc.) can come later.

Practice Assignment

Do this in your browser console or a small script:

1. Create an array of your 5 favorite movies.

2. Print the first and last element (use index 0 and length - 1).

3. Change one value (e.g. replace the second movie), then print the updated array.

4. Loop through the array and print each movie.

Starter code:

const movies = ["Movie1", "Movie2", "Movie3", "Movie4", "Movie5"];

// 1. First and last
console.log("First:", movies[0]);
console.log("Last:", movies[movies.length - 1]);

// 2. Change one value
movies[1] = "NewFavoriteMovie";
console.log("Updated array:", movies);

// 3. Loop and print all
for (let i = 0; i < movies.length; i++) {
  console.log(movies[i]);
}

Replace the movie names with your own and run it.

Summary

| Concept | Takeaway |
|--------|----------|
| **What** | Array = ordered collection of values in one variable |
| **Create** | `const arr = [value1, value2, ...];` |
| **Access** | `arr[index]` — index starts at 0 |
| **Update** | `arr[index] = newValue;` |
| **Length** | `arr.length` — use `arr[arr.length - 1]` for last element |
| **Loop** | `for (let i = 0; i < arr.length; i++) { ... arr[i] ... }` |

Happy coding!

What Are Operators?

Operators are symbols that tell JavaScript to do something with one or more values (called operands). For example, in 3 + 5, the + is the operator and 3 and 5 are the operands. The result is 8.

Think of them as small actions: add, subtract, compare, assign, and so on. They’re used in variables, conditions, and expressions everywhere in your code.

Operator Categories at a Glance

| Category        | Purpose                     | Examples                    |
|----------------|-----------------------------|-----------------------------|
| **Arithmetic** | Do math with numbers        | `+`, `-`, `*`, `/`, `%`     |
| **Comparison** | Compare two values          | `==`, `===`, `!=`, `>`, `<` |
| **Logical**    | Combine or negate conditions| `&&`, `\|\|`, `!`           |
| **Assignment** | Assign or update variables  | `=`, `+=`, `-=`, etc.       |

Arithmetic Operators (+, -, *, /, %)

Use these for basic math.

| Operator | Name           | Example   | Result |
|----------|----------------|-----------|--------|
| `+`      | Addition       | `10 + 3`  | `13`   |
| `-`      | Subtraction    | `10 - 3`  | `7`    |
| `*`      | Multiplication | `10 * 3`  | `30`   |
| `/`      | Division       | `10 / 3`  | `3.333...` |
| `%`      | Remainder      | `10 % 3`  | `1`    |

Simple math in the console:

const a = 15;
const b = 4;

console.log(a + b);   // 19
console.log(a - b);   // 11
console.log(a * b);   // 60
console.log(a / b);   // 3.75
console.log(a % b);   // 3 (remainder when 15 is divided by 4)

The remainder operator % is handy for “every Nth” logic (e.g. even/odd: number % 2 === 0).

Comparison Operators (==, ===, !=, >, <)

These compare two values and return a boolean: true or false.

The important difference:

- == (loose equality)  

  Converts types if needed, then compares.  

  5 == "5" → true (string "5" is converted to number 5).

- === (strict equality)

  Compares value and type. No conversion.  

  5 === "5" → false (number vs string).

Rule of thumb: Prefer === (and !==) so you avoid surprises from type coercion.

Console examples:

// Loose equality (==) – types can differ
console.log(5 == "5");    // true  (string "5" becomes number 5)
console.log(0 == false);  // true  (false is treated as 0)
console.log("" == false); // true  (empty string and false both “falsy”)

// Strict equality (===) – type must match
console.log(5 === "5");   // false (number vs string)
console.log(5 === 5);     // true
console.log(0 === false); // false (number vs boolean)

Other comparison operators:

| Operator | Meaning           | Example      |
|----------|-------------------|--------------|
| `===`    | Strict equal      | `5 === 5` → true |
| `!==`    | Strict not equal  | `5 !== "5"` → true |
| `==`     | Loose equal       | `5 == "5"` → true |
| `!=`     | Loose not equal   | `5 != "5"` → false |
| `>`      | Greater than      | `10 > 3` → true |
| `<`      | Less than         | `10 < 3` → false |
| `>=`     | Greater or equal  | `5 >= 5` → true |
| `<=`     | Less or equal     | `3 <= 5` → true |

Logical Operators (&&, ||, !)

Use these to combine or invert conditions.

| Operator | Meaning           | Example      |
|----------|-------------------|--------------|
| `===`    | Strict equal      | `5 === 5` → true |
| `!==`    | Strict not equal  | `5 !== "5"` → true |
| `==`     | Loose equal       | `5 == "5"` → true |
| `!=`     | Loose not equal   | `5 != "5"` → false |
| `>`      | Greater than      | `10 > 3` → true |
| `<`      | Less than         | `10 < 3` → false |
| `>=`     | Greater or equal  | `5 >= 5` → true |
| `<=`     | Less or equal     | `3 <= 5` → true |

Logical Operators (&&, ||, !)

Use these to combine or invert conditions.

| Operator | Name   | Meaning |
|----------|--------|--------|
| `&&`     | AND    | Both sides must be truthy |
| `\|\|`   | OR     | At least one side must be truthy |
| `!`      | NOT    | Flips true ↔ false |

Truth table for logical operators

| A     | B     | A && B | A \|\| B | !A   |
|-------|-------|--------|----------|------|
| true  | true  | true   | true     | false|
| true  | false | false  | true     | false|
| false | true  | false  | true     | true |
| false | false | false  | false    | true |

Console examples:

const age = 20;
const hasTicket = true;

// AND: both must be true
console.log(age >= 18 && hasTicket);  // true

// OR: at least one true
console.log(age < 18 || hasTicket);   // true (hasTicket is true)

// NOT: flip the value
console.log(!hasTicket);              // false
console.log(!false);                  // true

A small real-world condition:

const isLoggedIn = true;
const isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log("Show admin panel");
} else if (isLoggedIn || isAdmin) {
  console.log("Show dashboard");
}

// ! for “if not”
if (!isLoggedIn) {
  console.log("Please log in");
}

Assignment Operators (=, +=, -=)

These assign or update the value stored in a variable.

| Operator | Example   | Same as       | Result (if x was 10) |
|----------|-----------|---------------|------------------------|
| `=`      | `x = 5`   | —             | `x` is now `5`         |
| `+=`     | `x += 3`  | `x = x + 3`   | `x` is now `13`        |
| `-=`     | `x -= 2`  | `x = x - 2`   | `x` is now `8`         |
| `*=`     | `x *= 2`  | `x = x * 2`   | `x` is now `20`        |
| `/=`     | `x /= 5`  | `x = x / 5`   | `x` is now `2`         |

Console examples:

let score = 10;
score += 5;   // score is now 15
score -= 3;   // score is now 12
console.log(score);  // 12

Practice Assignment

Try this in your browser console or a small script:

1. Arithmetic: Store two numbers in variables and log their sum, difference, product, quotient, and remainder.

2. Comparison: Compare the same two values using both == and === (e.g. one number and one string) and see how the results differ.

3. Logical: Write a condition using && or || (e.g. “can vote” if age ≥ 18 and has ID) and log the result.

Example starter:

const num1 = 12;
const num2 = 5;

// 1. Arithmetic
console.log(num1 + num2, num1 - num2, num1 * num2, num1 / num2, num1 % num2);

// 2. == vs ===
console.log(num1 == "12", num1 === "12");

// 3. Logical
const canVote = num1 >= 18 && true;
console.log(canVote);

Summary

- Operators act on values to compute results, compare them, or assign them.

- Arithmetic: +, -, *, /, % for math.

- Comparison: Prefer === and !==; use == only when you intentionally want type coercion.

- Logical: &&, ||, ! to combine and invert conditions.

- Assignment: =, +=, -= (and *=, /=) to set or update variables.

Stick to these basics and everyday usage; you can dig into operator precedence and edge cases later when you need them.

Happy coding!

What is this?

In simple terms, this is a reference to the "owner" of the code that is currently running.

It’s not always "the function itself" or "the file." It changes depending on how and where the function is called. That’s why it feels unpredictable at first.

Rule of thumb

- Who called this function? → Often, that’s what this refers to.

- In which context is the code running? → That context often defines this.

We’ll make this precise with the rules below.

How JavaScript Decides What this Is

JavaScript follows a few clear rules. Once you know them, this becomes predictable.

1. Default binding (standalone function call)

When you call a function by itself (not as a method on an object), this usually refers to the global object:

- In a browser: window

- In Node.js: global (or globalThis in modern JS)

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

sayHello(); // In browser: Window {...}  |  In Node: global object

Common beginner mistake: Assuming this is always the function or the script. In strict mode 'use strict'), this in such calls is undefined, which can cause errors if you don’t expect it

2. Implicit binding (method call)

When you call a function as a method on an object (e.g. obj.method()), this is that object.

const user = {
  name: 'Priya',
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

user.greet(); // "Hello, Priya!"  →  this = user

So: who called it? → user. So *this = user**.

Common beginner mistake: Storing the method in a variable and then calling it. That "loses" the object, so this is no longer user:

onst greet = user.greet;
greet(); // "Hello, undefined!" (or error in strict mode)
// this is no longer user—it's window/global or undefined

3. Explicit binding call, apply, bind)

When you explicitly tell JavaScript: "when this function runs, set this to this value," you’re using explicit binding. That’s exactly what call(), apply(), and bind() do.

4. new binding (constructor)

When you call a function with new, this is the newly created object:

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

const p = new Person('Rahul');
console.log(p.name); // "Rahul"  →  this was the new object

Part 2: call() – Call a function with a chosen this

Syntax:

function.call(thisArg, arg1, arg2, ...)

- First argument: what this should be inside the function.

- Rest of the arguments: passed to the function as normal parameters.

Example:

function introduce(greeting, punctuation) {
  console.log(`\({greeting}, I'm \){this.name}${punctuation}`);
}

const person = { name: 'Sneha' };

introduce.call(person, 'Hi', '!');
// "Hi, I'm Sneha!"
// this = person, greeting = 'Hi', punctuation = '!'

When to use call():

- When you want to run a function once with a specific this and known arguments.

- When borrowing a method from another object.

- When you need to pass arguments one by one.

Part 3: apply() – Same idea, arguments as an array

Syntax:

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

- First argument: what this should be (same as call).

- Second argument: one array of all the arguments for the function.

Example:

introduce.apply(person, ['Hello', '.']);
// "Hello, I'm Sneha."

So:

- call(this, a, b, c) → arguments listed one by one.

- apply(this, [a, b, c]) → arguments in a single array.

When to use apply():

- When your arguments are already in an array (e.g. from another function or API).

- Historically used for things like Math.max.apply(null, array). In modern JS you’d often use spread: Math.max(...array).

If you have an array and want to use call, you can do:

fn.call(thisArg, ...array)` — that’s like `apply(thisArg, array)

Part 4: bind() – Get a new function with this (and optional args) fixed

Syntax:

function.bind(thisArg, arg1?, arg2?, ...)

- First argument: what this will always be in the new function.

- Optional: you can also fix the first few arguments (partial application).

- Returns: a new function. It does not run the original function immediately.

Example:

const introduceSneha = introduce.bind(person);
introduceSneha('Hey', '!!');
// "Hey, I'm Sneha!!"
// this is always person, no matter how you call introduceSneha

Fixing both this and some arguments:

const sayHiSneha = introduce.bind(person, 'Hi');
sayHiSneha('!');  // "Hi, I'm Sneha!"

When to use bind():

- When you need to pass a callback that must keep a specific this (e.g. event handlers, setTimeout, React class methods).

- When you want a function that always runs with a fixed this (and optionally fixed arguments).

Common beginner mistake: Calling bind() and expecting the original function to run. It doesn’t—it only returns a new function. You still have to call that returned function.

introduce.bind(person, 'Hi', '!');   // Does nothing visible—returns a function
introduce.bind(person, 'Hi', '!')(); // Correct: call the returned function

Quick comparison

| Method    | When it runs     | Arguments form   | Returns        |
|----------|------------------|------------------|----------------|
| `call()` | Immediately      | List: (a, b, c)  | Function result |
| `apply()`| Immediately      | Array: [a, b, c] | Function result |
| `bind()` | Not immediately  | List (optional)  | New function   |

Part 5: Fixing real-world mistakes

Mistake 1: Losing this in a callback

const counter = {
  count: 0,
  increment() {
    this.count++;
    console.log(this.count);
  }
};

setTimeout(counter.increment, 1000); // NaN or error — this is not counter!

Fix with bind:

setTimeout(counter.increment.bind(counter), 1000); // 1 (after 1 second)

Mistake 2: Passing a method as a callback (e.g. in event listeners)

button.addEventListener('click', obj.handleClick); // this might be the button, not obj

If you need this inside handleClick to be obj:

button.addEventListener('click', obj.handleClick.bind(obj));

Mistake 3: Assuming this in nested functions

const obj = {
  name: 'Dev',
  outer() {
    function inner() {
      console.log(this.name); // this is not obj!
    }
    inner();
  }
};
obj.outer(); // undefined or error

Fix: Capture this in a variable, or use an arrow function for inner (arrow functions don’t have their own this; they use the surrounding one):

outer() {
  const self = this;
  function inner() {
    console.log(self.name);
  }
  inner();
}
// Or: inner = () => console.log(this.name);

Part 6: How this fits with arrow functions

Arrow functions (**do not** have their own this). They use the this of the scope where they were defined (lexical this).

const obj = {
  name: 'Arrow',
  regular: function() { console.log(this.name); },
  arrow: () => console.log(this.name)
};

obj.regular(); // "Arrow"
obj.arrow();   // undefined (or window.name) — arrow took this from outer scope

So:

- Normal functions: this = who called them / what you pass via callapplybind.

- Arrow functions: this = from the surrounding code; callapplybind don’t change their this.

Use arrow functions when you want to keep the surrounding this (e.g. in callbacks). Use regular functions when you need this to be the object or something you pass with call apply bind.

Summary

- this = the "owner" of the current execution, decided by how (and where) the function is called.

- call(thisArg, ...args) = run function now with that this and those arguments.

- apply(thisArg, [args]) = same, but arguments in one array.

- bind(thisArg, ...args?) = return a new function with that this (and optional fixed arguments); call it later.

Once you know these rules and the typical mistakes (callbacks, nested functions, passing methods), you can debug this issues quickly and use call, apply, and bind on purpose instead of by trial and error.

If this helped you, consider sharing it with someone who’s still confused by this. Happy coding!

Happy learning !

What is a Variable?

Imagine your room full of labeled boxes:

• One box says "Name" and stores "Alex".

• Another says "Age" and stores 20.

• Another says **"IsStudent."and storestrue`.

In programming, a variable is just a box with a label where you store information so you can use it later.

In JavaScript, we use these keywords to create (declare) a variable:

• var

• let

• const

You can think of it like:

let label = value;

Example:

let name = "Alex";
let age = 20;
let isStudent = true;

Primitive Data Types (The Basic Kinds of Values)

These are the most common primitive types you’ll use:

• string: text inside quotes

• number: any number (integer or decimal)

• boolean: true or false

• null: “nothing here on purpose.”

• undefined: “nothing here (and we didn’t even set it yet).”

Simple Examples:

let name = "Alex";        // string
let age = 20;             // number
let isStudent = true;     // boolean
let middleName = null;    // null (we KNOW there is no middle name)
let address;              // undefined (we never assigned a value)

Notice: address is undefined because we didn’t give it a value at all.

How to Declare Variables: var, let, and const

In modern JavaScript, you’ll mostly use let and const.
var is older and has some weird behaviours (we’ll keep it super simple here).

var

• Old way of declaring variables.

• Has function scope (we’ll explain scope soon).

• Can be re-declared and updated.

var city = "Delhi";
var city = "Mumbai";   // this is allowed with var
city = "Bangalore";    // also allowed

let

• A modern way to declare variables that can change.

• Has block scope (more on this in a bit).

• Can be updated, but cannot be re-declared in the same block.

let score = 10;
score = 15;   // allowed

// let score = 20;    // Not allowed in the same block

const

• Used for values that should not change.

• Also has block scope.

• Must be given a value immediately.

• Cannot be updated or re-declared.

const pi = 3.14;
// pi = 3.14159;    // TypeError: Assignment to constant variable

Tiny human moment: I sometimes still typo const as cost and wonder why my code is broken.

Basic Difference Between var, let, and const

Here’s a quick comparison table :

Simple rule of thumb:

• Use const by default.

• If you know the value will change, use let.

• Avoid var unless you’re reading old code or specifically learning it.

What is Scope? (Beginner-Friendly)

Scope answers the question:

“Where in my code can I access this variable?”

Think of scope like the walls of a room:

• If a variable is declared inside a room, only people in that room can use it.

• If it’s declared outside all rooms, everyone in the house can use it.

In JavaScript, the “rooms” are usually:

• A function

• A block: anything between { and } (like if {}, for {}, etc.)

Block Scope with let and const

if (true) {
  let message = "Hello!";
  console.log(message); // works
}

console.log(message);    // ReferenceError: message is not defined

message only exists inside the { ... }.

Function Scope with var

function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // works because var is function-scoped
}

testVar();
// console.log(x); // x is not defined outside the function

var ignores the block {} and only cares about the whole function.

Simple Scope Diagram (Mental Picture)

Imagine this little map:

Global Scope
  |
  |-- function myFunction() {           // function scope
  |      let a = 1;
  |      if (true) {                    // block scope
  |          let b = 2;
  |      }
  |  }

• a is visible inside myFunction.

• b is only visible inside the if block.

• Outside of myFunction, neither a nor b exists.

Showing How Values Can Change

With let

let count = 0;
console.log(count); // 0

count = 1;
console.log(count); // 1

count = count + 5;
console.log(count); // 6

With const

const country = "India";
console.log(country); // "India"

// country = "USA";   // Error if you try this

One “gotcha”: const stops you from changing the binding, but for objects/arrays, their contents can still change.
That’s a bit advanced for this post, so we’ll leave that for another day.

Mini Assignment

Open your browser console (right-click → Inspect → Console tab)
or create a simple .js file and run it with Node if you know how.

1. Declare These Variables

• name → your name (string)

• age → your age (number)

• isStudent → true or false (boolean)

Try this:

let name = "Shivam";     // change this to your name
let age = 25;            // change to your age
let isStudent = true;    // or false

console.log(name);
console.log(age);
console.log(isStudent);

2. Try Changing let Values

age = 26;
isStudent = false;

console.log("Updated age:", age);
console.log("Updated isStudent:", isStudent);

3. Try With const and See What Happens

const city = "Delhi";
console.log(city);

// Now try this:
city = "Mumbai";  // This should throw an error

You should see something like:
TypeError: Assignment to constant variable.

This is good — it means JavaScript is protecting your constant from being changed.

Simple var, let, const Comparison Example

Run this and see what works and what doesn’t:

// var example
var language = "JavaScript";
var language = "TypeScript"; // allowed
console.log(language);       // "TypeScript"

// let example
let framework = "React";
// let framework = "Vue";    // Uncommenting this will cause an error
framework = "Next.js";       // allowed
console.log(framework);

// const example
const library = "Redux";
// const library = "Zustand"; // Not allowed
// library = "MobX";          // Not allowed
console.log(library);

Happy learning!

1. What are arrow functions?

Arrow functions are just functions with a shorter syntax using =>.

Normal function:

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

Arrow function version:

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

2. Basic arrow function syntax

General Pattern

const functionName = (parameters) => {
  return result;
};

Example:

const greet = () => {
  console.log("Hello!");
};
greet(); // "Hello!"

3. Arrow functions with one parameter

If there is one parameter, you can skip the parentheses.

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

// Arrow function
const squareArrow = num => {
  return num * num;
};

console.log(squareArrow(4)); // 16

Both square and squareArrow do the same thing.

4. Arrow functions with multiple parameters

With 2 or more parameters, you must keep the parentheses.

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

console.log(multiply(3, 5)); // 15

5. Implicit return vs explicit return

Explicit return (with return and curly braces)

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

You use return and curly braces {}.

Implicit return (no return, no curly braces)

When the function body is just one expression, you can skip return and {}:

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

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

• This is implicit return: the expression a + b is returned automatically.

Another example:

const isPositive = num => num > 0;

console.log(isPositive(5));  // true
console.log(isPositive(-3)); // false

Use implicit return for very short, simple functions.

6. Arrow functions vs normal functions (basic difference)

For beginners, remember these simple points:

• Syntax:

  • Normal: function name(...) { ... }

  • Arrow: const name = (...) => { ... }

• Use case:

  • Arrow functions are often used for short functions, callbacks, and with array methods like map, filter, forEach.

• this behavior (advanced):

  • Arrow functions handle this differently, but as a beginner, you can skip this for now.

For now, focus on syntax and readability, not this.

7. Using arrow functions with map()

Arrow functions shine when used with array methods.

Normal function with map:

let nums = [1, 2, 3];

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

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

Arrow function version:

let nums = [1, 2, 3];

let doubled = nums.map(num => num * 2);

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

• Cleaner

• Easier to read

• Very common in modern JavaScript

8. Visual / diagram ideas (for your article)

You can imagine (or draw) something like:

• Normal → Arrow transformation

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

• Arrow syntax breakdown

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

  • const add → function name

  • (a, b) → parameters

  • => → “arrow”

  • a + b → returned expression (implicit return)

9. Practice assignment (do this in console)

1. Normal function → square

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

console.log(square(5));

1. Rewrite it using an arrow function

const squareArrow = num => num * num;

console.log(squareArrow(5));

1. Arrow function to check even/odd

const isEven = num => num % 2 === 0;

console.log(isEven(4));
console.log(isEven(7));

1. Use an arrow function inside map()

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

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

console.log(doubled);

Final thoughts

• Start from normal functions, then convert them to arrow functions.

• Use arrow functions for short, clear logic, especially with arrays.

• Keep examples simple: math, greetings, checks (even/odd).
  Once this feels natural, you’ll be writing modern JavaScript without thinking about it.

Happy learning!

This article is for complete beginners. You can follow along by opening your browser console (Right-click → Inspect → Console tab) and typing the examples.

1. push() and pop() – Working with the END of an array

push() – Add to the end

Idea: Put a new item at the end of the list.

let fruits = ["apple", "banana"];
console.log(fruits); // ["apple", "banana"]

fruits.push("mango");

console.log(fruits); // ["apple", "banana", "mango"]

• Before: ["apple", "banana"]

• After push("mango"): ["apple", "banana", "mango"]

pop() – Remove from the end

Idea: Take the last item out of the list.

let fruits = ["apple", "banana", "mango"];
console.log(fruits); // ["apple", "banana", "mango"]

let lastFruit = fruits.pop();

console.log(lastFruit); // "mango"
console.log(fruits);    // ["apple", "banana"]

• Before: ["apple", "banana", "mango"]

• After pop(): ["apple", "banana"]

2. shift() and unshift() – Working with the START of an array

unshift() – Add to the start

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

numbers.unshift(1);

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

shift() – Remove from the start

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

let firstNumber = numbers.shift();

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

• Before: [1, 2, 3, 4]

• After shift(): [2, 3, 4]

3. for loop vs map() / filter() / forEach()

Traditional for loop example

Goal: Create a new array with each number doubled.

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

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

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

This works, but we manually manage i, length, and push.

4. map() – Transform each item

Idea: Take an array, apply a function to every item, and get a new array.

let nums = [1, 2, 3];
console.log("before:", nums); // [1, 2, 3]

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

console.log("after (new array):", doubled); // [2, 4, 6]
console.log("original:", nums);             // [1, 2, 3]

• Before: [1, 2, 3]

• After map(num => num * 2): [2, 4, 6]

• Original array stays the same

Simple map “flowchart” (mental model)

1. Take first value → run function → put result in new array

2. Move to next value → repeat

3. Stop when no more values → return new array

5. filter() – Keep only what you want

Idea: Test each item; if the test is true, keep it. The result is a new array.

let nums = [5, 10, 15, 20];
console.log("before:", nums); // [5, 10, 15, 20]

let greaterThan10 = nums.filter(function (num) {
  return num > 10;
});

console.log("after (filtered):", greaterThan10); // [15, 20]
console.log("original:", nums);                  // [5, 10, 15, 20]

• Before: [5, 10, 15, 20]

• After filter(num > 10): [15, 20]

• Original stays the same

Simple filter “flowchart” (mental model)

For every item:

1. Run the test (condition)

2. If the condition is true, → item goes into the new array

3. If the condition is false → ignore that item

4. Return the new array at the end

6. reduce() – Combine all values into one

Idea: Go through the array and keep an “accumulator” (a running total or result). At the end, you get one value.

Example: sum of all numbers.

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

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

console.log(sum); // 10

• accumulator: starts at 0 (the second argument to reduce)

• Step-by-step:

  • Start: accumulator = 0

  • Step 1: 0 + 1 = 1

  • Step 2: 1 + 2 = 3

  • Step 3: 3 + 3 = 6

  • Step 4: 6 + 4 = 10 → final result

Simply reduce “visual.”

Think of reduce like this line:

0 → (add 1) → 1 → (add 2) → 3 → (add 3) → 6 → (add 4) → 10

You pass through all values and keep updating a single result.

7. forEach() – Do something for each item (no new array)

Idea: Loop over each item and run a function. Does not return a new array.

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

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

// 0 "apple"
// 1 "banana"
// 2 "mango"

Use forEach when you just want to do something (like console.log) for each item, not create a new array.

8. Common beginner mistakes (and how to avoid them)

• Confusing map and forEach:

  • map Returns a new array.

  • forEach returns undefined (it’s just for side effects).

• Expecting filter to change the original array:

  • It doesn’t. It returns a new array. Always store the result.

• Forgetting the initial value in reduce:

  • As a beginner, always pass an initial value like 0 for sums.

9. Your practice assignment

Try these directly in the browser console.

1. Create an array of numbers

let numbers = [3, 7, 12, 5, 20];

1. Use map() to double each number

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

console.log(doubled);

1. Use filter() to get numbers greater than 10

let greaterThan10 = numbers.filter(function (num) {
  return num > 10;
});

console.log(greaterThan10);

1. Use reduce() to calculate the total sum

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

console.log(total);

• Type all code yourself (don’t just copy-paste) to build muscle memory.

• Change the numbers and see what happens to the results.

• Once you’re comfortable, try replacing the function (num) { ... } with arrow functions like num => num * 2.

You can now explain these array methods to someone else—that’s a great sign you understand them.

Happy learning!

Scene: Modern War Control Room

Border tension chal rahi hai.

HQ ko 3 alag units se update chahiye:

• Satellite Surveillance

• Drone Strike Unit

• Intelligence Team

Teen independent operations.
Teen lag timing.
Exactly like three asynchronous Promises.

Step 1: Three Missions = Three Promises

const satellite = new Promise((resolve) => {
  setTimeout(() => resolve("Satellite: Enemy Located"), 2000);
});

const drone = new Promise((resolve) => {
  setTimeout(() => resolve("Drone: Target Locked"), 1000);
});

const intel = new Promise((resolve) => {
  setTimeout(() => resolve("Intel: Strategy Ready"), 1500);
});

Har unit independently kaam kar rahi hai.
HQ wait kar raha hai.

1. Promise.all() – Sab Report Aane Do

Commander bolta hai:
“Jab tak teenon report nahi aati, koi action nahi.”

Promise.all([satellite, drone, intel])
  .then((reports) => {
    console.log("All Reports Received:", reports);
    console.log("Commander: Execute Operation");
  })
  .catch((error) => {
    console.log("Mission Failed:", error);
  });

Behavior:

• Sab fulfill → Operation start

• Ek bhi reject → pura mission fail

High dependency = High risk.

When One Mission Fails

const drone = new Promise((resolve, reject) => {
  setTimeout(() => reject("Drone Shot Down"), 1000);
});

Ab kya hoga?

Promise.all() immediately reject
Commander: “Abort Mission!”

2.Promise.allSettled() – Mujhe Sabka Status Chahiye

Kabhi-kabhi HQ ko sabka result chahiye — chahe fail ho ya pass.

Promise.allSettled([satellite, drone, intel])
  .then((results) => {
    console.log(results);
  });

Output:

[
 { status: "fulfilled", value: "Satellite: Enemy Located" },
 { status: "rejected", reason: "Drone Shot Down" },
 { status: "fulfilled", value: "Intel: Strategy Ready" }
]

Yeh analysis mode hai.
Decision baad mein hoga.

3.Promise.race() – Jo Pehle Confirm Kare

Emergency situation.
“Jo pehle confirm karega, uspar action lenge.”

Promise.race([satellite, drone, intel])
  .then((fastest) => {
    console.log("Fastest Update:", fastest);
  });

Speed matters more than coordination.

4.Promise.any() – “Ek Success Kaafi Hai”

Promise.any([satellite, drone, intel])
  .then((result) => {
    console.log("At least one success:", result);
  })
  .catch(() => {
    console.log("All missions failed");
  });

Behavior:

• Ek bhi fulfill → Success

• Sab reject → Error

Backup strategy activated.

Async/Await – Clean Command Structure

async function warRoom() {
  try {
    const reports = await Promise.all([satellite, drone, intel]);
    console.log("All Clear:", reports);
  } catch (error) {
    console.log("Critical Failure:", error);
  }
}

warRoom();

Readable. Structured. Professional.

Polyfill is a piece of code (or plugin) that offers the functionality that you, the developer, would expect the browser to deliver natively. It’s a service that takes a request for a set of browser features and only delivers the polyfills the requesting browser requires.

forEach()

The forEach() method in JavaScript is used to iterate across an array; developers will find this function quite useful. For each array element, the forEach() method calls a given function once. A forEach polyfill is a piece of JavaScript code that implements the native Array.prototype.forEach method for older web browsers or environments that do not natively support it.

If you are interviewing as a fresher, they will expect you to implement a custom forEach.

Array.prototype.useForEach = function (callback) {
    for(let i = 0; i < this.length; i++){
        callback(this[i], i, this)
    }
}

Recommended for SDE-2/SDE-3 interview preparation

Array.prototype.useForEach = function(callback, thisCtx) {
    if( typeof callback !== 'function' ) {
        throw new TypeError(callback + ' is not a function');
    }

    let length = this.length;
    let i =0;

    while(i <length) {
        if(this.hasOwnProperty(i)) {
            callback.call(thisCtx, this[i], i, this);
        }
        i++;
    }
}

let arr = [1, 2, 3];
arr.useForEach(function(item) {
    console.log('item: ' + item);
});

//output. 
//item: 1
//item: 2
//item: 3