In this article, we will understand what this means in JavaScript and how functions like call(), apply(), and bind() help us control it. Instead of diving into complex internal mechanics, we will focus on the practical idea of “who is calling the function.”

Once you understand this idea, the behavior of this becomes much easier to reason about.

What this Means in JavaScript

In JavaScript, the value of this depends on the object that calls the function.

A simple way to remember this is:

this refers to the object that is calling the function.

Let us start with a simple example.

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

greet();

When this function runs in the browser, this usually refers to the global object (window). In Node.js it refers to the global environment object.

This happens because the function is called directly, not by any object.

So the caller of the function is the global environment.

this Inside Normal Functions

When a normal function is called by itself, there is no specific object calling it. In such cases, JavaScript assigns the global context.

Example:

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

var name = "Rahul";

showName();

Output

Rahul

Here the variable name exists in the global scope. Since the function is called normally, this refers to the global object, so this.name resolves to the global variable.

This behavior can sometimes cause confusion, which is why developers usually prefer calling functions through objects when they rely on this.

this Inside Objects

When a function is defined as a method of an object and that object calls the function, this refers to that object.

Example:

const person = {
    name: "Amit",
    greet: function () {
        console.log("Hello " + this.name);
    }
};

person.greet();

Output

Hello Amit

In this case the function greet() is called by person, so this refers to the person object.

You can visualize this relationship like this:

Function  ← called by ←  Object
   greet()              person
        this → person

The important point is that the caller determines the value of this.

The Problem: Losing the Original Caller

Sometimes we want to use a method from one object inside another object. This is called function borrowing.

Consider the following example.

const person1 = {
    name: "Rahul",
    greet: function () {
        console.log("Hello " + this.name);
    }
};

const person2 = {
    name: "Anita"
};

Now suppose we want person2 to use the greet() method from person1.

This is where call(), apply(), and bind() become useful.

What call() Does

The call() method allows us to manually set the value of this while calling a function.

Syntax

functionName.call(object, arg1, arg2)

Example:

person1.greet.call(person2);

Output

Hello Anita

Even though the function belongs to person1, we explicitly tell JavaScript that this should refer to person2.

So the method runs using the data of person2.

Example with arguments:

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

const user = {
    name: "Riya"
};

introduce.call(user, "Delhi", "India");

Output

Riya from Delhi, India

Here the first argument sets this, and the remaining arguments are passed normally.

What apply() Does

The apply() method works almost the same as call(). The only difference is how arguments are passed.

Syntax

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

Arguments are passed as an array.

Example:

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

Output

Riya from Mumbai, India

Both call() and apply() execute the function immediately. The main difference lies in the argument format.

What bind() Does

Unlike call() and apply(), the bind() method does not execute the function immediately.

Instead, it creates a new function with a fixed this value.

Syntax

const newFunction = functionName.bind(object)

Example:

const greetUser = person1.greet.bind(person2);

greetUser();

Output

Hello Anita

Here bind() returns a new function where this is permanently set to person2.

This is very useful when passing functions as callbacks.

Difference Between call, apply, and bind

The following comparison helps summarize the behavior.

Another way to think about it:

• call() → run the function now

• apply() → run the function now with array arguments

• bind() → create a new function for later use

Assignment

Try implementing the following small exercise.

Create an object with a method that uses this.

Example structure:

const student = {
    name: "Arjun",
    showName: function () {
        console.log(this.name);
    }
};

Create another object.

const student2 = {
    name: "Meera"
};

Tasks:

Use call() to borrow the showName method.

Use apply() to pass arguments using an array.

Use bind() and store the returned function in a variable, then execute it.

These small experiments help build intuition about how this it behaves.

Function and Caller

You can visualize the concept like this.

Object --------> Function
   |                |
   | calls          |
   ↓                |
 person.greet()     |
        this → person

This shows that the caller decides what this it refers to.

Conclusion

Understanding this in JavaScript becomes much easier when you think about who is calling the function.

If a function is called normally, this usually refers to the global context. If it is called by an object, this refers to that object.

Methods like call(), apply(), and bind() give us control over the value of this. They allow functions to be reused across different objects, which improves flexibility and code reuse.

What is Object-Oriented Programming (OOP)

It's a programming paradigm where we structure our program using objects that represent real-world entities. In this approach, without writing multiple variables and function which ultimately make our code verbose use built-in classes that group related data and write methods to build encapsulation.

For example

A Car has properties like:

• brand

• color

• speed

And behaviors like:

• start()

• stop()

• accelerate()

OOP helps us model such real-world structures directly in code.

How Object-Oriented Programming Works

To understand OOPS better, let's take a simple analogy. Think about a car blueprint used in a factory.

It mostly describes these two things.

• What properties the car will have (eg, color, engine, wheels)

• What behaviour can it perform? (eg. start, stop, accelerate)

But this is a blueprint, not a car. But all cars must have these features.

So we can say that the class is the blueprint and the object is the actual implementation of that blueprint.

        Car Blueprint (Class)
               |
      -----------------------
      |          |          |
   Car1       Car2       Car3
 (Object)    (Object)    (Object)

What is a Class in JavaScript

In object-oriented programming, we wrap code around classes, which act like a blueprint.

In classes, we have Properties and methods.

1. Properties are data

2. Methods are functions.

Syntax

class ClassName {
    constructor() {
        // initialize properties
    }

    methodName() {
        // behavior
    }
}

Note: The class does not create object automatically. When we create a instance of the class then the object is actually created.

Creating Objects Using Classes

To create objects from a class, we use the new keyword.

Example

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

    start() {
        console.log(`${this.brand} car started`);
    }
}

// Creating Object
let car1 = new Car("Toyota", "Red");
let car2 = new Car("BMW", "Black");

car1.start(); // Toyota car started
car2.start(); // BMW car started

Here Car is the blueprint and car1 and car2 is the Object.

Constructor Method

The constructor is a special method that can only be used in a class. It automatically runs when a new object is created. It is used to initialize properties of the object.

Example:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        console.log(`Constructor called for ${this.name}`);
    }
}

// Creation time
let p1 = new Person("Rahul", 25);
let p2 = new Person("Anita", 30);

console.log(p1.name); // Rahul
console.log(p2.age);  // 30

/* Output
Constructor called for Rahul
VM64:5 Constructor called for Anita
VM64:13 Rahul
VM64:14 30
*/

The constructor helps us avoid manually assigning properties for each object.

Methods Inside a Class

Methods are the functions that define the behaviour of objects.

Example

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

    introduce() {
        console.log(`Hello, my name is \({this.name} and I am \){this.age} years old.`);
    }
}

// Method usages
let person1 = new Person("Amit", 22);
let person2 = new Person("Riya", 24);

person1.introduce();
person2.introduce();

Note: Each object has different reference in memory, so one object properties is different from another object's properties.

Example

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

    printDetails() {
        console.log(`Student Name: ${this.name}`);
        console.log(`Student Age: ${this.age}`);
    }
}
let student1 = new Student("Arjun", 20);
let student2 = new Student("Meera", 19);

student1.printDetails();
student2.printDetails();

/* Output
Student Name: Arjun
Student Age: 20

Student Name: Meera
Student Age: 19
*/

Here we wrote the logic once but used it multiple times. An advanced usage case is LinkedList, where we create a node class, then use it every time to insert another node.

What is Encapsulation

Encapsulation means bundling data and methods together inside a single unit (class).

Instead of writing separate variables and functions across the program, we organize them inside the class.

Encapsulation helps us:

• Keep code organized

• Protect data

• Control how data is accessed

For example:

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

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

    withdraw(amount) {
        this.balance -= amount;
    }
}

Here:

• Balance is data

• deposit() and withdraw() are methods

Both are wrapped inside the same class.

This structure improves code maintainability and security.

Assignment

Try implementing the following exercise.

Task

Create a class called Student.

Requirements:

• Add properties:

  • name

  • age

• Add a method:

  • printDetails()

Example Implementation

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

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

let s1 = new Student("Rahul", 21);
let s2 = new Student("Priya", 20);

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

Try creating multiple student objects to understand how classes work.

Diagram Ideas for This Topic

You can include these diagrams in the blog for better understanding.

Blueprint to Object

     Car Blueprint (Class)

        ↓       ↓       ↓

      Car1    Car2    Car3
     (Object) (Object) (Object)

Class to Instance Relationship

Class: Student
   |
   |--- student1
   |--- student2
   |--- student3

These visuals help beginners quickly understand the concept.

Conclusion

Object-Oriented Programming is a powerful way to structure code.

By using classes and objects, we can write programs that are easier to understand, reuse, and maintain.

This is where operators come into play.

In simple terms, operators are symbols that perform operations on values or variables.

For example:

let sum = 5 + 3;

Here + is an operator that adds two numbers.

JavaScript provides many types of operators, but in this article we will focus on the most commonly used ones:

• Arithmetic Operators

• Comparison Operators

• Logical Operators

• Assignment Operators

Let’s understand each one step by step.

Arithmetic Operators

Arithmetic operators are used to perform mathematical calculations.

These are the most basic operators you will use while working with numbers.

Example

let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

Understanding Modulus %

The modulus operator returns the remainder of a division.

Example:

console.log(10 % 3); // 1

Because:

10 ÷ 3 = 3 remainder 1

This operator is very useful when checking if a number is even or odd.

Example:

let number = 8;

if (number % 2 === 0) {
  console.log("Even number");
} else {
  console.log("Odd number");
}

Comparison Operators

Comparison operators are used to compare two values.

They always return a boolean value:

• true

• false

Here are some common comparison operators:

Example

let a = 10;
let b = 5;

console.log(a > b);  // true
console.log(a < b);  // false
console.log(a == b); // false

The Difference Between == and ===

This is one of the most important things beginners should understand.

== (Loose Equality)

== compares values after converting their types if necessary.

Example:

console.log(5 == "5"); 

Output:

true

Because JavaScript converts "5" (string) into a number before comparison.

=== (Strict Equality)

=== compares both value and type.

Example:

console.log(5 === "5");

Output:

false

Because:

5 is a number
"5" is a string

They are not the same type.

Quick Comparison Table

In most modern JavaScript code, developers prefer === because it avoids unexpected type conversions.

Logical Operators

Logical operators are used when we want to combine multiple conditions.

They are commonly used inside if statements.

Logical AND &&

The AND operator returns true only if both conditions are true.

Example:

let age = 20;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("You can enter");
}

Output:

You can enter

Both conditions are true.

Logical OR ||

The OR operator returns true if at least one condition is true.

Example:

let isAdmin = false;
let isEditor = true;

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

Output:

Access granted

Only one condition needs to be true.

Logical NOT !

The NOT operator reverses a boolean value.

Example:

let isLoggedIn = false;

console.log(!isLoggedIn);

Output:

true

Because NOT flips the value.

Logical Operator Truth Table

| A | B | A && B | A || B | | --- | --- | --- | --- | | true | true | true | true | | true | false | false | true | | false | true | false | true | | false | false | false | false |

This table helps understand how logical operators behave with different combinations.

Assignment Operators

Assignment operators are used to assign values to variables.

The most basic one is:

=

Example:

let number = 10;

Here we assign the value 10 to the variable number.

Other Assignment Operators

JavaScript also provides shortcut assignment operators.

Example

let score = 10;

score += 5;
console.log(score);

Output:

15

Because:

score = score + 5

Another example:

let points = 20;

points -= 4;

console.log(points);

Output:

16

Small Practice Assignment

To understand operators better, try this small exercise.

1. Perform Arithmetic Operations

let a = 12;
let b = 4;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

2. Compare Values

console.log(5 == "5");
console.log(5 === "5");

Observe the difference carefully.

3. Logical Condition Example

let age = 22;
let hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("You can watch the movie");
}

Final Thoughts

Operators are one of the core building blocks of JavaScript.

They allow us to:

• Perform calculations

• Compare values

• Combine conditions

• Assign values to variables

Once you understand operators, writing logic in JavaScript becomes much easier.

In this article, we are trying to understand the Object in JavaScript, how it help use to store real word entity into program.

Why do we need Objects?

To understand the need of Object, let's take an example. Assume there is a librarian and they want to store some books, so in the traditional method try to do it

let book1Title = "Harry Potter";
let book1Author = "J.K. Rowling";
let book1Pages = 309;

let book2Title = "The Hobbit";
let book2Author = "J.R.R. Tolkien";
let book2Pages = 310;

As you can see, to store 2 books, we need to declare 6 variables. Now you may ask what the problem is.

The key problem here is the creation of multiple variables and verbose code. To fix that, we can use objects in JavaScript.

What is Object

An object is a way to store values with their corresponding keys. That value may be anything; it may be any data type. But the key is only a string or a symbol. Object is non-primitive, and it is stored and copied by reference.

Syntax

