Forem: SATYA SOOTAR

The Magic of this, call(), apply(), and bind()

SATYA SOOTAR — Sun, 15 Mar 2026 07:42:16 +0000

Hello readers 👋, welcome back to 10th blog in this JavaScript series.

Imagine you're at a party, and someone shouts, "Hey, come here!" Who will respond? It depends on who is calling and who they're looking at.

In JavaScript, the this keyword works exactly like that. It's a special word that refers to the context – the object that is currently "calling" the function.

But sometimes, you want to control who this refers to. That's where the magical trio – call(), apply(), and bind() – come into play.

In this blog, we'll demystify this and learn how to bend it to our will using these methods.

What is `this` in JavaScript? (The Simple Explanation)

this is a keyword that refers to the object that is executing the current function.

Think of it like this: when a function is called, this is like a secret note that tells the function, "Hey, you're working for this object right now."

Simple rule:

this refers to who is calling the function.

`this` Inside Normal Functions

When you use this inside a regular function (not attached to any object), what does it refer to?

In non-strict mode (browser):

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

showThis(); // In browser: window object

Here, the function is called by the global context (the window object in browsers), so this points to window.

In strict mode:

"use strict";
function showThis() {
  console.log(this);
}

showThis(); // undefined

In strict mode, JavaScript doesn't default to the global object – it leaves this as undefined.

Remember: In regular functions, this depends on how the function is called, not where it's defined.

`this` Inside Objects (Methods)

When a function is a property of an object (called a method), this refers to that object.

const person = {
  name: "Satya",
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // Hello, I'm Satya

Here, greet is called on the person object, so this inside greet refers to person.

But what if we take the method out of the object?

const greetFn = person.greet;
greetFn(); // Hello, I'm undefined (or window.name in non-strict mode)

Now greetFn is just a regular function, and this is no longer person. This is where we need help to fix this.

Why Do We Need call(), apply(), and bind()?

Sometimes we want to borrow a method from one object and use it for another. Or we want to make sure this points to the right object no matter how the function is called.

That's exactly what call, apply, and bind do – they let us explicitly set the value of this.

1. call() – Call a function with a given `this` and arguments

The call() method calls a function with a specified this value and arguments provided individually.

Syntax:

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

Example:

const person1 = { name: "Raj" };
const person2 = { name: "Priya" };

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

introduce.call(person1, "Delhi", "India"); // Raj from Delhi, India
introduce.call(person2, "Mumbai", "India"); // Priya from Mumbai, India

Real Life Example:

const car = {
  brand: "Toyota",
  getDetails: function(model) {
    console.log(`${this.brand} ${model}`);
  }
};

const anotherCar = { brand: "Honda" };

car.getDetails.call(anotherCar, "Civic"); // Honda Civic

Here, car's method is called with this set to anotherCar. We borrowed the method!

2. apply() – Same as call, but arguments as an array

apply() is exactly like call(), but it takes arguments as an array (or array-like object).

Syntax:

functionName.apply(thisArg, [argsArray])

Example:

const person1 = { name: "Raj" };
const person2 = { name: "Priya" };

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

introduce.apply(person1, ["Delhi", "India"]); // Raj from Delhi, India
introduce.apply(person2, ["Mumbai", "India"]); // Priya from Mumbai, India

When to use apply?

When your arguments are already in an array, or you need to pass a variable number of arguments.

const numbers = [10, 20, 30, 40];
console.log(Math.max.apply(null, numbers)); // 40

(Here, this doesn't matter, so we pass null.)

3. bind() – Returns a new function with bound `this`

bind() does not call the function immediately. Instead, it creates a new function with this permanently set to the value you provide.

Syntax:

const boundFunction = functionName.bind(thisArg, arg1, arg2, ...)

Example:

const person = { name: "Satya" };

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

const boundGreet = greet.bind(person, "Hello");
boundGreet(); // Hello, I'm Satya

Real Life Example:

const user = {
  name: "Amit",
  sayHi: function() {
    console.log(`Hi, ${this.name}`);
  }
};

// Let's say we want to pass this method to a button click
const sayHiFn = user.sayHi.bind(user);

// Later, when sayHiFn is called, it still uses 'user' as this
sayHiFn(); // Hi, Amit

Without bind, if we passed user.sayHi directly, this would become the button or global object.

Difference Between call, apply, and bind

Method	When is function called?	How arguments are passed	Use case
`call()`	Immediately	Individually, separated by commas	When you know the arguments and want to invoke right away
`apply()`	Immediately	As an array	When arguments are in an array, or you have variable number of arguments
`bind()`	Returns a new function (not called yet)	Individually (pre-filled)	When you need a function with a fixed `this` to be used later (e.g., event handlers, callbacks)

Simple way to remember:

call – C for Comma-separated arguments.
apply – A for Array of arguments.
bind – B for Borrow and Bind for later use.

Conclusion

this refers to who is calling the function.
In regular functions (non-method), this is the global object (or undefined in strict mode).
In methods, this is the object the method is called on.
call() and apply() immediately invoke the function with a specified this.
bind() returns a new function with this permanently set, ready to be called later.
Use call for comma-separated arguments, apply for array arguments, and bind when you need a function with a fixed context for future use.

Understanding this and these methods will save you from many bugs and give you superpowers in controlling function execution. Practice with the examples and soon it'll become second nature.

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Understanding Object-Oriented Programming in JavaScript

SATYA SOOTAR — Sun, 15 Mar 2026 07:34:32 +0000

Hello readers 👋, welcome back to 9th blog in this JavaScript series.

Imagine you are a car manufacturer. You don't build each car from scratch, right? You have a blueprint (or design) that defines what a car should have: wheels, engine, doors, color options, etc. Then you use that blueprint to create many cars – each car is an object made from the same blueprint.

This is exactly what Object-Oriented Programming (OOP) is all about. You create a blueprint (called a class) and then create multiple objects (called instances) from it.

In this blog, we'll explore how JavaScript implements OOP using classes and objects, with simple, practical examples.

Object-Oriented Programming (OOP)

OOP is a programming style that organizes code around objects rather than functions and logic. An object can contain data (properties) and actions (methods).

The main idea is to model real-world things – like a person, a car, a student – as objects in your code.

Real-World Analogy: Blueprint → Objects

Blueprint (Class): A design or template that defines what properties and methods an object should have.
Object: A specific thing created from that blueprint, with its own unique values for the properties.

Real World	Programming
Car blueprint	Class
An actual car (red, with engine number XYZ)	Object (instance)
Multiple cars from same blueprint	Multiple objects from same class

What is a Class in JavaScript?

A class is a template for creating objects. It encapsulates data and behavior that objects will have.

JavaScript introduced classes in ES6 (2015) as syntactic sugar over the existing prototype-based inheritance. But don't worry about prototypes for now – just think of a class as a blueprint.

Syntax:

class ClassName {
  // properties and methods
}

Creating a Simple Class and Object

Let's create a Car class with properties like brand and color, and a method to display information.

class Car {
  // Constructor method – called when creating a new object
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  // Method
  displayInfo() {
    console.log(`This is a ${this.color} ${this.brand}.`);
  }
}

// Creating objects (instances) from the class
const car1 = new Car("Toyota", "red");
const car2 = new Car("Honda", "blue");

car1.displayInfo(); // This is a red Toyota.
car2.displayInfo(); // This is a blue Honda.

Explanation:

The constructor is a special method that runs automatically when you create a new object. It sets up the initial values for properties (this.brand, this.color).
this refers to the current object being created.
new Car(...) creates a new object based on the class.

Constructor Method

The constructor is like the assembly line in a factory. It takes the raw materials (parameters) and builds the object with those values.

You can have as many parameters as you need.

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("Raj", 25, "Delhi");
person1.introduce(); // Hi, I'm Raj, 25 years old, from Delhi.

If you don't define a constructor, JavaScript provides an empty one by default.

Methods Inside a Class

Methods are functions that belong to the class. They define the behavior of objects.

You can add as many methods as you want.

class Calculator {
  constructor(value = 0) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this; // allows chaining
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  getValue() {
    return this.value;
  }
}

const calc = new Calculator(10);
calc.add(5).subtract(3); // chaining
console.log(calc.getValue()); // 12

Methods can access and modify the object's properties using this.

Basic Idea of Encapsulation

Encapsulation means bundling data (properties) and methods that operate on that data within a single unit (class), and controlling access to some details.

Think of it like a capsule – you don't need to know how the engine works to drive a car; you just use the steering wheel and pedals.

In JavaScript, we can indicate that some properties are "private" (though true privacy requires special syntax like #). For now, just understand that encapsulation helps keep code organized and prevents accidental interference.

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner;
    this.balance = balance; // normally you'd keep balance private
  }

  deposit(amount) {
    if (amount > 0) {
      this.balance += amount;
      console.log(`Deposited ${amount}. New balance: ${this.balance}`);
    }
  }

  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
      console.log(`Withdrew ${amount}. New balance: ${this.balance}`);
    } else {
      console.log("Insufficient funds!");
    }
  }
}

const myAccount = new BankAccount("Satya", 1000);
myAccount.deposit(500);  // Deposited 500. New balance: 1500
myAccount.withdraw(2000); // Insufficient funds!

Here, the balance is still accessible from outside (which is not ideal), but the methods provide controlled access. In advanced JavaScript, you can use #balance to make it truly private.

Conclusion

OOP organizes code around objects that contain data and behavior.
Class is a blueprint for creating objects.
Constructor initializes object properties when created.
Methods define what objects can do.
Encapsulation bundles data and methods, hiding internal details.

Classes make it easy to create multiple objects with the same structure, promoting reusability and organization. As you progress, you'll learn more advanced OOP concepts like inheritance, polymorphism, and private fields.

For now, practice creating classes and objects – it's the foundation of modern JavaScript development.

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Arrow Functions in JavaScript: A Simpler Way to Write Functions

SATYA SOOTAR — Sun, 15 Mar 2026 07:26:21 +0000

Hello readers 👋, welcome to the 8th blog of this JavaScript series.

Imagine you are packing your bag for a trip. You have two options:

Option 1: Pack everything carefully - fold your clothes, put them in separate compartments, zip everything properly.

Option 2: Just throw everything in the bag quickly.

