When you call a method like .toUpperCase() on a string primitive, JavaScript creates a temporary wrapper object (using the String constructor) so the method can be executed. Once the operation is done, that object is immediately discarded, and the result is returned as a primitive.

What Are String Methods?

String methods are the built-in functions that are used to manipulate and update the string.

Here are some of the string methods:

• toUpperCase()

• toLowerCase()

• slice()

• substring()

• includes()

• split()

• trim()

These methods don’t modify the original string (because strings are immutable). Instead, they return a new string.

How string method work internally?

Let's take an example toUpperCase and understand how it works.

When you call string.toUpperCase()

const str = 'Hello';

str.toUpperCase();

1. Javascript iterate over each character

2. Convert that character into uppercase

3. Build a new string

Think of execution like this

Input String → Process Each Character → Apply Logic → Return New String

What are polyfills?

Polyfills are a custom implementation of the built-in functions. It is mostly used to create the same functionality that built-in functions offer.

Why Developers Write Polyfills?

• Provide support for new methods in older browsers

• Understanding internal logic

• To practice the built-in methods logic by creating them of their own

Polyfill Examples

Let's implement some polyfills for string methods

1. string.toLowerCase()
   Here I will be writing a custom polyfill for toLowerCase.

   if(!String.prototype.toLowerCase){
       String.prototype.toLowerCase = function () {
           let result = "";
   
           // this refer to string on which method is called
           for (let char of this) {
               const code = char.charCodeAt(0);
   
               // a-z → A-Z
               if (code >= 97 && code <= 122) {
                   result += String.fromCharCode(code - 32);
               } else {
                   result += char;
               }
           }
   
           return result;
       };
   }
   

   This will only work if the browser doesn't support string.toLowerCase, it will use the polyfill toLowerCase

2. string.includes

   if(!String.prototype.includes){
       String.prototype.myIncludes = function(searchString) {
           return this.indexOf(searchString) !== -1;
       };
   }
   

Common String Interview Questions

If you're preparing for interviews, these are must-practice:

1. Reverse a String function without using built-in methods
   Logic: Iterate over the string and append the new string with each character in an order so that the last character comes first.

2. Check Palindrome
   Logic: Reverse and create a new string. Check if both strings are equal or not.

3. Count Characters
   Logic: Use a "Map" or an object to store counts as you iterate through the string.

4. Anagram Detection: Do two strings contain the same characters?
   Logic: Sort both strings and compare them.

Why Understanding Built-in Behavior Matters

Most developers stop at using methods. But in an interview, the interviewer tests:

• How things work internally

• Your problem-solving ability

• Your understanding of edge cases

Understanding internals helps you in writing better code, debugging faster, and performing well in interviews.

Example questions:

1. How does slice() differ from substring()?

2. Why are strings immutable?

3. How would you optimize a string search?

Conclusion

If you want to stand out as a developer:

Don’t just use methods — understand them, practice writing polyfills, and solve real interview problems.

That’s where real growth happens.

Follow the series to learn more about Javascript.

Problems in Objects

• Object must have a key as a string. If you use a number, it will automatically be used as a string.

• Objects inherit properties from their prototypes. For example: Object.keys is a predefined property that should not be used as a key. This may lead to unexpected bugs.

• You cannot directly iterate over the object's values/keys. You have to use object.keys() or object.entries() to do iteration.

• Order of insertion is not maintained.

Problems with Arrays

• Removing a specific value from an array requires another iteration to find the position of the value in the array.

• The array might have duplicate values. In some cases the developer doesn't want to insert duplicate values into the array. To achieve the same, they need to iterate over the whole array to check if the value already exists.

Understanding Map and Set

What is Map?

Map is a built-in datatype in Javascript. It is used to store key-value pairs. It is like an object with some extra powers.

1. Key can be of any type (string, number, array...)

2. Key should be unique

3. Maintain insertion order. This means if you iterate over a map, it will be the same order in which they are inserted.

Map Methods:

1. Insert value,
   To insert a value in map, use map.set(key, value).
   Examples:

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   

2. Get a value
   To get a value, use map.get(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   const employeeName = employee('name');
   
   console.log(employeeName); // Rahul
   

3. Check if value exisits, use map.has(key), return boolean state.

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   console.log(employee.has('name'));   // true
   console.log(employee.has('salary')); // false
   

4. Delete a value, use map.delete(key)

   const employee = new Map();
   
   employee.set("id", 101);
   employee.set("name", "Rahul");
   
   employee.delete("id");
   
   console.log(employee.has("id")); // false
   

What is Set?

A set is also a built-in datatype in Javascript used to store unique values. It is more like an array, but with the power of uniqueness.

• Store unique values

• Store only values, not keys

• Maintain insertion order

Set methods:

1. Insert a value, use set.add(value).

   const set = new Set();
   
   set.add(42);
   set.add(42);
   set.add(13);
   
   for (const item of set) {
     console.log(item);
     // Expected output: 42
     // Expected output: 13
   }
   

2. Check if the value exists, use set.has(key), return a boolean state.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.has(42));   // true
   console.log(set.has(40)); // false
   

3. Delete a value, use set.delete(value), returns a boolean value indicating if the value is deleted successfully.

   const set = new Set();
   
   set.add(42);
   set.add(13);
   
   console.log(set.delete(42)); // true
   console.log(set.delete(40)); // false
   
   console.log(set) // Set(1) {13}
   

Both Map and Set have other methods like values, entries, size and forEach for iteration. Here I have explained to you the necessary methods for insertion and deletion of values.

Comparison between Map and Object

Comparison between Set and Array

When to Use Map?

Use Map when:

• You need key-value storage

• Keys are not just strings

• Frequent add/remove operations

• You care about insertion order

Example:

• Caching data

• Storing user sessions

• Mapping objects to values

When to Use Set?

Use Set when:

• You need unique values

• You want to remove duplicates

• Fast lookup is required

Example:

• Unique tags

• Removing duplicate IDs

• Tracking visited items

Conclusion

• Use Map when you need a better version of objects

• Use Set when you need uniqueness without extra logic

• Avoid forcing everything into Objects & Arrays

Follow Javascript series for more updates 🙂

const name = "Vishal";

const age = 30;

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

console.log(message); // My name is Vishal and I am 30 years old.

But there are various difficulties or problems developers face while performing string concatenations:

• Hard to read strings

• String gets too long

• Cluttered code

• Difficulty in managing dynamic values

As the application grows, it becomes messier and increases the risk of errors.

After ES6, this has been resolved using Template Literals.

What Are Template Literals?

Template literals are the modern way to work with string concatenations in JavaScript. They use backticks (`` ) instead of quotes (''/"").

Example:

const name = "Vishal";

const age = 30;

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

console.log(message); // My name is Vishal and I am 30 years old.

Use of template literals instead of quotes allows:

• multi-line strings
  Example:

  const message = `This is a 
                   string to show template literals
                   multiline.`;
  
  console.log(message);
  // This is a string to show template literals multiline.
  

• Embedding variables or operations. Instead of using the + operator, you can inject a variable using ${}.
  Example:

  const number = 3;
  const message = `Square of \({number} is \){ number ** 2 }.`;
  
  console.log(message); // Square of 3 is 9.
  

Benefits of using Template Literals

• Cleaner and more readable

• No need for +

• Easier to maintain

Before vs After (Comparison)

❌ Old Way (Concatenation) const product = "Laptop"; const price = 50000;

const text = "The price of " + product + " is Rs. " + price + "."; ✅ New Way (Template Literals) const text = The price of \({product} is Rs. \){price}.;

👉 Clearly more readable and modern!

📄 Multi-line Strings Made Easy

Before template literals, multi-line strings were awkward:

❌ Old Way const text = "This is line one.\n" + "This is line two."; ✅ Template Literals const text = This is line one. This is line two.;

🎯 No special characters, no concatenation—just write naturally.

Real-World Use Cases

1. Dynamic Messages const user = "Ashish"; console.log(Welcome back, ${user}!);

2. HTML Templates (Very Common) const title = "JavaScript Basics";

   const html = `${title}`;
   

3. Logging and Debugging

   const count = 5;
   
   console.log(`Total items: ${count}`); 
   

4. Expressions Inside Strings: You can even run JavaScript inside ${}:

   const a = 5;
   const b = 10;
   
   console.log(Sum is ${a + b});
   

Why Template Literals Matter?

• Improves code readability

• Reduces syntax noise

• Makes dynamic strings easy to write

• Widely used in modern frameworks (React, Node.js)

Final Thoughts

Template literals are one of the simplest yet most powerful features in modern JavaScript.

Once you start using them: 👉 You’ll rarely go back to + concatenation.

Check out more blogs and follow our Javascript series to learn more.

An object is a combination of

1. Properties

2. Methods

Instead of writing separate variables and functions, we bundle them together.

Real-World Analogy: Blueprint → Objects

Let’s understand object-oriented programming with a simple example:

Imagine you are a car manufacturer.

You first create a blueprint (design)

• Then you use that blueprint to create multiple cars

👉 In JavaScript:

• Blueprint = Class

• Car = Object (Instance)

So instead of rewriting code again and again, we define a class once and reuse it.

🧱 What is a Class in JavaScript?

A class is a blueprint used to create objects.

It defines:

• What properties an object will have

• What actions it can perform

Example:

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

  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

🧪 Creating Objects (Instances)

We use the new keyword to create objects from a class.

const person1 = new Person("Ashish", 25);
const person2 = new Person("Rahul", 30);

person1.greet(); // Hi, my name is Ashish
person2.greet(); // Hi, my name is Rahul

👉 Each object:

• Has its own data

• Shares the same structure and methods

⚙️ Understanding the Constructor

The constructor is a special method inside a class.

Key Points:

• It runs automatically when an object is created

• It initializes object properties

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