let obj_name={
    key1: "value",
    key2: 167,
    key3:[1,2,3,4],
    key4:{
        another_key:"value45"
    }
}
console.log(obj_name)
console.log(obj_name.key1) // It return of value of key1
console.log(obj_name["key1"] // Another method to see the value of key1 
console.log(obj_name.key4.another_key) // Nested values 

Note: If you want more knowledge about data types, read this article.

let book1 = {
  title: "Harry Potter",
  author: "J.K. Rowling",
  pages: 309
};
let book2 = {
  title: "The Hobbit",
  author: "J.R.R. Tolkien",
  pages: 310
};

As we can see, we just need 2 variables to store 2 books, and objects are easy to understand and less verbose.

Now, let's take a few examples to understand how to insert and read values from an object.

Example 1

// Example 1: Adding a new key-value pair
let student = {
    name: "John",
    age: 20
};
// Add new key
student.grade = "A"; // or: student["grade"] = "A";

// Example 2: Modifying a value
student.age = 21; // change age from 20 to 21

// Example 3: Deleting a key
delete student.grade; // removes "grade" property from student

Example 2

// Example 4: Input value from user (prompt - works in browser environment)
let car = {};
car.brand = "Toyota"; 
car.model = "Corolla"; 
car.year = 2022; 

// Example 5: Access and modify using bracket notation
car["color"] = "Red";
car["year"] = 2023;

// Example 6: Deleting key with bracket notation
delete car["color"];

// Example 7: Looping through object keys and showing values
for (let key in car) {
    console.log(key + ": " + car[key]);
}

// Example 8: Check if a key exists
if ("brand" in car) {
    console.log("Brand exists in car object");
}

// Example 9: Get all keys and values
let keys = Object.keys(student); // ["name", "age"]
let values = Object.values(student); // ["John", 21]

Example 3: For in Loop

We can run a for in loop for an object which run for all

// Example: Using for...in loop with a fresh object
let book = {
    title: "Atomic Habits",
    author: "James Clear",
    year: 2018,
    price: 350
};

for (let key in book) {
    console.log(key + ": " + book[key]);
}
// Output 
// title: Atomic Habits
// author: James Clear
// year: 2018
// price: 350

Some Important Methods of Object

1. HashOwnProperty / Object.hasOwn()

When working with objects in JavaScript, sometimes we need to check whether a property actually belongs to that object or if it is coming from the prototype chain.

To understand this, let’s look at a simple example.

const user = {
  name: "Pallab",
};

console.log(user.name); // Pallab

Now, suppose we try to access something like this:

console.log(user.toString());

Even though toString It is not inside our object; JavaScript still finds it.

That is because toString it comes from Object.prototype.

So if we want to check whether a property really belongs to the object itself, we can use hasOwnProperty.

const user = {
  name: "Pallab",
};

console.log(user.hasOwnProperty("name")); // true
console.log(user.hasOwnProperty("toString")); // false

This method returns true only if the property exists directly inside the object.

However, modern JavaScript introduced a safer alternative:

Object.hasOwn(user, "name");

Why is this safer?

Because sometimes an object may override hasOwnProperty.

Example:

const obj = {
  hasOwnProperty: () => false,
  name: "JS",
};

console.log(obj.hasOwnProperty("name")); // false wrong

To avoid this issue, we use:

Object.hasOwn(obj, "name"); // true

So the key idea is:

Object.hasOwn() safely checks if a property exists directly on an object.

2. Structured Clone

In JavaScript, sometimes we need to create a completely independent copy of complex data, including nested objects, arrays, maps, sets, etc.

For this purpose, modern JavaScript provides a built-in function called structured cloning.

const original = {
  name: "Pallab",
  skills: ["JS", "Node"],
};

const copy = structuredClone(original);

copy.skills.push("React");

console.log(original.skills); // ["JS", "Node"]
console.log(copy.skills); // ["JS", "Node", "React"]

Here, both objects are completely independent.

Structured clone creates a deep clone automatically.

Difference Between Object and Array in JavaScript

Many beginners think that Array and Object are completely different data types.
But in JavaScript, the reality is slightly different.

An Array is actually a special implementation of an Object.

That means internally, arrays behave like objects, but they have additional behavior designed for ordered data.

An array is internally an Object

Consider the following example:

let arr = [10, 20, 30];
console.log(typeof arr);
// Output 
// Object

As we can see, JavaScript returns "object" instead of "array".

This happens because arrays are implemented using objects internally.

JavaScript internally stores it similarly to this structure:

{
  0: 10,
  1: 20,
  2: 30,
  length: 3
}

But JavaScript also gives some extra methods like map(), push(), pop(), etc., with arrays. So we can clearly see that an array is an advanced implementation of an array.

If you want to know whether a data is an array or an object instead of using the typeof keyword, you should use the Array.isArray(PassYourArrayHere) for the final answer.

Conclusion

We can use objects to organize related data using key-value pairs, making the code look cleaner and easier to manage compared to using multiple variables to hold related data. To effectively use objects in JavaScript programming, we need to understand object operations such as Object.hasOwn(), as well as concepts such as shallow copy, deep copy, and structured cloning.

JavaScript was initially a lightweight scripting language used to provide interactivity to web pages. However, nowadays JavaScript is much more modern and has a great ecosystem. Because of this, we can easily build highly scalable systems using it.

For any programming language, we usually follow a simple process: first, we provide some data, then the program processes that data, and finally, the program shows the output to the user.

If we cannot understand data and data types properly, we cannot write business logic effectively. So let's discuss data types and how JavaScript behaves with data.

Data Types

In real life, many things are happening around us, and our software needs to interact with the real world. Understanding real-life data and representing that data inside a computer is a challenge. For that reason, we need to understand data types.

In JavaScript, we mainly have two primary categories of data types:

• Primitive

• Non-Primitive

Each of these categories contains several specific data types.

Primitive Data Types

Primitive data types are basic types used to represent simple values from real life.

String

A string is a combination of multiple characters, such as the name of a person. Strings are usually written inside single quotes (' ') or double quotes (" ").

Example:

"John"
'Hello World'

Number

The number type stores numeric values, such as the age of a person.

Example:

25
3.14

Boolean

A Boolean is used when we need to represent only two possible outcomes: true or false.

Example:

true
false

BigInt

BigInt is used to store very large integers that cannot be safely represented by the normal number type. In JavaScript, we denote a BigInt by adding n at the end of the number.

Example:

124n

Symbol

A symbol is a unique and immutable value often used to create unique identifiers for object properties.

Undefined

Undefined represents a value that has been declared but has not been assigned yet.

You can think of it like discovering an unknown animal in a zoo. At first, you do not know anything about it, so it is undefined from your perspective. Once someone explains what it is, it is no longer undefined for you.

Null

Null represents the intentional absence of any value. It is used when we explicitly want to indicate that something has no value.

Non-Primitive Data Types

Non-primitive data types are more complex and can store collections of values or more structured data.

Objects

An object in JavaScript is used to store multiple related values in a single variable.
These values are stored in key–value pairs.

You can think of an object like a real-life entity. For example, a person has many properties such as name, age, and city. Instead of creating separate variables, we store everything inside one object.

{
  name: "Rahul",
  age: 25,
  city: "Kolkata"
}

Array

An array is used to store multiple values in a single container. We can use it to store the marks of 100 students for a class.
Unlike objects, arrays store values using index numbers instead of keys.

In an array index mostly starts from 0.

marks [34,45,65,74]
roll   1  2  3  4   (This is denoted as index)

Now we are aware of data that can represent more than 70% usecases. Now it's time to understand the connection between variables in JavaScript.

Variables

Variables are like a container where we can store the data that we discussed now. So it's like in a household there is a container storing sugar, rice, variable is saminar like those containers. Now let's see how JavaScript actually handles them.

syntax

//keyword variable_name assignment opeartor value
let variable_name="Value";
let variable2 = 2323;

We have 3 keywords in JavaScript to declare a variable

1. Var (Mostly avoided these days by devs)

2. Let

3. Const (Used to declare a constant)

Now, let's see some JavaScript code snippets of various data types

Number in JavaScript

let decimalNumber=69
let hexadecimalNumber=0xff; // 0x____ it automatically converted into hex number
let binaryNumber=0b101; // 0b____ it automatically converted into binary
let exponetialNumber=1e5; // 1*10^5

console.log(decimalNumber, hexadecimalNumber, binaryNumber, exponetialNumber);

// Output
// 69 255 5 100000

Strings in JavaScript

let singleQuoteString = 'Hello World';
let doubleQuoteString = "JavaScript";
let templateString = `Learning JS`;
let escapedString = "He said \"Hello\""; // using escape character

// variables for interpolation
let name = "Pallab";
let age = 23;

let interpolatedString = `My name is \({name} and I am \){age} years old`;
// here you can put variable and expression between string
console.log(
  singleQuoteString,
  doubleQuoteString,
  templateString,
  escapedString,
  interpolatedString
);

// Output
// Hello World JavaScript Learning JS He said "Hello" My name is Pallab and I am 23 years old

Boolean in JavaScript

let hasAccess=false; // This Stores whether a user has access or not
let isLoggedIn=true; // This stores wheather a user is loggedin or not

// Based on that you can write bussiness logic
if(isLoggedIn && hasAccess){
    console.log("Access Granted");
}
else{
    console.log("Access Granted");
}

BigInt in JavaScript

To store bigint data in JavaScript, add an extra n at the end. Now JavaScript treats that as a bigint.

let bigIntValue=125n;
console.log(typeof bigIntValue);
// Output is bigint

Symbols in JavaScript

Undefined in JavaScript

Undefined means that at that point variable is storing nothing. So in that case, we don't know the type of that variable.

let value;
console.log(value, typeof value);
// Output undefined 'undefined'

let value2;
console.log(value2, typeof value2);
// Output undefined 'undefined'

value2=5;
console.log(value2, typeof value2);
// Output 5 'number'

Null in JavaScript

let value=null;
console.log(value, typeof null);
// Output null 'object'

In this example, as you can see, we have a variable named value holding null, which means nothing. During console log, we got null, and typeof that variable should be null, but it gives object because it is a JavaScript production bag, it is there to provide backward compatibility.

Array in JavaScript

An array in JavaScript is used to store multiple values inside a single variable.

Array Literal (Most Common)

let numbers = [1, 2, 3, 4, 5];
let fruits = ["Apple", "Banana", "Mango"];

console.log(numbers);
console.log(fruits);

Using the Array Constructor

JavaScript also provides a built-in Array constructor that can be used to create arrays.

let numbers = new Array(1, 2, 3, 4, 5);
console.log(numbers);

Object in JavaScript

An object is used to store the real-world entity.

Using Object Literal

let person = {
  name: "Rahul",
  age: 25,
  city: "Kolkata"
};

console.log(person);

Using the Object Constructor

let person = new Object();

person.name = "Rahul";
person.age = 25;
person.city = "Kolkata";

console.log(person);

Using Object.create()

let personPrototype = {
  greet() {
    console.log("Hello!");
  }
};

let person = Object.create(personPrototype);

person.name = "Rahul";
person.age = 25;

console.log(person.name);
person.greet();

Using Constructor Functions

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

let person1 = new Person("Rahul", 25, "Kolkata");
let person2 = new Person("Amit", 28, "Delhi");

console.log(person1);
console.log(person2);

Using ES6 Classes

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

let person1 = new Person("Rahul", 25, "Kolkata");
console.log(person1);

Now we know how to create a variable that can store data of various data types.

Now we have different keywords like var, let, and const. Now you may ask when to use which keyword.

Difference between Var, Let, and Const

To understand the difference between this 3 keyword, we have to understand the hoisting first.

Basic Idea of Hoisting

In JavaScript, Hosting is the concept where the JavaScript interpreter moves the function declaration, variables, classes, or imports to the top of their scope before executing the code.

To understand this, let's take a few examples

Example 1:

console.log(variable1); // Line 1
var variable1="holding a string"; // Line 2
console.log(variable1); // Line 3

// Instead of throwing a error the output looks like this
// undefined
// holding a string

As you can see here, instead of throwing errors in line 1, it says undefined because variable1 The value is still not defined, but on line 2, the value is defined. it's holding a string, so when we use that in line 3, we get our expected output.

Example 2:

console.log(value1)

Now, in this example, you can clearly see that there is no variable named value1, so it throws an error value1 is not defined.

Function Declaration Hoisting Example

sayHello(); // Works

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

// Output 
// Hello!

This happens because function declarations are fully hoisted to the top of their scope during the creation phase of execution.

Note that function expression are not hoisted

sayHi(); // Error

const sayHi = function () {
  console.log("Hi!");
};

// Output Error
// sayHi is not defined

Now we are ready to understand the difference between Var, Let & Const. Let's take a few examples

Example 1

When we use var

console.log(a); // undefined

var a = 10;

console.log(a); // 10

Output

undefined
10

Here, the variable a is hoisted to the top of the scope, but only the declaration is hoisted, not the value.

So internally JavaScript treats it like this:

var a;

console.log(a); // undefined

a = 10;

console.log(a); // 10

This is why we get undefined instead of an error.

var is Function Scoped

Another important behavior of var is that it does not follow block scope.

Example

if (true) {
    var message = "Hello";
}

console.log(message);

Output

Hello

Even though the variable was declared inside the if block, we can still access it outside.

This happens because var is function scoped, not block-scoped.

So the variable becomes available in the whole function or global scope.

Problem with var

Because var ignores block scope, it can create unexpected bugs in large programs.

Example

for (var i = 0; i < 3; i++) {
    console.log(i);
}

console.log(i);

Output

0
1
2
3

Here, the variable i still exists outside the loop.

This behavior is one of the reasons why modern JavaScript prefers let and const.

let and const

The let and const keywords were introduced in ES6 (ECMAScript 2015) to solve problems created by var.

Both let and const follow block scope.

let Example

if (true) {
    let age = 25;
}

console.log(age);

Output

ReferenceError: age is not defined

Here, the variable age exists only inside the block.

Once the block ends, the variable is no longer accessible.

Temporal Dead Zone (TDZ)

The Temporal Dead Zone refers to the period between the entering of a scope and the actual declaration of a variable using let or const. During this period, the variable is "uninitialized", and accessing it will result in a ReferenceError.

• The TDZ starts from the beginning of the block until the variable is declared.

• Variables declared with let and const are hoisted but not initialized.

• Accessing the variable in the TDZ results in a ReferenceError.

• var declarations do not have a TDZ and are initialized as undefined.

Example

console.log(num);

let num = 10;

Output

ReferenceError: Cannot access 'num' before initialization

Even though the variable is hoisted, JavaScript does not allow access before initialization.

This period is called the Temporal Dead Zone (TDZ).

Const Example

The const keyword is similar to let, but the value cannot be reassigned.

Example

const pi = 3.14;

console.log(pi);

Output

3.14

If we try to change it:

pi = 3.14159;

Output

TypeError: Assignment to constant variable

So const variables cannot be reassigned.

Const Must Be Initialized

Unlike let, a const variable must be initialized at the time of declaration.

Example

const value;

Output

SyntaxError: Missing initializer in const declaration

Correct way:

const value = 10;

Block Scope Example

{
    let a = 5;
    const b = 10;
}

console.log(a); 
console.log(b);

Output

ReferenceError
ReferenceError

Both let and const stay inside the block.
Quick Comparison

Now that you understand the difference between var, let, and const, try completing the following tasks.

Assignment: Try it yourself

Task 1: Declare Variables

Create three variables:

• name

• age

• isStudent

Use appropriate keywords (var, let, or const) to declare them.

Example starting point:

let name = "Your Name";
let age = 20;
const isStudent = true;

Task 2: Print the Values

Print all the variables using console.log.

Example:

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

Task 3: Change Variable Values

Try changing the values of the variables declared with let and const.

Example:

age = 21;       // Should work
isStudent = false; // Try this and observe what happens

Observe the behavior in the console.

Task 4: Experiment with Hoisting

Try accessing a variable before declaring it.

Example:

console.log(testVar);
var testVar = "Hello";

Now try the same with let or const and observe the difference.

Conclusion:

• JavaScript programs work by processing data and producing output.

• We learned about primitive data types like string, number, boolean, bigint, symbol, undefined, and null.

• We also explored non-primitive types, such as objects and arrays, used to store structured or multiple values.

• Variables act as containers to store data, and JavaScript provides var, let, and const to declare them.

• We understood the concept of hoisting and how it affects variable behavior.

• In modern JavaScript, developers mostly prefer let and const for safer and more predictable code.

These concepts form the foundation of JavaScript programming and are essential for writing clean and scalable applications.

let math = 85;
let science = 90;
let english = 78;
let history = 88;
let geography = 92;

This strategy appears straightforward at first. However, as the number of values rises, issues begin to arise. What happens if you have to manage hundreds of tasks in a to-do list or store grades for fifty different subjects? It soon becomes messy and challenging to maintain and create distinct variables for every value.

Arrays are very helpful in this situation. We can store multiple values in a single variable while preserving their order using arrays. They facilitate the structured organization, access, and manipulation of data collections.

What is an Array?

An array is a collection of values stored in a specific order. Instead of creating many variables, we store multiple values inside a single structure.

You can think of an array like a list.

For example, suppose we want to store a list of fruits.

Apple
Banana
Mango
Orange
Grapes

Instead of writing five separate variables, we can store all of them inside an array.

let fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

Now the variable fruits holds five values.

Arrays are helpful whenever we need to store a group of related values, such as:

• a list of fruits

• marks of students

• names of users

• tasks in a to-do list

The key idea: whenever we want to store and access something sequentially, the array data structure is the most preferred to use.

Why Do We Need Arrays?

To understand the importance of arrays, let's compare two approaches.

Storing values individually

let task1 = "Complete homework";
let task2 = "Buy groceries";
let task3 = "Call friend";
let task4 = "Read a book";

This works for small cases. But if we want to display all tasks, we must write separate code for each variable.

console.log(task1);
console.log(task2);
console.log(task3);
console.log(task4);

Now imagine there are 100 tasks. Managing them individually becomes difficult.

Using an array

let tasks = [
"Complete homework",
"Buy groceries",
"Call friend",
"Read a book"
];

All of this is now contained in a single variable named tasks. They are easily accessible or processed by us. The code becomes more structured and cleaner as a result.

How to Create an Array

In JavaScript, arrays are used to store multiple values in a single variable. They are ordered collections, which means every value inside the array has a specific position called an index.

There are two common ways to create an array in JavaScript. The first and most commonly used way is using square brackets []. The second way is using the new Array() constructor.

Creating an Array Using Square Brackets

The simplest and most common way to create an array is by using square brackets.

Inside the brackets, values are separated by commas.

Example:

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

This creates an array called numbers that contains four elements.

You can visualize it like this:

Index:  0   1   2   3
Value: 10  20  30  40

Each value has its own index, which allows JavaScript to access it quickly.

Another example:

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

This array stores three fruit names.

Arrays can also contain different types of values.

Example:

let mixed = ["Hello", 25, true];

In this array:

• "Hello" is a string

• 25 is a number

• true is a boolean

Although JavaScript allows mixed types, in real programs, it is usually better to store similar kinds of values together.

Example using marks:

let marks = [85, 90, 78, 88, 92];

Creating an Array Using the new Keyword

Arrays can also be created using the Array constructor with the new keyword.

Example:

let fruits = new Array("Apple", "Banana", "Mango");

This also creates an array containing the same values.

Another example:

let numbers = new Array(10, 20, 30);

The result is the same as using brackets.

However, the constructor can behave differently when a single number is passed.

Example:

let arr = new Array(5);

This does not create [5].

Instead, it creates an array with five empty slots.

Index:  0   1   2   3   4
Value:  _   _   _   _   _

These slots exist but do not contain values yet.

Because of this behavior, most developers prefer using the square bracket syntax instead of the Array constructor.

Difference Between [] and new Array()

Both methods create arrays, but there is one important difference.

If multiple values are passed, both behave the same.

[1,2,3]          → normal array
new Array(1,2,3) → This also creates array and return that result

But when a single number is passed:

[5]           → array containing value 5 // so it contain 1 element
new Array(5)  → empty array with length 5 // so it contains 5 element

Arrays Are Reference Types

Arrays in JavaScript are reference types. This means the variable does not directly hold the values. Instead, it holds a reference to a location in memory where the array is stored.

Example:

let arr1 = [10, 20, 30];
let arr2 = arr1;

arr2[0] = 100;

console.log(arr1);
// Output
// [100, 20, 30]

Even though we changed arr2, the value in arr1 also changed. This happens because both variables refer to the same array in memory.

Shallow Copy of Arrays

A shallow copy creates a new array but copies the values from the original array.

One simple way to do this is using the spread operator.

Example:

let arr1 = [1, 2, 3];
let arr2 = [...arr1];

arr2[0] = 100;

console.log(arr1);
console.log(arr2);

Output:

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

Here arr1 remains unchanged because arr2 is a separate array.

This works well for simple arrays containing primitive values like numbers or strings.

Deep Copy of Arrays

A deep copy means creating a completely independent copy of an array so that changes in one array do not affect the other.

When arrays contain nested arrays or objects, a normal copy is not enough because inner elements may still share references. A deep copy ensures that every level of the structure is duplicated.

One modern way to create a deep copy in JavaScript is using structuredClone().

Example:

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

let arr2 = structuredClone(arr1);

arr2[0][0] = 100;

console.log(arr1);
console.log(arr2);

Output:

[ [1, 2], [3, 4] ]
[ [100, 2], [3, 4] ]

Here, arr2 is a completely separate copy of arr1.

When we modify arr2, the original array arr1 remains unchanged.

The structuredClone() method creates a deep copy of the entire data structure, including nested arrays and objects. It is supported in modern JavaScript environments and is generally a better approach than older workarounds.

Accessing Elements Using Index

To get a value from an array, we use the index.

Note: Array index start form zeroin JavaScript

Syntax:

arrayName[index]

Example:

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

console.log(fruits[0]);
// Output:: Apple

Updating Array Elements

Arrays are not fixed. We can modify any value by assigning a new value to its index.

Example:

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

fruits[1] = "Orange";

console.log(fruits);
// Output : ["Apple", "Orange", "Mango"]

Here we replaced "Banana" with "Orange".

The Array Length Property

Every array has a special property called length.

It tells us how many elements are inside the array.

Example:

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

console.log(fruits.length); // Output 4

This means there are four elements in the array.

The length property is very useful in many situations. For example, if we want to find the last element of an array.

Since indexing starts at 0, the last index is always:

length - 1

Example:

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

console.log(fruits[fruits.length - 1]); // Output Orange

This technique works even if the array size changes.

Looping Through Arrays

Often, we need to access every element in an array. Instead of writing many statements manually, we use loops.

The most common loop used with arrays is the for loop.

Example:

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

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

Output:

Apple
Banana
Mango
Orange

Here is another example with numbers.

let numbers = [10, 20, 30, 40, 50];

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

Output:

10
20
30
40
50

Loops make arrays powerful because they allow us to handle many values with very little code.

How Array Stores the Value

To better understand arrays, imagine memory blocks.

Example array:

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

Visual representation:

Index:   0    1    2    3
        -------------------
Value: | 5 | 10 | 15 | 20 |
        -------------------

Each block stores a value.

The index tells us which block to access.

If we want the value 15, we access index 2.

numbers[2]

This structured storage makes it easy for the program to retrieve data quickly.

Real Life Example of Arrays

Consider a simple to-do list application.

Instead of storing tasks separately, we use an array.

let todoList = [
"Finish project",
"Study JavaScript",
"Exercise",
"Read a book"
];

Now we can easily display all tasks.

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

If a task changes, we update it.

todoList[1] = "Study arrays in JavaScript";

This flexibility makes arrays essential in programming.

Array Inbuilt Methods in JavaScript

Arrays in JavaScript are not just simple collections of values. They come with many built-in methods that help us perform common operations such as looping through elements, transforming values, filtering data, or combining values.

These methods make working with arrays much easier and reduce the need for writing manual loops.

forEach()

The forEach() method is used to iterate over an array and execute a function for each element. It is mainly used when we want to perform an action for every element in the array.

Unlike some other array methods, forEach() does not return a new array.

Example:

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

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

Output:

0 Apple
1 Banana
2 Mango
3 Orange

Here, the callback function receives the element and its index, and we print them using console.log.

Arguments accepted by the callback:

(element, index, array)

Return value:

undefined

map()

The map() method is used to create a new array by transforming each element of the original array.

It runs a callback function on every element and stores the returned values in a new array.

Example:

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

In this example, every number in the array is multiplied by 2, and the result is stored in a new array.

Arguments accepted by the callback:

(element, index, array)

Return value:

A new transformed array

The original array remains unchanged.

filter()

The filter() method creates a new array containing only elements that satisfy a given condition.

It runs the callback function on each element and includes the element in the new array only if the function returns true.

Example:

let numbers = [10, 15, 20, 25, 30];

let result = numbers.filter(function(num) {
    return num > 20;
});

console.log(result);

Output:

[25, 30]

Here, the callback checks if the number is greater than 20. Only those numbers are included in the resulting array.

Arguments accepted by the callback:

(element, index, array)

Return value:

A new filtered array

reduce()

The reduce() The method is used when we want to combine all elements of an array into a single value.

It processes the array from left to right and keeps updating an accumulated value.

Example:

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

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

console.log(sum);

Output:

10

Explanation:

• accumulator stores the running result

• currentValue is the current element being processed

• 0 is the initial value of the accumulator

Arguments accepted by the callback:

(accumulator, currentValue, index, array)

Return value:

A single accumulated value

This method is often used for operations like calculating sums, averages, or combining values.

Summary

JavaScript arrays organize several values into a single variable. Every element has an index that begins at 0, making updates and access simple. The number of elements is displayed by the length property, and loops facilitate effective processing.

Assignment

Create a program that performs the following tasks.

• Create an array containing five of your favorite movies.

• Print the first movie and the last movie from the array.

• Change one movie in the array and print the updated array.

• Use a loop to print every movie in the array.

Example starting point:

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

Try implementing the tasks step by step. This will help reinforce your understanding of arrays and how they work.

What is a Function?

A function is a block of code designed to perform a specific task. Instead of writing the same code again and again, we wrap that logic inside a function and call it whenever we want to use it or needed.

For example, assume you want to add two numbers multiple times.

Let's take an example

let result1 = 5 + 10;
let result2 = 7 + 3;
let result3 = 8 + 12;

Without a function, if we need to add two numbers multiple time our code looks like this. This does not follow the DRY (Do not Repeat Yourself ) principle.

Instead, we can you function

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

// Now we can reuse it:

add(5, 10); // 15
add(7, 3);  // 10
add(8, 12); // 20

It improved code readability and maintainability.

Function Declaration

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

• The name of the function.

• A list of parameters to the function, enclosed in parentheses and separated by commas.

• The JavaScript statements that define the function, enclosed in curly braces, { /* … */ }.

Syntax

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

Example:

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

Function Expression

A function expression is another way of writing a function, and the syntax is almost similar to a function declaration. The main difference between a function expression and a function declaration is that the function name in a function expression can be omitted to create an anonymous function. A function expression can be used as an IFEE ( Immediately Invoked Function Expression), which runs as soon as it is defined.

Syntax

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

Example

const getRectArea = function (width, height) {
  return width * height;
};

console.log(getRectArea(3, 4));
// Expected output: 12

Here we store the function in a variable.

Note: Function expressions in JavaScript are not hoisted, unlike function decleartions. You can't use function expression before you create them:

console.log(notHoisted); // undefined
// Even though the variable name is hoisted,
// the definition isn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function

var notHoisted = function () {
  console.log("bar");
};

Basic Idea of Hoisting

In JavaScript, Hosting is the concept where the JavaScript interpreter moves the function declaration, variables, classes, or imports to the top of their scope before executing the code.

To understand this, let's take a few examples

Example 1:

console.log(variable1); // Line 1
var variable1="holding a string"; // Line 2
console.log(variable1); // Line 3

// Instead of throwing a error the output looks like this
// undefined
// holding a string

As you can see here, instead of throwing errors in line 1, it says undefined because variable1 The value is still not defined, but on line 2, the value is defined. it's holding a string, so when we use that in line 3, we get our expected output.

Example 2:

console.log(value1)

Now, in this example, you can clearly see that there is no variable named value1, so it throws an error value1 is not defined.

Function Declaration Hoisting Example

sayHello(); // Works

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

// Output 
// Hello!

This happens because function declarations are fully hoisted to the top of their scope during the creation phase of execution.

Note that function expression are not hoisted

sayHi(); // Error

const sayHi = function () {
  console.log("Hi!");
};

// Output Error
// sayHi is not defined

Conclusion

Functions are one of the most important building blocks in JavaScript. They allow us to write reusable and maintainable code.

Practice Assignment: Try Yourself

Practice Assignment

Write a function declaration that multiplies two numbers.

Example:

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

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

Write the same logic using a function expression.

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

console.log(multiplyNumbers(4, 5));

Promises: Every CID Case Has a Status

A Promise is a special JavaScript object that represents something that will happen in the future.

In JavaScript, sometimes we need to perform a task that takes time to complete. However, we don’t want to freeze the normal flow of execution because that would make the user experience slow and unresponsive. JavaScript solves this using its asynchronous features (for example, fetching API data through a network request in the browser).

Promises help us achieve this. Since the final result is not immediately available, JavaScript returns a Promise rather than the final value.

A Promise has three states:

• Pending – In this state, the Promise internal operation is not completed.

• Resolved (Fulfilled) – The task completed successfully.

• Rejected – The task failed; this throws errors.

Just like in CID, a case may be pending, may be solved, or may remain unsolved.

Why do we need Promises (History)

Before ECMAScript 2015 (ES6) introduced native Promises, JavaScript handled asynchronous programming entirely through callbacks. A callback is simply a function passed to another function that is executed later when a task finishes.

Imagine a new case arrives at the CID bureau. ACP Pradyuman assigns Abhijeet to investigate. Abhijeet says he will proceed only after Freddy checks the CCTV footage. Freddy says he can check the footage only after the technician restores the system. The technician says he will fix the system after receiving approval from another department.

So here the problem is that no one can proceed if the other person does not complete their task first. Everything is connected like a chain. Before asynchronous JavaScript, if we needed this behavior, the code would become complicated and verbose.

function assignCaseCB(caseName, cb) {
  setTimeout(() => cb(null, { caseName, status: "assigned by ACP" }), 100);
}

function investigateCaseCB(caseDetails, cb) {
  setTimeout(() => cb(null, { ...caseDetails, status: "investigating by Abhijeet" }), 100);
}

function checkCCTVCB(caseDetails, cb) {
  setTimeout(() => cb(null, { ...caseDetails, status: "CCTV checked by Freddy" }), 100);
}

function restoreSystemCB(caseDetails, cb) {
  setTimeout(() => cb(null, { ...caseDetails, status: "system restored by Technician" }), 100);
}

function approveCaseCB(caseDetails, cb) {
  setTimeout(() => cb(null, { ...caseDetails, status: "approved and ready to proceed" }), 100);
}

assignCaseCB("Bank Robbery", (err, caseDetails) => {
  if (err) return console.log(err);

  investigateCaseCB(caseDetails, (err, caseDetails) => {
    if (err) return console.log(err);

    checkCCTVCB(caseDetails, (err, caseDetails) => {
      if (err) return console.log(err);

      restoreSystemCB(caseDetails, (err, caseDetails) => {
        if (err) return console.log(err);

        approveCaseCB(caseDetails, (err, caseDetails) => {
          if (err) return console.log(err);

          console.log(`\({caseDetails.caseName}: \){caseDetails.status}`);
        });
      });
    });
  });
});

As you can see here, the code is barely understandable. Also, if any phase throws an error, troubleshooting the problem becomes another hard challenge.

How to write promises in JavaScript

In JavaScript, we create a Promise using an Promise object, which takes a callback function. This callback function receives two parameters: resolve and reject. Inside the Promise, we call resolve() when the task is successful and reject() when an error occurs.

Syntax

let res=true;
let promise = new Promise((res, rej) => {
  setTimeout(() => {
    if(res) res("Promise is resolved");
    rej(new Error("Promise is rejected"));
  }, 2000);
});

As you can see in the above example, there is a resource variable set to true. On the next line, we create a Promise with a callback that contains resolve and reject. Inside the callback, we use setTimeout(), and if resource is true, we resolve the Promise; otherwise, we reject it after a delay of 2000 milliseconds.

To consume this promise, we have then() and catch().

To understand then() and catch(), We can think of it like this: when a Promise is created, it acts like ACP Pradyuman, who says, “We always deliver justice.” Then we have Abhijeet, who represents then(), and Daya, who represents catch().

In this situation, Abhijeet receives the criminal caught by ACP Pradyuman (the resolved value of the Promise). Abhijeet tries to calmly extract the truth from the criminal. If he is not able to find the truth, the case is passed to Daya — and we all know how Daya handles things.

Similarly, in JavaScript, when a Promise is resolved, then() takes a callback function and receives the resolved value. If the Promise is rejected and throws an error, it can also be handled inside then() because then() accepts a second callback for errors. However, nowadays, we usually use catch() (our Daya) to handle errors.

promise.then(
  (data) => console.log(data),
  (err) => console.log(err.message),
); // Note that then can handle the error also

promise
  .then((data) => data.toUpperCase())
  .then(console.log) // we can chain .then() for process the value
  .catch((err) => console.log(err.message));

As we can see here, the syntax is much cleaner and less verbose compared to the older callback chaining approach. Also, we have better control over how we operate on data, and error handling and troubleshooting become much easier.

Event Chain .then(): Error propagation

If we write a Promise and consume it using then(), we can chain multiple .then() Methods to process data step by step. However, if the Promise gets rejected, the error is automatically passed to the next .then(). If the error is not handled there, it continues to propagate down the chain until it reaches a .catch() block that properly handles the error.

Event Loop: Case Priority.

To understand the Event Loop, it is very important to first understand the execution flow of normal code and Promises.

In CID, when the team goes to a criminal’s house to catch him, normal inspectors like Abhijeet and Freddy try to find a way to enter, such as breaking a glass window, because the house is locked. But if Daya suddenly arrives at the scene, we all know what happens — he breaks down the door immediately with high priority and gets the job done.

In JavaScript, something similar happens. We have synchronous code that runs on the Call Stack with the highest priority. Then we have the Microtask Queue, which has the second-highest priority, and finally the Macrotask Queue, which has lower priority.

• Call Stack: Where synchronous code executes sequentially.

• Macrotask Queue: Holds callbacks originating from setTimeout, setInterval etc.

• Microtask Queue: It holds Promises.

Priority Order is CallStack > Microtask > Macrotask

The Event Loop is responsible for executing tasks. It decides which code should be executed at a given time and manages the overall flow of execution.

Flow Diagram of Event Loop

console.log("1 Case Registered (Synchronous - Call Stack)");

setTimeout(() => {
  console.log("2 Macrotask: setTimeout executed");
}, 0);

Promise.resolve().then(() => {
  console.log("3 Microtask: Promise resolved");
});

console.log("4 Investigation Started (Synchronous - Call Stack)");

/* Output
1 Case Registered (Synchronous - Call Stack)
4 Investigation Started (Synchronous - Call Stack)
3 Microtask: Promise resolved
2 Macrotask: setTimeout executed
*/

All Promise Static Methods

To understand the static methods easily, let’s take the CID case example again. Assume the CID team is trying to solve a case, and ACP sir assigns three officers — Abhijeet, Freddy, and Daya — to catch the criminal.

Now, let’s discuss all the available JavaScript static methods we have for Promises.

• All()

• Any()

• AllSettled()

• Race()

• Resolve()

• Reject()

These are the most used ones.

All() Method

Assume it like a CID investigation where officers go on a mission. Three officers are assigned to catch three criminals together. If any one of them fails to catch their criminal, the entire mission fails.

Promise.all() JavaScript works in a similar way. It receives multiple promises as an array, and if all the promises are successful, it returns all their results. However, if even one promise fails, it immediately rejects everything.

const officer1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal 1 caught"), 1000);
});