Sometimes you need the careful packing (like for a long vacation). But sometimes you just want to throw things in and go (like for a quick gym session).

In JavaScript, we have something similar with functions.

We learned about regular functions in previous blogs. They are like careful packing - they work perfectly but require more writing.

Arrow functions are like quick packing - they do the same job but with less code. They are the modern, simpler way to write functions in JavaScript.

What Are Arrow Functions?

Arrow functions are a shorter syntax for writing functions in JavaScript. They were introduced in ES6 (a newer version of JavaScript) and have become very popular because they:

Reduce the amount of code you write
Make your code cleaner and easier to read
Have some special features (though we will save the complex parts for later)

Think of arrow functions as the express version of regular functions. They get you from point A to point B faster.

Normal Function vs Arrow Function

Before we dive into arrow functions, let's look at how we normally write functions:

Regular Function

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

console.log(greet("Satya")) // Hello Satya

Arrow Function (Same Result)

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

console.log(greet("Satya")) // Hello Satya

See the difference? The arrow function:

Removes the function keyword
Adds an arrow => after the parameters
Stores the function in a variable (usually with const)

Basic Arrow Function Syntax

Let me break down the syntax piece by piece.

Full Arrow Function Syntax

const functionName = (parameter1, parameter2) => {
    // function body
    return result
}

Step-by-Step Breakdown

If we compare it to a regular function:

Regular Function:

function add(x, y) {
    return x + y
}

Arrow Function:

const add = (x, y) => {
    return x + y
}

The Transformation:

Remove the word function
Put an => between (x, y) and {
Store it in a variable const add

Arrow Functions with One Parameter

When your arrow function has exactly one parameter, you can remove the parentheses ().

With Parentheses

const double = (num) => {
    return num * 2
}

console.log(double(5)) // 10

Without Parentheses (Shorter)

const double = num => {
    return num * 2
}

console.log(double(5)) // 10

Both work exactly the same. The parentheses become optional when there is only one parameter.

Pro tip: Many developers still use parentheses even with one parameter because it makes the code more consistent. But knowing you can omit them helps you read other people's code.

Arrow Functions with Multiple Parameters

When you have multiple parameters (or zero parameters), you must use parentheses.

Two Parameters

const add = (x, y) => {
    return x + y
}

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

Zero Parameters

const sayHello = () => {
    return "Hello World"
}

console.log(sayHello()) // Hello World

Implicit Return vs Explicit Return

This is one of the coolest features of arrow functions. Let me explain with a real-life example.

Explicit Return is like telling someone exactly what to do: "Please go to the kitchen, open the refrigerator, take out the milk, and bring it to me."

Implicit Return is like saying: "Bring me milk." The result is understood without listing all the steps.

In JavaScript:

Explicit Return (Using `return` keyword)

const add = (x, y) => {
    return x + y
}

Here we explicitly write the return keyword. The function knows it must return something.

Implicit Return (No `return` keyword)

When your function body has only one expression (one line of code), you can remove the curly braces {} and the return keyword. The result is automatically returned.

const add = (x, y) => x + y

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

No return, no curly braces. The expression x + y is automatically returned.

More Examples of Implicit Return

Example 1: Double a number

const double = num => num * 2

console.log(double(4)) // 8

Example 2: Greet someone

const greet = name => "Hello " + name

console.log(greet("Satya")) // Hello Satya

Example 3: Check if number is even

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

console.log(isEven(4)) // true
console.log(isEven(5)) // false

When to Use Which?

Use explicit return (with curly braces and return) when your function has multiple lines of code
Use implicit return (without curly braces) when your function is just one line that returns a value

// Multiple lines - need explicit return
const processNumber = num => {
    let squared = num * num
    let message = "The square is " + squared
    return message
}

// Single line - can use implicit return
const square = num => num * num

Basic Differences: Arrow Function vs Normal Function

For now, let's focus on the simple differences. We will explore the more complex differences (like this keyword) in a future blog.

1. Syntax Length

Normal Function:

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

Arrow Function:

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

Arrow functions are shorter and cleaner.

2. Function Keyword

Normal functions use the function keyword. Arrow functions use an arrow =>.

3. Implicit Return

Normal functions always need the return keyword to return something. Arrow functions can return implicitly (without return) when they have one expression.

4. Usage as Variables

Arrow functions are always stored in variables (usually const). Normal functions can be declared with the function keyword or stored in variables.

// Normal function - function declaration
function square1(x) {
    return x * x
}

// Normal function - stored in variable
const square2 = function(x) {
    return x * x
}

// Arrow function - always in variable
const square3 = x => x * x

Common Mistakes to Avoid

1. Forgetting Parentheses with No Parameters

// Wrong
const greet = => "Hello" // Syntax Error

// Correct
const greet = () => "Hello"

2. Using Curly Braces Without Return

// Wrong - this returns undefined
const add = (x, y) => { x + y }

// Correct - explicit return needed with curly braces
const add = (x, y) => { return x + y }

// Correct - no curly braces, implicit return
const add = (x, y) => x + y

Remember: {} means you need return. No {} means implicit return.

3. Trying to Use Implicit Return for Multiple Lines

// Wrong - can't have multiple lines without {}
const process = num => 
    let squared = num * num
    "Result: " + squared  // This won't work

// Correct
const process = num => {
    let squared = num * num
    return "Result: " + squared
}

4. Forgetting to Store Arrow Function in Variable

// Wrong - arrow functions need to be assigned
(x, y) => x + y // This does nothing

// Correct
const add = (x, y) => x + y

When to Use Arrow Functions

Arrow functions are perfect for:

Short, simple functions that do one thing
Callback functions (functions passed to other functions like map, filter, forEach)
When you want cleaner, more readable code

// Perfect use case: Array methods
let numbers = [1, 2, 3, 4, 5]

let squares = numbers.map(n => n * n)
let evens = numbers.filter(n => n % 2 === 0)
let sum = numbers.reduce((total, n) => total + n, 0)

console.log(squares) // [1, 4, 9, 16, 25]
console.log(evens)   // [2, 4]
console.log(sum)     // 15

Conclusion

Arrow functions are a shorter way to write functions in JavaScript
Basic syntax: const functionName = (params) => { body }
With one parameter, parentheses are optional: num => num * 2
With multiple or zero parameters, parentheses are required: (x, y) => x + y
Implicit return happens when you omit {} - the expression is automatically returned
Explicit return uses {} and the return keyword
Arrow functions are great for short functions and callbacks
They reduce boilerplate code and make your JavaScript more modern and readable

Arrow functions are now the standard way of writing functions in modern JavaScript. Once you get used to them, you will find yourself using them everywhere.

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Function Declaration vs Function Expression

SATYA SOOTAR — Sun, 15 Mar 2026 07:18:04 +0000

Hello readers 👋, welcome back to 7th blog in this JavaScript series.

Imagine you have a recipe book. Every time you want to cook a dish, you don't invent it from scratch – you just open the book, read the recipe, and follow it. That recipe is reusable.

In JavaScript, functions are exactly that – reusable blocks of code that you can "call" whenever you need them.

But did you know there are two ways to create these recipes?

Function Declaration
Function Expression

They look similar, but they behave differently in some important ways. Let's explore them with simple examples.

What Are Functions and Why Do We Need Them?

A function is a block of code designed to perform a particular task. It runs only when you call (invoke) it.

Why use functions?

Reusability – Write once, use many times.
Organization – Break complex problems into small pieces.
Readability – Give a name to a block of code, making it easier to understand.

Example:

// A function that adds two numbers
function add(a, b) {
  return a + b;
}

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

Now let's look at the two ways to create functions.

Function Declaration

A function declaration is the "classic" way to define a function. You start with the function keyword, followed by the function name, parentheses (), and curly braces {}.

Syntax:

function functionName(parameters) {
  // code to execute
}

Example:

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

console.log(multiply(4, 5)); // 20

Key Feature of Function Declaration

Function declarations are hoisted – they are moved to the top of their scope during compilation. This means you can call a function before you define it in your code.

console.log(greet("Satya")); // "Hello Satya" – works even before definition!

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

This works because JavaScript internally "hoists" the entire function declaration to the top.

Function Expression

A function expression is when you create a function and assign it to a variable. The function itself can be anonymous (without a name) or named.

Syntax:

const variableName = function(parameters) {
  // code to execute
};

Example (anonymous):

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

console.log(multiply(4, 5)); // 20

Example (named function expression – rare but possible):

const multiply = function multiplyFn(a, b) {
  return a * b;
};
// The name multiplyFn is only accessible inside the function itself.

Key Feature of Function Expression

Function expressions are NOT hoisted. Only the variable declaration is hoisted (if you use var), but the assignment happens at runtime. So you cannot call a function expression before its definition.

console.log(multiply(4, 5)); // ❌ TypeError: multiply is not a function

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

If you use var instead of const, the variable is hoisted but initialized as undefined, so calling it before definition gives a different error:

console.log(multiply); // undefined (because var is hoisted)
console.log(multiply(4, 5)); // ❌ TypeError: multiply is not a function

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

Key Differences

Feature	Function Declaration	Function Expression
Syntax	`function name() {}`	`const name = function() {}`
Hoisting	Fully hoisted – can be called before definition	Not hoisted – cannot be called before definition
Requires a name?	Must have a name	Usually anonymous (can be named)
Use as a value?	Cannot be used directly as a value	Can be passed as an argument, assigned, etc.
Conditional definition?	Not recommended inside conditionals	Can be conditionally defined

Hoisting Explained Simply

Imagine JavaScript reads your code twice:

First pass – It collects all function declarations and variable declarations (but not assignments) and moves them to the top.
Second pass – It executes the code line by line.

For function declarations, the entire function is moved to the top, so it's ready to use anywhere.

For function expressions, only the variable declaration (e.g., var multiply;) is hoisted, but the assignment = function() {} stays in place. So before that line, the variable is undefined.

When to Use Each Type

Use Function Declaration When:

You want to create a named utility function that you'll call from various places.
You prefer the flexibility of calling the function anywhere in your scope (hoisting can be convenient).
You're defining a function at the top level of your script or module.

Example:

// Global helper – can be used anywhere
function formatDate(date) {
  return date.toLocaleDateString();
}

Use Function Expression When:

You need to assign a function to a variable or object property.
You're passing a function as a callback (e.g., to setTimeout, event listeners, array methods).
You want to define functions conditionally inside if statements.
You want to limit the function's availability to avoid polluting the global scope.

Example (callback):

setTimeout(function() {
  console.log("Time's up!");
}, 1000);

Example (conditional definition):

let greet;
if (language === "en") {
  greet = function() { console.log("Hello"); };
} else {
  greet = function() { console.log("Hola"); };
}
greet();

Conclusion

Function Declaration: function name() {} – fully hoisted, can be called before definition.
Function Expression: const name = function() {} – not hoisted, assigned at runtime, great for callbacks and conditional logic.
Both are useful, and choosing one depends on your need for hoisting, naming, and where the function will be used.

Functions are the building blocks of JavaScript programs. Mastering both ways to create them gives you more flexibility and helps you understand how JavaScript works under the hood.

Keep experimenting in your console. That's where the real learning happens!

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Understanding Objects in JavaScript

SATYA SOOTAR — Sun, 15 Mar 2026 07:11:26 +0000

Hello Readers 👋, Welcome to the 6th blog of this Javascript series.

Imagine you are going to work, and you carry a backpack. That backpack contains your laptop, ID card, and a pen.

Now imagine you have to carry all these items separately - laptop in one hand, ID card in your pocket, pen in another pocket. That would be messy, right?

That is exactly why we need objects in JavaScript.

Just like a backpack helps you organize your belongings in one place, an object helps you organize related information in one structure.

What are Objects and Why Do We Need Them?

In the previous blogs, we learned about variables and datatypes. We can create variables like this:

let name = "Satya"
let age = 25
let city = "Mumbai"
let isStudent = false

But what if we have to manage information for multiple people?

let name1 = "Satya"
let age1 = 25
let city1 = "Mumbai"

let name2 = "Omm"
let age2 = 22
let city2 = "Delhi"

let name3 = "Priya"
let age3 = 24
let city3 = "Bangalore"

This becomes messy very quickly. It is hard to manage, hard to read, and hard to pass around in functions.

Objects solve this problem.

An object is a way to group related data together. Instead of having separate variables for name, age, and city, we can have one object called person that contains all this information.

In technical terms, an object is a collection of key-value pairs. Each piece of information has a label (key) and a value.

Think of an object like a form you fill out. The form has fields (keys) like "Name", "Age", "City", and you fill in the values.

Creating Objects

There are multiple ways to create objects in JavaScript. We will focus on the most common and simple way: object literal syntax using curly braces {}.

Empty Object

let person = {}
console.log(person) // {}

Object with Properties

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}
console.log(person) 
// { name: 'Satya', age: 25, city: 'Mumbai' }