👉 this refers to the current object.

🔧 Methods Inside a Class

Methods define what an object can do.

greet() {
  console.log(`Hi, my name is ${this.name}`);
}

👉 Methods are shared across all instances (memory efficient).

🔒 Basic Idea of Encapsulation

Encapsulation means:

👉 Keeping data and methods together and controlling access

Real-world example:

Think of a car:

• You don’t directly control the engine

• You use steering, brakes, accelerator

Same in code:

• Internal data is hidden

• Access is controlled via methods

Simple Example:

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

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

  getBalance() {
    return this.balance;
  }
}

👉 We interact using methods instead of directly modifying data.

♻️ Why Use OOP?

OOP helps you write better code:

• ✅ Reusable (write once, use many times)

• ✅ Organized (structured code)

• ✅ Scalable (easy to expand)

• ✅ Maintainable (easy to debug and update)

🧠 Class vs Object (Quick Comparison)

🎯 Assignment

Try this yourself 👇

Task:

Create a Student class with:

• Properties: name, age

• Method: printDetails()

Example Solution:

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

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

const student1 = new Student("Aman", 20);
const student2 = new Student("Neha", 22);

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

🧩 Visual Understanding (Conceptual)

Class (Blueprint)
      ↓
Create using new
      ↓
Objects (Instances)

Example:

Car (Class)
  ↓
car1, car2, car3 (Objects)

📌 Common Mistakes Beginners Make

❌ Forgetting new keyword ❌ Not using this properly ❌ Thinking each object has separate methods (they are shared) ❌ Confusing class with object

🧠 Final Thoughts

OOP is not just a concept—it’s a way of thinking.

Once you understand:

• Class

• Object

• Constructor

• Methods

You can build real-world applications much more easily 🚀

Happy Coding! 💻

But have you ever wondered what would happen if an array contained another array? How are we going to handle this?

Understanding nested arrays and handling operations on them is an important skill, especially for problem-solving and is usually asked in interviews as well.

What are nested arrays?

If an array contains a nested array, it is called a nested array.

Example:

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

The above example might be confusing to see. Let me break it down to see multiple array properly.

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

Now the values on each index can be seen clearly.

Values with respective index:

• 0 -> 1 (number)

• 1 -> 2 (number)

• 2 -> 3 (number)

• 3 -> [4, 5, 6] (array)

• 4 -> 7 (number)

• 5 -> [8, [9, 10]] (nested array)

Why is flattening an array used?

Flattening an array means converting a multidimensional array to a single-dimensional array.

• Extracting values from all nested arrays

• Arrange them in a single array

This is an important concept needed when:

1. Easier data processing

2. Useful in APIs and transforming data

3. Common in real-world scenarios (e.g., comments, categories with products)

Example:

const categories = [
    ["p1", "p2", "p3"],
    ["p4", "p5"]
];

After flattening:

const products = ["p1", "p2", "p3", "p4", "p5"];

Different approaches to flatten arrays

There are multiple ways to flatten an array:

Using in-build flat() method

An array has an in-built method flat(). This is the most common and simple approach.

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

const flatArr = arr.flat(Infinity);

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7]

Using Recursion

Recursion is a way to call the same function repeatedly.

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

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

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

    return result; 
};

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

Using reduce()

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

const flattenArray = (arr) => {
    return arr.reduce((acc, item) => {
        if (Array.isArray(item)) {
            return acc.concat(flattenArray(item));
        }
        
        return acc.concat(item); 
    }, []); 
};

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

Common Interview Scenarios

You may be asked:

1. Flatten only one level arr.flat(1);

2. Flatten up to depth n

3. Don’t use built-in methods. Use recursion or a stack approach.

Try to practice in any Javascript code editor.

Conclusion

Flattening arrays is a fundamental concept in JavaScript that helps you:

• Work with complex data structures

• Improve problem-solving skills

• Prepare for coding interviews

Start with flat() for simplicity, but master recursion for interviews.

1. name

2. age

3. salary

That’s where objects come in.

What Are Objects?

An object is a collection of data stored in key-value pairs.

Think of it like a real-world entity.

Example: A person has:

• name

• age

• city

In JavaScript, we represent this using an object:

const person = {
  name: "Ashish",
  age: 25,
  city: "Delhi"
};

Here:

• name, age, city are keys

• "Ashish", 25, "Delhi" are their values

Why Do We Need Objects?

Arrays store data using indexes:

const user = ["Ashish", 25, "Delhi"];

But this is confusing. What if I don't know on which index the value actually exists?

Objects solve this by using keys:

person.name

You can directly access the value by using its key name.

Creating Objects

You can create an object using curly braces {}:

const student = {
  name: "John",
  age: 20,
  course: "BCA"
};

Accessing Properties

1. Dot Notation

The object values can be accessed using . (dot) notation:

console.log(student.name); // John

2. Bracket Notation

The object values can also be accessed using [] (bracket) notation. Inside the bracket, the key name will be specified as a string.

console.log(student["age"]); // 20

Dot notation vs Bracket notation

• Dot notation → simple and common

• Bracket notation → useful when the key is dynamic

const key = "course";
console.log(student.course) // BCA
console.log(student[key]);  // BCA

Updating Object Properties

Updating object value is simple and uses only dots. Just specify the . and keyname with the assignment operator and value

student.age = 21;
console.log(student.age); // 21

Breakdown:

• age -> key

• = -> assignment operator

• 21 -> value

Adding New Properties

New properties can also be added using the same approach for updating the object.

student.city = "Mumbai";

console.log(student);

If the city doesn't exisits in object, it will add new property. Otherwise update exisiting.

Deleting Properties

Object properties can be deleted using delete keyword following with object property name.

delete student.course;

console.log(student);

Looping Through Object Keys

To loop through an object, we use for...in:

for (let key in student) {
  console.log(key, student[key]);
}

// Output:
// name Rahul
// age 21
// city Mumbai

Array vs Object (Simple Comparison)

Visual Representation (Mental Model)

Think of an object like a labeled box:

person = {
  name → "Ashish"
  age  → 25
  city → "Delhi"
}

Each value is stored with a label (key).

Assignment (Practice)

Create a student object and perform the following:

1. Create an object named "employee"

2. Add name, id, and salary fields

3. Update the salary of the employee object.

4. Loop through the employee object to print all properties.

Practice by converting real-life things (car, phone, user profile) into objects.

Conclusion

Objects are one of the most important concepts in JavaScript.

They help you:

• Organize data in key-value format

• Make code more readable

• Represent real-world entities

Once you’re comfortable with objects, you’ll find it much easier to work with APIs, JSON data, and real applications.

Follow and learn more about Javascript!

Before arrow functions, writing a function felt like writing duplicate code again and again.

Function Before Arrow Functions:

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

Arrow function syntax:

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

Benefits of using arrow functions:

1. Clear Syntax

2. Easier to read

3. Less Code than normal functions

That's why you can see arrow functions are widely used in modern Javascript.

What Are Arrow Functions?

Arrow functions were introduced in ES6 (ES2015) to make code easier and more readable. It is a shorter way of writing functions.

Basic Arrow Function Syntax

const functionName = (parameters) => {
    // write function logic here  
};

Example:

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

Arrow Function with One Parameter

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

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

Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

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

Implicit Return vs Explicit Return

Explicit Return (using return)

Explicit return in arrow functions means it uses the return keyword inside the function body to return the final result. It is used when the function's body requires multiple statements to calculate the result.

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

Implicit Return (no return keyword)

The function result can also be returned without the return keyword by removing the function curly braces. This approach will only be applicable where the function will calculate the value in a single statement.

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

Converting Normal Function → Arrow Function

Normal Function:

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

Arrow Function:

const greet = name => "Hello " + name;

Arrow Function vs Normal Function

For beginners: Use arrow functions for short and simple tasks

Simple Examples

• Greeting

const greet = name => "Hello " + name;

• Addition

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

• Square

const square = num => num * num;

Using an Arrow Function with map()

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

const squares = numbers.map(num => num * num);

console.log(squares); // [1, 4, 9, 16]

Assignment

Try these on your own 👇

1. Write a normal function to calculate the square of a number

2. Rewrite it using an arrow function

3. Create an arrow function that checks if a number is even or odd

4. Use an arrow function inside map() on an array

Arrow Function Breakdown

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

• const add → function name

• (a, b) → parameters

• => → arrow syntax

• a + b → returned value

Conclusion

• Arrow functions make your code.

• Cleaner

• Shorter

• More modern

Follow the series for more blogs!

That’s where functions come in.

What are functions? Why we need functions?

Functions are a piece of code written that can perform a specific task. There are a code blocks which can be reusable at multiple places.

Instead of writing same logic to separate places you can it inside a function and use it where ever you need it.

Real life analogy

Imagine a coffee machine ☕️

Actions perform in a coffee machine:

1. Press the button

2. Grinding

3. Brewing

4. Filtering

5. Gives coffee

These are all the separate methods done by the coffee machine.

Examples: Without function:

const sum1 = 1 + 2; // 3
const sum2 = 2 + 3; // 5
const sum3 = 3 + 4; // 7
const sum4 = 4 + 5; // 9

You can see we have the write the logic to add the number multiple times. Instead of this we can write a function sum which can return the sum of two number. We just had to provide the two numbers to the functions.

Examples: With function:

function sum (number1, number2){
    return number1 + number2;
}

const sum1 = sum(1, 2); // 3
const sum2 = sum(2, 3); // 5
const sum2 = sum(3, 4); // 7
const sum2 = sum(4, 5); // 9

How to create functions?

We can create functions by different ways:

1. Function Declaration Syntax

2. Function Expression Syntax

Let's discuss them one by one:

Function Declaration Syntax

This is the most common way of creating the functions:

function sum (number1, number2) {
    return number1 + number2
}

Key points:

1. function keyword

2. name of the functions (sum)

3. Can be called anywhere (explained more later in this blog)

Function Expression Syntax

In this approach, a function is stored in a variable:

const sum = function (number1, number2) {
    return number1 + number2
}

Key points:

1. Function is declared using function keyword.

2. Function has no name.

3. Function reference is stored in a variable. A variable should have a name.

4. Can be called using the variables. In this case, you can call sum() as it stores the reference of the function. Ideally, the function is called

Declaration vs Expression (Side-by-Side)

Hoisting in Functions

Let's first understand what hoisting is:

Hoisting means: javascript moves declarations to the top before execution.

Example:

console.log(number1); // undefined

var number1 = 10;

You might be wondering that console.log(number1) should give an error instead of printing undefined. In Javascript, this is possible because of the concept of hoisting.

Now try to run the logic below in the browser console dev tool or by creating a JS file and running it using node <filename.js>.

console.log(number2);
// ReferenceError: Cannot access 'number2' before initialization

const number2 = 20;

console.log(number3);
// ReferenceError: Cannot access 'number3' before initialization


const number3 = 30;

Now, you can see the error while executing this code.

Same applicable on the function.

Hoisting works in declaration syntax:

const result = sum(1, 2);
console.log(result); // 3

function sum (number1, number2){
    return number1 + number2;
}

Hoisting doesn't work in declaration syntax:

const result = sum(1, 2);
console.log(result);
// ReferenceError: Cannot access 'sum' before initialization

const sum = function (number1, number2){
    return number1 + number2;
}

When to Use What?

Use Function Declaration when:

• You want simple, reusable functions

• You need to call it anywhere in your code

• You want a cleaner structure

Use Function Expression when:

• You’re passing functions as arguments (callbacks)

• You want more control over execution

• You’re working with modern patterns (like arrow functions) (Arrow functions we can study in the next blog)

Execution flow of function call

You can also read about Javascript code execution in detail in the blog "Understanding JavaScript Global & Local Execution Context".

For functions, we can understand it stepwise. When a JS code is been executed:

1. Javascript scans all the code

2. Hoist function declaration on top

3. Start execution line by line

4. When executing the code, if the function called is hoisted, it will execute that function.

Assignment (Try It Yourself)

1. Write a function declaration that multiplies two numbers and returns the result.

2. Write the same logic using a function expression approach.

3. Call both the functions and try to re-run the logic by updating the values passed to the variable.

4. Call both the functions before they are defined and try to observe the output (error/result).

Conclusion

Functions are the building blocks of any program. You should know that the functions are used for:

1. Reusability

2. Combining Logic

3. Make code clean and readable

Follow my Javacript series to learn more!

JavaScript has built-in array methods that simplify these tasks.

In this article, we will explore some of the most useful array methods with simple examples:

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce()

• forEach()

You can try all examples directly in your browser console or Node.js.

Lets first understand the methods which are used to add or remove the data in an array:

push()

The push() method adds a new element to the end of an array.

Example:

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

const newLength = fruits.push("Mango");

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

It returns the updated length of array.

Push is generally used when adding a new item to a list, such as adding a task to a to-do list.

pop()

The pop() is used to remove the last element from the array.

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const popItem = items.pop();

console.log(popItem); // 'Trouser'
console.log(items);   // ["Shoe", "Tshirt"]

It returns the element that is removed.

shift()

The shift() method removes the first element of an array.

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const shiftItem = items.shift();

console.log(shiftItem); // "Shoe"
console.log(items);     // ["Tshirt", "Trouser"]

It returns the item which is removed. This works same as Queues in real life

unshift()

The unshift() method adds an item to the start of the array.

Example:

const items = ["Shoe", "Tshirt", "Trouser"];

const popItem = items.unshift("Shirt");

console.log(popItem); // 4
console.log(items);   // [ 'Shirt', 'Shoe', 'Tshirt', 'Trouser' ]

It returns the new length of the array.

Let's understand the methods that are used to perform iteration (loop) on an array

forEach()

forEach() is used to perform an action on each element of an array.

It accepts a callback function that accepts three arguments, provided by forEach itself.

• value: element of array

• index: position of element in array

• array: complete array

forEach() runs a function for every item in the array.

Example:

const numbers = [1, 2, 3]

numbers.forEach((num) => {
    console.log(num);
});

Output:
1
2
3

Traditional Loop vs forEach()

for loop:

let numbers = [1, 2, 3];

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

vs

forEach:

let numbers = [1, 2, 3];

numbers.forEach(function(num) { 
    console.log(num); 
});

As we can see in the above example, forEach is more cleaner and easier to read and use.

map()

map() creates a new array by updating each element based on the logic inside the callback.

Assume map() to be turning a crate of fruit into a crate of juices.

The number of juice will remain same as the number of fruits.

It accepts a callback function that accepts three arguments, provided by map itself.

• value: element of array

• index: position of element in array

• array: complete array

Example:

const numbers = [1, 2, 3];

const doubledNumbers = numbers.map((num) => {
    return num * 2;
});

console.log(doubledNumbers);

Output: [2, 4, 6] // updated values

console.log(numbers);

Output: [1, 2, 3] // remains same

map() returns an updated elements array. Also, it doesn't update the original array.

filter()

filter() creates a new array that only includes elements that satisfy the condition inside the callback function.

It accepts a callback function that accepts three arguments, provided by filter itself.

• value: element of array

• index: position of element in array

• array: complete array

Example:

const numbers = [3, 7, 10, 2];

const filteredNumbers = numbers.filter((num) => {
    if(num > 5){
        return true;
    }
    
    return false;
});

console.log(filtersNumbers);

Output: [7, 10]

So, returned array only includes those values for which callback return true.

How filter() work?

Here:

• For 3, the callback returns false. filteredNumbers doesn't contain 3

• For 7, the callback returns true. filteredNumbers contain 7

• For 10, the callback returns true. filteredNumbers contain 10

• For 2, the callback returns false. filteredNumbers doesn't contain 2

reduce()

reduce() combines all values of an array into a single value.

Reduce is like combining flour, eggs, and sugar to bake one single cake.

Common use cases include:

• total sum

• calculating totals

• combining data

Example:

let numbers = [5, 10, 20];

let total = numbers.reduce((accumulator, value) => {
 return accumulator + value; 
}, 0);

console.log(total);

Output: 35

Returns the single value after the final calculation.

How reduce() works?

Sometimes, reduce is very confusing for beginners.

Visual Idea for reduce()
[5, 10, 15]

Step 1 → 0 + 5 = 5
Step 2 → 5 + 10 = 15
Step 3 → 15 + 15 = 30

Final Result = 30

Assignment for Practice

Try this in your browser console.

• Try map()

  1. Create an array

  2. Double each number using map()

  3. Console the output and observe by updating the array.

• Try filter()

  1. Apply filter() method on map() output

  2. Filter numbers greater than 10

• Try reduce()

  1. Create an array

  2. Add those numbers using reduce() method.

  3. Check the output and retry after updating the values and number of values in array.

Final Thoughts

Array methods make JavaScript more powerful and readable.

Instead of writing long loops, you can use:

• map() to change data

• filter() to select data

• reduce() to combine data

• forEach() to loop through items

These methods are commonly used in modern JavaScript, React, and backend development.

The best way to learn them is simple: open your console and experiment with them.

Follow Javascript Series to learn more!

Imagine a wooden furniture factory that manufactures different types of furniture. To better understand the process, let’s see how the factory works internally.

The factory uses several types of wood. For simplicity, let’s assume the following types are used:

1. Sagwan

2. Mango

3. Sheesham

Inside the factory, the work is divided into multiple departments

1. Cutting

2. Framing

3. Polishing

4. Cushion

5. Quality Assurance

There is a centralized execution chain of the factory on which the departments work, and each department performs its task in a specific order in the execution chain.

The entire factory has a central board on which it is mentioned:

• The order of departments working inside the factory

• What needs to be done

Inside the department, there will definitely be so many works which are working one by one for their individual task. So, each department also has its own board (or blackboard) where two things are written:

• The order of individual tasks to be done inside the department

• The actual tasks that need to be performed in that department

There is also a manager in the factory whose job is to:

• Monitor the progress of the work

• Ensure that each department performs its task in the correct order

Let's combine the diagrams to see the full factory view:

Now the factory receives an order to build a wooden sofa with Sagwan wood.

Steps:

1. The very first step is to analyze the wood that has been received.

2. On the central factory blackboard:

   • What to be done: Build a sofa with a specific size mentioned

   • Order of work done: Cutting -> Framing -> Polishing -> Cushion -> QA

3. Wood comes to the Cutting department. On the Cutting department blackboard:

   • What to be done: Cut the wood into a smaller size as mentioned

   • Order of work: Cut big wood logs -> Cutting into smaller chunks

4. Chunks of wood come to the Framing department. On the Framing department blackboard:

   1. What to be done: Frame the received pieces of wood into the given size

   2. Order of work: Smoothen the wood -> Frame into the size of the sofa -> Finishing

5. A framed sofa comes to the Polishing department. On the Polishing department blackboard:

   1. What to be done: Polish the received sofa frame

   2. Order of work: Apply polish -> Rubbing

6. A polished sofa comes to the Cushion department. On the Cushion department blackboard:

   1. What to be done: Apply a cushion on the sofa frame

   2. Order of work: Cutting cushion -> Stitching and pasting

7. A final piece comes to the QA department. On the QA department blackboard:

   1. What to be done: Check the quality and overall sofa

   2. Order of work: Checking the quality

All of these steps are done under the supervision of the manager and if any process fails in between, the manager can ask the department to do the work again properly.

Things to remember:

1. The tasks done are executed on the execution chain. The execution chain is inside the factory