const officer2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal 2 caught"), 1500);
});

const officer3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal 3 caught"), 2000);
});

Promise.all([officer1, officer2, officer3])
  .then((results) => {
    console.log("Mission Success");
    console.log(results);
  })
  .catch((error) => {
    console.log("Mission Failed");
    console.log(error);
  });

/* Output
Mission Success
[ 'Criminal 1 caught', 'Criminal 2 caught', 'Criminal 3 caught' ]
*/

Any() Method

Here, the scenario changes a little. Now, all three officers go to catch three criminals. However, if even one officer successfully catches a criminal, that criminal is brought to ACP, sir. After interrogation, they reveal the locations of the other criminals, and the overall mission is considered a success.

In JavaScript, this works similarly to Promise.any(). It receives an array of promises, and if at least one of them is successfully resolved, the whole Promise is resolved. It only rejects if all the promises fail.

const officer1 = new Promise((resolve, reject) => {
  setTimeout(() => reject("Officer 1 failed"), 1000);
});

const officer2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal caught by Officer 2"), 1500);
});

const officer3 = new Promise((resolve, reject) => {
  setTimeout(() => reject("Officer 3 failed"), 2000);
});

Promise.any([officer1, officer2, officer3])
  .then((result) => {
    console.log("Mission Success");
    console.log(result);
  })
  .catch((error) => {
    console.log("Mission Failed");
    console.log(error);
  });