Real World Example

let employee = {
    name: "Satya Prangya",
    role: "Full Stack Developer",
    employeeId: 101,
    isActive: true,
    salary: 50000
}

Object with Different Datatypes

Remember the 7 primitive datatypes we learned? An object can store any of them as values:

let mixedObject = {
    name: "Satya",           // string
    age: 25,                 // number
    isEmployed: true,        // boolean
    skills: null,            // null
    experience: undefined,   // undefined
    id: Symbol("id"),        // symbol
    bigNumber: 12345678901234567890n  // bigint
}

You can even store another object inside an object (nested object):

let student = {
    name: "Satya",
    age: 25,
    address: {
        street: "MG Road",
        city: "Mumbai",
        pincode: 400001
    }
}

Accessing Object Properties

Once you have created an object, you need to access the values stored in it. JavaScript gives us two ways to do this: dot notation and bracket notation.

Dot Notation (.)

This is the most common and readable way to access object properties.

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}

console.log(person.name) // Satya
console.log(person.age)  // 25
console.log(person.city) // Mumbai

Think of it like this: you have a person object, and you want to get their name. You just put a dot and then the key name.

Bracket Notation (["key"])

This method uses square brackets and the key name as a string.

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}

console.log(person["name"]) // Satya
console.log(person["age"])  // 25
console.log(person["city"]) // Mumbai

When to Use Which?

Use dot notation when you know the exact property name. It is shorter and cleaner.

Use bracket notation when:

The property name is stored in a variable

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}

let key = "name"
console.log(person[key]) // Satya
// console.log(person.key) // This will NOT work (undefined)

The property name has spaces or special characters

let person = {
    "full name": "Satya Prangya",  // Key with space
    "age-value": 25                // Key with hyphen
}

// console.log(person.full name) // Syntax Error
console.log(person["full name"]) // Satya Prangya
console.log(person["age-value"]) // 25

Updating Object Properties

Objects are mutable, which means you can change their property values after creation.

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}

console.log(person) // { name: 'Satya', age: 25, city: 'Mumbai' }

// Update age
person.age = 26
console.log(person) // { name: 'Satya', age: 26, city: 'Mumbai' }

// Update city using bracket notation
person["city"] = "Pune"
console.log(person) // { name: 'Satya', age: 26, city: 'Pune' }

You can update any property regardless of how you created it.

Adding New Properties

Objects are dynamic. You can add new properties even after the object is created.

let person = {
    name: "Satya",
    age: 25
}

console.log(person) // { name: 'Satya', age: 25 }

// Add new property using dot notation
person.city = "Mumbai"
console.log(person) // { name: 'Satya', age: 25, city: 'Mumbai' }

// Add new property using bracket notation
person["isEmployed"] = true
console.log(person) 
// { name: 'Satya', age: 25, city: 'Mumbai', isEmployed: true }

The object grows as you add more properties.

Deleting Properties

You can also remove properties from an object using the delete operator.

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai",
    isEmployed: true
}

console.log(person) 
// { name: 'Satya', age: 25, city: 'Mumbai', isEmployed: true }

// Delete a property
delete person.city
console.log(person) 
// { name: 'Satya', age: 25, isEmployed: true }

delete person["isEmployed"]
console.log(person) 
// { name: 'Satya', age: 25 }

When you delete a property, it is completely removed from the object.

Looping Through Object Keys

Sometimes you want to go through all the properties of an object and do something with each one. JavaScript provides the for...in loop for this purpose.

let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}

for (let key in person) {
    console.log(key)           // Prints the key
    console.log(person[key])   // Prints the value
}

Output:

name
Satya
age
25
city
Mumbai

You can format it nicely:

for (let key in person) {
    console.log(key + ": " + person[key])
}

Output:

name: Satya
age: 25
city: Mumbai

This is extremely useful when you don't know all the property names in advance or when you want to process all properties.

Array vs Object: What's the Difference?

This is a common confusion for beginners. Let me explain with a simple analogy.

Array is like a numbered list. You have items in a specific order, and you access them by their position (index).

Object is like a labeled cabinet. You have drawers with labels, and you access items by their label (key).

Comparison Table

Feature	Array	Object
Structure	Ordered list	Key-value pairs
Access	By index (number)	By key (string)
Syntax	`[value1, value2, value3]`	`{ key1: value1, key2: value2 }`
Use Case	List of similar items	Describing one entity
Example	`["apple", "banana", "mango"]`	`{ name: "Satya", age: 25 }`

Code Comparison

// Array - when you have a list of similar items
let fruits = ["apple", "banana", "mango"]
console.log(fruits[0]) // apple (access by index)

// Object - when you have properties of one thing
let person = {
    name: "Satya",
    age: 25,
    city: "Mumbai"
}
console.log(person.name) // Satya (access by key)

When to Use What?

Use arrays when you have a list of similar items and order matters (like a to-do list, list of students, shopping cart)
Use objects when you have properties describing one entity (like a person, a product, a user account)

Note: In JavaScript, arrays are actually a special type of object. That is why typeof [1,2,3] returns "object". But we treat them differently based on their use case.

Assignment: Student Object

Now it's your turn to practice. Create an object representing a student.

Requirements

Create an object called student with these properties:
- name (string)
- age (number)
- course (string)
Add a new property grade (string) after creating the object
Update the age property to a new value
Print all keys and values of the student object using a for...in loop

Expected Solution

// Step 1: Create the object
let student = {
    name: "Satya",
    age: 25,
    course: "Full Stack Development"
}

console.log("Initial student:", student)

// Step 2: Add a new property
student.grade = "A"
console.log("After adding grade:", student)

// Step 3: Update age
student.age = 26
console.log("After updating age:", student)

// Step 4: Loop through and print all keys and values
console.log("\nStudent Details:")
for (let key in student) {
    console.log(key + ": " + student[key])
}

Output:

Initial student: { name: 'Satya', age: 25, course: 'Full Stack Development' }
After adding grade: { name: 'Satya', age: 25, course: 'Full Stack Development', grade: 'A' }
After updating age: { name: 'Satya', age: 26, course: 'Full Stack Development', grade: 'A' }

Student Details:
name: Satya
age: 26
course: Full Stack Development
grade: A

Try this on your own before looking at the solution. Experiment by adding more properties like email, phone, or address.

Common Mistakes to Avoid

1. Using Dot Notation with Variables

let person = { name: "Satya" }
let key = "name"

// Wrong
console.log(person.key) // undefined

// Correct
console.log(person[key]) // Satya

2. Forgetting Quotes in Bracket Notation

// Wrong
console.log(person[name]) // ReferenceError: name is not defined

// Correct
console.log(person["name"]) // Satya

3. Using Reserved Keywords as Keys

While you can use reserved keywords as keys, it is not recommended:

// This works but avoid it
let badObject = {
    class: "JavaScript",
    function: "Hello"
}

4. Confusing Arrays and Objects

Remember:

If you have numbered positions → Array
If you have named properties → Object

Real World Use Cases

Objects are everywhere in JavaScript. Here are some real examples:

User Profile

let user = {
    username: "satyasootar",
    email: "satya@example.com",
    isVerified: true,
    followers: 1000,
    joinedDate: "2024-01-15"
}

Product in an E-commerce Site

let product = {
    id: "P101",
    name: "Wireless Headphones",
    price: 2999,
    inStock: true,
    categories: ["electronics", "audio"],
    rating: 4.5
}

Configuration Settings

let settings = {
    theme: "dark",
    fontSize: 16,
    notifications: true,
    language: "en"
}

Conclusion