2. There are some sub-tasks inside the department, which are inside the department. But the space allotted to the department is inside the factory, So those subtasks are also belong to the factory.

Javascript program execution works the same way. To understand this, let's replace a few terms with Javascript terminology.

Here,

• Wood types -> Data types

• Factory -> Global Execution Context

• Global Execution has two phases:

  • Code Phase / Thread Phase

  • Memory Phase

• Departments -> Functions, Functions has its own Local Execution Context, which further has two phases:

  • Code Phase / Thread Phase

  • Memory Phase

• Manager -> Call Stack, who is responsible for maintaining the order of execution of the functions.

So, whenever a JS code has been executed:

1. A global execution context is created (also known as the Creation Phase).

2. Declare the variables and store the definition of functions inside the Memory of the Global Execution Context (also known as Memory Phase).

3. Now the execution of code starts line by line, which checks the current value of the variables in the memory and reads the definitions of the functions from the memory (also known as Code Phase).

4. If there is any function in the code:

   1. Create the Local Execution Context for the function.

   2. Declare the variables in Local Execution Context (also known as Memory Phase for Local Context).

   3. Execute the code of the function line by line.

   4. Once all the code inside the function is executed completely, it returns the value to the Global Context

5. Global Execution Context executes the remaining code until all the code is executed.

Let's take an example to understand the flow:

Here is a small code snippet:

var value1 = 10;
var value2 = 20;

function sum(sumNum1, sumNum2, sumNum3) {
    return sumNum1 + sumNum2 + sumNum3;
}

function calculate(calcNum1, calcNum2) {
  	var calcNum3 = 30;
    var total = sum(calcNum1, calcNum2, calcNum3);
    return total;
}

var result = calculate(value1, value2);
console.log(result);

Steps in which JS code is executed:

Global Execution context (Factory)

1. Creation Phase
   Global Execution Context is created
   (Blackboard for the factory is ready)

   global is assigned to this (Global can vary depending on the environment in which the code is running. In the browser, it will be a window object.)

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   --------------------------------------------------------
   

2. Memory Phase: Variable and Function Definition get stored in Global Memory
   (What to be done, the size, and the material of the sofa are now mentioned on the blackboard)

   value1 is declared in memory with a value undefined
value2 is declared in memory with a value undefined
   The declaration of the sum function is stored in memory.
   The declaration of the calculate function is stored in memory.
   result is declared in the memory with a value undefined

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: undefined                                    |
   | value2: undefined                                    |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   | result: undefined                                    |
   --------------------------------------------------------
   

3. Execution Phase: Execution of code line by line. Execution is done by the JS engine on main thread.
   (Sofa building process starts now)

   The value of value1 is initialized as 10.
   The value of value2 is initialized as 20.
   The calculate function is called, so a new Local Execution Context is created and pushed onto the Call Stack.

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: 10                                           |
   | value2: 20                                           |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   | result: undefined                                    |
   --------------------------------------------------------
   

   1. Creation Phase: Local Execution Context is created for calculate
      (Blackboard for the Department is ready)

      calcNum1 is declared in memory with a value 10
calcNum2 is declared in memory with a value 20

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   2. Memory Phase: Variable and Function Definition get stored in Local Memory
      (What to be done and the used things are now mentioned on the department blackboard)

      calcNum3 is declared in memory with a value undefined
total is declared in memory with a value undefined

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   3. Execution Phase: Execution inside calculate function. Execution of code line by line on main thread.

      The value of calcNum3 is initialized as 30.
      The sum function is called, so a new Local Execution Context is created and pushed onto the Call Stack.

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: undefined                                 | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

      Local Execution Context (Departments)

      1. Creation Phase: Local Execution Context is created for sum
         (Blackboard for the Sub-Department is ready)

         sumNum1 is declared in memory with a value 10
sumNum2 is declared in memory with a value 20
sumNum3 is declared in memory with a value 30

         Global Execution Context Memory
         ________________________________________________________
         | window: global object                                |
         | this: window                                         |
         |                                                      |
         | value1: 10                                           |
         | value2: 20                                           |
         | sum: fn()                                            |
         | calculate: fn()                                      |
         |                                                      |
         | Local Execution Context Memory for calculate()       |
         | ---------------------------------------------------- |
         | | this: window                                     | |
         | | calcNum1: 10                                     | |
         | | calcNum2: 20                                     | |
         | | calcNum3: undefined                              | |
         | | total: undefined                                 | |
         | |                                                  | |
         | | Local Execution Context Memory for sum()         | |
         | | ________________________________________________ | |
         | | | this: window                                 | | |
         | | | sumNum1: 10                                  | | |
         | | | sumNum2: 20                                  | | |
         | | | sumNum3: 30                                  | | |
         | | ------------------------------------------------ | |
         | ---------------------------------------------------- |
         |                                                      |
         | result: undefined                                    |
         --------------------------------------------------------
         

      2. Memory Phase: SInce there is no variable value needs to be assigned to memory. Nothing will happen for sum function in this phase.

      3. Execution Phase: Sum of 3 variables has been returned by sum function.

      4. The execution context for sum is now destroyed.

   4. Execution Phase: Back to execution of calculate function
      The value of total is now been updated to 60

      Global Execution Context Memory
      ________________________________________________________
      | window: global object                                |
      | this: window                                         |
      |                                                      |
      | value1: 10                                           |
      | value2: 20                                           |
      | sum: fn()                                            |
      | calculate: fn()                                      |
      |                                                      |
      | Local Execution Context Memory for calculate()       |
      | ---------------------------------------------------- |
      | | this: window                                     | |
      | | calcNum1: 10                                     | |
      | | calcNum2: 20                                     | |
      | | calcNum3: undefined                              | |
      | | total: 60                                        | |
      | ---------------------------------------------------- |
      |                                                      |
      | result: undefined                                    |
      --------------------------------------------------------
      

   5. Execution Phase: The value of total is now been returned and the Local Context for calculate is now destroyed.

4. Execution Phase: Back to execution of global context
   The value of result is now been updated to 60

   Global Execution Context Memory
   ________________________________________________________
   | window: global object                                |
   | this: window                                         |
   |                                                      |
   | value1: 10                                           |
   | value2: 20                                           |
   | sum: fn()                                            |
   | calculate: fn()                                      |
   |                                                      |
   | result: 60                                           |
   --------------------------------------------------------
   

5. Execution Phase: console.log reads result from memory and prints 60

Call Stack (Manager)

The Call Stack works like a stack of tasks.

When a function is called, its execution context is pushed onto the stack.

When the function finishes execution, it is popped from the stack.

Single thread

You have heard about that Javascript is single thread language.

That means:

• Global code runs on main thread

• When execution of code contains a function

  • A local context is created

  • That context is pushed into Call stack

  • The main thread now start executing the function logic

  • After execution, the local context is removed and destroyed

• No other thread is created while execution other than main thread.

Function create execution context, not threads

Assignment for practice

Install Node.js (runtime environment) and VSCode (code editor)

Open VSCode, create a file practice.js and copy the above code into that file.

Click on Terminal -> New Terminal from the menu bar on top.

From select terminal, selected "Javascript Debug Terminal".

Add breakpoints by clicking on the gutter (the space). Red dot indicate that the breakpoint is added on that line.

Now, run node practice.js . Make sure you are in the same folder inside the terminal.

Try to play around with the next breakpoint button and observe the values of the context section.

Conclusion

JavaScript executes code using Execution Contexts and the Call Stack.

The Global Execution Context runs first, and every function call creates a new Local Execution Context.

These contexts are managed by the Call Stack to ensure that code executes in the correct order.

Follow the series to learn more about Javascript.

let fruit1 = "Apple";
let fruit2 = "Banana";
let fruit3 = "Mango";

This works fine for a few values.
But what if we need to store 20 fruits? 100 student marks? 1000 tasks?

Creating separate variables for each value becomes messy and hard to manage.

This is where arrays help us.

What is an Array?

An array is a collection of data elements that can be of the same or different types. In an array, the individual elements of data are referred to as elements.

Example:

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

Why Do We Need Arrays?

Arrays help us when we want to store multiple values together.

Common examples:

• List of fruits

• Student marks

• Shopping list

• Tasks in a to-do list

• Comments on a post

Example:

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

Instead of 5 variables, we store everything in one array.

How to Create an Array

In JavaScript, arrays can be created using multiple ways:

1. square brackets [] (beginner-friendly)

Example:

let fruits = ["Apple", "Banana", "Mango"];
let numbers = [10, 20, 30, 40];
let data = ["Ashish", 22, true];

1. Using the Array Constructor. You can also use the new Array() constructor.

• Empty Array

const emptyArrayConstructor = new Array();

• Array with initial values

const fruitsConstructor = new Array("apple", "banana", "cherry");

• Array with a specified length: If a single number is passed, it creates an array with that number of empty slots, not a single-element array.

const newArray = new Array(3); 
// Creates an array with 3 empty slots, not [3]
// But accessing newArray[0] gives undefined.

• Array.of(): The Array.of() static method creates a new Array instance from a variable number of arguments, regardless of the number or type of the arguments.

const singleNumberArray = Array.of(8); // Creates [8]
const multipleElementsArray = Array.of(1, 2, 3); // Creates [1, 2, 3]

• Array.from(): The Array.from() static method creates a new, shallow-copied Array instance from an iterable or array-like object.

// Create an array from a string
const fromString = Array.from("word"); // Creates ["w", "o", "r", "d"]

// Create an array with sequential numbers
const range = Array.from({ length: 5 }, (v, i) => i); // Creates [0, 1, 2, 3, 4]

Understanding Array Index

Every element in an array has a position number called an index.

Array indexing starts from 0.

Example:

const arr = ['Apple', 'Banana', 'Mango'];


Index:   0        1        2
        ----------------------
Array:  Apple   Banana   Mango

Accessing Array Elements