/* Output
Mission Success
*/

Race() Method

In this scenario, all three officers try to catch the criminal, but whoever catches the criminal first hands them over to ACP Sir, and the mission is considered successful.

In JavaScript, Promise.race() settles as soon as the first Promise settles (either resolves or rejects).

const officer1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal caught by Officer 1"), 2000);
});

const officer2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal caught by Officer 2"), 1000);
});

const officer3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Criminal caught by Officer 3"), 3000);
});

Promise.race([officer1, officer2, officer3])
  .then((result) => {
    console.log("Mission Result:");
    console.log(result);
  })
  .catch((error) => {
    console.log("Mission Failed:");
    console.log(error);
  });

/* Output
Mission Success
Criminal caught by Officer 2
*/

allSettled() Method

In this scenario, ACP Sir gives strict instructions to all three officers that, whether the mission fails or succeeds, he wants a full and final report. So, whether the officers catch the criminal or not, they must report back to ACP sir. In the end, ACP Sir receives the complete report from everyone.

In JavaScript, Promise.allSettled() works in a similar way. It returns the detailed result of all the promises it receives as parameters, whether they are fulfilled or rejected.

const officer1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Officer 1 caught the criminal"), 1000);
});

const officer2 = new Promise((resolve, reject) => {
  setTimeout(() => reject("Officer 2 failed"), 1500);
});

const officer3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Officer 3 caught the criminal"), 2000);
});

Promise.allSettled([officer1, officer2, officer3])
  .then((results) => {
    console.log("Final Report:");
    console.log(results);
  });

/* Output
Final Report:
[
  { status: 'fulfilled', value: 'Officer 1 caught the criminal' },
  { status: 'rejected', reason: 'Officer 2 failed' },
  { status: 'fulfilled', value: 'Officer 3 caught the criminal' }
]    
/*

Promise.resolve()

Promise.resolve() creates a Promise that is already fulfilled. It does not wait for anything and immediately returns a successful result.

To understand this, imagine a criminal who thinks his plan is perfect and that no one will catch him, but CID has already gathered all the evidence against him. This means the case is already solved.

const caseStatus = Promise.resolve("Case already solved. Criminal arrested.");

caseStatus.then((message) => {
  console.log(message);
});
// Output Case already solved. Criminal arrested.

Promise.reject()

Promise.reject() creates a Promise that is already rejected. It immediately returns a failed result without waiting for anything.

To understand this, imagine a situation where ACP Sir receives confirmed information that the criminal has escaped before the team even starts the mission. The case fails instantly — no investigation is needed.

const caseStatus = Promise.reject("Mission failed. Criminal escaped.");

caseStatus
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.log(error);
  });
// Output Mission failed. Criminal escaped.

Conclusion

JavaScript Promises make asynchronous programming more structured, organized, and easy to understand. Just like CID sir’s investigation, every task has its own status, priority, and execution flow. We don’t need to mess around with deeply nested callbacks because Promises make asynchronous programming more readable, clean, and organized.

We can handle both the success and failure scenarios of the asynchronous task with the help of the then() and catch() methods, respectively. We know that the Event Loop is the main component that makes JavaScript handle asynchronous programming with the help of the Call Stack, Microtask Queue, and Macrotask Queue, giving us priority for the asynchronous task execution. And with the static methods like Promise.all(), Promise.any(), Promise.race(), Promise.allSettled(), we can easily handle multiple asynchronous task executions.

In simple words, Promises make JavaScript handle asynchronous programming like ACP sir handling different officers during the mission execution, i.e., with priority, order, and results.

As long as we know the Promises, JavaScript’s asynchronous programming is not confusing anymore, but it becomes more organized, structured, and powerful.

Control Flow

In JavaScript, the primary control flow statements are:

• if

• if...else

• if...else if...else

• switch

All of this control flow block mostly operates on conditions, except the switch block. In JavaScript condition may be truthy and falsy. Many beginners don't know the range of falsy and truthy values.

In JavaScript, there are only 6 falsy values, and everything else is truthy.

• false (the boolean primitive)

• 0, -0, and 0n (zero, negative zero, and BigInt zero)

• "", '', (an empty string)

• null

• undefined

• NaN (Not-a-Number)

Now, let's understand all the Control Flow blocks one by one

If Block

When we try to run some specific code block if a particular condition is true, in that case we have an if-block to achieve this. Assume it like the gateman of an office, if you have a valid id card, then only you are allowed to enter the premises.

Note: this condition should be evaluated into boolean.

if(condition){
    // Your code that you want to run on particular condition
}

Example: Checking Age

let age = 20;

if (age >= 18) {
  console.log("You are eligible to vote.");
// This code only runs if age is greater or equal to 18
}

If-else block

An if-else block is like an extra edition in an if block. In this block, if part works as expected, it means if you wrap some code or logic inside an if block that runs when the condition is true, but if that condition is false, then the code or logic wrapped around the else block executes.

Syntax

if(condition){
    console.log("Condition is true")// this runs if the condition is true
}
else{
    console.log("Condition is false") // this runs if the condition is false
}

Example 1

If we take an example, then think like an HR receives your resume, and wants to sort it based on your CGPA for the next round of interview, if your CGPA from the previous degree is greater than 8.5, then you are allowed to continue the interview process, else not.

function HR_analyse(candidateName,CGPA){
    if(CGPA >=8.5){
        console.log(`${candidateName} is allowed for interview round`)
    }
    else {
        console.log(`${candidateName} is not allowed for interview round`)
    }
}
let candidateName="Akash"
let cgpa=8.5
HR_analyse(candidateName,cgpa)
// Output 
// Akash is allowed for interview round

Example 2

Let's you have a marks and you want to tell the student pass or fail.

let marks = 40;

if (marks >= 50) {
  console.log("Pass");
} else {
  console.log("Fail");
}
// here if the marks is greater equal to 50 then it gives pass else fail

Let’s understand the code flow briefly:

• The value of marks is 40.

• The program checks whether marks >= 50.

• Since 40 is less than 50, the condition is false.

• The if block is skipped.

• Control moves to the else block.

• "Fail" is printed.

If-else-If ladder

In some cases, only an if-else block is not enough to solve the decision-making process, like if we need to take a chain of decisions in those cases, we can use if-else-if a ladder.

Syntax

if (condition1){
    // if condition1 is true it's executes this part of code
}
else if (condition2){
    // if condition 1 if false and condition 2 is true then this part executes
}
else if( condition3){
    // if all avobe condition is false and this condition3 is true this code will execute.
}
else{
    // if none of the avobe condition is true then this code will execute.
}

Example 1

For example, imagine someone gives you a task to build a system that calculates a student’s grade based on their marks. The system should follow specific rules:

• If the student scores more than 90, they receive Grade A.

• If the marks are more than 70 but less than or equal to 90, they receive Grade B.

• If the marks are more than 50 but less than or equal to 70, they receive Grade C.

• If the marks are more than 40 but less than or equal to 50, the student simply passes.

• If the marks are 40 or below, the student fails.

function getGrade(marks) {
    // Validate input range
    if (marks < 0 || marks > 100) {
        return "Invalid Marks";
    }

    if (marks > 90) {
        return "Grade A";
    } else if (marks > 70) {
        return "Grade B";
    } else if (marks > 50) {
        return "Grade C";
    } else if (marks > 40) {
        return "Pass";
    } else {
        return "Fail";
    }
}

// Examples
console.log(getGrade(75));   // Grade B
console.log(getGrade(101));  // Invalid Marks
console.log(getGrade(-5));   // Invalid Marks

As you can see, above we write a function getGrade which take marks parameter, and internally it checks which grade should be returned based on if else if ladder condition.

Let's try to understand the flow of the above code

1. First, the if block checks whether the mark is valid or not.

2. Then it checks the if-else-if ladder and returns the appropriate value based on which condition is true.

Note: In an if-else-if ladder, many beginner made mistake here to put conditions, because if we change the order of conditions, it may return unexpected results. For example

function getGrade(marks) {
    // Validate input range
    if (marks < 0 || marks > 100) {
        return "Invalid Marks";
    }

    if (marks > 70) {
        return "Grade B"; // here I swap the condition of 90 and 70
    } else if (marks > 90) {
        return "Grade A"; 
    } else if (marks > 50) {
        return "Grade C";
    } else if (marks > 40) {
        return "Pass";
    } else {
        return "Fail";
    }
}

// Examples
console.log(getGrade(90));   // Grade B 
console.log(getGrade(101));  // Invalid Marks
console.log(getGrade(-5));   // Invalid Marks

Let’s understand step by step:

• Suppose marks = 95

• The program first checks: marks > 70 which always evaluated True

• Since this condition is true, it immediately returns "Grade B"

• The next condition marks > 90 is never checked

Switch Case

Switch cases are also another control flow block to make logical but simpler use cases, where you know the condition you received is predefined. Instead of an if-else block received condition may be anything; in a switch, it should be predefined.

Syntax

switch(expression) {
    case value1:
        // Code to execute if expression === value1
        break;

    case value2:
        // Code to execute if expression === value2
        break;

    default:
        // Code to execute if none of the cases match
}

Important Points

• switch compares values using strict comparison (===).

• break is very important. without break, it executes all the conditions one by one. If there is a case suppose the case 1 matches, and you do something in that and break, then the control flow of the code exited form the switch block.

• In the switch block, we have a default, which is like an else block in if else block. If none of the avobe condition is true default will run in that case. Default is optional but recommended.

Example 1: Day of the Week

let day = 3;

switch (day) {
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    case 3:
        console.log("Wednesday");
        break;
    case 4:
        console.log("Thursday");
        break;
    case 5:
        console.log("Friday");
        break;
    default:
        console.log("Invalid day");
}

Flow Explanation

• The value of day is 3.

• The switch compares it with each case.

• When it matches case 3, it prints "Wednesday".

• break stops further execution.

Example 2: Simple Calculator

function calculator(num1, num2, operator) {
    switch (operator) {
        case "+":
            return num1 + num2;
        case "-":
            return num1 - num2;
        case "*":
            return num1 * num2;
        case "/":
            return num1 / num2;
        default:
            return "Invalid Operator";
    }
}

console.log(calculator(10, 5, "+")); // 15
// Here, switch works perfectly because we are matching exact operator values.

Here, the switch works because we are basically checking the exact operation we want to perform, so here we can observe that operations are predefined and well known, so using a switch case block makes sense here.

When to Use switch vs if-else

Use if-else when:

• You are checking ranges (marks > 90)

• You are checking multiple conditions

• Conditions are complex (logical operators like &&, ||)

• Comparisons are not simple equality

Use switch when:

• You are comparing one variable to multiple exact values

• Conditions are simple equality checks

• You want cleaner and more readable code

Conclusion

These control flows are more useful when you are trying to build robust software. For example, if we have some wrote some logic to check whether the user is authenticated or not.

function isAuth(user) {
    // Defensive check: if user is null, undefined, or falsy
    if (!user) {
        console.log("No user provided");
        return;
    }

    // Check if email exists
    if (!user?.email) {
        throw new Error("Email does not exist");
    }

    console.log("Authenticated");
}

If you want to learn this in a better way, I suggest trying these questions by yourself to gain more control over those control flow blocks.

A few questions to try

1. ATM Withdrawal Checker

Build a function that checks whether a user can withdraw money from their bank account.

• If the withdrawal amount is greater than the balance, show "Insufficient Balance".

• If the amount is less than or equal to the balance, show "Transaction Successful".

• If the amount is negative or zero, return "Invalid Amount".

2. Temperature Advisor

Create a program that suggests clothing based on temperature.

• If the temperature is above 30°C, "Wear light clothes".

• If the temperature is between 20°C and 30°C, "Weather is pleasant".

• If the temperature is below 20°C, "Wear warm clothes".

3. Login Attempt System

Build a system that checks login attempts.

• If attempts are less than 3, "Login allowed".

• If attempts equal 3, "Last attempt remaining".

• If attempts are more than 3, "Account locked".

4. Online Shopping Discount

Create a function that applies a discount based on order amount.

• If the order amount is greater than $200, then 20% discount.

• If greater than $100, then 10% discount.

• Otherwise, no discount.

If you try to solve this manually, then definitely, if control over the control flow is much stronger.

1. Normal Function

2. Arrow Function

In this article, we are going to see what the use cases of arrow functions are, and why they make much more sense than the normal function.

Tradition Function

In JavaScript, writing a function involves first using the keyword "function," then providing a name for the function. If parameters are needed, they are placed within parentheses. The code logic of the function is then written inside the block.

function func_name(paramenter1, parameter2){
    // You Can write function logic here
    console.log(parameter1,parameter2);
}

Let's take a practical example of a function to observe things more clearly.

function isVote(age){
    if(!Number.isInteger(age)) return false;
    if(age>17) return true;
    return false;
}

In this function, we are just checking whether a user is able to vote or not based on the user's age.

Arrow Function

As we can see in the traditional way of writing a function, the code look little bit verbose, and for a simple task, it may look overwhelming. To fix, we can use an arrow function.

Syntax

const func1=(parameter1,paramenter2)=> {
    // our code logic should be here
} 

Now, for better understanding, try to convert our old isVote function into an arrow function.

const isVote=(age)=> age>17?true:false
// or we can use 
const isVote=(age)=> (age>17?true:false) // both are valid
// if we not use {} and our task done in single line it automatically return the value. Implicit Return

Now, what we can observe from this, it is actually less verbose unlike tradition function. And here, for a simple task, we don't need to do many things.

Let's take another example.

const isValidVoter(name,age)=>{
    if(typeof name!=="string" && age>17) return true;
    else return false;
}
// Note when we use {} we it is our responsibilty to return stuff. This is explicit return.

More Use Cases

If you have an array with a few items, you can use an arrow function in map and filter to do some operation on them.

1. Map()

let arr=[1,2,3,4,5]
let multiOf2=arr.map((item)=>item*2)
// Output
// [2, 4, 6, 8, 10]

1. Filter()

let fruits = ["Apple", "Orange", "Pineapple", "Mango"];

let fruitStartWithA = fruits.filter(
  (item) => item.charAt(0).toLowerCase() === "a"
);

console.log(fruitStartWithA);
// Output
// ['Apple']

Differences between Normal Function and Arrow Function

Arguments

• Normal function → has its own arguments.

• Arrow function → does NOT have arguments.
  It borrows from the outer scope.

function func1() {
  console.log("function 1", arguments);
} // Normal Function
const func2 = () => {
  console.log("function 2", arguments);
}; // Arrow Function
func1(); // Calling the Normal Function
func2(); // Calling the Arrow Function 

// normal function → empty [Arguments] {}
// Arrow → borrowed Node wrapper arguments (exports, require, etc.)

Constructor

In normal function, we can create a Constructor function and use the new keyword to create multiple objects of that Constructor, these are known as a constructor function.

Normal Function Example

function TataCar(chassisNumber, modelName) {
  
  this.chassisNumber = chassisNumber;
  
  this.modelName = modelName;
  this.fuelLevel = 100;
  
}
// Polyfill
TataCar.prototype.status = function () {
  return `Tata \({this.modelName} #\){this.chassisNumber} | Fuel: ${this.fuelLevel}`;
};

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");

console.log(car1.modelName);
console.log(car2.modelName);
console.log(car1.status());
console.log(car2.status());

// Output 
// Nexon
// Harrier
// Tata Nexon #MH-101 | Fuel: 100
// Tata Harrier #DL-202 | Fuel: 100

Arrow Function Example

const TataCar = (chassisNumber, modelName) => {
  chassisNumber = chassisNumber;

  modelName = modelName;
  fuelLevel = 100;
  status = function () {
    return `Tata \({this.modelName} #\){this.chassisNumber} | Fuel: ${this.fuelLevel}`;
  };
};

const car1 = new TataCar("MH-101", "Nexon");
const car2 = new TataCar("DL-202", "Harrier");

console.log(car1.modelName);
console.log(car2.modelName);
console.log(car1.status());
console.log(car2.status());
// This throws an error 
// const car1 = new TataCar("MH-101", "Nexon");
// TypeError: TataCar is not a constructor

Use of "This"

Normal Function and this

In a normal function:

this depends on how the function is called.

Example 1: Global Call

function normalFuncThis() {
  return [this, typeof this];
}

console.log(normalFuncThis());
// Output 
// [Window, "object"]
// Output in Node environment Strict Mode
// [ undefined, 'undefined' ]

Example 2: Method Call

const obj = {
  a: 10,
  normal() {
    return this.a;
  },
};

console.log(obj.normal()); //this = obj
// Output 
// 10

Arrow Function and this

Arrow functions do not create their own this. They capture this from where they are defined (lexical scope).

Example 1

const obj = {
  a: 10,
  arrow: () => {
    return this.a;
  },
};

console.log(obj.arrow());
// Output
// undefined

Arrow function can't borrow this form from the object. It only borrows this to its lexical parent scope

Example 2

const obj = {
  a: 10,
  method1() {
    const func1 = () => {
      return this.a;
    };
    return func1();
  },
};

console.log(obj.method1());
// Output
// This

Example 3

const filmSet = {
  crew: "Spot boys",
  prepareProps() {
    console.log(`Outer this.crew: ${this.crew}`);

    function arrangeChairs() {
      console.log(`Inner this.crew: ${this.crew}`);
    }
    arrangeChairs();

    const arrangeLights = () => {
      console.log(`Arrow this.crew: ${this.crew}`);
    };
    arrangeLights();
  },
};

filmSet.prepareProps();
// Output 
// Outer this.crew: Spot boys
// Inner this.crew: undefined
// Arrow this.crew: Spot boys

So let's try to understand the behaviour of the above code

Calling prepareProps()

• here the this == flimSet

• here prepareProps() is a normal method, so it has access to this, which is flimSet crew: "spot boys"

• Output: Outer this.crew: Spot boys

Calling arrangeChairs()

• arrangeCharis() is a normal method again, but it is inside the prepareProps(). Normal methods has there own this, so here this !== flimSet

• Not called as a method of filmSet

• In strict mode → this = undefined

• In a non-strict browser → this = window

• Output Inner this.crew: undefined

Inside arrangeLights() (Arrow Function)

• Arrow functions do not create their own this

• They capture this from the parent lexical scope

• Defined inside prepareProps()

• And there this = filmSet

• Output: Arrow this.crew: Spot boys

Conclusion:

In JavaScript, the arrow function at the beginning may feel overwhelming. To understand the concept of arrow function, you should always run this code in both the browser console and node environment so you can understand its behavior.

Arrays are one of the most critical concepts in JavaScript. In almost every project, we use arrays to store and manage data.

In this article, we will discuss the most frequently used JavaScript array methods that every developer should know before starting serious coding. These methods will help you write cleaner, shorter, and more efficient code instead of using long and complex loops.

Commonly used array methods

Method 1: Push()

push() is an array method used to add one or more elements to the end of an array. Need to know that this actually modifies the array. push() Returns the length of the newly made array, not the array itself.

The flow is like first it goes to the last index, then it inserts the new value there at the length position, after increasing the array length. Finally, it returns the updated length.

Basic Syntax

arr1.push(element1, element2, ..., elementN);

const numbers = [1, 2, 3];

const newLength = numbers.push(4);

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

Method 2: Pop()

pop() is an array method used to remove the last element from an array. It also modifies the original array. pop() Returns the removed element. If the array is empty, it returns undefined.

The flow is like this - JavaScript finds the last index. It stores that value. It reduces the array. It returns the removed value.

Basic Syntax

array.pop()

const numbers = [1, 2, 3];

const removed = numbers.pop();

console.log(numbers); // [1, 2]
console.log(removed); // 3
/*
Here:
3 is removed from the end
The original array changes
The return value is the removed element
*/