Objects are collections of key-value pairs that help organize related data
Create objects using curly braces {}: let obj = { key: value }
Access properties using dot notation (obj.key) or bracket notation (obj["key"])
Update properties by assigning a new value: obj.key = newValue
Add new properties anytime: obj.newKey = value
Delete properties using delete obj.key
Loop through object properties using for...in loop
Use arrays for ordered lists, objects for labeled properties

Objects are fundamental to JavaScript. They help you write cleaner, more organized code. Almost everything in JavaScript is eventually built on objects, so mastering them now will make your journey ahead much smoother.

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Array Methods You Must Know

SATYA SOOTAR — Sun, 15 Mar 2026 07:05:33 +0000

Hello readers 👋, welcome to the 5th blog of this JavaScript series.

Today we're going to talk about something you'll use almost every day as a JavaScript developer - Array Methods.

Imagine you have a box of chocolates. You want to:

Add a new chocolate
Remove a chocolate
Double the number of chocolates
Find only the dark chocolates
Calculate the total price of all chocolates

In JavaScript, our "box of chocolates" is an array, and the actions we want to perform are array methods.

Let's dive in and learn these essential methods with simple, practical examples.

What are Array Methods?

Array methods are built-in functions in JavaScript that allow us to perform common operations on arrays easily. Instead of writing complex loops every time, we can use these methods to write cleaner, more readable code.

1. push() and pop() - Add and Remove from End

push() - Add item at the end

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Example:

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

fruits.push("orange");
console.log("After push:", fruits);  // ["apple", "banana", "orange"]
console.log("New length:", fruits.length); // 3

// You can also add multiple items at once
fruits.push("mango", "grapes");
console.log("After adding multiple:", fruits); // ["apple", "banana", "orange", "mango", "grapes"]

Real Life Example:

let shoppingCart = ["milk", "bread"];
console.log("Cart before:", shoppingCart); // ["milk", "bread"]

// You find eggs and add to cart
shoppingCart.push("eggs");
console.log("Cart after:", shoppingCart); // ["milk", "bread", "eggs"]

pop() - Remove item from the end

The pop() method removes the last element from an array and returns that removed element.

Example:

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

let removedFruit = fruits.pop();
console.log("Removed fruit:", removedFruit); // "orange"
console.log("After pop:", fruits); // ["apple", "banana"]

Real Life Example:

let playlist = ["Song A", "Song B", "Song C"];
console.log("Playlist before:", playlist); // ["Song A", "Song B", "Song C"]

// You finish listening to the last song
let finishedSong = playlist.pop();
console.log("Finished playing:", finishedSong); // "Song C"
console.log("Remaining playlist:", playlist); // ["Song A", "Song B"]

2. shift() and unshift() - Add and Remove from Beginning

shift() - Remove item from the beginning

The shift() method removes the first element from an array and returns that removed element. All other elements shift down to lower indexes.

Example:

let queue = ["person1", "person2", "person3"];
console.log("Before shift:", queue); // ["person1", "person2", "person3"]

let servedPerson = queue.shift();
console.log("Served person:", servedPerson); // "person1"
console.log("After shift:", queue); // ["person2", "person3"]

Real Life Example:

let ticketCounter = ["Raj", "Priya", "Amit"];
console.log("Queue before:", ticketCounter); // ["Raj", "Priya", "Amit"]

// First person gets their ticket and leaves
let firstPerson = ticketCounter.shift();
console.log("Serving:", firstPerson); // "Raj"
console.log("Queue now:", ticketCounter); // ["Priya", "Amit"]

unshift() - Add item at the beginning

The unshift() method adds one or more elements to the beginning of an array and returns the new length.

Example:

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

numbers.unshift(1);
console.log("After unshift:", numbers); // [1, 2, 3, 4]
console.log("New length:", numbers.length); // 4

// Add multiple items at the beginning
numbers.unshift(-1, 0);
console.log("After adding multiple:", numbers); // [-1, 0, 1, 2, 3, 4]

Real Life Example:

let priorityTasks = ["pay bills", "call mom"];
console.log("Tasks before:", priorityTasks); // ["pay bills", "call mom"]

// Emergency task comes up - must be done first
priorityTasks.unshift("emergency meeting");
console.log("Tasks after:", priorityTasks); // ["emergency meeting", "pay bills", "call mom"]

Quick Comparison: push/pop vs shift/unshift

Method	Where it works	Returns	Changes original array?
push()	End	New length	Yes
pop()	End	Removed element	Yes
shift()	Beginning	Removed element	Yes
unshift()	Beginning	New length	Yes

3. forEach() - Just Do Something With Each Item

The forEach() method executes a provided function once for each array element. It's like saying "for each item in this array, do this thing."

Think of it as a more elegant way to write a for loop.

Example:

let students = ["Raj", "Priya", "Amit"];

console.log("Calling attendance:");
students.forEach(function(student) {
  console.log(student + " is present");
});

// Output:
// Calling attendance:
// Raj is present
// Priya is present
// Amit is present

Example:

let prices = [10, 20, 30];
console.log("Original prices:", prices); // [10, 20, 30]

// Let's just print each price with tax (we're not changing the array)
prices.forEach(function(price) {
  console.log("Price with tax: Rs.", price * 1.18);
});

// Original array remains the same
console.log("Original prices still:", prices); // [10, 20, 30]

Real Life Example:

let shoppingList = ["milk", "eggs", "bread"];

console.log("Shopping Reminder:");
shoppingList.forEach(function(item, index) {
  console.log(`${index + 1}. Buy ${item}`);
});

// Output:
// Shopping Reminder:
// 1. Buy milk
// 2. Buy eggs
// 3. Buy bread

Note: forEach() does NOT return a new array. It just performs an action on each item.

4. map() - Transform Each Item and Create a New Array

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Think of it as: Take each item, transform it, and put it in a new box.

Example:

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

let doubledNumbers = numbers.map(function(number) {
  return number * 2;
});

console.log("After map:", numbers); // [1, 2, 3, 4] (original unchanged)
console.log("New doubled array:", doubledNumbers); // [2, 4, 6, 8]

Real Life Example:

let pricesInDollars = [10, 20, 30];
console.log("Prices in $:", pricesInDollars); // [10, 20, 30]

// Convert to rupees (assuming 1$ = ₹83)
let pricesInRupees = pricesInDollars.map(function(price) {
  return price * 83;
});

console.log("Prices in ₹:", pricesInRupees); // [830, 1660, 2490]

5. filter() - Get Only the Items That Meet a Condition

The filter() method creates a new array with all elements that pass a test (provided as a function).

Think of it as: Put each item through a sieve - only those that satisfy the condition go into the new array.

Example:

let numbers = [5, 12, 8, 130, 44];
console.log("Before filter:", numbers); // [5, 12, 8, 130, 44]

let largeNumbers = numbers.filter(function(number) {
  return number > 10;
});

console.log("After filter:", numbers); // [5, 12, 8, 130, 44] (original unchanged)
console.log("Numbers greater than 10:", largeNumbers); // [12, 130, 44]

Real Life Example:

let ages = [12, 18, 25, 15, 30, 10];
console.log("All ages:", ages); // [12, 18, 25, 15, 30, 10]

// Find adults (age 18 and above)
let adults = ages.filter(function(age) {
  return age >= 18;
});

console.log("Adults:", adults); // [18, 25, 30]

// Find minors (age below 18)
let minors = ages.filter(function(age) {
  return age < 18;
});

console.log("Minors:", minors); // [12, 15, 10]

6. reduce() - Combine All Items Into a Single Value

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

Think of it as: Take all items and combine them into one thing (like adding all numbers, or joining all strings).

For beginners, think of it like this:

You have a pile of numbers
You want to add them all together
You start with 0, then add each number one by one

Example:

let numbers = [10, 20, 30, 40];
console.log("Numbers:", numbers); // [10, 20, 30, 40]

let total = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0); // Start with 0

console.log("Total sum:", total); // 100

Let's see what happens step by step:

Start with accumulator = 0 (our starting point)
Add 10 → accumulator = 10
Add 20 → accumulator = 30
Add 30 → accumulator = 60
Add 40 → accumulator = 100
Final result = 100

Real Life Example:

let cartPrices = [299, 599, 199, 899];
console.log("Item prices:", cartPrices); // [299, 599, 199, 899]

// Calculate total bill
let totalBill = cartPrices.reduce(function(total, price) {
  return total + price;
}, 0);

console.log("Total bill: ₹", totalBill); // Total bill: ₹ 1996

for Loop vs map/filter

Let's see how much cleaner map and filter make our code.

Example 1: Double each number

Using traditional for loop:

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

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

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

Using map:

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

Example 2: Get numbers greater than 10

Using traditional for loop:

let numbers = [5, 12, 8, 130, 44];
let greaterThanTen = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    greaterThanTen.push(numbers[i]);
  }
}

console.log(greaterThanTen); // [12, 130, 44]

Using filter:

let numbers = [5, 12, 8, 130, 44];
let greaterThanTen = numbers.filter(num => num > 10);
console.log(greaterThanTen); // [12, 130, 44]

See how much cleaner and more readable the code becomes with array methods?

Important Tips for Beginners

Try everything in the console - Open your browser's developer tools (F12) and test these methods yourself. See what happens!
Don't chain methods initially - Write them step by step. Once you're comfortable, you can do things like:

   let result = numbers
     .filter(num => num > 10)
     .map(num => num * 2);

Remember what each method returns:
- push/pop/shift/unshift → change original array
- forEach → nothing (undefined), just performs action
- map → new array of same length
- filter → new array (may be shorter)
- reduce → single value
Original array remains unchanged for map, filter, and reduce - they create new arrays/values

Overview

Method	What it does	Returns	Changes original?
push()	Adds to end	New length	Yes
pop()	Removes from end	Removed element	Yes
shift()	Removes from start	Removed element	Yes
unshift()	Adds to start	New length	Yes
forEach()	Does something for each	undefined	No
map()	Transforms each item	New array	No
filter()	Keeps items that pass test	New array	No
reduce()	Combines all items	Single value	No

Conclusion

Array methods are like special tools in your JavaScript toolbox. Instead of building everything from scratch with loops, you can use these methods to write cleaner, more readable code.

Remember:

push/pop and shift/unshift are for adding/removing items
forEach is for doing something with each item
map is for transforming each item into something new
filter is for picking only certain items
reduce is for combining everything into one value

The more you practice these, the more natural they'll become. Soon you'll find yourself reaching for these methods automatically instead of writing loops!

Pro tip: Keep your browser console open while coding and test each method as you learn. See what happens when you use them with different arrays.

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

JavaScript Arrays Explained for Beginners (With Simple Examples)

SATYA SOOTAR — Sun, 15 Mar 2026 03:43:40 +0000

Hello readers 👋, this is the 4th blog of my JavaScript series.

In this blog we will understand What is array?, Why do we need array? and some operations that we can perform on array.

Imagine this: you are given a task to store the marks of students. How would you store the marks if arrays did not exist?

Probably like this:

let mark1 = 90;
let mark2 = 87;
let mark3 = 80;
.
.
.
let markn = 43;

Now imagine this situation where you need to store 100s or 1000s of marks. How tedious task it would be. This is where arrays come into the picture.

What is an Array?

In JavaScript, an array is a single variable used to store an ordered collection or list of multiple values, which are accessed using numbered indexes starting at zero.

To create an array we use square braces to store the values separated by comma.

Example:

let marks = [90, 87, 80, 79, 94]

This single variable marks contains multiple values, and the values can be accessed using their index.

In an array, each value can be accessed by an index. The index starts from 0.
And to access the value you can:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr[3];

console.log(value) 

//OUTPUT
//chocolava

To access the last value of the array -

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr[arr.length - 1];

console.log(value) //chocolava

// OUTPUT
// chocolava

These are another way to access elements using `at()`

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(2);

console.log(value) //watermelon

// OUTPUT
// watermelon

To access the last value in the array:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(-1);

console.log(value) //chocolava

// OUTPUT
// chocolava

Change the value in an array:

let arr = ["apple", "banana", "watermelon", "chocolava"]
let value = arr.at(2);

arr[2] = "changed value" // Changing the value here!!!

console.log(arr)

// OUTPUT
// [ 'apple', 'banana', 'changed value', 'chocolava' ]

`.length` property

Using .length we can access the number of element in the array. It returns an integer value.

let arr = [32, 43, 54, 90]
let len = arr.length;

console.log(len) // 4

Now lets talk about `looping` over the array.

There are multiple ways to loop over the array. Some of the methods are:-

for loop
.map function
for...of loop

`for` loop

The most common way to iterate through an array is using a for loop.
It allows us to access each element of the array using its index.

Example:

let arr = ["apple", "banana", "watermelon", "chocolava"]

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

// OUTPUT
// apple
// banana
// watermelon
// chocolava

How this works

let i = 0 → The loop starts from index 0.
i < arr.length → The loop runs until the last element of the array.
i++ → The index increases after every iteration.
arr[i] → Accesses the element at the current index.

`for...of` loop

JavaScript also provides a simpler and cleaner way to loop through arrays using for...of.

Instead of working with indexes, it directly gives us the values of the array.

Example:

let arr = ["apple", "banana", "watermelon", "chocolava"]

for (let fruit of arr) {
  console.log(fruit)
}

// OUTPUT
// apple
// banana
// watermelon
// chocolava

This is often more readable and cleaner when you only need the values and not the index.

`.map()` function

Another powerful way to work with arrays is using the .map() method.

.map() is used when we want to create a new array by transforming each element of the existing array.

Example:

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

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

console.log(doubled)

// OUTPUT
// [2, 4, 6, 8]

How `.map()` works

It takes a callback function.
That function runs for every element in the array.
The returned value becomes part of a new array.

Important: .map() does not modify the original array.

Conclusion

Arrays are one of the most fundamental and powerful data structures in JavaScript. Instead of creating multiple variables to store related values, arrays allow us to store and manage them efficiently in a single place.

In this blog, we learned:

What an array is and why we need it
How to create an array
How to access and update array elements
How to use the .length property
Different ways to loop through arrays using for, for...of, and .map()

Understanding arrays is extremely important because they are used everywhere in JavaScript - from handling lists of data to working with APIs and building dynamic applications.

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Control Flow in JavaScript: If, Else, and Switch Explained

SATYA SOOTAR — Sat, 14 Mar 2026 07:34:38 +0000

Hello readers 👋, welcome to the 3rd blog of this JavaScript series!

In this blog, we will deep dive into Control Flow in JavaScript - how JavaScript makes decisions while running a program.

Just like humans make decisions every day:

If it rains, I will take an umbrella.
Otherwise, I will go outside without one.

Programming languages work in a very similar way.
JavaScript uses Conditional statements to decide which code should run and which code should be skipped.

Let’s look at a simple example.

let rains = true;

if (rains) {
  console.log("I will take the umbrella");
} else {
  console.log("Wow, the sunshine is great!");
}

/*
OUTPUT
I will take the umbrella
*/

Here’s what happens step by step:

JavaScript checks the condition inside if (rains)
Since rains is true, the code inside the if block runs
The else block is skipped

So the output becomes:

I will take the umbrella

This ability of JavaScript to choose different paths of execution based on conditions is called Control Flow.

The if and else statement that you saw is called a Conditional statement.

Conditional Statement

These statements execute different blocks of code based on whether a specified condition evaluates to true or false.

Types of Conditional statements in JavaScript are:

if statement
if...else statement
else if ladder
switch statement
Ternary operator (?:)

1. `if` statement

It is the simplest way to make decisions in JavaScript. It executes a block of code only if the condition is true.

Syntax:

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

Example:

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote");
}

Step-by-Step flow of how the code is executed:

Within the if() - The JavaScript checks if the condition is true of not.
If the condition is true, then the code block within the curly braces {} gets executed
If the condition is false, then it is not executed.

2. `if...else` Statement

Sometimes we want two possible outcomes. If the condition is true then something happens if it is false then something also happens.

Real-life Example:
If your Mark is above the passing grade then you pass the exam else you fail the exam.

But you can't be Pass and Fail at the same time.

Syntax:

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

Example:

let marks = 35;

if (marks >= 40) {
  console.log("You passed the exam");  
} else {
  console.log("You failed the exam");  // This execute
}

Step-by-Step flow of how the code is executed:

The if() checks if the condition is true or not.
If the condition is true - execute the code in the if block.
If the condition is false - execute the code in the else block.

3. `else if` Statement

Sometimes we need to check multiple conditions. For that we use else if statement.

Real-life Example:

A Grading system in your college.
Marks ≥ 90 → Grade A
Marks ≥ 75 → Grade B
Marks ≥ 50 → Grade C
Otherwise → Fail

Syntax:

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Example:

let marks = 82;

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

// OUTPUT
// Grade B

Step-by-step execution flow

Check marks >= 90 → false
Check marks >= 75 → true
That block runs
Remaining conditions are skipped

4. `switch` Statement

A switch statement is a control flow mechanism in programming that selects and executes one code block from multiple alternatives based on the value of a single expression.

Real-life example:
On Monday you will go to the park, on Tuesday you will go to the temple, on Wednesday you will go to the restaurant for a meal, on Thursday you will go to the gym, on Friday you will go for running and finally on Weekends you will go shopping.

Syntax:

switch(expression) {

  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // code if no case matches

}

Example:

let day = "Monday";

switch(day) {

  case "Monday":
    console.log("Visit Park");
    break;

  case "Tuesday":
    console.log("Visit Temple");
    break;

  case "Wednesday":
    console.log("Meal at restaurant ");
    break;

  case "Thursday":
    console.log("Hit the Gym");
    break;

  case "Friday":
    console.log("Go for a running");
    break;

  default:
    console.log("Shopping!!!")  
}

// OUTPUT
// Visit Park

The break statement stops execution of the switch block. Without break, JavaScript continues executing the next cases.

Conclusion

Control flow is one of the most important concepts in programming.
By using if, else, else if, and switch, JavaScript programs can make decisions and follow different execution paths.

Once you understand these concepts, you can start building programs that respond dynamically to user input and real-world conditions.

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

JavaScript Operators Explained Simply (With Examples)

SATYA SOOTAR — Thu, 05 Mar 2026 13:12:01 +0000

Hello readers 👋, welcome to the second blog of this JavaScript series.

In this article, we’ll explore JavaScript Operators - the powerful tools that allow us to perform calculations, compare values, and make decisions in our programs.

In real life, you perform some operations like:-

Add two numbers (Mathematical operations)
Compare prices (Comparison)
Make decisions

In JavaScript, these actions can be performed using operators.

Definition

An operator is a symbol or keyword in programming that tells the computer to perform mathematical, logical, or comparison operations on data (operands) to produce a result.

Types of operators in JavaScript:

Assignment Operator
Arithmetic Operator
Comparison Operator
Logical Operator

Assignment Operator

It is an operator that is used to assign values to a variable. The most commonly used assignment operator is =(Equal to) operator.
Usage:

let x = 10; // The value 10 is stored in the variable x.

Other Assignment Operators:

Given that x = 10 and y = 5, the table below explains the assignment operators:

Operator	Example	Same As	Result
=	x = y	x = y	x = 5
+=	x += y	x = x + y	x = 15
-=	x -= y	x = x - y	x = 5
*=	x *= y	x = x * y	x = 50
**=	x **= y	x = x ** y	x = 100000
/=	x /= y	x = x / y	x = 2
%=	x %= y	x = x % y	x = 0

Arithmetic Operator

This operator is used to perform Mathematical operations on the values(Operands).

Different types of Arithmetic operator are:

1. Addition
+ is used to add two values. In case of numbers it does simple addition, but in case of strings, it concatenates(Joins them) the strings.

Example:

let x = 10;
let y = 5
let z = "2"
let fname = "satya"
let lname = "sootar"

console.log(x + y) // 15
console.log(x + z) // 102
console.log(fname + lname)  //satyasootar
console.log(fname + x)  //satya10

2. Subtraction
- is used to subtract two values. In case of number, it does simple subtraction, but for strings it returns NaN - Not A Number. Two strings cannot be subtracted. But if one value is a string that contains a number (like "2") and the other is a number, JavaScript converts the string to a number before performing the operation.

Example:

let x = 10;
let y = 5
let z = "2"
let fname = "satya"
let lname = "sootar"