If we want a specific element of an array we can access it by its index using square brackets.

Example:

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


console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Mango

So,

• fruits[0] is the first element

• fruits[1] is the second element

• fruits[2] is the third element

Updating Array Elements

We can use the index of the element to update the array.

Example:

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

fruits[1] = "Orange";

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

In this case we replaced Banana with Orange.

Array Length Property

Every array has a built-in property called length. This property tells us how many elements there are inside of the array.

Example:

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

console.log(fruits.length); // 3

Looping Through an Array

If we don't want to manually print each element, we can use a loop.

Example:

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

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

// Output:
// Apple
// Banana
// Mango

Explanation:

• Start at index 0

• Continue until fruits.length

• Print each element.

This allows us to easily work with arrays of any size.

Visualizing an Array

You can think of an array like boxes placed next to each other.

Index →   0        1        2
        ----------------------
Value →  Apple   Banana   Mango

Or like memory blocks:

[0] → Apple
[1] → Banana
[2] → Mango

Each box has:

• a position (index)

• a value

Assignment

Try solving the following exercises:

• Define an array of 5 of your favourite movies

• Print the first and the last movies

• Update the second movie in the array and print the array

• Use a for loop to print all the movies

Final Thoughts

Arrays are one of the most important data structures in JavaScript.

They allow us to:

• store a collection of data

• access that collection using an index

• alter that collection

• Easily iterate through that collection

After learning the basics, you can learn to use the various array methods. Learning the basics will help you understand the array methods more easily. Master the basics first, and your future learning will be easier!

Follow the JS series to learn more about Javascript.

These are called conditional decisions.

Programming works the same way.

In programming, control flow refers to the order in which your program executes instructions. By default, code runs line by line, top to bottom. But real programs need to make decisions, repeat actions, and skip steps based on conditions. That's where control flow structures come in.

In this blog, we will cover the most fundamental of condition programming using:

• if

• else if

• else

• switch

What is control flow?

Control flow is a mechanism to handle the execution of code lines. It determines which lines of code, in what order and under which conditions.

Without control flow, programming is just a code flow in a single direction. Using control flow gives a different path to the code flow. Usually, all programs/software need control flow as each program has different flows to handle.

Line 1 -> Line 2 -> Line 3 -> Line 4 -> Line 5 -> Line 6

With control flow:

Line 1 -> Line 2 -> Line 3 -> if   -> Line 4
                              else -> Line 5 -> Line 6

Understanding control flow statements

If statement

Imagine you are at a ticket counter. The rule is, "if a person is less than 18, you are not allowed to buy a ticket." You are only allowed if you are 18 or older.

There is no other action, it's either you can buy or not allowed to buy.

Code version:

The if statement works exactly like that. It checks a condition, and only if the condition is true, it executes the block of code inside the curly braces.

const age = 15;

if(age >= 18){
    console.log("You are allowed to buy the ticket");
}

console.log("Program ends!")

When age is 15, the condition age >= 18 is false, so the console inside the if block is skipped entirely. The program jumps straight to the next line after the closing brace.

How It Runs Step by Step

1. The program reaches the if statement.

2. It evaluates the condition inside the parentheses.

3. If the condition is true, it enters the block { ... } and runs the code inside.

4. If the condition is false, it skips the block entirely.

5. Execution continues with whatever comes after the closing }. (Program ends! )

If-else

The Real-Life Version

Now imagine there is an election going on in your city. So, if you age is 18 or above, you can vote. Otherwise, you cannot. Here we can see there are two flows. Either you vote in the election or not.

Code Version

const age = 20;

if(age >= 20) {
    console.log("You are eligible for voting");
}
else {
    console.log("You are not eligible for voting");
}

console.log("Program ends!")

Try to run the above code snippet in your browser console or in any online Javascript compiler.

In the previous example, we have seen the condition inside if (condition) does not fulfill. (false) , "Program ends!" prints out. But here, it will go into the else block.

Else-if

In real life or in programming, there might be more than two outcomes. Consider a grading system:

• 90 and above → Grade A

• 75 to 89 → Grade B

• 60 to 74 → Grade C

• 35 to 59 → Grade D

• Below 35 → Fail

That's five possible outcomes. You need to check multiple conditions in sequence, and execute the block that matches the first true condition. This is called an else if ladder.

const marks = 82;

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

Else

Else is used for the last case, if all the if or else if conditions will not be fulfilled. In the above code example, you can see we are printing "Fail" as it is the last option in the programming flow.

Switch

Imagine you're writing a program: "Enter 1 for Monday, 2 for Tuesday, 3 for Wednesday..." You have one variable (the user's choice), and many exact values to compare it against. Using a long else if ladder for this works, but it's repetitive and harder to read.

The switch statement was used exactly for this scenario. It takes a single expression, compares it against multiple fixed values, and jumps directly to the matching one.

Example:

const day = 3;

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

Try to run this program in the browser console or Javascript compiler.

Have you noticed the problem? What is the output of the above program?

Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
Invalid day number.

Have you wondered why all the days get printed? Here, what helps is the break keyword.

Break

The break statement tells the program: *"*You're done with this case, exit the switch now." If you forgot to use break, just like the above example, the program will continuously execute all the cases until it gets the break.

Let's see the same example with break statment:

const day = 6;

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;
    case 6:
        console.log("Saturday");
        break;
    case 7:
        console.log("Sunday");
        break;
    default:
        console.log("Invalid day number.");
}

Now, try to run the program with multiple values of days. You will find that it was printing only the valid day. In this case, value of day is 6, so it will print "Saturday".

Change the value of day to 10 or "10", and observe the change in the result.

Assignment: Practice These Yourself

The best way to understand control flow is to write code. Here are two exercises:

Assignment 1 — Positive, Negative, or Zero

Write a program that checks an integer and prints whether it is positive, negative, or zero.

Hint: Use an if-else ladder

Example output:

const intNum = 10;
Result: The number is positive.

const intNum = -3;
Result: The number is negative.

const intNum = 0;
Result: The number is zero.

Assignment 2 — Day of the Week

Write a program for a vending machine using switch. Create a variable item_name and check the cases for the item_name.

Cases:

• When item_name is "coffee", print "Dispensing Coffee"

• When item_name is "tea", print "Dispensing Tea"

• When item_name is "cookie", print "Dispensing Cookie"

• Invalid case, print "Invalid Item Name"

Use switch with break statement

Conclusion

Programming is just teaching computers to make decisions like humans. Control flow is a necessary part of programming, as a program will have different flows that need to be controlled using these statements.

Follow this series to learn more about Javascript!

Now, what will happen? Your friend won't remember which bag the required item is in. If he had labeled everything, it wouldn't be a mess for him.

So, think of a JavaScript variable like a box used to store things in real life.

How to declare the variables?

Javascript has three keywords used to declare variables. These are:

1. let

2. const

3. var

Declaring a variable with let keyword

let is used to declare variables whose value might change later.

Example:

let count = 10;

console.log(count); // 10

count = 20;

console.log(count) // 20

In the above example, the value of count the variable changes from 10 to 20.

Declaring a variable with the const keyword

const is used to declare such variables, whose value is initialized once at the time of declaration and cannot be changed later.

Example:

const count = 10;

console.log(count); // 10

count = 20; // Error: Uncaught SyntaxError: 
            // Identifier 'count' has already been declared

Before using const, make sure that the value of the variable will not change.

Declaring a variable with the var keyword

var is an old way of declaring variables, which has been replaced in modern JavaScript by let and const.

var count = 10;

console.log(count); // 10

count = 20;

console.log(count) // 20

The value can also be initialized/updated later as seen in the above example.

Rules for variable names

• Should start with a letter, _ or $ . Cannot start with a number.

const name = "Ashish";
const $age = 20;
const $gender = 'M';

const 1age = 10; ❌

• Cannot Contain Spaces

const first name = "Ashish"; ❌

• Only Letters, Numbers, _, and $ Allowed

const first_name = "Ashish";
const profileLink1 = 'https://www.ashishkumarsaini.dev';

const profileLink-2 = 'https://linkedin.com/in/devaksaini/'; ❌

• Cannot use reserved JavaScript keywords

• Case sensitive

const value = 10;
const valuE = 20;
const VALUE = 30;

console.log(value); // 10
console.log(valuE); // 20
console.log(VALUE); // 30

What are datatypes?

We understand that there are boxes to store something, which we call variables. But what are we going to store in that box?

Imagine you have a box where you store something, like apples.

• The box → is the variable

• The label on the box → is the variable name

• The item inside the box → is the value

Here, apple is a datatype. Similarly, we can store multiple types of things in the boxes.

In JS, we call them datatypes.

There are two types of datatypes:

1. Primitive Datatypes

2. Non-primitive Datatypes

Primitive Datatypes

Think of a primitive data type as simple values stored inside the variable. Primitive datatypes are immutable, meaning their value can be replaced but not changed directly.

Note: You might get confused here about the immutability of the datatype.

Here we are talking about the immutability of datatype not variable. Variable themselves are mutable.

You cannot alter the number 5 to make it 6. Instead you replace the value of variable containing 5 to 6.

let a = 'apple'; // the value 'apple' will always 
                 // be 'apple'. datatype is immutable
a = 'orange';    // new value 'orange' re-assign to 
                 // variable. variable is mutable

There are multiple primitive datatypes:

Number

Used to store numeric values (integers or decimals).

const count1 = 10;
const count2 = 2.5;
const count2 = -10;

console.log(count1); // output: 10
console.log(count2); // output: 2.5
console.log(count2); // output: -10

console.log(typeof count1); // 'number'

String

User to store text values.

const text1 = 'Hey, this is a text';
const text2 = `2 + 3 = ${2+3}`; // template literals

console.log(text1); // output: 'Hey, this is a text'
console.log(text2); // output: '2 + 3 = 5'