Method 3: Shift()

shift() is an array method used to remove the first element from an array. It modifies the original array and returns the removed element.
If the array is empty, it returns undefined.

The flow of shifts is like - JavaScript stores the value at the index 0 Then it shifts all remaining elements one position to the left. It decreases the array length by 1. It returns the removed value.

Basic Syntax

array.shift()

Example

const numbers = [10, 20, 30];

const removed = numbers.shift();

console.log(numbers); // [20, 30]
console.log(removed); // 10
// Here:
// 10 is removed from the beginning.
// The original array changes.
// The return value is the removed element.

Method 5: Unshift()

unshift() is an array method used to add one or more elements to the beginning of an array. It modifies the original array and returns the new length of the array.

Step-by-step:

• JavaScript shifts all existing elements one position to the right.

• It inserts the new value(s) at the index 0.

• It increases the array length.

• It returns the updated length.

Basic Syntax

array.unshift(element1, element2, ..., elementN)

Example

const numbers = [20, 30];

const newLength = numbers.unshift(10);

console.log(numbers);   // [10, 20, 30]
console.log(newLength); // 3

// Here:
// 10 is added at the beginning.
// The original array changes.
// The return value is the new length.

Method 6: Filter()

filter() is an array method used to select specific elements from an array based on a condition. It runs a function on every element and returns a new array containing only the elements that pass the test.

Note: filter() does NOT modify the original array.

Step-by-step:

• JavaScript loops through each element.

• It runs the callback function.

• If the function returns true, the element is added to a new array.

• If it returns false, the element is skipped.

• Finally, it returns the new filtered array.

Basic Syntax

array.filter(callback(currentValue, index, array), thisArg)

Example 1

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

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

console.log(evenNumbers); // [2, 4, 6]
console.log(numbers);     // [1, 2, 3, 4, 5, 6] (unchanged)
// Here:
// The condition checks if a number is even.
// Only numbers that return true are included.
// The original array stays the same

What Arguments Does filter() Take?

The callback receives 3 arguments:

• currentValue → current element

• index → current index

• array → full array

const nums = [10, 20, 30];

nums.filter(function(value, index, array) {
  console.log(value, index, array);
  return value > 15;
});

// Output:
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]

Example 2: Filter an Array of Objects

const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 },
  { name: "Amit", age: 18 }
];

const adults = users.filter(user => user.age >= 21);

console.log(adults);
// [
//   { name: "Pallab", age: 22 },
//   { name: "Rahul", age: 25 }
// ]

Method 1: Map()

map() is an array method in JavaScript. Takes an array, runs a function on each element, and returns a new array with modified values

Note: It does NOT change the original array.

Sample Code

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

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

console.log(doubled); // [2, 4, 6, 8]
// For better understading always run the code in console

What Arguments Does map() Take?

Syntax:

array.map(callback(currentValue, index, array), thisArg)

callback

This callback means a function that runs for every element.

It receives 3 arguments:

1. currentValue: means for that iteration, what is the array element.

2. index: this is the currentValue index.

3. array: it is the whole array.

const nums = [10, 20, 30];

nums.map(function(value, index, array) {
  console.log(value, index, array);
});

// Output 
// 10 0 [10, 20, 30]
// 20 1 [10, 20, 30]
// 30 2 [10, 20, 30]

thisArg

It is used to set this value on the callback.

const obj = {
  multiplier: 3
};

const nums = [1, 2, 3];

const result = nums.map(function(num) {
  return num * this.multiplier;
}, obj);

console.log(result); // [3, 6, 9]

You can Map() array of objects

const users = [
  { name: "Pallab", age: 22 },
  { name: "Rahul", age: 25 }
];

const names = users.map(user => user.name);
// ["Pallab", "Rahul"]

Method 7: reduce()

reduce() is an array method used to combine all elements into a single value.

That single value can be:

• A number (sum, total)

• A string

• An object

• Another array

It does not modify the original array.

Basic Syntax

array.reduce(callback(accumulator, currentValue), initialValue)

Important Terms

• accumulator → stores the running result

• currentValue → current element in the loop

• initialValue → starting value (recommended to always provide)

Example 1: Sum of Numbers

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

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

console.log(total); // 10

Step idea:

• 0 + 1 = 1

• 1 + 2 = 3

• 3 + 3 = 6

• 6 + 4 = 10

Final result → 10

When Do We Use reduce()?

• Total price calculation

• Counting items

• Grouping data

• Flattening arrays

Think of reduce() as:

"Take everything and turn it into one final value."

Method 8: forEach()

forEach() is an array method used to loop through each element of an array.

It runs a function for every element.

Important:

• It does not return anything (returns undefined)

• It does not create a new array

It is mainly used for:

• Printing values

• Updating something

• Running side effects

Basic Syntax

array.forEach(callback(currentValue, index, array))

Example

const numbers = [10, 20, 30];

numbers.forEach(function(num, index) {
  console.log("Index:", index, "Value:", num);
});

Output:

Index: 0 Value: 10
Index: 1 Value: 20
Index: 2 Value: 30

Now The question is, if we have a for loop, then why Map() and Filter()?

forEach()

forEach() is used to loop through every element of an array and perform an action.

• It does not return a new array

• It is used when you just want to do something with each item

• It cannot break or stop early (unlike a normal for loop)

Important Difference

• for → full control (break, continue, manual index)

• map → transform and return a new array

• filter → select some elements

• forEach → just run code for each element (no return)

Conclution

Array methods help you write clean, efficient, and professional JavaScript.
Use the right method for the right task, and your code becomes simpler, more readable, and easier to maintain.

1. How a browser works

Introduction

We all know that on a website, there are mainly 3 thing exists

1. HTML (Hyper Text Markup Language)

2. CSS ( Cascading Style Sheet)

3. JavaScript

HTML is responsible for the structure of a website, CSS gives the styling of that structure, but JavaScript usually gives the functionallity part to it.

History of JavaScript

JavaScript was created in May 1995 by Brendan Eich at Netscape to make websites interactive. Originally named Mocha and then LiveScript, it was renamed JavaScript in December 1995 to ride the popularity of Java. It was designed as a lightweight scripting language for client-side web development and was quickly built into the Netscape Navigator browser.

In 1996, JavaScript was submitted to ECMA International, leading to the standardized ECMAScript specification, with ECMAScript 1 released in 1997. During the late 1990s, browser competition caused compatibility issues, but the language continued evolving. ECMAScript 3 (1998) introduced key features like regular expressions and error handling.

Around 1997, JavaScript became central to Dynamic HTML (DHTML), combining HTML, CSS, and JavaScript to create interactive pages without reloading—laying the foundation for modern web applications.

JavaScript and Factory

To understand the internal workings of JavaScript, let's take an example of a Wood Factory. We all know some kind of factory where furniture are build up. Let's try to understand their process, what are the step they follow to build furniture?