console.log(x - y) // 5
console.log(x - z) // 8
console.log(fname - lname)  // NaN
console.log(fname - x)  //NaN

3. Multiplication
* is used to perform Multiplication between two numbers.

Example:

let x = 10;
let y = 5

console.log(x * y) // 50

4. Division
/ is used to perform Division between two numbers. It divides the left operand by the right operand.

Example:

let x = 9;
let y = 5
let z = "3"
let fname = "satya"
let lname = "sootar"

console.log(x / y) // 1.8
console.log(x / z) //  3
console.log(fname / lname)  // NaN
console.log(fname / x)  //NaN

5. Remainder

% - Also known as the modulo operator, it returns the remainder of an integer division.

let x = 9;
let y = 5

console.log(x % y) // 4

6. Exponentiation

** Raises the first operand to the power of the second operand (equivalent to Math.pow()).

Example:

let x = 9;
let y = 5;

console.log(x ** y) // 59049

7. Increment
Increases the value of a variable by one. It can be used in prefix form (++x, increments then returns the value) or postfix form (x++, returns the value then increments).

let x = 9;
let y = 5

console.log(x++) // 9 - Returns the value then it will increase.
console.log(x) // 10 - Value of x increased.
console.log(++y) // 6 - First increase the value then returns it.

8. Decrement
Decreases the value of a variable by one. It can be used in prefix form (--x, decrement then returns the value) or postfix form (x--, returns the value then decrement).

let x = 9;
let y = 5

console.log(x--) // 9 - Returns the value then it will decrease.
console.log(x) // 8 - Value of the x decreased.
console.log(--y) // 4 - First decrease the value then returns it.

Comparison Operator

Comparison operators are used to compare two values.
The result of a comparison is always a Boolean value - either true or false.

Different types of Comparison Operators are:

Operator	Example	Description
==	x == y	Checks if values are equal (ignores datatype)
===	x === y	Checks if values and datatype are equal
!=	x != y	Checks if values are not equal
!==	x !== y	Checks if values or datatype are not equal
>	x > y	Checks if left value is greater
<	x < y	Checks if left value is smaller
>=	x >= y	Checks if left value is greater or equal
<=	x <= y	Checks if left value is smaller or equal

Example:

let x = 10;
let y = 5;
let z = "10";

console.log(x == z)   // true  (Only values are compared)
console.log(x === z)  // false (Datatype is also compared)
console.log(x != y)   // true
console.log(x > y)    // true
console.log(x < y)    // false
console.log(x >= 10)  // true
console.log(y <= 3)   // false

Important Difference: `==` vs `===`

== → Loose Equality (only values are compared)

=== → Strict Equality (values and datatype both compared)

Example:

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

In real-world development, developers usually prefer === because it avoids unexpected type conversion bugs.

Logical Operators

Logical operators are used to combine multiple conditions.

They are mostly used in decision making and control statements like if, while, etc.

Types of Logical Operators

Operator	Name	Description
`&&`	Logical AND	Returns true if both conditions are true
`\|\|`	Logical OR	Returns true if at least one condition is true
`!`	Logical NOT	Reverses the result

1. Logical AND (`&&`)

Returns true only if both conditions are true.

Truth Table

A	B	A && B
true	true	true
true	false	false
false	true	false
false	false	false

Example

let age = 20;
let hasID = true;

console.log(age > 18 && hasID); // true

Real Life Example

You can enter a club only if:

your age > 18
you have an ID proof

Both conditions must be true.

2. Logical OR (`||`)

Returns true if at least one condition is true.

Truth Table

A	B	A \|\| B
true	true	true
true	false	true
false	true	true
false	false	false

Example

let marks = 35;
let sportsQuota = true;

console.log(marks > 40 || sportsQuota); // true

Real Life Example

You can get college admission if:

you have good marks
OR
you have sports quota

Only one condition needs to be true.

3. Logical NOT (`!`)

Logical NOT reverses the result.

true  → false
false → true

Truth Table

A	!A
true	false
false	true

Example

let isLoggedIn = false;

console.log(!isLoggedIn); // true

Real Life Example

If a user is not logged in, show the login page.

Conclusion

Operators are one of the fundamental building blocks of JavaScript. They allow us to:

Perform mathematical calculations
Compare values
Make decisions
Assign data to variables

Without operators, writing meaningful programs would be almost impossible.

As you move forward in JavaScript, you'll use these operators constantly in:

Conditions (if, else)
Loops
Functions
Real-world applications

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Understanding Variables and Data Types in JavaScript

SATYA SOOTAR — Wed, 04 Mar 2026 06:03:10 +0000

So imagine this, you are going to work, and you carry a backpack. That backpack contains laptop, ID card and pen.

Just like that in Javascript the variables are like the backpack that stores some information which can be used to execute programs.

In technical term we can say "Variables are the name of the memory space where we store information".

In Javascript variables are of 3 keywords:-

let
const
var

let keyword

In simple terms, the let keyword in JavaScript is used to create a container for a value that can be changed later.

Example:

let name = "Satya"
console.log(name) // Satya
name = "Omm"
console.log(name) // Omm

The most important part is that the let variable is only accessible inside the braces and is hidden from the rest of the program, which helps prevent mistakes (bugs) in your code unless it is declared in a global scope. That is why it is called block-scope.

In JavaScript, scope is the mechanism that determines the accessibility (visibility) of variables, functions, and objects in a particular part of the code.

Example:

let globalName = "satya";
function getName(){
  let localName = "omm";
  console.log(globalName);  // satya
  console.log(localName);   // omm
}
getName()
console.log(globalName);  // satya
console.log(localName);   // ReferenceError: localName is not defined

// OUTPUT
// satya
// omm
// satya
// ReferenceError: localName is not defined

const keyword

In simple terms, the const keyword is used to create a permanent container whose value cannot be changed.

const name = "satya";
console.log(name); // satya
name = "omm";
console.log(name); // TypeError: Assignment to constant variable.

// OUTPUT
// satya
// TypeError: Assignment to constant variable.

The important part is that this is also block-scoped, just like the let keyword.

Example:

const globalName = "satya";
function getName(){
  const localName = "omm";
  console.log(globalName);  // satya
  console.log(localName);   // omm
}
getName()
console.log(globalName);  // satya
console.log(localName);   // ReferenceError: localName is not defined

// OUTPUT
// satya
// omm
// satya
// ReferenceError: localName is not defined

var keyword

It was the original way to create variables in JavaScript. Usually it is preferred to use let and const over var due to its confusing behaviour.

If it is declared within a function then it is block-scoped and when it is declared globally then it becomes a global variable.

Example 1: You can change the value of the variable.

var name = "satya"
console.log(name); // satya
name = "omm"
console.log(name) // omm

Example 2:

var globalName = "satya";
function getName(){
  var localName = "omm";
  console.log(globalName);  // satya
  console.log(localName);   // omm
}
getName()
console.log(globalName);  // satya
console.log(localName);   // ReferenceError: localName is not defined

So then what is the difference?
Unlike let and const, variables declared with var inside a block (like an if or for loop) are accessible outside that block.

if (true) {
    var blockVar = "I am not block scoped";
}
console.log(blockVar); // I am not block scoped

Variables declared with var are hoisted to the top of their scope, meaning the declaration part is moved to the top, but not the initialization. This can result in undefined behavior if not understood properly.

console.log(hoistedVar); // undefined
var hoistedVar = "Hoisted!";

Feature	var	let	const
Can reassign	Yes	Yes	No
Block scoped	No	Yes	Yes
Function scoped	Yes	Yes	Yes
Recommended	No	Yes	Yes

Datatypes

Now that you know the different ways to create a variable. It's time to store items in it.

Datatypes are nothing but just what type of data that can be stored in a variable. In Javascript there are 8 datatypes. Among which 7 are primitive datatypes and 1 is non primitive datatypes.

Primitive DataTypes

A primitive data type is a basic, built-in data type provided by a programming language that represents a single and simple value.

There are 7 types of Primitive Datatypes:

1. String

This represents the textual data that is written within Double Quotes or Single Quotes. You can also say that it is the collection of characters.

Example:

let name = "satya"  // satya is a string.
let rollNum = "987" // 987 is a string as it is written within Double quotes.

console.log(typeof name)    // string
console.log(typeof rollNum) // string

You can check the type of each data by using typeof <variablename>

2. Number

Represents both integer and floating-point numbers, including special values like Infinity and NaN (Not-a-number).

Example:

let roll = 43      // This is an integer value
let price = 10.78  // This is a floating point

console.log(typeof roll)   // number
console.log(typeof price)  // number

3. BigInt

It is a special datatype in JavaScript used to store very large integers that the normal number type cannot safely handle.

It allows you to perform operations on whole numbers larger than the maximum safe integer for the number type, which is 2⁵³ - 1.

Example:

let bigNum = 233254355435n // By appending n to the number you can declare BigInt.
let Num = 233254355435 

console.log(typeof bigNum) // bigint
console.log(typeof Num)    // number

4. Boolean

It represents only two possible values: true or false.

Example:

let isNumber = false;
let isAvailable = true;
console.log(typeof isNumber)    // boolean
console.log(typeof isAvailable) // boolean

5. Undefined

A variable that has been declared but not assigned a value is automatically assigned the value undefined.

Imagine like this: you declared a variable but forgot to assign a value to it, so JavaScript will automatically assign undefined to it.

let value;
console.log(value)        // undefined
console.log(typeof value) // undefined

The type of undefined is undefined.

6. Null

A special value that represents the intentional absence of any object value. It must be explicitly assigned.

Imagine like this: you declared a variable but do not want to store any value right now, so you assigned it null. That means the variable does not store anything, and you are the one who decided not to store the value — not JavaScript.

Example:

let data = null;
console.log(typeof null);    // object
console.log(data === null);  // true

If you check the typeof null you will get the result object. It is a quirky behavior of JavaScript. In this case you explicitly check the value of the variable using the Triple Equal-to operator (===) which returns a boolean value (true/false).

7. Symbol

Introduced in ES6, it is a unique and immutable primitive value often used as a property key to prevent naming conflicts in objects.

Example:

let value = Symbol('hello');
console.log(typeof value) // symbol

Non-primitive Datatypes

Non-primitive data types are reference types that store collections of data or more complex structures.