console.log(typeof text1); // 'string'

Boolean

Use to store true or false.

const isRegistered = true;
const isLoggedIn = false;

console.log(isRegistered); // output: true
console.log(isLoggedIn); // output: false

console.log(typeof isRegistered); // 'boolean'

BigInt

Used to store large numbers beyond the number limits. Adding n to an integer literal makes it BigInt. It is used to represent numbers larger than Number.MAX_SAFE_INTEGER
(2^53 − 1 → 9007199254740991).

const count = 123456n;

console.log(count); // 123456n

console.log(typeof count); // 'bigint'

Undefined

Undefined is defined as having no value.

let sum;

console.log(sum); // output: undefined

console.log(typeof sum); // 'boolean'

Null

Null is defined as having an empty value.

let count = null;

console.log(count); // output: null

console.log(typeof count); // 'object'

What is the scope in JS?

Scope defines where a variable can be accessed in a program.

Real World Analogy:

• Some things are placed inside each room of your house.

• Some things are placed in the common area of all rooms.

Types of scope:

1. Block scope (let and const): Variables that are declared in any block or we can say inside any {} (curly braces).

2. Function scope: Variables declared inside a function can only be used inside that function.

3. Global Scope: Variable which are declared outside of a block or function scope. It will be accessible to all functions and blocks.

_________________________________________________________________
| const name = 'Pankaj';  // global variable                    |
| const age = 25;         // global variable                    |
|                                                               |
| if(age == 25) {                                               |
|                                                               |
| ---------Block Scope-----------------                         |
| |                                    |                        |
| | const isSubscriber = true;         | isSubscriber will only |
| | console.log(isSubscriber); // true | accessible inside this |
| |                                    | block                  |
| |                                    |                        |
| | console.log(name); // Pankaj       | name is accessible.    |
| |                                    | as global variable.    |
| --------------------------------------                        |
|                                                               |
| }                                                             |
|                                                               |
|                                                               |
| function sum() {                                              |
|                                                               |
| -------Function Scope-----------------                        |
| |                                    |                        |
| | const isVerified = false;          | isVerified will only   |        
| | console.log(isVerified); // false  | accessible inside this |
| |                                    | function               |
| |                                    |                        |
| | console.log(age); // 25            | age is accessible.     |
| |                                    | as global variable     |
| --------------------------------------                        |
|                                                               |
| }                                                             |
|                                                               |
|                                                               |
| console.log(name); // Pankaj                                  |
| console.log(age); // 25                                       | 
|                                                               |                                              
| console.log(isSubscriber); ❌ Uncaught ReferenceError:        |
|                               isSubscriber is not defined     |
| console.log(isVerified);   ❌ Uncaught ReferenceError:        |
|                               isVerified is not defined       |
|                                                               |
-----------------------------------------------------------------

Variables and Datatypes are the fundamental topics to learn before starting learning any language. Understanding and practicing the topics that we have covered in this blog will help you with further topics.

Assignment for practice:

Open the console in the devtools of any browser by right-clicking on any page (in most of the browsers, ex: Chrome) and selecting the Inspect option.

Try to create the variables mentioned below:

1. name

2. age

3. isStudent

Try to play around using let, var, and const to declare variables and changing the declared type from var -> let, let -> const, and observe the behaviour changes of each declaration type.

Also, try to put them in a block and access those variables outside the block to see the errors in real-time.

Follow this series to learn more about Javascript!

In this blog, we will understand operators with simple examples.

What are Operators?

Operators are nothing but the symbols that perform operations. Let's take an example:

const a = 10;
const b = 20;

const c = a + b;

console.log(c); // 30

Here, + is the operator.

What are Operands?

Variables on which operation is done, are called operands.

const a = 10;
const b = 20;

const c = a + b;

Here:

• a is left operand

• b is right operand

Types of Operators

In JS, there are multiple types of operators, but we will cover the basic, mandatory operators in this blog.

1. Arithmetic operators (+, -, *, /, %)

2. Comparison operators (==, ===, !=, >, < , >=, <= )

3. Logical operators (&&, ||, !)

4. Assignment operators (=, +=, -=)

Let's understand them one by one:

Arithmetic Operators

These are used for basic mathematical operations.

Comparison operators

These operators are used for comparison between two values and return a Boolean (true/false) value.

Understanding loose and strict comparison is very important.

Why "5" == 5 gives a result of true?

When there is == operator, JS first converts the value to the same type before comparison.

Which means "5" (string) is first converted to 5 (number) and then 5 == 5 comparison gives true result.

Whereas in === strict comparison, JS does not change the type of both left and right operands and compares both the type and value.

On the left side, there is a string operand and on the right side, there is a number operand. That's why in a strict case it will give a false result.

Logical operators

These operators help in combining the conditions.

• &&
  This is also known as AND operator.

  Truthy Table

  A	B	Expression	Result
  true	true	true && true	true
  false	true	false && true	false
  true	false	true && false	false
  false	false	false && false	false

  By analysing the truthy table, we can see that even if one side of expression is false, the final result is false. In order to get true, both side values should be true.

• ||
  This is also known as OR operator

  Truthy Table

  A	B	Expression	Result
  true	true	true || true	true
  false	true	false || true	true
  true	false	true || false	true
  false	false	false || false	false

  Here we can see that if either side of the operator is true, the final result will be true. Only in the case of both sides of values to being false gives the false result.

• !
  This is known as the NOT operator. As the name suggests, it reverses the given value.

  Truthy Table

  A	Expression	Result
  true	!true	false
  false	!false	true

Assignment Operators

These operators are used to assign values to variables.

• =
  This is known as assign operator. It is used to assign a value to a variable.

let a;

a = 10;

console.log(a); // prints 10

• +=
  This is known as Add and assign operator

let a;

a = 10;

console.log(a); // prints 10

a += 5; // Adding 5 to a variable value and assing back

console.log(a) // prints 15

• -=
  This is known as the Subtract and assign operator

let a;

a = 10;

console.log(a); // prints 10

a -= 5; // Subtracy 5 from the variable value and assing back

console.log(a) // prints 5

Final thoughts

JavaScript operators are the building blocks of logic and calculations in your code. Mastering these will make your JavaScript journey much easier.

To learn JS from fundamentals to advanced, follow this series https://blog.ashishkumarsaini.dev/series/javascript-for-beginners

Emmet is a shorthand syntax that expands into full HTML code.

Instead of writing long HTML tags manually, you just write the shorthand and you code editor (in this blog we are using VS code) automatically converts the shorthand into the full html code.

In one line, Emmet lets you think in structure, not syntax.

You describe what you want, and Emmet writes it for you.

Understanding the real pain point ( why writing HTML feels slow)

Imagine you want to create a simple card layout.

Without Emmet (Manual HTML)

<div class="card">
  <h2>Title</h2>
  <p>Description text</p>
  <a href="#">Read more</a>
</div>

You had to:

• Type every tag

• Close every tag

• Indent manually

• Ensure structure is correct

Now imagine doing this 20 times a day.

That’s where Emmet comes in picture. Same thing in emmet:

div.card>h2+p+a

Press Tab / Enter →

<div class="card">
  <h2></h2>
  <p></p>
  <a href=""></a>
</div>

You typed 18 characters instead of 150+.

Why Emmet Is Extremely Helpful for HTML Beginners

For beginners, Emmet:

• Reduces typing fatigue

• Prevents missing closing tags

• Forces you to think in HTML structure

• Makes nesting obvious

• Improves learning speed

How Emmet Works Inside Code Editors

Emmet is built into most modern editors (VS Code recommended).

How it works:

1. You type an Emmet abbreviation

2. The editor recognizes it

3. You press Tab or Enter

4. HTML code is generated instantly

Emmet Is a Shortcut Language

Emmet uses symbols to represent HTML relationships.

Core Symbols You Must Know

These symbols are enough for daily work.

Creating HTML Elements Using Emmet

Single Element

Emmet

p

HTML Output

<p></p>

Heading Example

Emmet

h1

HTML

<h1></h1>

This works for h1 to h6.

Adding Classes, IDs, and Attributes

Adding a Class (.)

Emmet

div.container

HTML

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