Step 1: Preparing the Wood

We know that there are many kinds of wood available in the market.
1. Deodar Wood
2. Sheesham
3. Sal Wood

Each wood has a few pros and cons like this

Deodar Wood: Lightweight, aromatic, and insect-resistant, but softer and less durable for heavy furniture.

Sheesham: Strong, long-lasting hardwood with beautiful grain, but heavy and relatively expensive.

Sal Wood: Extremely tough and rot-resistant construction wood, but very heavy and hard to work with.
So the point is, if we know which wood will serve our purpose, our upcoming work become more easy.

Step 2: Cutting The Wood

Once the wood enters the factory, each factory has a few sections to solve specific tasks. Like a furniture factory, after it receives the wood, it should cut it based on the requirements.

Step 3: Framing the Wood

Once the wood is cut into peices it should be send the the next segment of the factory where each peice combined to build the final furntiure

Step 4: Polishing & QA

In this step, polishing and quality assurance are checked on the final furniture.

The Manager (Ji)

In a furniture factory, a manager controls the whole process and keeps all departments connected. Each department tells the manager when they finish their work. For example, if the cutting team finds damaged wood, they inform the manager. The manager decides to send it for repair. After the repair is done, the repair team tells the manager, and the manager tells the cutting team to continue. This system keeps work organized, avoids mistakes, and makes production smooth.

Now let's connect the JavaScript with the Factory.

Datatypes

In a factory, remember the wood, in JavaScript, they are Datatypes. Each datatype has its own capabilities and features. Like wood, here also we need to understand which datatypes do the job for us. Sometimes selecting the perfect datatype also does major role in the final product.

Global Execution Context

This is a fancy name for a factory. Here same like a factory in JS, we have a global execution context. Like a factory, we need some flow, like if a furtinue to be build we need to follow each step. Global execution context is actually the code that is not bind in a function or object. We can say this holds the code that is important to run the factory.

Local Execution Context

This is another fancy name for a department. Like in a factory, we have a cutting department, then framing, and so on. In JS, the Local Execution Context is the function that does the specific job as required.

Space

For Global Execution Context and Local Execution Context, both has thier own space. Each space has 2 parts itself-

1. Execution Thread

2. Memory

For example

# This is an JavaScript code
let n=2
funtion sum(num){
    return num+n;
}
# Here n goes into global execution context memory
# and num goes into local execution context memory

Call Stack

It maintains the function flow. Same as manager ji. It manages all the function calls, and it follows the stack (LIFO) principle.

Conclusion

JavaScript may seem complex internally, but when broken down into concepts like execution contexts, memory, and the call stack, it follows a clear and logical process. Understanding these basics builds a strong foundation that makes learning advanced JavaScript concepts much easier.

In this article, we are going to learn about CSS selectors, why we need selectors, and the meaning and working of CSS. But before starting the CSS journey, if you don’t know HTML, follow the HTML article.

Why we need CSS

As we all know, HTML can provide structure to a web page. But how the webpage should look, how each HTML element should be positioned, everything can’t be managed using HTML only. So we need some kind of rules that can be defined to give html element a proper look and feel with the corresponding position of each HTML element. Here CSS comes into the picture, we can write all rules, then the browser reads those rules and apply accordingly to the elements, and we can see some beautiful UI (User Interface) / UX (User Experience).

Meaning of CSS

CSS stands for Cascading Style Sheets. Let’s try to understand the meaning of each word.

Cascading

If you are going on a vacation with 3 of your friends, and you are the driver, then you rely only on the friend who actually knows the place. So here you have a priority preference. Cascading in CSS also does the same. If multiple CSS rule applied to a single element, CSS decides which one to use based on order and its specific priority. CSS calls this the specificity algorithm.

Style Sheets

It is a file that contains the CSS rules.

Syntax Example

h1 {
    color:red;
}

Different Ways to Write CSS Rules

We have mainly these three ways to write CSS

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS

Here, we write CSS directly into the element within a style attribute

<h1 style="color:red;">Heading</h1>

Selector in CSS

As we all know, in HTML, we have elements, and to apply CSS rules, we have a selector to select those elements. We have multiple selectors in CSS, which are as follows

1. Element Selector

2. Class Selector

3. ID Selector

4. Group Selector

5. Desendent Selector

1) Element Selector

The element selector targets elements by their tag name. It applies the same style to all matching elements on the page.

Example

p {
  color: blue;
  font-size: 18px;
}

<p>Hello, this is a paragraph</p>

Output

Before CSS output

After CSS Output

2) Class Selector

The class selector targets elements that have a specific class attribute. We can reuse classes. A single element can belong to different classes, and a single class can be used in multiple elements.

Example

<p class="highlight fontRed">This is highlighted text</p>
<p>This is normal text</p>

.highlight {
  font-weight: bold;
}
.fontRed {
    color:Red;
}

Before applying CSS output

After CSS output

3) ID Selector

The ID selector targets a single unique element using its id attribute.

Note: ID is unique and can be used only once on a page. One Element only have single ID

Example

<h1 id="main-title">Welcome to My Website</h1>

#main-title {
  color: green;
  text-align: center;
}

Before CSS Output

After CSS Output

Class Vs ID

4) Group Selector

The group selector is used when we want to apply the same CSS rules to multiple selectors at once. We separate selectors using commas.

Example

h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}

  <h1>This is Heading 1</h1>
  <h2>This is Heading 2</h2>
  <p>This is a paragraph text</p>

Before CSS Output

After CSS Output

5) Descendant Selector

The descendant selector targets elements that are inside another element. It is useful when you want to style only elements within a specific section.

Example

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

<p>This paragraph is outside</p>

.card p {
  color: purple;
}

Before CSS output

After CSS Output

How to Use

During the design of a web page, it’s always a good practice to use all of this method with a combination based on your usecase. Assume you can define the same font-family for all heading then you can use the element selector. If you have a few beautiful cards to display processing you can use classes. If you want to change the heading text color which is the main heading of the page, then you can use ID to particularly target that.

Mechanism of Cascading and Specificity Algorithm

Let’s try to understand the Cascading first.

As you can see, we have a heading Specificity Algorithm

<h1>Heading</h1>

Let’s apply some CSS here

h1 {
    text-align:right;
    color:red;
    border: 2px solid blue;

}

As you can see The heading Text color changed to red, and it shifted to the right side.

Here you can see we did some changes to already applied properties, and it successfully take effect as well, and not made are working fine. This is cascading, where priority goes to the order, which means which property at the bottom of the CSS only takes that.

  h1 {
    text-align:right;
    color:red;
    border: 2px solid blue;
  }
  h1{
    text-align:center;
    color:gray;
  }

Now time to understand the Specificity Algorithm

Let’s take a heading which has an ID and a class

<h1 id="color-pink" class="color-blue">Heading</h1>

Now apply some CSS

  #color-pink{
      color:pink;
  }
  .color-blue{
      color:blue;
  }
  h1 {
    color:red;
    border: 2px solid blue;
  }

As you can see in the final output, instead of following the properties order, it always gives ID to the height priority, the class, and then the element selector gets the priority.
The priority Order (High to Low)

1. Inline CSS

2. ID Selector

3. Class Selector

4. Element Selector

List of Most Used Basic CSS Properties

These are the fundamental properties you will use in almost every project.

Text & Fonts

• color: Sets the color of the text (e.g., red, #333).

• font-family: Sets the font type (e.g., Arial, sans-serif).

• font-size: Sets the size of the text (e.g., 16px, 1.2rem).

• font-weight: Sets the thickness of the text (e.g., bold, 400).

• text-align: Aligns text horizontally (e.g., center, left, right).

• line-height: Sets the vertical space between lines of text.

The Box Model (Size & Spacing)

• width / height: Sets the width and height of an element.

• margin: Space outside the border (pushes other elements away).

• padding: Space inside the border (pushes content away from the border).

• border: A line around the element (between margin and padding).

• border-radius: Rounds the corners of the border.

Backgrounds

• background-color: Sets a solid background color.

• background-image: Sets an image as the background.

Layout & Positioning

• display: Determines how an element behaves.

  • block: Takes up the full width (like <div>, <h1>).

  • inline: Takes up only the necessary width (like <span>).

  • flex: Enables Flexbox layout (puts items in a row).

• position: Used for advanced positioning (relative, absolute, fixed).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic CSS Properties</title>
    <style>
        /* 1. Base Styles (Text and Background) */
        body {
            background-color: #f0f2f5; /* Light grey background */
            font-family: Arial, sans-serif;
            color: #333333; /* Dark grey text */
            margin: 0px; /* Reset default browser margin */
        }

        /* 2. Main Container (Layout) */
        .main-container {
            width: 600px;
            margin: 50px auto; /* auto centers the container horizontally */
            background-color: #ffffff;
            border: 1px solid #cccccc; /* Thin grey border */
            padding: 30px; /* Space inside the container */
        }

        /* 3. Header Section (Text Alignment) */
        .header {
            text-align: center;
            border-bottom: 2px solid #eeeeee;
            padding-bottom: 20px;
            margin-bottom: 20px; /* Space below the header */
        }

        .header h1 {
            color: #2c3e50;
            font-size: 28px;
            margin: 0px; /* Remove default margin */
        }

        .header span {
            color: #7f8c8d; /* Lighter text for subtitle */
            font-size: 14px;
        }

        /* 4. Flexbox Layout (Side by Side) */
        .content-box {
            display: flex; /* Makes children (divs) sit in a row */
            gap: 20px; /* Space between the two columns */
        }

        /* 5. Columns */
        .left-column {
            width: 30%;
            background-color: #3498db;
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 8px; /* Rounded corners */
        }

        .right-column {
            width: 70%;
        }

        /* 6. Typography adjustments */
        .right-column h2 {
            font-size: 20px;
            margin-top: 0px;
        }

        .right-column p {
            line-height: 1.6; /* Makes text easier to read */
            font-size: 16px;
        }

        /* 7. Button Style (Static - No Hover) */
        .btn {
            display: inline-block;
            background-color: #27ae60;
            color: white;
            padding: 10px 20px;
            text-decoration: none; /* Removes underline from link */
            border-radius: 5px;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>
<body>

    <div class="main-container">

        <div class="header">
            <h1>Jane Doe</h1>
            <span>Senior Web Developer</span>
        </div>

        <div class="content-box">

            <div class="left-column">
                <strong>Status:</strong><br>
                Active
            </div>

            <div class="right-column">
                <h2>About Me</h2>
                <p>
                    I am a developer learning CSS basics. 
                    I understand how margin, padding, and borders work. 
                    This layout uses a simple flexbox row to put items side by side.
                </p>
                <a class="btn" href="#">Contact Me</a>
            </div>

        </div>

    </div>

</body>
</html>

Output

Conclusion

You don’t need to memorise all CSS properties; CSS is a skill which become strong eventually with practice. When you build 20 or 30 projects using CSS, you willbe able to build an understanding of each property

.

In this article, we are going to have a proper discussion about browsers and how a browser works. That is behind the scenes, how a user types a URL and actually sees the webpage.

What a Browser Actually Is (Beyond “It Opens Websites”)

When we think browser, in our mind first comes something like Chrome or Firefox, we have a URL input box, we type something like google.com, and we see the actual page. But in reality, there is so much happening behind the scenes.

A browser is almost a mini Operating System itself. It downloads web files (HTML/CSS/JS/images), understands them, and turns them into what you see on screen.

A Browser is a Team of Components (Not One Single App)

Assume Browser is a football match. To complete the match successfully, we need multiple players with different roles (Defender, Midfielder, etc.)

The same happened in the browser. It has multiple components for multiple tasks

• downloading files

• understanding HTML

• understanding CSS

• running JavaScript

• drawing pixels on screen

Here is the high-level flow:

Main Parts of a Browser (High-Level Overview)

1. User Interface (UI)

This is what you interact with:

• address bar

• back/forward buttons

• tabs

• bookmark menu

• download bar

2. Browser Engine

This acts like the manager.

It connects UI actions to the rendering engine. If the user types a website URL, the browser sends that request to the rendering engine to display the website to the user.

3. Rendering Engine

This is the most important worker.

It uses HTML and CSS to render (draw**)** the page.

Examples:

• Chromium browsers → Blink rendering engine

• Firefox → Gecko rendering engine

4. Networking

This is the downloader team.

It fetches resources like:

• HTML

• CSS

• JS

• images

• fonts

5. JavaScript Interpreter (JS Engine)

This runs JavaScript.

Example:

• Chromium → V8

• Firefox → SpiderMonkey

This is what makes sites interactive.

6. UI Backend + Disk/Storage

Used for:

• drawing basic UI elements

• saving cache

• cookies

• localStorage

• history

Browser Engine vs Rendering Engine (Simple Distinction)

Many beginners confuse these two. Here’s a very simple rule:

Browser Engine

• connects UI actions to the rendering process

• handles navigation, page load

Rendering Engine

• reads HTML + CSS

• builds the visual output

So, the browser engine decides what to do. The rendering engine builds what you see.

What Happens After You Type a URL and Press Enter?

Step 1: The URL is processed

You type:

studyhex.com

Browser adds protocol if missing:

https://studyhex.com

Step 2: DNS Lookup (Find IP Address)

Websites don’t live on domain names.
They live on IP addresses.

So the browser asks DNS:

“What is the IP of studyhex.com?”

DNS replies:

123.45.67.89 (example)

Step 3: Connection to Server

The browser creates a connection using:

• TCP connection

• TLS handshake (if HTTPS)

Now it can securely talk to the server.

Step 4: HTTP Request Sent

The browser sends a request like:

“Give me the HTML of the homepage.”

Server replies with an HTML file.

4) Networking: How Browser Fetches HTML, CSS, JS

The browser starts downloading:

First: HTML
Then finds inside HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Heading</h1>
    <p>Paragraph</p>
</body>
</html>

Now the browser says:

• “Download index.html”

• “Download style.css.” When it sees the link stylesheet, it goes and downloads that

So the networking part becomes busy.

5) HTML Parsing and DOM Creation

Now the browser has HTML text.
But computers don’t work well with raw text.

So the browser does HTML Parsing.

What is parsing?

Parsing means:

Convert raw text into a structured meaning.

DOM (Document Object Model)

When a browser parses HTML, it creates the DOM Tree.

Example HTML:

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

    <!-- Title -->
    <title>My First HTML Document</title>
  </head>

  <body>
    <!-- H1 -->
    <h1>Welcome to my website</h1>

    <!-- H2 -->
    <h2>This is a sub heading</h2>
  </body>
</html>

DOM tree becomes like:

DOM is like a tree of elements. DOM = HTML converted into a tree structure

6) CSS Parsing and CSSOM Creation

The same thing happens for CSS.

Example CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: #0f172a; 
  color: #f8fafc;   
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

h2 {
  font-size: 1.2rem;
  font-weight: 400;
  color: #cbd5e1; 
}

Browser parses CSS and creates:

CSSOM (CSS Object Model)

CSSOM = CSS converted into a structured model

7) How DOM and CSSOM Come Together

Now we have:

• DOM (structure)

• CSSOM (style rules)

The browser combines them to create:

Render Tree

Render Tree includes only the visible elements.

Example:

• elements like display:none will not be included

So DOM + CSSOM → Render Tree

8) Layout (Reflow): Where Everything Gets Its Position

Now the browser knows:

• What elements exist

• their styles

But still it doesn’t know:

• Where should each element be placed?

• How big should it be?

So it performs:

Layout / Reflow

This calculates:

• position (x, y)

• width and height

• spacing

• alignment

Example:

• “h1 should start at 20px from top”

• “p should be below h1.”

9) Painting: Converting Layout into Pixels

After the layout is done, the browser starts:

Painting

This means:

• background colors

• borders

• text drawing

• images

It paints in layers.

10) Display: Showing the Final Output

Now the browser sends the painted result to:

• the screen display system

• And you finally see the website

Very Basic Idea of Parsing

"10 + 20 * 3 +4 % 3"

Conclusion

As a beginner, you don’t need to memorize every component. Just try to understand the basic flow.

1. URL entered

2. request sent

3. HTML downloaded

4. DOM created

5. CSSOM created

6. Render tree created

7. layout (reflow)

8. paint

9. display

Overview

As you know, to send some data between devices that are connected to the internet, need some kind of rules and regulations to transmit the data. We have these two commonly used internet data transfer protocols.

1. TCP (Transmission Control Protocol)

2. UDP (User Datagram Protocol)

Let’s start by understanding the inner working is layman's terms.

Working of TCP

In TCP, when a client needs some data from the server, we need a connection, and the client does not know whether the connection exists or not. Therefore, when a client wants to send some data, TCP tries to build a strong connection using 3-Way handshaking. This is nothing special, but a smart mechanism. In this mechanism, the client first says “Hey server, I want to talk to you”, if the server gets the data, then the server says “okay, along with I am ready”, and if the client gets “okay”. Then the client sends “okay” to the server again. (Note that this is only the analogy; if you want to know the real thing, follow our TCP Internal article)

Once this connection is established client actually starts sending the data.

Benefits of TCP

1. Due to the smart handshaking, it is reliable.

2. If the client sends some data and does not receive the acknowledgment client starts to retransmit the data

3. TCP maintains the order of data packets by only sending the next data packet after getting an acknowledgment for the previous packet from the server.

4. TCP actually attaches some extra bits of data so that it can handle errors in the data during transmission.

Problems of TCP

1. Everytime clinet need to send some data, it actually creates a strong connection,n which is time-consuming.

2. This is slow.

3. The working of handshaking is confusing for beginners.

Usages

1. Where data reliability matters, TCP is widely preferred to use.

2. Transactional SMS of a bank.

3. Finance management application.

Working of UDP

If you remove the handshaking and the acknowledgement part from TCP, we are actually left with the protocol named UDP.

Benefits of UDP

1. It doesn’t need any connection; due to this, UDP is very fast.

2. It can send data in real time because the speed of data transfer is too high.

Problem of UDP

1. It is not reliable.

2. It doesn’t take the guarantee of successful data transmission.

3. Data may be received in the wrong order.

Usages

1. Where data should be transferred in real time, UDP is preferred to use.

2. Real-time Video calling app

3. Live streaming

HTTP vs TCP

This is a topic where many beginners get confused between HTTP and TCP. TCP provides reliable delivery for any application data (web, mail, file transfer, etc.) in a safe and ordered manner. Whereas HTTP (HyperText Transfer Protocol) is an application-layer protocol used to transfer web resources such as HTML pages, CSS files, images, and JSON data. To send this HTTP data over the internet, HTTP usually runs on top of TCP, and TCP ensures the data is delivered correctly and in order.

Actually, TCP is working on the OSI layer 4 or TCP/IP layer 2. And HTTP is an application-layer protocol. So HTTP runs on top of TCP. It depends on TCP as the transport.

Conclusion

Both TCP and UDP has there one benefit with their own trade-offs. We as users select between these two protocol as your usecase. If reliability and data consistency are our main priority, then TCP is the best. If real-time data transmission is our main focus, reliability is a secondary concern, then UDP is the best.

Before understanding the CURL, we need to understand the Client and Server; on the Internet, most command word is client mean which always want some data from the server. and Server is providing that data to the client.

What is CURL

The curl command in Linux is a command-line tool for transferring data between a system and a server using various network protocols. It is primarily used to fetch web content, test APIs, and send or receive data over the network.

• Supports multiple protocols such as HTTP, HTTPS, FTP, and SCP

• Used to download, upload, and send data from the terminal

• Helpful for testing REST APIs and web services

• Works with headers, authentication, and data formats like JSON

Why programmers need cURL

1. Without having a frontend, a programmer can test the Backend API.

2. Debug backend issues and fix them quickly during creation time.

3. With curl, you hit the API directly:

   • No browser cache

   • No JavaScript

   • No UI bugs

4. This is fast and simple.

Example:

curl example.com

Output

Request and Response

When you run a CURL command, mainly two thing happening in the behind the scenes

1. Request

   In this case, you send a request from the terminal to the server. In this step, you can specify the request method, request header, and most important thing request URL.

2. Response

   In this case server send response, and you can see it on the terminal. This includes Status Code (200, 2001, 301, 404, 500, etc.), Data

CURL command Guide

GET Request

1. To make a simple GET request, just type curl <url> this make a simple GET request.

curl example.com

This command will retrieve the HTML content of the specified URL and display it in the terminal.

2. If you want to save that file in our system, you can use curl options

# curl -o <file_name_as_you_want> <url>
curl -o index.html example.com # -o to save a file. It takes a file name

3. If you want to see the response header, you can use -I option with the curl command

curl -I example.com

As you can see here, the status we get in response is 200, which means a successful request. Also, the Data of the response and Content-Type is HTML, and the server from which the response come form is Cloudflare.

4. If you want to download a file using curl, you can use the capital -O option, which downloads the file; this takes the file's original name from the server.

curl -O https://acrobat.adobe.com/us/en/why-adobe/about-adobe-pdf.html

5. If you want to get a api data, you can use -X, then you can specify the request method, in our case, that is GET for now

curl -X GET https://jsonplaceholder.typicode.com/posts

Output

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
  {
    "userId": 1,
    "id": 4,
    "title": "eum et est occaecati",
    "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
  }...]

Post Request

1. We can also make a post request using -X with the POST method

curl -X POST -d "title=foo&body=bar&userId=1" https://jsonplaceholder.typicode.com/posts

Let’s try to talk with the API

curl -X PATCH -d '{"title":"foo"}' https://jsonplaceholder.typicode.com/posts/1

Using curl, a developer can Test, Debug api endpoint very fast, which improves the speed and rapid development.

Things that a beginner make mistake about curl

CURL just goes through the RAW html and api response; it does not run JavaScript and CSS.
Also beginner don’t use the protocol without currect protocol; curl sometime misbehave.

More Option on curl

Examples of Curl with Options Reference (Source)

Given below are some examples demonstrating the use of the curl command in Linux along with their options.

1. -C - Option:

This option resumes the download that has been stopped due to some reason. This is useful when downloading large files and was interrupted.

Example:

curl -C - -O ftp://speedtest.tele2.net/1MB.zip

Output:

2. -u Option:

curl also provides options to download files from user-authenticated FTP servers.

Syntax:

curl -u {username}:{password} [FTP_URL]

Example:

curl -u demo:password -O ftp://test.rebex.net/readme.txt

Output:

Conclusion

cURL is a simple yet powerful tool that helps you understand how clients and servers communicate by letting you test APIs and servers directly from the terminal. You don’t need to remember every option—just practice the basics, and the rest will naturally make sense as you build and debug real projects.

In today’s article, we are going to understand what HTML is and why it is the foundation of Web-Development.

What HTML is and why we use it

We can assume HTML is like the skeleton of a human. This is used to define the structure of a webpage. Then we have CSS, which wraps that skeleton with skin, and the OG JavaScript, which acts like a Brain.

Why HTML?

Before 1989, everyone mostly shared information on computers as plain text.

Then, in 1989, Sir Tim Berners-Lee proposed the World Wide Web (WWW) while working at CERN. To simplify the web so that researchers can share documents and link them together over the internet.

In the WWW, Tim Berners-Lee proposed a few standards, which are follow:

1. HTML (Hypertext Markup Language)

• Instead of writing text, we write a language that can give structure to the content.

• Example: Headings, paragraphs, links, images

2. HTTP (HyperText Transfer Protocol)

• A communication rule/protocol to send and receive web pages

• It defines how browsers and servers talk

3. URL (Uniform Resource Locator)

• A unique address for every document/page

• Example: https://example.com/page

Because HTML became the standard way to create and structure web pages, browsers can read it and display content properly.

What an HTML tag

In HTML, to give structure to our content, we use a TAG, a tag is nothing but a writing style for a particular thing with a meaning.
Example:

If we write an article, then that is supposed to have a heading. In HTML, for that, we have the Heading tag

<h1></h1>

If we write a paragraph, in HTML, we have a paragraph tag also

<p></p>

Now, here you can see that to write a tag, we use the less-than and greater-than symbols < > , but in our code we already see that we are also use forward slash at the end of that text like this </>. The reason behind this
In HTML, we start a tag with <>, but the browser does not know where the tag is supposed to end. To solve that, we have a closing tag, which follows this syntax </>

<> # tag opening
</> # tag closing
# Example
<h1></h1>

What is an HTML Element

So many beginners actually had confusion on this topic. When we wrap content with closing and opening tag then that is known as Han TML Element.

Example:

<h1></h2> # Tag 
<h1> Heading </h2> # Element

In HTML, we have mainly 2 types of element is there

• Block-level Element

• Inline Element

Block-Level Element

• When we use these element in our HTML, then it awasy start from a new line.

• It also takes the full width or we can say the entier line.

• You can set width/height/margin/padding

Examples of Block elements:

<div></div>
<p></p>
<h1></h1> to <h6></h6>
<section></section>
<article></article>
<header></header>
<footer></footer>
<main></main>
<nav></nav>
<aside></aside>

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

<form></form>
<table></table>

Inline Elements

• This element doesn’t start form new line

• This only takes space, so it just perfectly fits, and no extra space is used.

• width/height usually won’t work properly

Examples of Inline elements:

<span></span>
<a></a>
<b></b>
<i></i>
<strong></strong>
<em></em>
<img />
<input />
<label></label>
<button></button>

Commonly used HTML tags

<html>

The whole webpage stays inside this tag.

<html>
  ...
</html>

<head>

Stores page info (title, CSS, meta). Not visible.

<head>
  <title>Home</title>
</head>

<title>

Shows page name in browser tab.

<title>My Website</title>

<body>

All visible page content stays inside this.

<body>
  <h1>Hello</h1>
</body>

Text tags

<h1> to <h6>

Headings (h1 biggest, h6 smallest).

<h1>Main Title</h1>
<h3>Small Title</h3>

<p>

Paragraph text.

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

<br>

New line inside text.

<p>Hello<br>World</p>

Now just look at the combined code I prepare what i learn till now

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
  </head>

  <body>
    <h1>Main Title (h1)</h1>
    <p>This is a paragraph under h1.</p>

    <h2>Heading (h2)</h2>
    <p>This is a paragraph under h2.</p>

    <h3>Heading (h3)</h3>
    <p>This is a paragraph under h3.</p>

    <h4>Heading (h4)</h4>
    <p>This is a paragraph under h4.</p>

    <h5>Heading (h5)</h5>
    <p>This is a paragraph under h5.</p>

    <h6>Heading (h6)</h6>
    <p>This is a paragraph under h6.</p>
  </body>
</html>

Output

<hr>

Horizontal line to separate sections.

<hr>

<br>

Use to give a new line break

<br>

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HR and BR Example</title>
  </head>

  <body>
    <h1>HR and BR Example</h1>

    <p>
      This is line 1 using normal text.
      <br>
      This is line 2 after using br tag.
      <br>
      This is line 3 after using br tag again.
    </p>

    <hr>

    <p>
      This section is separated using hr tag.
      <br>
      hr creates a horizontal line between sections.
    </p>
  </body>
</html>

Output

Grouping/layout tags

<div>

Block container for grouping elements.

<div>
  <h2>Box</h2>
  <p>Text</p>
</div>

<span>

Inline container for a small text part.

<p>Hello <span>World</span></p>

Link and media tags

<a>

Link to other page/website.

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

<img>

Shows image.

<img src="photo.jpg" alt="my photo">

<video>

Shows video.

<video controls>
  <source src="movie.mp4">
</video>

<audio>

Plays audio.

<audio controls>
  <source src="song.mp3">
</audio>

List tags

<ul>

Bullet list.

<ul>
  <li>Apple</li>
  <li>Mango</li>
</ul>

<ol>

Number list.

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<li>

List item (inside ul/ol).

<li>Item</li>

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>List Tags Demo</title>
  </head>

  <body>
    <h1>List Tags Demo</h1>
    <p>
      In this page we will learn unordered list (ul), ordered list (ol) and list item (li).
    </p>

    <hr>

    <h2>1) Unordered List (ul) - Bullet List</h2>
    <p>Shopping list:</p>

    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Eggs</li>
      <li>Fruits</li>
    </ul>

    <hr>

    <h2>2) Ordered List (ol) - Number List</h2>
    <p>Steps to create a project:</p>

    <ol>
      <li>Create a folder</li>
      <li>Create an index.html file</li>
      <li>Write HTML code</li>
      <li>Open it in browser</li>
    </ol>

    <hr>

    <h2>3) li tag (List Item)</h2>
    <p>
      li tag is used inside ul or ol. Example:
    </p>

    <ul>
      <li>This is an li item inside ul</li>
      <li>This is another li item inside ul</li>
    </ul>

    <ol>
      <li>This is an li item inside ol</li>
      <li>This is another li item inside ol</li>
    </ol>

  </body>
</html>

Output

Table tags

<table>

Creates a table.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Pallab</td>
    <td>22</td>
  </tr>
</table>

<tr>

Table row.

<tr>
  <td>A</td>
  <td>B</td>
</tr>

<th>

Table heading cell.

<th>Name</th>

<td>

Table data cell.

<td>Pallab</td>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Table Tags Demo</title>
  </head>

  <body>
    <h1>Table Tags Demo</h1>
    <p>
      In this page we will learn table tags: table, tr, th, td.
    </p>

    <hr>

    <h2>Student List Table</h2>

    <table border="1" cellpadding="10">
      <!-- table row for table headings -->
      <tr>
        <th>Student Name</th>
        <th>Age</th>
        <th>Course</th>
        <th>City</th>
      </tr>

      <!-- table row for student data -->
      <tr>
        <td>Pallab</td>
        <td>22</td>
        <td>Web Development</td>
        <td>Kolkata</td>
      </tr>

      <tr>
        <td>Rahul</td>
        <td>21</td>
        <td>JavaScript</td>
        <td>Delhi</td>
      </tr>

      <tr>
        <td>Ananya</td>
        <td>20</td>
        <td>HTML & CSS</td>
        <td>Mumbai</td>
      </tr>
    </table>

    <hr>

    <h2>Explanation inside same page</h2>

    <p>
      table: creates the table structure.
      <br>
      tr: creates a row.
      <br>
      th: creates heading cells.
      <br>
      td: creates data cells.
    </p>

  </body>
</html>

Output

Form tags

<form>

Used to collect user input and submit.

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

<label>

Label for input field.

<label>Email:</label>
<input type="email">

<input>

Input field.

<input type="password" placeholder="Enter password">

<textarea>

Multi-line input.

<textarea rows="4"></textarea>

<select>

Dropdown.