It is of 3 types:

Object
Array
Function

Technically, Arrays and Functions are special types of Objects.

1. Object

An Object stores values in key-value pairs.

Example:

let employee = {
    name: "Satya",
    role: "Full-Stack developer",
    id: 123,
    isOnline: true,
    address: {
        planet: "Earth",
        continent: "Asia"
    }
}

console.log(typeof employee)          // object
console.log(employee.name)            // Satya
console.log(employee.address.planet)  // Earth

2. Array

An object used for storing ordered collections of values, accessed by a numerical index.

Example:

let arr = ["satya", "susant", "susan", "john"] 
console.log(typeof arr) // object
console.log(arr)        // [ 'satya', 'susant', 'susan', 'john' ]
console.log(arr[2])     // susan

3. Function

A callable object that executes a block of code and can be assigned to variables.

Example:

function greet(name){
    console.log(`Hello ${name}`)
}

greet("satya")  // Hello satya

We will discuss more about functions in a later stage.

Scope in JavaScript

In the above section I have mentioned about Function scope and Block scope. What are these? Let me explain.

"The Scope defines the accessibility or visibility of variables and functions in different parts of your code."

It is generally of 3 types:

Global Scope
Local Scope
Block Scope

1. Global Scope

A variable that is declared outside any function or block {}. Anyone can access the variable.

2. Local Scope or Function Scope

A variable or function that is declared inside a function can only be accessed inside that function. It cannot be accessed outside of that function.

3. Block Scope

A variable that is declared inside curly braces {} (for, while, if) is block-scoped. It cannot be accessed outside of that scope.

Example:

let globalVar = "I am global";

function example() {
  let functionVar = "I am inside function";

  if (true) {
    let blockVar = "I am inside block";
    console.log(globalVar);    // I am global
    console.log(functionVar);  // I am inside function
    console.log(blockVar);     // I am inside block
  }

  console.log(globalVar);    // I am global
  console.log(functionVar);  // I am inside function
  console.log(blockVar);     // ReferenceError: blockVar is not defined
}

example();

// OUTPUT
// I am global
// I am inside function
// I am inside block
// I am global
// I am inside function
// ReferenceError: blockVar is not defined

Conclusion

In this blog, we covered the foundational building blocks of JavaScript - variables and datatypes.

We explored the three ways to declare variables: var, let, and const. While var is the old way and comes with quirky behaviors like hoisting and lack of block scope, let and const are the modern, preferred approaches. Use const when the value shouldn't change, and let when it should.

We also looked at the 8 datatypes in JavaScript - 7 primitive types (String, Number, BigInt, Boolean, Undefined, Null, and Symbol) and 1 non-primitive type (Object, which also covers Arrays and Functions). Understanding datatypes helps you write cleaner, bug-free code and gives you a better sense of how JavaScript handles data under the hood.

Finally, we touched on scope - Global, Local, and Block - which controls where in your code a variable can be read or modified.

These concepts are the backbone of JavaScript. Once you're comfortable with them, everything else - functions, loops, objects, and beyond will start to make a lot more sense. Stay tuned for the next part!

Hope you liked this blog. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

A Horror Story About JavaScript Promise

SATYA SOOTAR — Sun, 01 Mar 2026 11:11:31 +0000

Before we dive into our midnight adventure, let's quickly understand what Promises are in JavaScript. Don't worry - it's easier than facing a monster under the bed!

What is a Promise?

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. Think of it like a real-life promise: your friend promises to bring you coffee. Right now, you don't have the coffee - the promise is pending. Later, either you get the coffee (fulfilled) or your friend calls to say they spilled it (rejected).

In JavaScript, a Promise is created using the new Promise() constructor, which takes a function with two parameters: resolve and reject. You call resolve(value) when the operation succeeds, and reject(error) when it fails.

const coffeePromise = new Promise((resolve, reject) => {
    // Simulate making coffee
    const success = true;
    if (success) {
        resolve("☕ Here's your coffee!");
    } else {
        reject("💔 Spilled the coffee...");
    }
});

Then and Catch

Once you have a Promise, you can attach .then() and .catch() methods to handle the result.

.then() runs when the Promise is fulfilled (resolved). It receives the resolved value.
.catch() runs when the Promise is rejected. It receives the error.

coffeePromise
    .then((message) => {
        console.log(message); // "☕ Here's your coffee!"
    })
    .catch((error) => {
        console.log(error);   // "💔 Spilled the coffee..."
    });

You can also chain multiple .then() calls, but we'll keep it simple for now.

Now that you know the basics, let's see how Promises can help you survive a terrifying 3:34 AM bathroom trip - with a little help from Promise.all, Promise.allSettled, Promise.race, and Promise.any.

It's 3:34 AM.

You wake up suddenly, and your bladder is screaming at you like a DDOS attack. You need to go to the bathroom. But there is a problem.

You are living alone in the house and have heard the stories from your grandmother that after 3 AM Ghosts lurk around the house. The monsters under the bed are most active. And your Hallway becomes a road to hell.

You lie frozen and starts to think about your options. Either wet the bed or face the darkness (Supernatural being).

This, my friends, is exactly like handling multiple promises in JavaScript.

Let me explain -

Before you get out of the bed you need three things to happen:

You flip the switch of the hallway and hope it works.
You flip the bathroom light and hope it works.
You check under the bed and hope there is no Monster looking back at you while salivating 👹.

Lets code the Conditions :

Condition 1

const hallwayLight = new Promise((resolve, reject) => {
    // You flip the switch (You are an developer bruh! You can do anything from bed)
    const bulbWorks = Math.random() > 0.3; // 70% chance it works
    setTimeout(() => {
        if (bulbWorks) {
            resolve("💡 Hallway light is ON");
        } else {
            reject("💀 Hallway light bulb is dead");
        }
    }, 1000);
});

Condition 2

const bathroomLight = new Promise((resolve, reject) => {
    // You flip the bathroom switch from bed (You have a Smart bulb!!!)
    const bulbWorks = Math.random() > 0.2; // 80% chance it works
    setTimeout(() => {
        if (bulbWorks) {
            resolve("🚽 Bathroom light is ON");
        } else {
            reject("👻 Bathroom light is dead");
        }
    }, 1500);
});

Condition 3

const underBedCheck = new Promise((resolve, reject) => {
    // You shine your phone flashlight under the bed
    const monsterPresent = Math.random() > 0.6; // 40% chance of monster
    setTimeout(() => {
        if (!monsterPresent) {
            resolve("🛏️ Under the bed is CLEAR");
        } else {
            reject("👹 MONSTER under the bed!");
        }
    }, 2000);
});

Now, depending on your personality type (and your level of desperation), you'll handle these promises differently.

`1. Promise.all()`

You ask yourself: "I will ONLY get out of bed if ALL THREE things happen. The hallway light MUST turn on. The bathroom light MUST turn on. And there MUST be no monster under the bed. If ANY of these fail, I'm staying right here."

Is the hallway light bulb dead? Well, I'm peeing in bed tonight.

The bathroom light works. No monster under the bed. But who cares? The hallway light failed. The contract is broken. The deal is off. You lie there, defeated, as warm surrender spreads beneath you.

Situation:

Promise.all([hallwayLight, bathroomLight, underBedCheck])
    .then((results) => {
        console.log("🎉 All systems go! Time to sprint!");
        console.log(results);
        // You get out of bed and run with tears of happiness
    })
    .catch((error) => {
        console.log("😭 NOPE. Staying in bed.");
        console.log("Reason:", error);
        // You wet the bed. Game over.
    });

Outcome:

On success -

🎉 All systems go! Time to sprint!
['💡 Hallway light is ON', '🚽 Bathroom light is ON', '🛏️ Under the bed is CLEAR']

On Failure -

😭 NOPE. Staying in bed.
Reason: 💀 Hallway light bulb is dead

When to use `Promise.all()`

When you need all API calls to succeed before rendering a page.
When you're uploading multiple files and need all to complete.

`2. Promise.allSettled()`

You are more practical. You decide: "Let me check EVERYTHING first. I'll wait until I know the status of all three safety measures. Then I'll make a decision based on reality."

You check:

Hallway light? Dead. (Rejected)
Bathroom light? Works! (Fulfilled)
Under the bed? Clear! (Fulfilled)

Okay, so you have partial information. The hallway is dark, but you have your phone. You can see the bathroom light at the end. No monsters. You make a run for it, using your phone as a flashlight.

Situation:

Promise.allSettled([hallwayLight, bathroomLight, underBedCheck])
    .then((results) => {
        console.log("📋 Let's assess the situation:");
        results.forEach((result, index) => {
            if (result.status === 'fulfilled') {
                console.log(`✅ Promise ${index + 1}:`, result.value);
            } else {
                console.log(`❌ Promise ${index + 1}:`, result.reason);
            }
        });

        const anyLight = results.some(r =>
            r.status === 'fulfilled' &&
            (r.value.includes('light') || r.value.includes('CLEAR'))
        );

        if (anyLight) {
            console.log("🏃 Good enough! Making a run for it!");
        } else {
            console.log("😱 Complete darkness AND monsters? Staying put.");
        }
    });

Outcome

📋 Let's assess the situation:
❌ Promise 1: 💀 Hallway light bulb is dead
✅ Promise 2: 🚽 Bathroom light is ON
✅ Promise 3: 🛏️ Under the bed is CLEAR
🏃 Good enough! Making a run for it!

When to use Promise.allSettled()

When you need to know the outcome of all operations regardless of failures.
When uploading multiple files and you want to know which succeeded/failed.
When you're running a batch process and need a complete report.

`3. Promise.race()`

Your bladder is at critical mass. You can't wait for all checks. You can't even wait for the first successful check. You just need the FIRST thing to happen, ANYTHING, so you can react.

You swing your legs out of bed. That's the first action. You're committed now. You hear a creak? Too bad. You're running. The first event triggered your sprint, and there's no stopping.

This is reckless. This is how horror movies start. But you gotta go.

Situation

Promise.race([hallwayLight, bathroomLight, underBedCheck])
    .then((firstResult) => {
        console.log(`🏁 First thing happened: ${firstResult}`);
        console.log("🚀 Taking that as a sign! Running NOW!");
        // You sprint regardless of what the first result was
    })
    .catch((firstError) => {
        console.log(`🏁 First thing happened (and it was bad): ${firstError}`);
        console.log("😰 Oh no. That's a bad sign. But I'm already out of bed!");
        // You're already committed. You run into darkness.
    });