Adding an ID (#)

Emmet

section#hero

HTML

<section id="hero"></section>

Adding Multiple Classes

Emmet

div.card.shadow.rounded

HTML

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

Adding Attributes ([])

Emmet

a[href="https://example.com"]

HTML

<a href="https://example.com"></a>

Image Example

Emmet

img[src="photo.jpg" alt="profile photo"]

HTML

<img src="photo.jpg" alt="profile photo">

Creating Nested Elements (Parent → Child)

This is where Emmet shines.

Basic Nesting (>)

Emmet

div>p

HTML

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

Parent With Multiple Children (+)

Emmet

div>h1+p+button

HTML

<div>
  <h1></h1>
  <p></p>
  <button></button>
</div>

Repeating Elements Using Multiplication (*)

List Example

Emmet

ul>li*3

HTML

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

Cards Example

Emmet

div.card*4

HTML

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

Combining Nesting + Repetition (Real Layout)

Emmet

ul>li.item*3>a

HTML

<ul>
  <li class="item"><a href=""></a></li>
  <li class="item"><a href=""></a></li>
  <li class="item"><a href=""></a></li>
</ul>

This is real-world HTML, generated in seconds.

Generating Full HTML Boilerplate

Instead of Writing This Manually

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
</body>
</html>

Just Type This 👇

!

or

html:5

Press Enter → 🎉
Complete boilerplate generated.

This is one of the most used Emmet shortcuts ever.

Side-by-Side: Emmet → HTML

Emmet tips for Beginner

• Learn HTML first, Emmet second

• Use Emmet for daily patterns

• Don’t memorize everything

• Practice after every example

• Emmet is optional, but life-changing

Final Thought

Emmet doesn’t replace HTML knowledge.
It amplifies it.

Once Emmet becomes muscle memory:

• Writing HTML feels instant

• Layout building becomes fun

• Your speed increases naturally

HTML teaches structure. Emmet removes friction.

HTML (HyperText Markup Language) is the standard language used to create web pages.

When you open any website, the basic structure of that page is written in HTML. It is also known as the skeleton of any webpage.

Simple Analogy

Think of building a house:

• HTML → Structure of the house (walls, doors, rooms)

• CSS → Paint & decoration (colors, design)

• JavaScript → Electricity & automation (interaction, behavior)

Without HTML, a browser would not be able to know:

• Which is heading

• From where the paragraph starts

• Where an image should appear

• Cannot differentiate between a link and plain text

HTML gives meaning and structure to content so browsers can display it properly.

What is an HTML Tag?

An HTML tag is a special keyword written inside angle brackets < >.

Example:

<div>

A tag acts like a label or instruction to the browser.

It tells the browser:

• From where the element starts

• Where it ends

• What type of element is it

Tags themselves are not displayed on the webpage. They only guide the browser on which element and how the element should be displayed.

Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs:

<p>Hello World</p>

Let’s break it down:

Opening Tag: This is defined as a tag that tells the browser where an element starts.

<p>

Content: It is actually the content which comes in between the tags. It is actually displayed on the web page in the browser.

Hello World

Closing Tag: This tells the browser that this is the end of the element. The forward slash / is what makes it a closing tag.

</p>

Closing tag is very important as the browser might get confused that till where the content is and mix other tags, which leads to incorrect and mixed layout issues.

What is an HTML Element?

This is where beginners often get confused.

Tag vs Element

Tag → Only the keyword inside brackets
Element → The entire structure, including opening tag, content, and closing tag.

Example:

• <p> = Opening Tag

• </p> = Closing Tag

• <p>Hello world</p> = Element

So an element is a complete unit, while a tag is just a part of it.

In the real world analogy, imagine a box:

• Opening tag → opening the box

• Content → items inside the box

• Closing tag → closing the box

• Entire box → element

Self-Closing (Void) Elements

Some HTML elements do not wrap any content, so they do not need closing tags.

Examples:

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

These are called Void Elements.

Why They Exist

They perform single actions, such as:

• Displaying an image

• Creating a line break

• Drawing a horizontal line

• Creating an input field

These tags do not have content to wrap, that’s why there is no requirement of closing tag.

Block-Level vs Inline Elements

HTML elements are mainly divided into two layout categories.

Block-Level Elements

Characteristics of block-level elements:

• Take the full width of the screen

• Always start on a new line

• Used to build a structure

Examples:

<div></div>
<p></p>
<h1></h1>
<section></section>

Visually, it will look like this:

[Heading          ]
[Paragraph        ]
[Another Paragraph]

Even if the content is small, block elements occupy the entire row.

Inline Elements

Characteristics:

• Take only the required width

• Do not start on a new line

• Used inside text

Examples:

<span></span>
<a></a>
<strong></strong>
<em></em>

Visually, it will look like this:

This is a [link] inside a sentence.

Inline elements flow within text, like words in a paragraph.

Commonly Used HTML Tags

Here are the tags beginners should learn first:

Headings

Used for titles and structure.
h1 is the largest, h6 is the smallest.

<h1>Main Title</h1>
<h2>Sub Title</h2>

Paragraph

Used for writing a paragraph. Denoted by p

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

Link

Also known as an anchor tag.
It has href attribute that specifies the URL to navigate when clicked.
It also has a target attribute used for opening the page in the same browser tab or another tab. It accepts:

• _blank → for a new tab

• _self → for the same tab

<a href="https://example.com" target="_blank">Visit Site</a>

Creates clickable links.

Image

Use to display images. It has attributes:

• src → source path of the image

• alt → until the image gets loaded, it will show the alt text. Useful for accessibility readers

• width → for providing a fixed width to the image

• height → for providing a fixed height of the image

<img src="photo.jpg" alt="A photo">

Div (Container)

It is used to wrap any content/tag inside it. It is also known as a wrapper. It is also used to group sections.

<div>Content</div>

Span (Inline Container)

It is used to render the text, but not like p tag. It doesn’t take full space and also not create a new link for the elements.

<span>Highlighted text</span>

Lists

As the name suggests, it is used to display the lists.

1. Ordered lists: This is used when the order of the items should be displayed. It is done for the semantic purpose. ol tag is used to display an ordered list.

   li means list item.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

Output:

1. Item 1
2. Item 2

2. Unordered list: This is used when the order of the items doesn’t matter. ul tag is used to display an ordered list.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Output:

* Item 1
* Item 2

Line Break

This is a self-closing tag used to create a new line. Syntax define as <br>

<span>Text 1</span>
<br>
<span>Text 1</span>

Output:

Text 1

Text 2

Horizontal Rule

This is a self-closing tag used to separate the two contents by displaying a horizontal line. Syntax define as <hr>

<p>Text 1</p>
<hr>
<p>Text 1</p>

Output:

Text 1
-----------------------------------------------------------------
Text 2

Inspect HTML

One of the best ways to learn HTML is to see it in real websites.

How to Inspect

1. Open any webpage

2. Right-click → Inspect

3. Go to the Elements tab

4. You’ll see live HTML

You can even:

• Edit text

• Change colors

• Delete elements temporarily

This helps you to understand structure visually.

Final Thoughts

HTML is not programming, it is markup.
You are not telling the computer how to think, you are telling the browser how to structure content.

Once HTML is clear, learning CSS and JavaScript becomes much easier because you already understand the foundation of the webpage.

• You type website domain/url in the address bar

• You hit enter

• and boom, a webpage is displayed

In less than a second, a browser has perform a dozens of tasks to display a single webpage.

Assume browser like a factory, when you just told what I need and there are multiple factory workers/machine working together and create a product for you.
Browser works the same.

What happen you type a URL and press Enter?

When Enter is pressed:

1. Checks in cache:

   Browser checks if it already access this site earlier. This check is just to get the IP address of the hosted server

2. DNS lookup:

   If the IP is not available in cache, it request to DNS to get the IP.

3. TCP connection:

   Once the DNS provide the IP, browser start establishing a connection with the server.

4. Server responds with files.

5. Browser does its calculations and display the webpage content which comes from the server.

In this blog, we mainly focus on the calculations done by the browser from getting data from the server to display page to the viewer.

Main parts of a browser (high-level overview)

Browser is not a single program but a team of mini programs working together. Let’s first understand the overview of browser components.

• User Interface:

  It belongs to the component of browser which is visible directly for the interaction with the browser. It include everything expect where the website is displayed. Examples:

  • Address bar

  • Back/forward buttons

  • Bookmark menu

  • Settings

  • Tabs

    

• Browser Engine

  The browser engine is also called the brain/core of the browser. It act as a middleman between the User Interface and the Rendering Engine.

  It receives commands from the browser User Interface and give instructions to the Rendering Engine to do some operations.

• Rendering Engine

  It is responsible for displaying the requested content on the screen. It parses the HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet), and combine them to build. We will discuss more about this in details in further sections

• Networking Layer

  This component handles all network communications and HTTP requests. It manages DNS lookups (translating URL to IP addresses), handles TCP/IP connections, and fetches resources (HTML, images, CSS) from servers

• JavaScript Interpreter

  It is a engine that parses and executes JavaScript code. It interprets, compiles, and runs JavaScript to add interactivity to web pages

• Disk API

  As name suggests, it is used to store data in storage which a browser/web page needed. There are multiple components in browser data storage such as Cookies, LocalStorage, SessionStorage, IndexDB, and file system access.

Browser Engine vs Rendering Engine

How browser download HTML, CSS and JS files?

1. The process begins with when a user enters the URL in address bar and press Enter.

2. Browser perform a DNS look to find the servers IP’s address.

3. Once browser get the IP, it sends a HTTP GET request to the server.

4. Browser Networking Layer create a connection for the data transfer.

5. Now, the browser start receiving the HTML data, the browser engine instructs rendering engine to start parsing the HTML data and build the DOM (Document Object Model)

6. As it parses the HTML, it founds the tag referencing to the external JS/CSS file links such as <link> or <script>

7. Browser again sends the HTTP request to the corresponding servers of the link for the CSS and JS.

   • Once the CSS file is downloaded, the rendering engine starts parsing the CSS and generate a CSSOM (CSS Object Model). Until the CSSOM is created, browser stops rendering the HTML, to avoid rendering the page incorrectly and repaint.

   • Once JS file is downloaded, the JS Interpreter start compiling the JS downloaded and execute it. By default, the browser stops the parsing of HTML and CSS, but you can change the behaviour by using async/defer attribute in the script tag.

     If you want not to block the CSS and HTML parsing until the JS file get download, use defer otherwise use async

8. Now when all the necessary files has been downloaded, the rendering engine combines the DOM and CSSOM and with all other processing like frame constructor and reflow, it paints and display the web content on the browser.

Structural flow of Rendering Engine

Parsing

HTML parsing (HTML → DOM creation)

When the browser receives an HTML file, it first understand the structure instead of directly jump into displaying the content on screen.

Let’s first understand what parsing is?

Parsing is a way of reading the code, understanding the structure and breaking it into pieces.

In real world analogy, it is same like reading an english sentence from a book, understanding and separating the noun, pronoun, verb and adjectives. A HTML is look like this:

<body>
    <div>
        <h1>This is a heading</h1>
        <p>This is a text</p>
    </div>
    <strong>Hey, It's me</strong>
</body>

Here, body and div is a container for h1 and p tag.

After parsing, the browser creates a tree like structure called Document Object Model (DOM).

      body
      / \
 strong  div
          / \
         h1  p