<select>
  <option>India</option>
  <option>USA</option>
</select>

<button>

Clickable button.

<button type="submit">Submit</button>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Form Tags Demo</title>
  </head>

  <body>
    <h1>Form Tags Demo</h1>
    <p>
      In this page we will learn form tags: form, label, input, textarea, select, option, button.
    </p>

    <hr>

    <h2>Contact Form</h2>

    <form>
      <!-- Name -->
      <label>Full Name:</label>
      <input type="text" placeholder="Enter your full name">
      <br><br>

      <!-- Email -->
      <label>Email:</label>
      <input type="email" placeholder="Enter your email">
      <br><br>

      <!-- Password -->
      <label>Password:</label>
      <input type="password" placeholder="Enter password">
      <br><br>

      <!-- Country -->
      <label>Select Country:</label>
      <select>
        <option>India</option>
        <option>USA</option>
        <option>UK</option>
        <option>Canada</option>
      </select>
      <br><br>

      <!-- Message -->
      <label>Your Message:</label>
      <br>
      <textarea rows="5" placeholder="Write your message here..."></textarea>
      <br><br>

      <!-- Button -->
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>

    <hr>

    <p>
      form tag collects data,
      label shows field name,
      input takes user value,
      textarea takes multi line input,
      select creates dropdown,
      option is dropdown item,
      button is for submit/reset.
    </p>

  </body>
</html>

Output

Semantic tags for Accessibility

This tag is useful in the case that a user has visual disability, then the screen reader reads this tag peoperly. Also, it is a good practice to use these Semantic tags.

<header>

Top section of a page/section.

<header>
  <h1>My Blog</h1>
</header>

<nav>

Navigation links.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<main>

Main content.

<main>
  <h2>Post</h2>
</main>

<section>

Groups related content.

<section>
  <h2>Services</h2>
</section>

<footer>

Bottom section.

<footer>
  <p>Copyright 2026</p>
</footer>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic Tags Demo</title>
  </head>

  <body>

    <!-- header: top part of the website -->
    <header>
      <h1>StudyHex Blog</h1>
      <p>Learn Web Development step by step</p>
    </header>

    <hr>

    <!-- nav: navigation links -->
    <nav>
      <a href="#">Home</a> |
      <a href="#">Blogs</a> |
      <a href="#">Courses</a> |
      <a href="#">Contact</a>
    </nav>

    <hr>

    <!-- main: main page content -->
    <main>

      <h2>Welcome to my blog</h2>
      <p>
        This website is built using semantic HTML tags.
        These tags help screen readers understand page structure properly.
      </p>

      <!-- section: related content group -->
      <section>
        <h2>Services</h2>
        <p>We provide learning content for:</p>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Backend Development</li>
        </ul>
      </section>

      <hr>

      <section>
        <h2>Latest Blog Post</h2>
        <p>
          Topic: How DNS works step by step.
        </p>
        <p>
          In this blog you will learn Root server, TLD server, Authoritative server and Recursive Resolver.
        </p>
      </section>

    </main>

    <hr>

    <!-- footer: bottom part of the website -->
    <footer>
      <p>Copyright 2026 - StudyHex</p>
    </footer>

  </body>
</html>

Output

Conclusion:

HTML is the backbone of any website, and it is the basic building block of the modern internet. HTML has many tags, but remember one thing: only 20 to 30 percent of tags are used 80 percent of the time. If you want to learn more tags, you can follow the MDN HTML Elements documentation. Also, during your HTML learning time, always use the browser Inspect tool, because it helps you understand which element is responsible for what you are seeing on the page.

After building 10 to 20 projects successfully, you don’t need to remember all the tags. With practice, they automatically fit into your subconscious mind.

Why Emmet is useful for HTML beginners

In HTML, we code around multiple tags. Writing these tags 1000 times, we can use Emmet Abstraction, which make coder fast.

example

div # we just type this and hit -enter

<div></div> # emmet autocomplete this tags for us

Why Emmet is useful for HTML beginners

For a beginner who is trying to learn the core concept of HTML and it’s working, emmit helps there to reduce the pressure of remembering all the syntax.

Emmet helps you:

• Write HTML 10x faster

• Avoid spelling mistakes in tags

• Generate nested structures easily

• Create repeated elements in seconds

• Build boilerplate HTML instantly

How Emmet works inside code editors

Emmet comes built-in inside most editors, especially:

How you use it

1. Open an HTML file (example: index.html)

2. Type an Emmet abbreviation

3. Press:

   • Hit Tab

   • or Enter

Type:

h1

Press Enter, and it becomes:

<h1></h1>

Useful Syntax of Emmet

Emmet uses symbols like shortcuts.

Here are the most useful ones:

Creating HTML elements using Emmet

Example 1: Simple element

Emmet:

p

HTML output:

<p></p>

Example 2: Element with inner text

Emmet:

p{Hello world}

Output:

<p>Hello world</p>

Adding classes, IDs, and attributes

Adding a class (.)

Use tagname, then a single [dot] and classname

Emmet:

div.card

Output:

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

Even shorter:

Emmet:

.card

Output:

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

(because Emmet assumes div by default)

Adding an ID (#)

Use tagname then, Pound Simble ( # ) followed by Id

Emmet:

div#main

Output:

<div id="main"></div>

Class + ID together

Emmet:

section#hero.banner

Output:

<section id="hero" class="banner"></section>

Adding attributes ([])

Example link tag:

Emmet:

a[href="https://google.com"]

Output:

<a href="https://google.com"></a>

Example image:

Emmet:

img[src="photo.jpg" alt="my image"]

Output:

<img src="photo.jpg" alt="my image">

Notice: img has no closing tag (Emmet knows that).

Creating nested elements

Nesting means element inside element.

Emmet uses:

>

Example: Nav with list

Emmet:

nav>ul>li

Output:

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

Example: Card layout

Emmet:

div.card>h2+p

Output:

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

Creating siblings

Emmet uses:

+

Example:

Emmet:

h1+p

Output:

<h1></h1>
<p></p>

Example:

Emmet:

header+main+footer

Output:

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

Repeating elements using multiplication (*)

This is used to save a lot of time

Example: 5 list items

Emmet:

ul>li*5

Output:

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

Combining nesting + multiplication

Note: This syntax is useful, but it's easy to forgot these syntax if you don’t practice and use it in your daily coding workflow, so always try to practice it. Also, keep in mind these are helpful for faster code writing, but if you can’t remember any of them, then it is totally fine.

Example: Menu list

Emmet:

nav>ul>li*4>a[href="#"]

Output:

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

Now add text:

Emmet:

nav>ul>li*4>a[href="#"]{Menu}

Output:

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

Generating a full HTML boilerplate with Emmet

This is the most famous Emmet shortcut.

HTML Boilerplate

Just type:

Emmet:

! # then hit enter

Press Tab → You get:

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

</body>
</html>

Conclusion:

Keep in mind that Emmet is a tool that helps coders to ship faster, but it is totally optional. If you just see the command and not practice them, then you definitely forgot every shotcut emmet provides you, so just use this article for reference purposes and do this trick in vs code for build your own muscle memory.

The Problem:

When we put a website on the internet, I need to put those files over the server so that the server can serve them to the user. now in a server, we actually get an IP address where our serveris located.
But here the main issue is when how the browser knows where our requested domain server IP.

DNS (Domain Name System)

Here, DNS comes into the picture. Browser somehow reach to the DNS server then the DNS is actually tell the browser of the Actual IP address of the server. Before making a deep dive into these DNS workings, you must have an understanding of the Internet and the network.

How DNS Works?

When a user enter the url of an webiste like google.com, first that requeted is taken by the browser and then browser make a call to the dns resolver.

Recursive DNS resolver

DNS, a resolver is a server. When a browser request some domain to the DNS resolver, the main internal target of this DNS resolver is to find the A record of the Domain. It takes the allthe headache of finding the IP of the requested domain and return back to the Browser.

To do that, it takes multiple steps recursively; that way, it is also known as Recusive DNS resolver.

Let's try to understand the Working of it.

Root Server:

In the world, we have a total of 13 root server, these server are responsivble for the TLD (Top Level Domain). Mean we have multiple DNS provider cloudflare, Google DNS providers, Cloudflare, Google DNS, etc., and we have multiple top level domain, example .com, .in, .or,g etc

TLD server

In the real world, there is the TLD ( Top Level Domain server). It is responsible for which autorative server is actually storing that Top Level domain it return that authoritative server to the dns resolver. Means, it tell the dns resolver which is the autoratativer server for .com for that request.

Authoritative Server

When the DNS resolver got the authoritative server location, it again sent a request to that authoritative server with the user-requested domain, it like saying, “Hey, did you know the A record of this doamin”
and the authoritative server says” yes.”
Then it returns the A record to the DNS resolver, and the DNS resolver then sends back the A record ip to the browser.

What is the Dig command

Now, let’s see everything in real life using the Dig command

Dig is a command-line tool that helps to get Domain Information. The full form of Dig is "Domain Information Groper".

Example

# Command
dig google.com

# Output
; <<>> DiG 9.16.1-Ubuntu <<>> google.com
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 57166
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; QUESTION SECTION:
;google.com.                 IN      A

;; ANSWER SECTION:
google.com.          263     IN      A       142.251.43.174

;; Query time: 16 msec
;; SERVER: 127.0.0.11#53(127.0.0.11)

• status: NOERROR → lookup success

• A record → IPv4 address

• 142.251.43.174 → IP of google.com

• SERVER: 127.0.0.11 → your system asked a local DNS resolver (like Docker/OS stub)

• rd ra →

  • rd recursion desired

  • ra recursion available
    meaning your resolver did all the steps for you.

Understanding dig . NS and Root Name Servers

# Command
dig . NS

# Output
.  518400  IN  NS  a.root-servers.net.
.  518400  IN  NS  b.root-servers.net.
.  518400  IN  NS  c.root-servers.net.
...
.  518400  IN  NS  m.root-servers.net.

• . (dot) means root zone

• Root servers are the top of the DNS hierarchy

• Root servers don’t know google.com IP

• they only tell: “ask .com servers”

Understanding dig com NS and TLD Name Servers

dig com NS
com.  172800  IN  NS  a.gtld-servers.net.
com.  172800  IN  NS  b.gtld-servers.net.
com.  172800  IN  NS  c.gtld-servers.net.
...
com.  172800  IN  NS  m.gtld-servers.net.

• .com is a TLD

• These servers are responsible for telling:

• which authoritative name servers hold google.com

Understanding dig google.com NS and authoritative name servers

# Command
dig google.com NS

# Output
google.com.  172800  IN  NS  ns1.google.com.
google.com.  172800  IN  NS  ns2.google.com.
google.com.  172800  IN  NS  ns3.google.com.
google.com.  172800  IN  NS  ns4.google.com.

• These are authoritative servers

• They contain the actual DNS records of google.com

• Final A record comes from these servers

Final Flow Should Look like this

To start our discusson please follow this topic first

1. Internet & Network Devices

In actuall world, when a user searches for something on a browser suppose google.com then Google has a server set up on the internet that obviously has a ip, but the browser doesn’t know that ip. So, as we can see, it is a problem. if browser doesn’t know the ip we can’t see the page or server response.

DNS ( Domain Name System ):

In the old days, we had a phonebook or a directory. What does this phonebook acutally did, when we want to call someone, we search the name of that person in the phonebook to get his/her number so that we can make a call.

DNS is also act like a phonebook, but for the server and the ip. where In the place of Name we store the domain name ex. google.com, and it’s corresponding ip.

But actually, DNS is much more than just ip only. To know more about the DNS, please follow this article:

• DNS resolution

In this article, we are going to understand all the DNS record types descriptively.

DNS Record Types

There are multiple record but the most used are these on

1. NS record

2. A record

3. CNAME record

4. AAAA record

5. MX record

6. TXT record

Let’s make proper understanding of each one.

NS Record

To understand the NS record, we need to understand its need of it.
Assume you buy a domain from a particular domain provide,r assume in my case that is Hostinger. but web server is hosted on Vercel or Netlify.
So here is the problem comes i purcase the domain from hostinger and I want that the domain should be managed by netlify or vercel or any other service like Cloudflare. In that case a need for some entry that tells that this domain is mange my some other service.

Now, we understand the need, so here is what the NS record does
Each DNS service provider has its own NS
example
For Hostinger, it is like this

• ns1.dns-parking.com

• ns2.dns-parking.com

and same Cloudflare also have there own Nameserver

• evangeline.ns.cloudflare.com

• olof.ns.cloudflare.com

Now, in the DNS record, we store this record like this

What does it mean that when a user searches for google.com, it first fetches the NS record, which is the authoritative domain of that requested domain? Then the browser goes to that DNS server for further requests until it gets an IP.

A Record

The record browser actually wants to see that the record is an A record. A record is the actual record that carries the requested domain's original IP address, where the server is located.

The vast majority of websites only have one A record, but it is possible to have several. Some higher-profile websites will have several different A records as part of a technique called round robin load balancing, which can distribute request traffic to one of several IP addresses, each hosting identical content.

AAAA Record

DNS AAAA records match a domain name to an IPv6 address. DNS AAAA records are exactly like DNS A records, except that they store a domain's IPv6 address instead of its IPv4 address.

0000:8a2e:0370:7334 | 14400 |

CNAME Record

CNAME stands for Canonical Name. To understand this, try to understand the example first.
Suppose you have hosted a server on vercel and the version give you an ip. now due to some reasone may be vercel need some kind of relocation, then in that case, we need to change the ip because our server location has changed. So if in a particular region Vercel needs to chnage the server and vercel has a 1 million user base, then what Vercel does, vercel send email or some notification to all user that we change our ip you also need to change that from your end.
This is a problem. To solve that, what version does version give you some kind of app.vercel.com type domain, which is unique? You set a CNAME record that points to that domain, and Vercel internally sets the original server ip in the A record form on app.vercel.com

If a user sent a request to the browser for google.com, that request is sent to the authoritative server, and if there is no A record exist but a CNAME requred exist, it again makes a recursive call for that new domain until it finds the A record. Mean A record is the final destination.

MX record

A DNS MX (Mail Exchange) record tells which mail server will receive emails for a domain. It also helps decide how emails should be sent and routed, following SMTP, which is the standard rule/protocol used for sending email.

Example of an MX record:

The email service could also configure this MX record so that both servers have equal priority and receive an equal amount of mail:

This configuration enables the email provider to equally balance the load between the two servers.

A CNAME record is used to give a domain an alias name (like a shortcut) instead of using the real domain name. Usually, a CNAME points to an A record (IPv4) or AAAA record (IPv6).

But MX records cannot point to a CNAME. An MX record must directly point to the mail server’s A or AAAA record. According to official DNS/email rules (RFC), MX → CNAME is not allowed.

TXT Record

It allows domain owners to store custom text data in DNS.

SPF/DKIM/DMARC need to publish things like:

• rules (policy text)

• authorized mail servers list

• public cryptographic key

• Instructions for mail receivers

These are not IP addresses, so they can’t go in A/AAAA records.
They are not mail server hostnames, so they can’t go in MX records.
So they are stored as TXT records.

Meaning:

When someone receives an email from studyhex.in, the receiver mail server checks your DNS TXT records to verify:

• SPF: Is this sender server allowed?

• DKIM: Does the signature match the public key in DNS?

• DMARC: What action should be taken if SPF/DKIM fails?

How do all these work together