Outcome

On success -

🏁 First thing happened: 💡 Hallway light is ON
🚀 Taking that as a sign! Running NOW!

On failure -

🏁 First thing happened (and it was bad): 👹 MONSTER under the bed!
😰 Oh no. That's a bad sign. But I'm already out of bed!
*Screaming intensifies*

When to use Promise.race()

When implementing timeouts (Promise.race([actualRequest, timeoutPromise])).
When you need the fastest response from multiple sources.

`4. Promise.any()`

You're smart. You need one successful safety measure. Just one. You try the hallway light:

Click. Nothing. Darkness. (Rejection)

Okay, scary, but you're not giving up. You try the bathroom light:

Click. LIGHT! (Fulfilled)

YES! You can see the bathroom door! You don't care about the monster under the bed anymore. You have light. You run.

If ALL three fail? No lights, monster under bed? Then you're truly doomed. You stay in bed and accept your fate.

Situation:

Promise.any([hallwayLight, bathroomLight, underBedCheck])
    .then((firstSuccess) => {
        console.log(`🎯 Found one working safety measure: ${firstSuccess}`);
        console.log("🏃 That's enough! Making my move!");
    })
    .catch((error) => {
        console.log("💀 ALL safety measures failed!");
        console.log("Errors:", error.errors); // AggregateError
        console.log("Staying in bed forever.");
    });

Outcome

On Success -

🎯 Found one working safety measure: 🚽 Bathroom light is ON
🏃 That's enough! Making my move!

On failure -

💀 ALL safety measures failed!
Errors: ['💀 Hallway light bulb is dead', '👻 Bathroom light is dead', '👹 MONSTER under the bed!']
Staying in bed forever.

When to use Promise.any()

When you need any successful response from multiple sources.
When implementing fallback APIs (try server A, if it fails, try server B).

The Moral of the Story

If you're a control freak, use Promise.all() and accept that you'll sometimes wet the bed.
If you're a data analyst, use Promise.allSettled() and make informed decisions.
If you're desperate, use Promise.race() and hope for the best (but probably scream a lot).
If you're smart, use Promise.any() and take the first win you can get.

And remember: Always check for monsters before getting out of bed at 3 AM. Or use Promise.any() and just need one light to work.

🕹️ Play the Game

If you enjoyed this story, you'll love the pixel-art game I built to go with it. Click the screenshot below, choose your Promise method, and survive the night!

Hope you liked this Story. If there's any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

CSS Selectors 101: Targeting Elements with Precision

SATYA SOOTAR — Thu, 29 Jan 2026 14:17:07 +0000

To provide a structure to the website we need HTML. But HTML does not itself provide style to the page. We need CSS for that.
So to provide style to the HTML tags we need to select the tags and mention what style I want to add.

Imagine this: You are a teacher in a classroom full of students. Sometimes you need to speak to everyone. Sometimes you need to speak to the students who have done their homework, and sometimes you need to speak to a particular student named "John".

This is how CSS selectors work. You can select every HTML element, a combination of elements or a particular element.

In this blog we will discuss the fundamentals of the CSS selectors with examples.

Why do we need CSS selectors?

Think about a website full of different HTML elements like <h1>, <p>, <div>, <section>, etc. For you to add styles like colour, spacing, alignment to a particular tag will be very difficult and repetitive without CSS selectors.

Without CSS selectors

<h1 style="color: blue; font-size: 32px;">Welcome</h1>
<p style="color: gray; font-size: 16px;">This is a paragraph.</p>
<p style="color: gray; font-size: 16px;">Another paragraph.</p>

With CSS selectors

h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
  font-size: 16px;
}

Using css selectors will reduce you code redundancy as well as make the code much more readable.

CSS selectors

A CSS selector is a pattern used to select and target specific HTML elements on a web page to which a set of CSS styling rules will be applied. They determine which elements receive styles such as color, font, spacing, and layout, allowing for precise control over a website's appearance.

Different types of selectors are:

1. Element selector

The element selector selects HTML elements based on the element name.

Syntax:

elementName {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 32px;
}

This tells the browser to find all the <h1> and cascade color to blue and font size to 32px.

BROWSER OUTPUT:

2. Class Selector

If element selectors are like addressing "all students," class selectors are like addressing "all students who has done there homework." You're targeting a specific group that shares a common characteristic.

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Syntax:

.className {
  property: value;
}

In HTML, you add classes using the class attribute:

<element class="className">This is the content</element>

Example:

.success {
 color: green
}

This tells the browser to find the elements whose class is "success" and give it a color green.

BROWSER OUTPUT:

3. ID selectors

ID selectors are like calling out one person by their unique name: "Hey, John!" There's only one John in the classroom, and you're speaking directly to him.

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Syntax:

#idName {
  property: value;
}

In HTML, you add IDs using the id attribute:

<element id="idName">Content</element>

Example:
HTML:

<body>
 <header id="main-header">We1come to my Website</header>
</body>

CSS:

#main-header{
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 28px;
}

BROWSER OUTPUT:

4. Group Selectors

Sometimes you want to apply the same styles to different types of elements. Group selectors let you do this without repeating yourself.

It reduces code redundancy and makes it more readable.

Syntax:

selector1, selector2, selector3 {
  property: value;
}

Example:
HTML:

<body>
  <h1>This is h1</h1>
  <h2>This is h2</h2>
  <h3>This is h3</h3>
</body>

CSS:

hl, h2, h3 {
  font-family: 'Georgia' serif;
  color: #0c549c;
  }

Browser Output:

In the group selector you can also combine id, class and HTML tags

Example:

h1, .intro-text, #special-paragraph {
  font-weight: bold;
  color: navy;
}

5. Descendant Selectors

Descendant selectors let you target elements that are nested inside other elements. It's like saying, "I want to talk to the students who are in Room 5," not just any student.

Syntax:

parent descendant {
  property: value;
}

Example:
HTML:

<nav class="main-navigation">
  <a href="home.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

<article>
  <p>Check out <a href="example.com">this website</a> for more info.</p>
</article>

CSS:

.main-navigation a {
  color: rgb(206, 0, 0);
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
}

article a {
  color: rgb(9, 185, 18);
  text-decoration: underline;
}

BROWSER OUTPUT:

Selector Priority (CSS Specificity)

What happens when multiple CSS rules try to style the same element? CSS has a priority system (called "specificity") to decide which rule wins.
Think of it like a ranking system in a game: some players have more power than others.

EXAMPLE:

p {
  color: blue;
}

.highlight {
  color: red;
}

HTML:

<p class="highlight">What color am I?</p>

BROWSER OUTPUT:

CSS selector hierarchy:

Conclusion

Remember, CSS selectors are just the beginning of your CSS journey. But they're the most important part. You cannot style a webpage without understanding how to select elements.
Master these basics first, and everything else will build naturally on this foundation. Every professional web developer uses these selectors daily—they're fundamental skills that will serve you throughout your entire career.

Hope you liked this blog. If there’s any mistake or something I can improve, do tell me. You can find me on LinkedIn and X, I post more stuff there.

Forem: SATYA SOOTAR

The Magic of this, call(), apply(), and bind()

What is this in JavaScript? (The Simple Explanation)

this Inside Normal Functions

In non-strict mode (browser):

In strict mode:

this Inside Objects (Methods)

Why Do We Need call(), apply(), and bind()?

1. call() – Call a function with a given this and arguments

2. apply() – Same as call, but arguments as an array

3. bind() – Returns a new function with bound this

Difference Between call, apply, and bind

Conclusion

Understanding Object-Oriented Programming in JavaScript

Object-Oriented Programming (OOP)

Real-World Analogy: Blueprint → Objects

What is a Class in JavaScript?

Creating a Simple Class and Object

Constructor Method

Methods Inside a Class

Basic Idea of Encapsulation

Conclusion

Arrow Functions in JavaScript: A Simpler Way to Write Functions

What Are Arrow Functions?

Normal Function vs Arrow Function

Regular Function

Arrow Function (Same Result)

Basic Arrow Function Syntax

Full Arrow Function Syntax

Step-by-Step Breakdown

Arrow Functions with One Parameter

With Parentheses

Without Parentheses (Shorter)

Arrow Functions with Multiple Parameters

Two Parameters

Zero Parameters

Implicit Return vs Explicit Return

Explicit Return (Using return keyword)

Implicit Return (No return keyword)

More Examples of Implicit Return

When to Use Which?

Basic Differences: Arrow Function vs Normal Function

1. Syntax Length

2. Function Keyword

3. Implicit Return

4. Usage as Variables

Common Mistakes to Avoid

1. Forgetting Parentheses with No Parameters

2. Using Curly Braces Without Return

3. Trying to Use Implicit Return for Multiple Lines

4. Forgetting to Store Arrow Function in Variable

When to Use Arrow Functions

Conclusion

Function Declaration vs Function Expression

What Are Functions and Why Do We Need Them?

Function Declaration

Key Feature of Function Declaration

Function Expression

Key Feature of Function Expression

Key Differences

Hoisting Explained Simply

When to Use Each Type

Use Function Declaration When:

Use Function Expression When:

Conclusion

Understanding Objects in JavaScript

What are Objects and Why Do We Need Them?

Creating Objects

Empty Object

Object with Properties

Real World Example

Object with Different Datatypes

Accessing Object Properties

Dot Notation (.)

Bracket Notation (["key"])

When to Use Which?

Updating Object Properties

Adding New Properties

Deleting Properties

Looping Through Object Keys

What is `this` in JavaScript? (The Simple Explanation)

`this` Inside Normal Functions

`this` Inside Objects (Methods)

1. call() – Call a function with a given `this` and arguments

3. bind() – Returns a new function with bound `this`

Explicit Return (Using `return` keyword)

Implicit Return (No `return` keyword)

These are another way to access elements using `at()`

`.length` property

Now lets talk about `looping` over the array.

`for` loop

`for...of` loop

`.map()` function

How `.map()` works

1. `if` statement

2. `if...else` Statement

3. `else if` Statement

4. `switch` Statement