It cannot be visualise but in the browser backend, the structure is almost like the above.

CSS Parsing (CSSOM creating)

While the HTML builds structure, CSS builds the rules for styling.

Example CSS:

h1 { color: blue; }
p { font-size: 16px; }

The browser parse CSS by breaking it into the selectors and properties.

This become another tree like structure which called as CSSOM, but instead of elements it stores styling instructions.

DOM + CSSOM → Render Tree

Now the browser rendering engine has

• Structure (DOM)

• Style rules (CSSOM)

It combines them into a render tree. Render tree is something which contains only visible elements and their final styles.

So, in case if the element has display: none, it will not appear in the render tree.

Frame Tree / Reflow

Now the browser figures out where everything goes.

It calculates:

• Width

• Height

• Position

• Margins

• Padding

• Screen size responsiveness

This step is called Layout or Reflow.

Layout changes when window resizes, font load, DOM changes

Painting

After layout, the browser starts adding visuals:

• Colors

• Fonts

• Borders

• Shadows

• Images

At this stage, elements become visually rich but still exist in layers.

Display

At this step the user actually sees the content on the page.

• Layers are merged

• Pixels are sent to the screen

Conslusion

• HTML → DOM (Structure)

• CSS → CSSOM (Style Rules)

• DOM + CSSOM → Render Tree (Visible Elements)

• Render Tree → Layout (Measure & Position)

• Layout → Paint (Add Colors & Fonts)

• Paint → Display (Pixels on Screen)

• stays online 24/7

• listens on a port

• waits for requests

• sends back responses

In a real-world analogy, a server is like a shop counter:

• You (client) ask something from the shopkeeper

• The shopkeeper checks

• The shopkeeper gives you the thing that you have requested

The internet is just millions of such conversations happening per second.

Problems before cURL existed

To connect to the server, you really need some heavy software like Postman, browsers or you have to write a program.

But what if you just want to:

• Check if a server is alive

• see raw response

• debug quickly

Then cURL came into the picture to solve the problem of displaying raw data on terminals.

What is cURL?

cURL is a tool that allows you to talk to the servers directly from the terminal.

It sends a request to the server same like a browser. The only difference is it doesn’t have any formatting, no UI and no hiddings.

• Browser → need buttons/ui to connect to servers

• cURL → uses terminal commands to connect to the servers

It shows raw responses from the servers.

Why programmers need cURL

Both frontend and backend developers need cURL for various purposes:

Backend developers use cURL to:

• Test endpoints before the frontend exists

• Debug production APIs

• Validate request/response format

• Reproduce bugs

• Check authentication

cURL sits between you and the server:

• Frontend devs use it to test APIs

• Backend devs use it to debug endpoints

• DevOps uses it to check server health

Your first request — what actually happens

Let’s understand what happens when someone sends a request to a server using cURL:

This looks simple, but a LOT happens behind the scenes.

Step-by-step breakdown

1. DNS lookup

   • abc.com → IP address

2. Connection

   • TCP connection to the server

3. TLS handshake (for HTTPS)

   • secure channel established

4. HTTP request sent to the server.

5. Server responds

6. cURL prints the response from the server

Same happen for the Browser in the backend.

Understanding request and response (core idea)

Whenever cURL talks to a server, two things happen:

Request (You → Server)

• What do you want?

• Where do you want it from?

• How do you want it?

Response (Server → You)

• Status (success or error)

• Data (HTML, JSON, text, etc.)

Understanding HTTP Request and Response

An HTTP request is a text-based message sent by a client to a server, such as loading a webpage (GET) or submitting a form (POST).

Key Components of an HTTP Request

• Request Method: Defines the action type

  1. GET to retrieve

  2. POST to send

  3. PUT to update

  4. DELETE to remove.

• Uniform Resource Identifier (URI): The path or address of the resource on the server.

• HTTP Version: (e.g., HTTP/1.1 or HTTP/2).

• Headers: Key-value pairs providing information about the client, content type, or cookies.

• Body: Optional content sent with the request (e.g., form data).

An HTTP response is the data a server sends back to a client after receiving a request containing content like HTML, JS, CSS, images, etc.

Key Components of an HTTP Response

• Status Code: A 3-digit code indicating the success/failures.

• Response Headers: Metadata providing details about the content, content type (e.g., Content-Type: text/html).

• Message Body: The actual content requested by the client, such as HTML code, an image file, or JSON data.

HTTP response status codes:

GET vs POST requests

• Use GET for:

  • Fetching information, such as viewing a webpage, product data, or search data, etc.

  • Operations that are "safe" and do not alter the server's state.

  • Scenarios where users might want to bookmark or share the URL.

• Use POST for:

  • Submitting sensitive data like passwords, login credentials, or personal information.

  • Creating or modifying data on the server, such as posting a comment, registering a new user, or adding an item to a shopping cart.

  • Uploading files.

  • Sending a large amount of data.

Using cURL with APIs (what APIs really are)

An API is just a server that:

• doesn’t return UI

• returns structured data (usually JSON)

So when you do:

curl --request GET \
  --url 'https://api.freeapi.app/api/v1/public/randomjokes?limit=1&query=sciencepage=1' \
  --header 'accept: application/json'

You are:

• calling a server endpoint

• using HTTP GET request

• getting raw data

{"statusCode":200,"data":{"page":1,"limit":1,"totalPages":0,"previousPage":false,
"nextPage":false,"totalItems":0,"currentPageItems":0,"data":[]},
"message":"Random jokes fetched successfully","success":true}

No frontend involved.

Now, without the specific rules anyone can send data through any methods or we can say rules.

• Data can get lost

• Data can arrive out of order

• Data can be duplicated

• Data can get damaged

• Your friend won’t know when the complete data is received

Now, TCP came in picture.

What is TCP and why is it needed?

TCP stands for Transmission Control Protocol. It is a data transmission protocol in the Transport Layer of the OSI Model.

TCP makes sure that the data is

• Delivered

• Delivered in the correct order

• Delivered without any duplicates

• Delivered without any corruption

That’s why TCP is known for reliable data transfer protocol. Before establishing a connection and sending the data, it builds the connection.

TCP is connection-oriented. The connection orientation approach means that the connection establishment is required to be set up before starting to transfer the data. This protocol uses three way handshaking approach and ensures that the other party is ready to accept and receive the data.

Let’s take an example of a client and a server.

• The Client should first send a message to the server asking, “Are you ready?”

• Server responds “Yes, I’m ready“ and sends it back to the client.

• Client responds, “Let’s start”.

This process is known as 3-way handshaking.

Problems TCP can solve

Let’s understand the complete process of connection building, data transferring and then connection closing in detail:

Establishing connection

Before sending the data, TCP builds the connections first. TCP uses a process called three-way handshaking, which means it asks for the receiver, waits for the acknowledgement and then sends the data.

Imagine a conversation between two people on a mobile phone:

First: hey! Am I audible?
Second: Yes, you are audible. Am I audible too?
First: yes, you too. Let’s start.

Only after this, the real conversation will start. So,

Step 1 →

• Sender sends the sequence number as 0 and the ack number as 0.

• The Sender says, I want to start a connection.

Step 2 → Receiver sends

• Ack number as 1 (denotes receiver is ready to start the connection)

• Sequence number as 0 (means send me data from the start)

Now the receiver acknowledges and is ready to start the connection.

Step 3 → Sender sends

• Ack number as 1 (connection is established)

• Sequence number as 1 (let’s start from the first order of the data segment)

Transfering Data

Let’s assume the connection has been established.

1. Sender → Receiver (segment 1)

   • Sequence Number: 1

   • Acknowledge number: 1

   • Length: 100 bytes (data bytes from 1 to 100)

Sender says, “Here are bytes 1 to 100”.

2. Receiver → Sender: The receiver accepts the data and returns:

   • Sequence Number: 1

   • Acknowledge number: 101

The receiver says, “I got the data till 101 bytes”.

3. Sender → Reciever (segment 2)

   • Sequence Number: 101

   • Acknowledge number: 201

   • Length: 100 bytes (data bytes from 101 to 201)

Sender says, “Here are bytes 101 to 200”.

4. Receiver → Sender: The receiver accepts the data and returns:

   • Sequence Number: 101

   • Acknowledge number: 201

The receiver says, “I got the data till 201 bytes”.

And the process goes on…

Closing Connection

1. Sender → Receiver

   • Sequence Number: 301

   • Acknowledge number: 401 (but not really required)

   • FIN: 1

Sender says, “Here are bytes 301 to 401. I have sent all my data and this is the last set of bytes”.

2. Receiver → Sender: The receiver accepts the data and returns:

   • Acknowledge number: 401

The receiver says, “I got all the data till 401 bytes”.

3. Receiver → Sender:

   • FIN: 1

   • Acknowledge number: 0

The receiver says, “I’m also closing the connection form my side”.

4. Sender → Receiver: The receiver accepts the data and returns:

   • FIN: 1

   • Acknowledge number: 1

The receiver says, “Thanks! Acknowledged”.

Packet loss and retransmission flow

Now lets break the packet transferring process.

Sender sends:

• Segment X → Seq: 2000, Length: 500

• Segment Y → Seq: 2500, Length: 500

But assume that B reaches first, or A has not received, in any case. Receiver checks:

• I have received 2500 - 2999

• But 2000 - 2499 is missing

• I’m still waiting for byte 2000.

The receiver continuously sends ACK = 200 until it receives the data from 2000 - 2499.

Conclusion

The data transmission in TCP is programmed in such a way that there is very less posibility of data loss. Whether it is on the connection building, data transfer or closing the connection, it asks for the acknowledgment which helps to identify if the data has not been missed by the receiver. This acknowledgement is something that makes it slower than UDP.

That’s why TCP is the protocol that turns an unreliable network into a reliable, ordered, and safe data stream.