When we had to combine strings with variables, we used normal string concatenation. Something like:

const name = "Gaurang";
const age = 20;

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

Now this works, there is no issue as such. But if you look at it closely, it starts getting messy very quickly. You have quotes, plus signs, spaces that you need to manually handle, and if the string gets longer, it becomes harder to read.

Now imagine if there are multiple variables or conditions. It becomes even more cluttered. You might even miss a space or a quote and then spend time figuring out what went wrong.

This is exactly the problem template literals try to solve.

What are template literals

Template literals are just another way of writing strings in JavaScript, but with more flexibility.

Instead of using single quotes or double quotes, we use backticks.

So the same example becomes:

const name = "Gaurang";
const age = 20;

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

Now if you compare both, this one feels more natural to read. It almost looks like a normal sentence.

So the main idea here is instead of breaking the string and adding variables using plus, we directly embed variables inside the string using this syntax: ${variable}

Embedding variables inside strings

This is where template literals actually shine.

Inside backticks, whenever you want to insert a variable, you use ${ } and put the variable inside it.

For example:

const price = 100;
const quantity = 2;

const total = `Total price is ${price * quantity}`;

Here we are not just putting a variable, we are even doing a calculation inside it. That is something you cannot do cleanly with normal concatenation without making it look messy. So basically whatever you put inside ${ } gets evaluated and then inserted into the string.

Multi line strings

Now this is something which used to be annoying earlier. If you wanted a string in multiple lines, you had to do something like this:

const text = "This is line one\n" +
             "This is line two\n" +
             "This is line three";

Again, not wrong, but not very clean.

With template literals, you can directly write:

const text = `This is line one
This is line two
This is line three`;

And that is it. No extra symbols, no manual line breaks.

It just works as you write it.

Comparing old vs new approach

If you really compare both approaches, the difference is mostly about readability. With concatenation, your focus shifts to managing syntax. You are thinking about quotes, plus signs, spacing. With template literals, your focus shifts back to the actual content of the string and that is a big deal when your code grows.

Where this is actually useful

In real projects, strings are everywhere. you are building UI messages, logging data, creating dynamic content, working with APIs. In all these places, you often need to combine static text with dynamic values. Template literals make this process smoother.

Especially when dealing with:

dynamic messages, HTML templates in frontend, logging complex values, building URLs with variables

It reduces chances of mistakes and improves readability.

One small thing to remember

Template literals are not just for variables. They can also handle expressions, so anything inside ${ } is evaluated.

For example:

const a = 5;
const b = 10;

console.log(`Sum is ${a + b}`);

This directly gives you the computed result inside the string.

Closing thought

At the end of the day, template literals are not about doing something new. They are about doing the same thing in a cleaner way. String concatenation still works, and it will always work. But once you start using template literals, going back feels unnecessary.
It just makes the code easier to read, easier to write, and honestly less error prone and in real development, that clarity matters more than anything else.

That is exactly what a nested array is.

If you have something like [1, 2, [3, 4], 5], then the third element is not just a number, it is another array. So now you have an array inside an array. That is your simplest form of a nested array. And this does not stop at just one level. You can go deeper like [1, [2, [3, [4]]]] and it keeps going depending on how complex the data is.

Now the problem starts when we try to work with such data.

Because honestly, dealing with nested arrays directly is not very convenient. Imagine you want to sum all numbers or apply some logic. You now have to handle multiple levels, check if something is an array, then go inside it, and so on. This is where flattening comes into picture.

Flattening simply means converting a nested array into a single level array. So instead of [1, 2, [3, 4], 5], you turn it into [1, 2, 3, 4, 5]. Everything comes out at the same level.

That is the whole idea. Take a complex structure and simplify it.

If you visualize it, think of nested arrays like boxes inside boxes. Flattening is just opening all the boxes and putting everything on the table.

Now coming to how JavaScript helps us here.

The .flat() method

This is the most direct way to deal with nested arrays. If you have an array and you call .flat() on it, JavaScript will remove one level of nesting.

For example:

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

What it does is it breaks that inner array and pulls its elements into the main array.

Now an interesting part is that .flat() can take an argument. That argument decides how many levels you want to flatten.

So if you have something deeper like:

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

If you do:

arr.flat(1)

It will only remove one level.

If you do:

arr.flat(2)

It will go two levels deep.

And if you are not sure how deep your nesting is, which honestly happens most of the time, you can just do:

arr.flat(Infinity)

This basically says flatten everything, no matter how deep it is.

This is why in real scenarios, people often go with Infinity because counting levels manually is not always practical.

The .flatMap() method

Now this one is slightly different. It combines two operations into one. First mapping, then flattening.

You already know that .map() applies a function to each element and returns a new array. The number of elements stays the same.

For example:

[1, 2, 3].map(x => x * 2)
// [2, 4, 6]

Now .flatMap() does something similar, but after mapping, it also flattens the result by one level.

So if your mapping function returns arrays, .flatMap() will merge them into a single array.

Example:

const arr = [1, 2, 3];

const result = arr.flatMap(x => [x, x * 2]);
console.log(result);
// [1, 2, 2, 4, 3, 6]

Here each element becomes an array, and then those arrays get flattened automatically.

One important thing to note is that .flatMap() only flattens one level. You cannot control depth here like .flat().

So if your nesting is deeper, .flatMap() alone will not solve everything.

Another approach you might see

Sometimes in interviews or even real projects, people do not use .flat() directly. Either because they want to show understanding or because of compatibility reasons.

A common way is using recursion.

The idea is simple. You go through each element. If it is not an array, you push it into a result. If it is an array, you call the same function again on it.

Something like this:

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

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

  return result;
}

This works for any level of nesting and shows clear thinking.

Why flattening is actually useful

This is not just a theoretical thing. In real problems, data often comes nested.

APIs can return nested structures. UI components might generate nested lists. Even simple transformations can accidentally create nested arrays.

Before applying operations like filtering, reducing, or calculations, flattening makes the data easier to work with.

It is like cleaning your workspace before starting actual work.

Common interview scenarios

This topic shows up quite often, but not always in a direct way.

Sometimes they simply ask you to flatten an array without using built in methods. That is where recursion or loops come into play.

Sometimes they give you a nested structure and ask you to extract or sum values. If you understand flattening, the problem becomes much simpler.

Another variation is combining map and flatten logic, where .flatMap() becomes useful.

And in some cases, they check whether you know about Infinity in .flat() which is a small detail but tells a lot about practical exposure.

Closing thought

At the core of it, flattening is about reducing complexity. Nested arrays are not wrong, they are just harder to deal with directly. Once flattened, everything becomes linear and easier to process.

If you understand when to use .flat(), when .flatMap() fits, and how to manually approach the problem, you are already ahead for most real scenarios as well as interviews.

And honestly, once you start noticing nested arrays in real data, this concept stops being theoretical and becomes very practical.

When we write code in a single file, everything sits together. As the project grows, this becomes messy. Functions, classes, and logic start overlapping, and it becomes hard to manage.

To solve this, we divide code into smaller parts. These parts are called modules.

A module is simply a file (or a group of files) that contains code which can be used in other files.

If a file contains reusable code and we expose it using export, it becomes a module. That reusable code is what we call modular code.

Why modules are needed

Without modules, things start breaking down in a very practical way. Code becomes scattered. The same logic gets written again & again. It becomes hard to find where a specific function is written. Debugging slows down. Updating a feature becomes risky because you are not sure what else might break.

Here is a simple example of the problem:

// everything in one file

function calculateTotal() { }
function sendEmail() { }
function validateUser() { }
function generateReport() { }

Now imagine this file grows to 2000 lines. Finding anything becomes painful.

What modular code does

We break code into meaningful groups.

// user.js
export function validateUser() { }

// order.js
export function calculateTotal() { }

// email.js
export function sendEmail() { }

Now everything is organized. Each file has a purpose. It is easy to locate code. Easy to update. Easy to reuse. This is modular code.

Exporting code

1. Named Export

We export multiple things by their names.

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

Importing:

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

Here you must use the exact names, and you must use curly braces.

2.Default Export

We export only one main thing.

// logger.js
export default function log(message) {
  console.log(message);
}

Importing:

import log from './logger.js';

Here there are no curly braces, and the name can be anything.

import myLogger from './logger.js';

Exporting entire file:

There is no single keyword like export all automatically, but there are practical ways to achieve this.

Option 1: Export everything manually from a file

// utils.js
export function a() {}
export function b() {}
export function c() {}

Then import everything together:

import * as utils from './utils.js';

utils.a();
utils.b();

This is the closest to importing the whole file.

Option 2: Export as one object

// utils.js
function a() {}
function b() {}

const utils = {
  a,
  b
};

export default utils;

Import:

import utils from './utils.js';

utils.a();

Here utils is clearly defined inside the file, so the flow is complete.

Importing modules (flow):

The flow is simple. You write code in a file. You export the required parts. Then you import them wherever needed. That is the full cycle.

Benefits of modular code

Reusability - You write once and use it everywhere. Maintainability - It is easy to update specific parts. Readability - Code stays clean and structured. Scalability - The project can grow without chaos. Developer efficiency - You do not have to search the entire codebase.

Code organization improvement:

Without modules, everything is mixed and there is no clear structure.

With modules, we get feature based grouping, logical separation, and faster navigation.

Example:

/project
  /user
    user.service.js
    user.controller.js
  /order
    order.service.js

Now you instantly know where to go.

What are bundlers?

A bundler is a tool that takes multiple modules and combines them into a smaller number of files, often a single optimized file.

Tools like Webpack or Vite do this.

Why this is needed is simple. Browsers are not efficient at loading hundreds of small files separately. Bundlers optimize this by packaging things together.

For now, while learning modules, you do not need to go deep into bundlers. Just focus on export and import.

Final clarity

A module is not just any file, but a file designed for reuse. Export does not automatically export everything. Named export uses curly braces while importing. Default export does not use curly braces. And if you want something close to importing the whole file, you can use import * as.

This completes the full picture from modules to bundlers in a clean and usable way.

I tried covering all essentials under one hut. I hope this was helpful.

This ability to control the path that a program follows is called control flow.

In simple terms, control flow determines which part of the code runs and when it runs.

To understand this better, think about a small real life example.

Imagine you are leaving your house in the morning.

If it is raining, you take an umbrella.
If it is not raining, you simply leave.

Your decision depends on a condition. Programming works in a very similar way. The program checks a condition and decides which instruction should run.

JavaScript provides several control flow structures that allow us to make these decisions.

In this article we will explore

The if statement
The if else statement
The else if ladder
The switch statement
When to use switch vs if else

Everything will be explained with simple beginner friendly examples.

The if statement

The if statement is the most basic way to control program flow. It allows the program to run a block of code only when a condition is true.

Think of it as asking a question.

If the answer is true, the code runs.
If the answer is false, the code is skipped.

Here is a simple example.

let age = 20;

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

console.log("Program finished.");

Output

You are eligible to vote.

Program finished.

Step by step explanation

First the variable age is stored as 20.

The program checks the condition age >= 18.

Since 20 is greater than 18, the condition becomes true.

Because it is true, the message inside the if block runs.

If the age was smaller than 18, the message inside the block would simply not run.

The program would continue with the next instruction.

The if else statement

Sometimes we want the program to do one thing if the condition is true and another thing if it is false.

For that we use the if else statement.

It provides two possible paths for the program.

Example

let marks = 45;

if (marks >= 50) {
    console.log("You passed the exam.");
} else {
    console.log("You did not pass the exam.");
}

Output

You did not pass the exam.

Explanation

The program checks whether marks are greater than or equal to 50.

Since 45 is less than 50, the condition becomes false.

Because of this, the code inside the else block runs.

This structure is very useful when you want to clearly handle both outcomes of a condition.

The else if ladder

In many situations we have more than two possibilities.

For example, when checking grades, we may want different messages depending on the marks obtained.

This is where the else if ladder becomes useful.

It allows the program to check multiple conditions one after another.

Example

let score = 82;

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

Output

Grade B

How the program runs

The program first checks if score is greater than or equal to 90.

Since 82 is not greater than 90, it moves to the next condition.

Next it checks whether score is greater than or equal to 75.

This time the condition is true.

Because this condition is true, the program prints Grade B and stops checking the remaining conditions.

Only the first true condition gets executed.

This step by step checking is what makes the else if ladder powerful for handling multiple scenarios.

The switch statement

Another way to control program flow is the switch statement.

Switch is commonly used when we want to compare a variable with several fixed values.

It can sometimes make the code cleaner than writing many else if statements.

Example

let dayNumber = 3;

switch (dayNumber) {
    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

    case 4:
        console.log("Thursday");
        break;

    default:
        console.log("Invalid day number");
}

Output

Wednesday

Explanation

The switch statement checks the value of dayNumber.

If the value matches case 1, it prints Monday.

If it matches case 2, it prints Tuesday.

If it matches case 3, it prints Wednesday.

Since the value is 3, the third case runs.

The break statement is very important here.

Once a case matches, break stops the program from continuing to the next cases.

If break was missing, the program would continue running the remaining cases as well. This is called fall through behavior.

The default block runs if none of the cases match.

When to use switch vs if else

Both switch and if else help control program flow, but they are suited for slightly different situations.

If else is better when

You are checking ranges like marks greater than 80 or age less than 18

You have complex conditions involving multiple variables

You need logical comparisons like greater than or less than

Switch is better when

You are comparing one variable against multiple fixed values

The cases are clear and predefined such as days of the week or menu options

You want cleaner and more structured code

For example, checking grade ranges is easier with if else.

But printing a day of the week based on a number is usually cleaner with switch.

Understanding when to use each structure helps make your code more readable and maintainable.

Assignment practice

To truly understand control flow, the best approach is to practice writing small programs.

Try implementing the following exercises.

Program 1

Write a program that checks whether a number is positive, negative, or zero.

Example code idea

let number = -5;

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

Output

The number is negative.

In this program we used the else if ladder because there are three possible conditions.

Program 2

Write a program that prints the day of the week using a switch statement.

Example idea

let day = 5;

switch (day) {
    case 1:
        console.log("Sunday");
        break;

    case 2:
        console.log("Monday");
        break;

    case 3:
        console.log("Tuesday");
        break;

    case 4:
        console.log("Wednesday");
        break;

    case 5:
        console.log("Thursday");
        break;

    case 6:
        console.log("Friday");
        break;

    case 7:
        console.log("Saturday");
        break;

    default:
        console.log("Invalid input");
}

Output

Thursday

We used a switch here because we were comparing a single variable with fixed values representing days of the week.

Final thoughts

Control flow is one of the most important foundations in programming. Without it, a program would simply run every line of code from top to bottom without making any decisions.

Using if, if else, else if ladders, and switch statements allows us to create intelligent programs that respond to different situations.

As you continue learning JavaScript, these concepts will appear everywhere. From validating user input to controlling application behavior, decision making structures form the backbone of real software.

The best way to master them is by experimenting with small examples and observing how the program behaves when the conditions change.

Once you become comfortable with control flow, writing logical and structured programs becomes much easier.

Hope this blog gave the necessary insights needed.

Modern JavaScript introduced arrow functions to reduce this boilerplate and make functions shorter and easier to read. They are widely used in real projects today, especially when working with arrays, callbacks, and functional programming patterns. Once you start seeing them in codebases, you realize how frequently they appear in everyday JavaScript development.

In this article we will understand what arrow functions are, how their syntax works, how implicit return works, and how they differ from normal functions. The goal here is not to dive into complex theory but to build a clear beginner level understanding with simple and practical examples. Let us start by seeing why arrow functions exist in the first place.

How arrow functions reduce boilerplate

Consider a simple function that adds two numbers.

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

console.log(add(4, 6));

Output

10

This is completely valid and you will still see this style everywhere. But for a very small operation like addition, writing the function keyword and the return statement every time can feel slightly repetitive.

Arrow functions allow us to write the same logic in a shorter and cleaner way.

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

console.log(add(4, 6));

Output

10

The arrow symbol replaces the function keyword and makes the intent clearer. Once you get used to reading this syntax, it becomes very natural and easy to follow.

Now let us understand the syntax step by step.

Basic arrow function syntax

The general structure of an arrow function looks like this.

const functionName = (parameters) => {
  // code
};

Here is a simple example that greets a user.

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

console.log(greet("Gaurang"));

Output

Hello Gaurang

We store the function inside a variable using const, then write the parameters inside parentheses, followed by the arrow symbol and the function body. The logic inside the curly brackets works just like a normal function.

This syntax becomes even simpler when the function has only one parameter.

Arrow functions with one parameter

If a function has only one parameter, JavaScript allows us to remove the parentheses around it. This makes the function even more compact.

Example

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

console.log(square(5));

Output

25

The function receives a number and returns its square. Removing the parentheses makes the code slightly shorter while still keeping it easy to read. Many developers prefer this style for very small helper functions.

Arrow functions with multiple parameters

If the function has more than one parameter, parentheses are required.

Example

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

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

Output

12

Here we are multiplying two numbers. The structure remains almost identical to a normal function, except the function keyword is replaced by the arrow syntax.

Now let us look at one of the most useful features of arrow functions.

Implicit return vs explicit return

In normal functions, we always write the return keyword to send a value back.

Example

function subtract(a, b) {
  return a - b;
}

console.log(subtract(9, 4));

Output

5

Arrow functions introduce something called implicit return. If the function body contains only a single expression, JavaScript can automatically return that value without writing the return keyword.

Example

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

console.log(subtract(9, 4));

Output

5

Notice that we removed the curly braces and the return keyword. The expression automatically becomes the returned value.

This is called implicit return.

If we keep curly braces, then we must write return. That is known as explicit return.

Example with explicit return

const divide = (a, b) => {
  return a / b;
};

console.log(divide(20, 4));

Output

5

Example with implicit return

const divide = (a, b) => a / b;

console.log(divide(20, 4));

Output

5

Both approaches work perfectly fine. Developers usually choose based on readability and how complex the function body is.

Difference between arrow function and normal function

For a beginner, the most visible difference is the syntax.

Normal function

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

console.log(sayHello("Riya"));

Output

Hello Riya

Arrow function

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

console.log(sayHello("Riya"));

Output

Hello Riya

The arrow function version is shorter and is often preferred in modern JavaScript codebases. Both approaches behave the same for simple tasks like greetings or small math operations.

There are deeper differences involving how the keyword this behaves inside functions, but that topic is better explored later once you are comfortable with basic functions.

For now, the key takeaway is that arrow functions provide a cleaner and more modern way to write functions.

Arrow functions with arrays

Arrow functions are extremely useful when working with arrays. They make callback functions shorter and easier to read.

Let us look at a simple example using map.

const numbers = [2, 4, 6, 8];

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

console.log(doubled);

Output

[4, 8, 12, 16]

The arrow function takes each number from the array and multiplies it by two. Because the function body is small, implicit return keeps the code clean and easy to understand.

This is one of the situations where arrow functions really shine.

Assignment idea

If you want to practice what you learned, try the following small exercises.

First, write a normal function that calculates the square of a number.

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

console.log(findSquare(7));

Output

49

Now rewrite the same function using an arrow function.

const findSquare = num => num * num;

console.log(findSquare(7));

Output

49

Next, create an arrow function that checks whether a number is even or odd.

const checkEvenOdd = num => {
  if (num % 2 === 0) {
    return "Even";
  }
  return "Odd";
};

console.log(checkEvenOdd(10));
console.log(checkEvenOdd(7));

Output

Even
Odd

Finally, use an arrow function inside map.

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

const squares = values.map(n => n * n);

console.log(squares);

Output

[1, 4, 9, 16]

These small exercises help build confidence with arrow functions and show how naturally they fit into modern JavaScript code.

Final thoughts

Arrow functions are one of the most commonly used features in modern JavaScript. They help reduce unnecessary syntax and make functions easier to read, especially when writing short pieces of logic.

For beginners, the most important things to remember are the basic syntax, when parentheses are optional, and how implicit return works. Once you become comfortable with these ideas, you will start noticing arrow functions everywhere in real world JavaScript projects.

Learning them early helps you write code that looks clean, modern, and easier for other developers to understand.

Think of a variable as a box that stores some data. The box has a label on it, and inside the box we place a value. Whenever the program needs that value, it simply looks at the box using its label.

For example, imagine writing down someone's name, age, and whether they are a student. Instead of repeatedly typing the values everywhere in the program, we store them inside variables and reuse them whenever needed.

This makes programs easier to manage and understand.

Why Variables Are Needed

Programs constantly work with information. A website might store a user's name, a game might track the player's score, and a shopping application might calculate the total price of items.

Without variables, we would have to repeat the same values again and again throughout the program. That would quickly make the code messy and difficult to maintain.

Variables solve this problem by allowing us to store information once and reuse it multiple times.

For example, if we store a person's name in a variable, we can use that name anywhere in our program. If the value changes, we only need to update it in one place.

Declaring Variables in JavaScript

In JavaScript there are three common ways to declare variables. These are var, let, and const.

Let us look at a simple example of declaring variables.

var city = "Indore"
let age = 21
const country = "India"

console.log(city)
console.log(age)
console.log(country)

Output

Indore

21

India

In this example we created three variables and stored values in them. Each variable has a name and a value.

The console.log statements print the stored values to the console.

Although all three keywords can declare variables, they behave slightly differently. We will understand those differences shortly.

Understanding Primitive Data Types

Whenever we store information in a variable, that value belongs to a certain type. These are called data types.

JavaScript has several data types, but beginners usually start with a few basic ones.

One common type is a string. Strings represent text values.

Example

let name = "Rohit"

console.log(name)

Output

Rohit

Here the variable name stores a piece of text, so its type is string.

Another common type is number. Numbers represent numeric values.

let age = 20

console.log(age)

Output

20

In this example the variable age stores a numeric value.

Another simple type is boolean. A boolean represents either true or false.

let isStudent = true

console.log(isStudent)

Output

true

Boolean values are often used when checking conditions such as whether a user is logged in or whether a task is completed.

JavaScript also has two special data types called null and undefined.

Null represents an intentional empty value.

let middleName = null

console.log(middleName)

Output

null

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

let score

console.log(score)

Output

undefined

Understanding these basic data types helps in choosing the right type of value for each variable.

Basic Difference Between var, let, and const

All three keywords var, let, and const are used to create variables, but there are a few important differences between them.

The var keyword is the older way of declaring variables in JavaScript. It is still supported but modern JavaScript usually prefers let and const.

The let keyword allows us to declare a variable whose value can change later.

Example

let score = 10
console.log(score)

score = 15
console.log(score)

Output

10

15

Here the value of score was updated successfully.

The const keyword is used when the value should not change after being assigned.

Example

const birthYear = 2004

console.log(birthYear)

Output

2004

If we try to change the value of a const variable, JavaScript throws an error.

const birthYear = 2004

birthYear = 2005

Output

Error because a const value cannot be reassigned

Because of this behavior, const is often used when we want to ensure that a value remains constant throughout the program.

Understanding Scope in a Simple Way

Scope refers to where a variable can be accessed in a program.

You can think of scope as the area where a variable is visible and usable.

Consider the following example.

let message = "Hello JavaScript"

console.log(message)

Output

Hello JavaScript

Here the variable message is available in the entire script.

Now look at this example using a block of code.

if (true) {
    let greeting = "Welcome"
    console.log(greeting)
}

console.log(greeting)

Output

Welcome

Error because greeting cannot be accessed outside the block

The variable greeting only exists inside the block where it was created. Outside that block it is not available.

This idea helps prevent variables from interfering with each other in larger programs.

A Small Practice Exercise

The best way to understand variables is to try creating them yourself.

Let us create three variables that represent a person's details.

let name = "Aarav"
let age = 19
let isStudent = true

console.log("Name:", name)
console.log("Age:", age)
console.log("Is Student:", isStudent)

Output

Name: Aarav

Age: 19

Is Student: true

Now try changing the value of the age variable.

age = 20

console.log("Updated Age:", age)

Output

Updated Age: 20

The value changes successfully because the variable was declared using let.

Now try the same with const.

const country = "India"

country = "USA"

Output

Error because const values cannot be reassigned

This small experiment helps demonstrate how variables behave differently depending on how they are declared.

Variables are one of the most fundamental parts of programming. They allow us to store, update, and reuse information throughout a program. Once you become comfortable using variables and understanding basic data types, many other JavaScript concepts start becoming easier to learn.

Understanding how variables work is an important step toward writing organized and readable programs.

This is where objects become extremely useful.

An object in JavaScript is a structure that stores information using key value pairs. Each piece of data is stored with a label called a key, and the value attached to that key describes something about the object.

You can think of an object like a small container that holds related information together.

For example, imagine we want to represent a person in our program. A person may have a name, age, and city. Instead of storing these values separately, we can group them inside a single object.

This makes the program easier to understand and manage.

Why Objects Are Needed

Programs often deal with entities that have multiple related properties. A student has a name, age, and course. A car has a brand, model, and year. A user account has a username, email, and password.

Objects help us store this type of structured information.

Instead of creating many unrelated variables, we can place all related values inside one object. This improves readability and keeps data organized.

Another benefit of objects is flexibility. We can easily update properties, add new ones, or remove them when needed.

Objects vs Arrays

Before creating objects, it helps to see how they differ from arrays.

An array stores values in a list where each item is accessed using an index number.

Example array

let colors = ["red", "blue", "green"]

console.log(colors[0])

Output

red

Here the value is accessed using the position inside the array.

Objects work differently. Instead of index positions, objects use keys.

Example object

let person = {
    name: "Ravi",
    age: 24,
    city: "Indore"
}

console.log(person.name)

Output

Ravi

In an object, each piece of data is accessed using the key rather than a numeric position.

This makes objects very suitable for representing real world entities.

Creating Objects in JavaScript

Creating an object in JavaScript is quite simple. We define an object using curly braces and place key value pairs inside it.

Here is an example.

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

console.log(person)

Output

{ name: 'Ananya', age: 22, city: 'Bhopal' }

In this example we created an object called person. It has three properties.

name stores the person's name

age stores the person's age

city stores the city where the person lives

Each property follows the pattern key followed by a value.

Accessing Object Properties

Once an object is created, we often need to access its properties. JavaScript provides two common ways to do this.

The first way is called dot notation.

Example

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

console.log(person.name)
console.log(person.age)

Output

Ananya

22

Dot notation is simple and widely used when we know the property name beforehand.

The second way is called bracket notation.

Example

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

console.log(person["city"])

Output

Bhopal

Bracket notation is useful when the property name is dynamic or stored in a variable.

Example

let property = "name"

console.log(person[property])

Output

Ananya

Both approaches achieve the same result but are useful in different situations.

Updating Object Properties

Sometimes we need to modify the values stored in an object.

Updating a property is very straightforward. We simply assign a new value to the property.

Example

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

person.age = 23

console.log(person.age)

Output

23

Here we updated the age property from 22 to 23.

This ability to modify properties makes objects flexible and adaptable for changing data.

Adding and Deleting Properties

Objects in JavaScript are dynamic, which means new properties can be added at any time.

Example of adding a new property.

let person = {
    name: "Ananya",
    age: 22
}

person.city = "Bhopal"

console.log(person)

Output

{ name: 'Ananya', age: 22, city: 'Bhopal' }

We simply assign a new key and value to the object.

Deleting properties is also possible using the delete keyword.

Example

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

delete person.city

console.log(person)

Output

{ name: 'Ananya', age: 22 }

The city property was removed from the object.

This flexibility allows objects to evolve as program requirements change.

Looping Through Object Keys

Sometimes we want to see every property stored in an object. JavaScript allows us to loop through object keys using a loop.

A commonly used approach is the for in loop.

Example

let person = {
    name: "Ananya",
    age: 22,
    city: "Bhopal"
}

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

Output

name : Ananya

age : 22

city : Bhopal

The loop runs through every key in the object. Using the key we can access its corresponding value.

This is very helpful when working with objects that contain many properties.

A Small Practice Exercise

To become comfortable with objects, try creating one yourself.

Create an object representing a student and include properties such as name, age, and course.

Example solution

let student = {
    name: "Arjun",
    age: 20,
    course: "Computer Science"
}

student.age = 21

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

Output

name : Arjun

age : 21

course : Computer Science

First the object was created with three properties. Then the age property was updated. Finally we used a loop to print all keys and values.

Exercises like this help in understanding how objects store and organize information.

Objects are one of the most important structures in JavaScript. They allow programs to represent real world entities in a clean and organized way. As you continue learning JavaScript, you will see objects used everywhere from simple applications to complex systems.

Once you become comfortable with creating and manipulating objects, writing structured and readable programs becomes much easier.

I hope this blog gave you the necessary insights into the objects in JavaScript.

That is where Object Oriented Programming becomes useful. It helps organize code into meaningful structures so that large programs become easier to build and maintain.

Object Oriented Programming, often called OOP, is a way of writing programs using objects that represent real world things. Instead of thinking only about functions and variables, we think about entities such as a student, a car, or a user.

Each object contains data and behavior related to that entity. The data describes the object and the behavior defines what the object can do.

Before diving into code, it helps to think about a real world example.

A Simple Real World Analogy

Imagine a company that manufactures cars.

Before any car is produced, engineers first design a blueprint. The blueprint defines what a car should look like and what properties it should have. For example the blueprint might describe things like the brand, color, and engine type.

Using that blueprint, the company can create many cars. Each car follows the same design but has its own specific values.

One car might be red while another is blue. One might have a different engine model. Even though they are different cars, they are all created from the same blueprint.

Object Oriented Programming follows a very similar idea.

The blueprint is called a class. The actual cars created from that blueprint are called objects.

Once we define a class, we can create multiple objects from it. This makes our code reusable and organized.

What is a Class in JavaScript

In JavaScript, a class is a template used to create objects. It defines the properties and methods that objects created from it will have.

Let us look at a small example of a class.

class Person {

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

    introduce() {
        console.log("Hi, my name is " + this.name + " and I am " + this.age + " years old.")
    }

}

In this example we created a class called Person.

Inside the class we defined a constructor and a method called introduce.

The constructor is responsible for assigning initial values when an object is created.

The introduce method describes behavior that the object can perform.

Now that the blueprint exists, we can create objects from it.

Creating Objects Using Classes

Creating an object from a class is called instantiation.

To create an object we use the new keyword followed by the class name.

Here is how we can create two person objects.

let person1 = new Person("Rahul", 22)
let person2 = new Person("Meera", 25)

person1.introduce()
person2.introduce()

Output

Hi, my name is Rahul and I am 22 years old.

Hi, my name is Meera and I am 25 years old.

Both objects were created using the same class. The structure is identical but the values are different.

This is exactly like creating multiple cars using the same blueprint.

Understanding the Constructor Method

The constructor method plays a very important role in classes.

It runs automatically whenever a new object is created.

Its purpose is to initialize properties of the object.

Look again at the constructor inside the Person class.

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

When we create a new object like this

Person("Rahul", 22)

the constructor receives the values Rahul and 22 and assigns them to the object.

The keyword this refers to the current object being created.

So this.name stores the name value inside that object.

Methods Inside a Class

Methods are functions that belong to a class.

They define what an object can do.

In the Person class we added a method called introduce. This method prints information about the person.

Let us look at another example using a Car class.

class Car {

    constructor(brand, model) {
        this.brand = brand
        this.model = model
    }

    showDetails() {
        console.log("Car brand is " + this.brand + " and model is " + this.model)
    }

}

let car1 = new Car("Toyota", "Corolla")
car1.showDetails()

Output

Car brand is Toyota and model is Corolla

Here the showDetails method describes behavior associated with the car object.

This is one of the strengths of Object Oriented Programming. Data and behavior related to an entity stay together.

Basic Idea of Encapsulation

Another important concept in OOP is encapsulation.

Encapsulation simply means keeping related data and functions together in one place.

In our earlier examples the class contains properties and methods that belong to the same concept.

The Person class stores name and age and also contains behavior related to a person.

The Car class stores brand and model and contains behavior related to a car.

Instead of scattering logic throughout the program, we group everything inside classes.

This makes programs easier to read and maintain.

Encapsulation also helps protect data by controlling how it is accessed, although deeper concepts of data protection are usually learned later.

For beginners it is enough to understand that classes help keep related code organized.

Why OOP Helps in Real Projects

Object Oriented Programming provides several advantages when building larger programs.

First, it promotes code reuse. Once a class is written, we can create many objects without rewriting the same logic again.

Second, it makes code easier to understand because each class represents a clear concept.

Third, it helps maintain large applications since related behavior stays grouped together.

For example, if a project manages hundreds of students, having a Student class keeps all student related information and behavior in one place.

Without OOP, managing such systems becomes messy very quickly.

A Small Practice Exercise

To really understand OOP, it helps to create a class yourself.

Try creating a class called Student that stores the name and age of a student.

Then add a method that prints the student details.

Example solution

class Student {

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

    showDetails() {
        console.log("Student name: " + this.name + ", Age: " + this.age)
    }

}

let student1 = new Student("Arjun", 20)
let student2 = new Student("Sneha", 21)

student1.showDetails()
student2.showDetails()

Output

Student name: Arjun, Age: 20

Student name: Sneha, Age: 21

Both students were created using the same class. The structure is shared while the values are different.

This small example demonstrates how classes help create structured and reusable code.

Once you become comfortable with classes and objects, Object Oriented Programming starts to feel very natural. Many real world applications rely on these ideas to manage complex systems in an organized way.

Understanding this concept early will make it easier to explore more advanced JavaScript patterns in the future.

I hope this blog gave you the necessary insight needed.

A very practical way to think about it is this.

this refers to the object that is calling the function.

Whenever a function runs, JavaScript checks who called that function. The caller becomes the value of this.

Once you keep this idea in mind, most situations become much easier to understand.

Let us walk through a few common cases.

What this Means in JavaScript

In JavaScript, this is a keyword that points to the object executing the current function.

It is not fixed. The value of this depends on how the function is invoked.

Consider this small example.

function showContext() {
    console.log(this)
}

showContext()

If you run this in the browser console, JavaScript prints the global object. In browsers this is usually the window object.

This happens because the function was called directly and not through any object.

So JavaScript falls back to the global context.

this Inside Normal Functions

When a function runs without being attached to an object, this refers to the global object in non strict mode.

Here is a simple illustration.

function printName() {
    console.log(this.name)
}

let name = "Gaurang"

printName()

The function prints Gaurang because JavaScript looks at the global scope where the variable name exists.

This behavior is one reason beginners get confused. The function itself does not contain the name variable, but the global scope does.

this Inside Objects

Things become clearer when functions are defined inside objects.

let user = {
    name: "Rohit",
    greet: function () {
        console.log("Hello, my name is " + this.name)
    }
}

user.greet()

Here the function greet is called by the object user.

Since user called the function, this refers to user.

That means this.name becomes Rohit.

You can think about it in a very simple way.

If an object calls the function, this points to that object.

What call() Does

JavaScript also allows us to manually decide what this should be. One way to do this is with the call() method.

The call method executes a function immediately and lets us specify what this should refer to.

Look at this example.

function introduce() {
    console.log("Hi, I am " + this.name)
}

let person1 = { name: "Aman" }
let person2 = { name: "Neha" }

introduce.call(person1)
introduce.call(person2)

In the first line, the function runs with person1 as this.

In the second line, the function runs with person2 as this.

Even though the function is the same, the result changes depending on the object we pass.

This technique is often called method borrowing.

What apply() Does

The apply() method is very similar to call.

The only real difference is how arguments are passed.

With call, arguments are passed separately.

With apply, arguments are passed inside an array.

Example.

function addNumbers(a, b) {
    console.log(a + b)
}

addNumbers.call(null, 4, 6)

addNumbers.apply(null, [4, 6])

Both statements give the same result.

The difference lies only in the format of the arguments.

call uses individual values.

apply uses an array.

What bind() Does

The bind() method behaves slightly differently from call and apply.

Instead of running the function immediately, bind returns a new function.

That new function always uses the this value we provided.

Example.

function greet() {
    console.log("Hello " + this.name)
}

let person = { name: "Karan" }

let greetPerson = greet.bind(person)

greetPerson()

The function greetPerson now permanently uses person as this.

This is useful when you want to store a function and run it later while keeping the correct context.

Difference Between call, apply, and bind

All three methods control the value of this, but they behave differently.

call executes the function immediately and accepts arguments one by one.

apply also executes the function immediately but expects arguments inside an array.

bind does not run the function immediately. It returns a new function with this fixed.

A quick way to remember this is:

call runs the function now

apply runs the function now with array arguments

bind creates a function to run later

Small Practice Exercise

Trying these ideas yourself makes the concept clearer.

First create an object with a method that uses this.

let car = {
    brand: "Toyota",
    showBrand: function () {
        console.log("Car brand is " + this.brand)
    }
}

car.showBrand()

Now borrow the method using call.

let anotherCar = {
    brand: "Honda"
}

car.showBrand.call(anotherCar)

Even though the method belongs to car, it now runs using anotherCar.

Next try apply with array arguments.

function multiply(a, b) {
    console.log(a * b)
}

multiply.apply(null, [3, 5])

Finally try bind and store the function.

function sayHello() {
    console.log("Hello " + this.name)
}

let student = { name: "Arjun" }

let helloStudent = sayHello.bind(student)

helloStudent()

Once you experiment with these patterns a few times, the behavior of this starts making sense.

The most important thing to remember is simple.

this points to the object that calls the function.

call, apply, and bind are simply tools that help you control that behavior when you need it.

Simply put, operators are symbols that perform operations on values. The values being used are called operands. For example, if you write 5 + 3, the plus symbol is the operator and the numbers are the operands.

These operators appear everywhere in JavaScript programs. Whether you are doing simple calculations or controlling the flow of your code, they quietly power a lot of the logic behind the scenes.

Let’s go through the most commonly used ones.

Arithmetic Operators

Arithmetic operators are used for mathematical calculations. If you’ve done basic math in school, these will feel very familiar.

JavaScript supports addition, subtraction, multiplication, division, and modulus. These operators help you perform everyday calculations inside your program.

Here’s a simple example.

let apples = 12
let friends = 4

let total = apples + friends
let difference = apples - friends
let product = apples * friends
let division = apples / friends
let remainder = apples % friends

console.log("Total:", total)
console.log("Difference:", difference)
console.log("Product:", product)
console.log("Division:", division)
console.log("Remainder:", remainder)

When you run this code, JavaScript performs each calculation and prints the result in the console.

The modulus operator is a bit different from the others. Instead of giving the division result, it returns the remainder.

This operator is often used when checking whether a number is even or odd.

let number = 15

console.log(number % 2)

If the output is 0, the number is even. If the output is 1, the number is odd.

Arithmetic operators are commonly used in counters, loops, calculations, and many other everyday programming situations.

Comparison Operators

Comparison operators help us compare two values. Instead of returning a number, they return a boolean value, which means the result will be either true or false.

These are very useful when writing conditions in programs.

let score = 75
let passingMarks = 50

console.log(score > passingMarks)
console.log(score < passingMarks)

The first comparison returns true because 75 is greater than 50. The second comparison returns false.

Now let’s look at something that confuses many beginners: the difference between double equals and triple equals.

The double equals operator checks if two values are equal after JavaScript converts their types if needed.

console.log(10 == "10")

This prints true because JavaScript converts the string "10" into the number 10 before comparing.

The triple equals operator is stricter. It checks both the value and the data type.

console.log(10 === "10")

This returns false because one value is a number and the other is a string.

In modern JavaScript, developers usually prefer the triple equals operator because it avoids unexpected type conversions.

Logical Operators

Logical operators allow us to combine multiple conditions together. They are commonly used in decision making inside if statements.

JavaScript mainly uses three logical operators: AND, OR, and NOT.

The AND operator checks whether both conditions are true.

let age = 20
let hasID = true

console.log(age >= 18 && hasID)

This will only return true if the person is at least 18 years old and has an ID.

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

let hasCoupon = false
let isPremiumMember = true

console.log(hasCoupon || isPremiumMember)

Even though the person does not have a coupon, the result will still be true because they are a premium member.

The NOT operator simply flips a boolean value.

let loggedIn = false

console.log(!loggedIn)

Since loggedIn is false, the result becomes true.

Logical operators are extremely useful when writing conditions that depend on multiple factors.

Assignment Operators

Assignment operators are used to assign values to variables.

The most common one is the equals operator, which simply stores a value in a variable.

let balance = 500

JavaScript also provides shorthand assignment operators that combine arithmetic with assignment.

let points = 10

points += 5
console.log(points)

points -= 3
console.log(points)

The statement points plus equals 5 is just a shorter way of writing points equals points plus 5.

Similarly, points minus equals 3 is equivalent to writing points equals points minus 3.

These shorthand operators make the code shorter and easier to read.

A Small Practice Idea

A quick way to get comfortable with operators is to try a few small experiments in the console.

I am sharing you few tasks that you should be doing if you are not well versed with operators, these are very simple ones. I am not attaching their answers.
Kindly practice them if you are a beginner either in your IDE or on browser.

First, perform some arithmetic operations with two numbers.

let a = 8
let b = 3

console.log("Addition:", a + b)
console.log("Multiplication:", a * b)
console.log("Remainder:", a % b)

Next, compare two values using both equality operators.

let value1 = 5
let value2 = "5"

console.log(value1 == value2)
console.log(value1 === value2)

Finally, try writing a small condition using logical operators.

let temperature = 32
let isSunny = true

if (temperature > 30 && isSunny) {
    console.log("Good day for ice cream")
}

Operators may look like tiny symbols, but they play a huge role in programming. Almost every piece of JavaScript logic depends on them in some way. Once you get comfortable using them, writing conditions, calculations, and decision-making code becomes much more natural.

Hope it was helpful, sometimes writing blog for such direct concepts becomes a bit tricky if you don't cover everything from scratch considering that this is very basic and everyone must be aware of these, Hence I deliberately tried to cover everything from scratch.

If you think about it, most programs repeat certain actions again and again. Instead of writing the same code multiple times, JavaScript allows us to group that logic into a reusable block. That reusable block is called a function.

A function is simply a piece of code that performs a specific task. Once written, you can run it whenever needed. This makes programs easier to read, maintain, and reuse.

Imagine you frequently need to add two numbers in your program. Instead of writing the addition logic in many places, you can create a function once and call it whenever required.

Let us first see what a basic function looks like.

What Functions Are and Why We Need Them

A function allows us to wrap logic into a reusable block of code. When we want to run that logic, we simply call the function.

Here is a very small example that adds two numbers.

function addNumbers(a, b) {
    let result = a + b
    console.log("Sum is:", result)
}

addNumbers(5, 3)

Output

Sum is: 8

In this example, we created a function called addNumbers. The function accepts two values and prints their sum.

Functions help in three important ways. They reduce repetition, organize code better, and make programs easier to understand.

Now that we know what functions are, let us look at two different ways JavaScript allows us to create them.

Function Declaration

The first way to create a function is called a function declaration.

This is the most common style beginners learn.

Here is the syntax.

function greetUser(name) {
    console.log("Hello " + name)
}

greetUser("Aman")

Output

Hello Aman

In this example, the function greetUser is declared using the keyword function followed by the function name.

After defining the function, we call it using greetUser("Aman").

Function declarations are straightforward and easy to read. This is why they are commonly used when writing regular program logic.

Let us look at another small example.

function calculateArea(length, width) {
    let area = length * width
    console.log("Area is:", area)
}

calculateArea(4, 6)

Output

Area is: 24

The function takes two values, multiplies them, and prints the result.

Function Expression

The second way to create a function is called a function expression.

Instead of declaring the function directly, we store the function inside a variable.

Here is an example.

let greetUser = function(name) {
    console.log("Hello " + name)
}

greetUser("Neha")

Output

Hello Neha

In this case, the function is assigned to a variable called greetUser.

So instead of declaring the function directly, we create the function and store it inside a variable.

Here is another example with numbers.

let subtractNumbers = function(a, b) {
    let result = a - b
    console.log("Difference is:", result)
}

subtractNumbers(9, 4)

Output

Difference is: 5

Function expressions work almost the same way as function declarations when we call them. The main difference lies in how they are created and when they become available.

Declaration vs Expression Side by Side

To see the difference more clearly, look at these two examples.

Function declaration

function multiply(a, b) {
    let result = a * b
    console.log("Multiplication result:", result)
}

multiply(3, 5)

Output

Multiplication result: 15

Function expression

let multiply = function(a, b) {
    let result = a * b
    console.log("Multiplication result:", result)
}

multiply(3, 5)

Output

Multiplication result: 15

At first glance, both look very similar. They both perform the same job and produce the same result.

The difference becomes important when we talk about something called hoisting.

Basic Idea of Hoisting

Hoisting is a behavior in JavaScript where certain declarations are moved to the top of their scope during execution.

This may sound technical, but we can understand it with a simple experiment.

Let us try calling a function before defining it.

Example using a function declaration.

sayHello()

function sayHello() {
    console.log("Hello from declaration")
}

Output

Hello from declaration

Even though the function was written after the call, JavaScript still runs it successfully.

This happens because function declarations are hoisted. JavaScript internally prepares them before the code starts running.

Now try the same thing with a function expression.

sayHello()

let sayHello = function() {
    console.log("Hello from expression")
}

Output

Error occurs because sayHello is not a function yet

Here JavaScript throws an error. The function cannot be used before it is defined.

This happens because only the variable is hoisted, not the function stored inside it.

So when the program tries to run sayHello earlier, the function does not exist yet.

This is one of the biggest differences between function declarations and function expressions.

When Should You Use Each Type

Both styles are valid and widely used in JavaScript.

Function declarations are often used when you want to define general program logic that can be accessed anywhere in the file. They are easier to read and naturally hoisted.

Function expressions are useful when functions need to be treated like values. Since they are stored in variables, they can be passed around, returned from other functions, or stored inside objects.

In modern JavaScript development, function expressions are very common, especially when working with callbacks or event handling.

However, for beginners and for general logic, function declarations remain very simple and readable.

A Small Practice Exercise

The best way to understand these differences is by trying them yourself.

First write a function declaration that multiplies two numbers.

function multiplyNumbers(a, b) {
    let result = a * b
    console.log("Result from declaration:", result)
}

multiplyNumbers(6, 7)

Output

Result from declaration: 42

Now write the same logic using a function expression.

let multiplyNumbersExp = function(a, b) {
    let result = a * b
    console.log("Result from expression:", result)
}

multiplyNumbersExp(6, 7)

Output

Result from expression: 42

Finally try calling them before their definitions and observe the behavior.

You will notice that the declaration version works while the expression version throws an error.

Understanding this small difference helps you see how JavaScript prepares functions before execution.

Functions themselves are one of the most important building blocks of JavaScript. Whether you use declarations or expressions, the goal remains the same. You are organizing logic into reusable pieces so that your code becomes cleaner and easier to maintain.

Once you get comfortable with both styles, reading and writing JavaScript becomes much more natural.

push() and pop()

shift() and unshift()

map()

filter()

reduce() (basic explanation only)

forEach()

If you are not well versed with the basics of Array, you can refer to my blog named Arrays 101. It will make your fundamentals clear to an extent that you will never get confused with Array and its fundamentals.

Arrays 101 Blog link:
https://blogs.gaurangpods.com/javascript-arrays-101

Now we will see each method.

push() and pop()

push and pop are methods that are used to push an element into the Array. It is used to put a new element into the array.

The thing to note here is that it shoves the new element into the last. The newer element is not pushed randomly anywhere in the array. Instead it is given the last index.

So every new element that is pushed takes the n index if the array is of length n.

So the new array will be of the length n+1 and the index of the element shoved by us via push method will be n.

Example

Before

let arr = [1,2,3];

Using push

arr.push(4);

After

[1,2,3,4]

Now pop is the method that pops out the last element from the array and returns that particular element only.

This is a caveat that you need to remember. Pop method basically pops out the last element from the array and only returns that popped out element and not the array that is left after popping out. A lot of people get confused in it.

Pop pops out the element having the last index. If the length of the array is n then element having index n-1 is popped out.

Example

Before

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

let removed = arr.pop();

After

removed -> 4
arr -> [1,2,3]

shift()

Next method is shift().

It is basically used to remove the very first element of the array. If we were to remove the element with index 0 of an array we will be using the shift method to remove it.

One thing to note is that shift returns the element that was removed.

Example

Before

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

let removed = arr.shift();

Output

removed -> 1
arr -> [2,3,4]

Here shift removed the number 1 which was at index 0.

unshift()

Now we will see the unshift method.

This .unshift() basically shoves the element into the very beginning of the array. It makes the new element occupy the index starting from 0 of the array.

Example

Before

let arr = [3,4,5];

arr.unshift(1,2);

After

[1,2,3,4,5]

NOTE

If we unshift multiple elements into an existing array, those elements will be shoved into the array starting from index 0.

So if three new elements are shoved, they will be taking the index 0, 1, 2 and the element which was at index 0 earlier will get moved ahead.

Before we see the example of the use of .map() method, keep this in mind.

Next methods that we will be seeing are

.map()

.filter()

.reduce()

.forEach()

Out of these only .forEach() does not return a new array.

.map() and .filter() return a new array.

.reduce() returns a single value which could be number, string, object etc.

map()

We will now see the .map() method.

What it does is it iterates over each element of the array and returns a new array according to the condition described in the callback inside map().

Important thing to keep in mind is that it returns a new array.

Example

Before

let numbers = [2,4,6];

Using map

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

After

doubled -> [4,8,12]
numbers -> [2,4,6]

Original array stays unchanged.

Traditional loop vs map

Traditional loop

let numbers = [2,4,6]
let doubled = []

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

Using map

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

Both work the same but map makes the intent clearer.

filter()

Next is filter.

It filters out the elements according to the condition provided and returns a new array according to that condition.

Example

Before

let numbers = [5,12,8,20];

Using filter

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

After

[12,20]

So filter only keeps the elements that satisfy the condition.

reduce()

Next is reduce method.

Reduce is used when we want to calculate something out of the array and get a single result.

Example

Before

let numbers = [5,10,15];

Using reduce

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

Result

sum -> 30

Here the accumulator keeps adding the values step by step until the final result is produced.

forEach()

Now the last one we will see is the forEach array method.

The important thing is that it does not return a new array. It simply runs a function for every element in the array.

It looks like this

arr.forEach((element,index) => {

})

You can see it has a callback with element and index as its parameters.

Example

let numbers = [10,20,30];

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

Output

10
20
30

One important thing to remember is that forEach does not wait for asynchronous tasks.

Hope you enjoyed the blog and it helped in your journey of becoming a 100x Dev!

Arrays are represented using square brackets []. Whatever is present inside these brackets is called an element, and the elements are separated by commas. These elements can be of any data type. They can be primitive values like numbers and strings, or they can also be non-primitive values like objects or even other arrays.

The elements are separated by commas. To access or work with elements inside an array, JavaScript provides multiple inbuilt methods such as .filter(), .sort(), .map() etc. These methods help in iterating over arrays and returning elements based on our requirement. Depending on the use case, we decide which method to apply.

In simple terms, an array is a collection of values stored in a particular order. Because the values are stored in order, each element gets a position number. This position is called the index.

Indexing in arrays starts from 0.

So the first element has index 0, the second element has index 1, and it continues in the same manner. If an array has n elements, then the last element will have the index (n-1).

The last element has index n-1 and not n because indexing starts from 0 and not from 1.

How to create an array

Now comes the question of how to create an array. There are multiple ways to create arrays in JavaScript. We will look at some of the most commonly used ones.

1.First method

The first way is to initialize a variable with empty square brackets.

let books = [];

This creates an empty array named books.

NOTE:

1. Why arrays are needed

Example:-

Instead of:

let book1 = "Maths"
let book2 = "Physics"
let book3 = "Chemistry"

We use:

let books = ["Maths", "Physics", "Chemistry"]

2. Accessing array elements using index

Example:

let books = ["Maths", "Physics", "Chemistry"];

console.log(books[0]); // first element ie "Maths"
console.log(books[2]); // third element ie "Physics"

2. Second method

Another way is to directly add elements inside the square brackets, separated by commas.

Example:

let books = ["Maths", "Physics", "Chemistry"];

This creates an array with three elements.

3. Third method

If we want to create an array with a fixed number of empty slots, we can use the Array() constructor.

Example:

let books = Array(3);

This creates an array with a length of 3. Now what this means is that our array will be containing three elements separated by commas. So this way It creates an array with length 3 but no defined values yet.

Another method that is useful for creating an array is Array.of().

What it basically does is create a new array. The important thing to keep in mind is that we need to provide the elements directly inside the argument of Array.of(). In other words, the method will create the array, but the actual elements must be passed as arguments to Array.of().

Example

let books = Array.of("Maths", "Physics", "Chemistry");

console.log(books);

Output:

["Maths", "Physics", "Chemistry"]

In this example, the elements "Maths", "Physics" and "Chemistry" are passed as arguments to Array.of(), and the method creates an array containing these values.

Second method is Array.from() , this is also one way to crete an Array, like if we want to create
the array containing charachters of a particular string, we would be using this method. see the example below to understand

const myString = "hello";
const stringArray = Array.from(myString);

console.log(stringArray);
// Output: ['h', 'e', 'l', 'l', 'o']

Updating elements in an array

In order to update elements in an array, there are multiple ways depending on the use case.

For example, if we want to remove a particular element from an array, we can use the splice() method. How splice() is used depends on the situation and the index we want to modify.

If we want to add or change a value at a particular index, we can directly assign a new value to that index.

let books = ["Biology", "Economics", "History"]

//Now we want to update the books array by removing the last two elements of the array and add the element "English" into the array.

//We use  .splice(index of the element you want to delete , number of elements to be deleted, new element in quotes.

//splice(startIndex, numberOfElementsToDelete, newElement)

books.splice(1, 2, "English")

Output:

books = ["Biology", "English"];

Refer to the Excalidraw diagram below to understand this visually.

Now we will see the use of splice method to not only remove an element but to also add
an element in place of the removed one ie how it swaps. Look at the excalidraw image below:

What we did above is that we replaced the element having "Physics" as string with "Economics". So splice() method can not only delete but also add elements simultaneously
in the array and hence modifies the array in this manner.

Array length property

If we want to know how many elements are present in an array, we use the length property.

arrayName.length

Example:

let books = ["Maths", "Physics", "Chemistry"]

books.length gives us 3 as output, since we are having 3 elements in the Array.

This returns the total number of elements in the array.

Looping over an array

If we want to go through all elements of an array one by one, we use loops. There are multiple ways to do this depending on the situation.

One common way is using a for loop.

Example:

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

This loop runs through the array and prints each element one by one.

Another way is using a for...of loop.

Example:

for(let book of books){
    console.log(book);
}

This directly gives us the elements of the array while looping.

NOTE: We dont use for..in loop in Arrays generally bcz it is more apt to be used for iterating over Objects, and we tend to not use them in Arrays. However, Arrays are also Objects and hence for..in loop also works for Arrays.
Here is the code for it :-
Example:

let books = ["Biology", "Economics", "History"];

for (let index in books) {
    console.log(books[index]); // prints the value
}

So this is all you need to know related to Arrays in Javascript. Hope it helps!

You can think of selectors as a way of choosing elements from your HTML. Just like in real life, when you want to talk to someone specific, you need to call them out clearly. CSS works in the same way. It needs a clear instruction about which element or group of elements should receive a certain style. Once this idea clicks, CSS becomes much easier to understand.

The most basic type of selector is the element selector. This selector targets HTML elements directly by their tag name. For example, if you want to style all paragraph tags on a page, you simply write a rule for the p element. This tells CSS to apply the same styling to every paragraph present in the document. Element selectors are simple and powerful, but they affect all instances of that element, which is not always what we want.

As our web pages grow, we often need more control. This is where class selectors become useful. A class allows us to label specific elements so that we can style only those elements and ignore the rest. In HTML, we assign a class attribute to an element, and in CSS, we target that class using a dot followed by the class name. This gives us flexibility because the same class can be reused on multiple elements. It is a clean and practical way to apply consistent styling without affecting everything.

Going one step further, we have ID selectors. An ID is meant to be unique and should be used only once on a page. When we assign an ID to an element, we are saying that this element is special and should be treated differently from others. In CSS, an ID selector is written using a hash symbol followed by the ID name. Because IDs are unique, they allow very precise styling. However, beginners should use them carefully and only when uniqueness is truly required.

Sometimes, we want to apply the same style to multiple elements at once, even if they are different types. Group selectors help us do exactly that. By separating multiple selectors with commas, we can write one CSS rule that applies to all of them. This keeps our CSS clean and avoids repetition. It also makes the code easier to read and maintain, especially as projects become larger.

Another important concept is the descendant selector. This selector allows us to target elements that are inside other elements. For example, if you want to style only the paragraphs that are inside a div, you can do that using a descendant selector. This is extremely useful because it helps us apply styles based on structure, not just labels. It reflects how HTML is actually nested and organized.

While working with selectors, it is also important to understand that not all selectors are treated equally by CSS. There is a basic priority system involved. At a very high level, ID selectors have more priority than class selectors, and class selectors have more priority than element selectors. This means that if multiple rules try to style the same element, the one with higher priority will usually win. Understanding this early prevents confusion when styles do not behave as expected.

To really see the impact of selectors, it helps to look at before and after styling. Before applying CSS, HTML appears plain and unstructured. Once selectors are used correctly, the same HTML becomes organized, readable, and visually appealing. Nothing changes in the HTML itself, only the way we select and style elements does.

At the end of the day, CSS selectors are the foundation of CSS. Every layout, every color, every design decision depends on selecting the right elements. Once you are comfortable with selectors, the rest of CSS feels far less intimidating. As a beginner, spending time understanding selectors deeply is one of the best investments you can make in your frontend journey.

Browser is not just a tool to open websites, but a software system whose job is to request resources from servers, process them, and turn them into something humans can see and interact with. This helps beginners reset their mental model early.

Now, coming to the first step, whenever we type a website name in the browser’s URL bar and press Enter, the browser does not immediately know where that website lives. The first thing that happens is a DNS query. This DNS query goes out and comes back with the IP address of the server where the website is hosted. If you are not already aware of how a DNS query works, you can go through my separate blog on DNS, which explains this part in detail.
Link to DNS Query Blog: DNS Resolution Blog

Once the DNS query is completed, the browser now has the IP address of the server. After this, the browser makes an HTTP request over TCP to that server. The server then responds with data, and this data mainly contains HTML, CSS, and JavaScript. These three things together are what the browser needs in order to display the website.

Now the question arises of how the browser is able to process all this data efficiently and display a webpage on the screen. A browser is not just a single piece of software but a collection of different components working together. First, there is the user interface, which includes things like the address bar, tabs, back and forward buttons, and the visible screen area where the webpage appears.

Behind the user interface, there is something called the browser engine. The browser engine acts as a coordinator between the user interface and the rendering engine. It controls how actions from the UI are passed to the rendering engine and how the rendered content is shown back on the screen.

Inside the browser, there are mainly three important engines. The first is the browser engine, which we just discussed. The second is the rendering engine, and the third is the JavaScript engine. The rendering engine is responsible for understanding and processing HTML and CSS. The JavaScript engine is responsible for executing JavaScript code. In Chrome, the most popular JavaScript engine is V8.

When the server response is received, the rendering engine starts working on the HTML and CSS. At this stage, something called parsing happens. Parsing simply means taking the raw HTML and CSS text and converting it into a structured format that the browser can understand. This structure follows specific rules and looks like a tree.

The result of HTML parsing is called the Document Object Model, or DOM. Similarly, the result of CSS parsing is called the CSS Object Model, or CSSOM. These object models are internal representations that the browser uses to understand the structure of the page and how it should look.

While the HTML is being parsed, if the browser encounters JavaScript linked inside the HTML, that JavaScript is passed to the JavaScript engine for execution. JavaScript can interact with the DOM and change it, which means the structure of the page can be modified even after it has been initially created.

Once both the DOM and CSSOM are ready, they are brought together. This step allows the browser to figure out which styles apply to which elements. After this, the browser moves on to layout. During layout, the browser calculates the size and position of each element on the page. This step is also commonly referred to as reflow.

After layout is complete, the browser starts painting. Painting means filling in pixels, colors, text, images, and borders based on the calculated layout. Once painting is done, the final result is displayed on the screen. This is the point where the webpage becomes visible to the user.

If the DOM changes later, for example due to JavaScript updates, this internal process can happen again. The browser may need to recalculate layout, repaint parts of the page, and then update the display. This entire flow is how a browser renders a webpage from the moment you press Enter to the moment you see content on the screen.

Note that you do not need to memorize all the steps. it’s just that you should have a basic idea about the overall workflow.

Emmet is a shortcut system that helps you write HTML faster. Instead of typing full HTML tags every time, you write short abbreviations and let the code editor expand them into complete HTML. You are still writing normal HTML, just in a much quicker way. Think of it as a helper that understands what you want to write and fills in the repetitive parts for you.

For HTML beginners, Emmet is especially useful because it reduces the chances of small mistakes. You no longer have to worry much about forgetting a closing tag or breaking the structure of your page. This allows you to focus more on understanding how a webpage is built rather than getting stuck on syntax errors.

Emmet works inside most modern code editors without any extra setup. Editors like VS Code support Emmet by default. You simply type an Emmet abbreviation and press the Tab key, and the editor converts it into proper HTML. Once you see this happen a few times, it starts to feel very natural.

The basic idea behind Emmet is simple. You describe the element you want using a short form, and Emmet expands it. For example, typing p and pressing Tab generates a paragraph tag. Typing h1 creates a heading. This works for most commonly used HTML elements and covers a large part of daily HTML writing.

You can also create elements with classes, IDs, and attributes directly using Emmet. Writing div.card creates a div with a class named card, and writing section#about creates a section with an id called about. This saves time and keeps your focus on structure instead of typing.

Creating nested elements is another area where Emmet really shines. When you want one element inside another, you can describe that relationship directly. For example, writing div>p expands into a div that contains a paragraph. This makes layouts easier to visualize while you type.

Emmet also helps when you need repeated elements. If you want multiple similar elements, you can use multiplication. Writing li*5 generates five list items at once. This is very handy when creating menus, lists, or repeated sections.

One of the most commonly used Emmet shortcuts is generating a full HTML boilerplate. Typing ! and pressing Tab instantly creates the basic HTML structure with the doctype, head, and body tags already in place. This removes the small but repetitive task of setting up a new file.

The best way to get comfortable with Emmet is to try it yourself while writing HTML. Type the abbreviation, press Tab, and see what gets generated. Emmet is not mandatory, but once you get used to it, writing HTML without it feels unnecessarily slow.

To make this more practical, here are a few very simple examples you can try on your own. If you type p in your editor and press Tab, it expands into a paragraph tag ready for text. Typing div.container creates a div with a class named container. Writing ul>li*3 generates an unordered list with three list items inside it. You can also try a and press Tab to see how a link tag appears. These small shortcuts may look minor at first, but once you start using them regularly, they save a surprising amount of time.

In its simplest form, HTML (HyperText Markup Language) is the standard language used to create the structure of a webpage. It isn't a programming language; instead, it is a markup language that uses "tags" to tell the browser how to display content.

HyperText: Refers to the "links" that connect webpages to one another.

Markup: Refers to the special symbols (tags) used to annotate text, images, and other content so the browser knows if something is a heading, a paragraph, or a list.

Language: Refers to the set of rules and syntax that must be followed, So that every browser interprets the code the same way.

Lets see some frequently used common tags and an Analogy to understand HTML

The Box Analogy

Think of an HTML tag as a label on a storage box. The opening tag (<tag>) is like opening the lid, the content inside is the item you’re storing, and the closing tag (</tag>) is like shutting the lid. The "box" (the element) tells the browser exactly what kind of content is inside so it knows how to handle it.

NOTE: Difference between a tag and an element:- A tag when contains the content(text, image, files etc) becomes an element.

Tags:

• <h1>: The primary heading used to define the main title or most important topic of a webpage.

• <p>: The standard element used to distribute text into readable paragraphs.

• <div>: A generic block-level container used to group elements together for layout or styling purposes.

• <span>: An inline container used to mark up or style a specific part of a text without breaking the line.

• <ul>: Defines an unordered list where items are typically displayed with bullet points.

• <li>: Represents a single item within a list, whether that list is ordered or unordered.

• <a>: Creates a hyperlink that allows users to navigate to other pages, files, or locations on the same page.

• <img>: An empty, self-closing element used to embed an image by referencing its source file path.

• <section>: A semantic element used to wrap a standalone portion of a document that relates to a specific theme.

• <header>: Represents introductory content at the top of a page or section, often containing titles or navigation.

• <footer>: Contains concluding information at the bottom of a page or section, such as copyright and contact details.

Some HTML elements naturally start on a new line and take the full width of the page, such as headings, paragraphs, and divs. Others stay within the same line and only take as much space as needed, like span and links. This difference becomes very useful later when styling pages. This is block level vs inline elements. Block-level elements include h1 to h6, p, div, section, header, footer, ul, and li. Inline elements include span, a, img, strong, em, and br.

Not all HTML elements wrap content inside them. Some elements, like the image tag, only need a single tag because there is no content to place inside. These are called self-closing or void elements.

One good habit while learning HTML is to open any website, right click on it, and click on “Inspect”. What you see there is the HTML of that page. This helps in understanding how real websites are structured and makes HTML feel less abstract and more practical.

Hope this crisp blog helps you understand the HTML and its common Tags.

It is a command-line tool that lets you transfer data to or from a server using various protocols like HTTP, HTTPS, FTP, and more.

To view a website via cURL in the command line, we should use:

curl -L <your website name>

For example, if we want to see the website gaurangpods.com via the terminal, we can simply run the command:
curl -L https://gaurangpods.com

However, note that upon running this command, it does not save anything on our system in a folder. It basically just shows us all the content that the website contains in the terminal, but it does not save it anywhere on our system.

cURL prints the raw response to the terminal. What you see is raw HTML, JSON, or other data.

Unlike a browser, which is designed to make things look pretty for humans, cURL is designed to give developers raw, unfiltered access to server responses.

cURL doesn’t download images, doesn’t execute JavaScript, and doesn’t render CSS. It just fetches data. This makes it fast and lightweight.

cURL works identically on Windows, macOS, and Linux, so your commands are portable across environments.

The -v (verbose) flag shows you everything that cURL sends and receives.

This shows you DNS resolution, connection details, the SSL handshake for HTTPS, full request headers, and full response headers.

Lines starting with > show what cURL sends to the server, and lines starting with < show what the server sends back.

The -I flag fetches only the headers and not the body, which includes the HTTP status code.

GET is the default HTTP method. It is used to retrieve information without modifying anything on the server.

POST is another common HTTP method used with cURL. Unlike GET, which is used only to fetch data, POST is used when we want to send data to the server, such as submitting a form, sending login details, or creating a new record. In cURL, POST requests are usually made when we want the server to process some data and return a response based on that input.

cURL needs to know which protocol to use, so always include http:// or https:// in the URL.

So every website is given an IP address, which is nothing but the address where the code of the website is deployed, indicating on which server in the world it is hosted. Just like we humans live in houses and each house has an address associated with it which helps us identify its location in the world, websites have IP addresses which help in identifying the address where the code is deployed or “living” in the server’s world.
So, DNS resolution is the process of converting a human-readable domain name into its corresponding IP address.
This allows browsers and applications to locate and communicate with the correct server on the internet.

dig (Domain Information Groper) is a command-line tool used to query DNS servers and fetch information like IP addresses, MX records, or name servers for a domain.

Now, first understand a few terms related to DNS servers.
Firstly, what are DNS servers? They are basically servers that track DNS records. For storing the IP addresses of websites, we have dedicated servers called DNS servers, and within them there are further classifications.

Firstly, recursive DNS servers. These are the servers that browsers talk to directly, or in other words, browsers send their DNS queries to these servers first. They cache IP addresses, and if a particular IP is not cached, they internally follow the DNS resolution process to get the IP, which they then cache and also send back to the client who requested it.

Internally, the request first goes to the root servers, which are basically 13 logical root server groups. These servers keep track of which servers handle which top-level domains. For example, these servers know which servers across the globe contain information about “.com” ending websites. So if a DNS query comes for a .com domain, they direct the request to the correct top-level domain servers.

Then, these top-level domain servers contain information about which authoritative servers are responsible for a particular domain. They direct the query to the correct server that has authority over that domain. These servers are called authoritative servers, meaning they have the authority to provide the final DNS answer for that domain. These servers then send the response back to the recursive DNS server as the answer to the DNS query.

So the request flow as mentioned above is:
Client → Recursive DNS Server → Root Server → Top-Level Domain Server → Authoritative Server.
The authoritative server responds back to the recursive DNS server with the IP address where the website is hosted, and then the final flow is:
Recursive DNS Server → Client.

Now we will see the commands that help us fetch information like IP addresses using a command-line tool. But before that, we need to understand one very important concept, which is the NS record.

An NS record, as the name suggests, is a Name Server record. It indicates which server has authority over your domain. Let’s say you bought your domain from Hostinger for your website. Later, when you built the frontend and backend of your website and wanted to deploy it, you realized that you don’t want to use Hostinger’s servers for deployment. Instead, you decide to deploy on Vercel because they provide CDN and SSL certificates, meaning security-related features which otherwise you would have to configure yourself using tools like Nginx, firewalls, etc.

So, to avoid that extra effort, you choose Vercel since it is free and also provides built-in security features. Now, since you bought the domain from Hostinger, you need to go to your Hostinger account, open the DNS records of your domain, and update the NS records provided by Vercel. This tells the entire internet that “Hostinger is no longer responsible for this domain; ask Vercel where the website is.” Hostinger does not host the code anymore, it only points to the manager (Vercel) who knows where the code is hosted.

The dig . NS command helps us identify the list of root name servers, so it shows the names of the root servers.

The dig com NS command helps us get the name servers for the .com top-level domain. These are the authoritative servers responsible for maintaining records of .com domains.

The dig google.com NS command shows the name servers that have authority over the google.com domain. Since Google is a tech giant, they have their own authoritative DNS servers to handle DNS queries, unlike most developers who use providers like Vercel or Netlify.

When you run dig google.com, the command asks the DNS system for the basic DNS information of the domain, and by default it mainly shows the A record, which gives the IP address of google.com. This IP address is what the browser ultimately uses to connect to Google’s servers and load the website.

However, when you run dig google.com NS, you are being specific and asking only for the NS (Name Server) records, which tell you which DNS servers are responsible for managing the google.com domain, not its IP address.

So these are the dig commands application that takes place for getting information similart ot what we got above. Hope this simple-short blog helped you in making the concept of DNS RESOLUTION crystal clear.

So every website is given an IP address which is nothing but the address where the code of the website is deployed on which server in the world. Just like we humans live in houses and each house has an address associated to it which helps us in identifying the location of that house in the world, we have IP addresses which helps us in identifying the address where our code is deployed/living in the server’s world.

Now there are Different types of different records in DNS and each solve a particular purpose. Let’s see them one by one-

A record : This is basically the record that gives the address where our website have been deployed, so it gives the IP address associated with that domain . its usually a key value pair where key is like “@” and there is value associated to it like 1212.12.12 .The IP that used to be given for A records was IPv4

AAAA record: This is similar like the A record , its just that instead of giving IP of the type IPv4 , we give here IPv6. This we have started doing bcz IPv4 Limit was to reach bcz the number of IP provided reached to its maximum capacity and hence a new version was designed to cater the ever-growing need of the new IP addresses. This also tells the IP address associated with the domain.

NS record: NS record as the name suggest is Name Server record ie it is the one who handles the authority of your domain. Let’s say you bought your domain from hostinger for your website but when you wrote the frontend and the backend of your website and wanted to deploy it to make it live, You realised that i dont want to use hostinger server's for deployment instead you want to deploy them on Vercel server bcz they provide you CDN and also ssl certificate ie security related stuffs which otherwise you would have to do by yourself by implementing nginx, firewall etc, so in order to skip that headache u chose to use vercel as they are free and at the same time provide the security features that otherwise u would have implemented by yourself whihch again is a tedious job, so u chose vercel. Now since u have bought the domain from the hostinger u need to go to hostinger account and go to dns records of your purchased domain and there update the ns record given by vercel. This basically tells the whole internet that "Hey, hostinger isn't the boss of this domain anymore, go ask Vercel where the website is." So it doesn't host the code itself, it just points to the "manager" (Vercel) who knows where the code is living. This is pro customer as customer is having complete freedom on which service to use for deploying the code .

CNAME: This is the record that gives the owner the option to add aliases, like multiple subdomains can be added on a single domain. So it gives the customer this ability to put different different names and they all will be internally pointing to the server having code of domain that is hosted on the server, so no matter which name is hit on the domain name internally the domain inside which the CNAME is given, only that domain will open up.

MX record: these records are essential for receiving the mails that are linked to a particular domain. This is best used for the case when we have Professional emails that don’t end with @gmail.com or @zohomail etc instead they end with the domain name, example the domain gaurangpods.com has an official mail as consultant@gaurangpods.com, so in order to receive mails at this mail, we will have to update the MX records at the DNS records section where we have purchased the domain for our website.

TXT record: TXT record is a type of DNS record that is used to store extra information about a domain. This information is mostly meant for verification and security purposes rather than for directly opening a website. For example, when you want to connect services like Google Search Console, email providers, or any third-party tool with your domain, they often ask you to add a TXT record. By doing this, you are basically proving that you are the real owner of the domain.

TXT records are also used for email security. Things like SPF, DKIM, and DMARC are added as TXT records to tell other mail servers that emails coming from your domain are genuine and allowed. So when an email is sent from your domain, the receiving server checks these TXT records to verify whether the email should be trusted or not. In simple words, TXT records act like an ID proof for your domain on the internet.

How all DNS records work together for one website:

For a single website, multiple DNS records work together, each solving a different problem. When a user types your website name in the browser, the first thing that happens is that the browser checks the NS record to know which name server is responsible for your domain. That name server is the one that has all the correct DNS information for your website.

Once the correct name server is found, it then looks at the A record or AAAA record to find the actual IP address where your website is hosted. If your domain is using aliases or subdomains, the CNAME record helps in pointing those names to the main domain without needing separate IP addresses. If someone is trying to send an email to your domain, the MX record tells the internet which mail server should receive those emails. At the same time, TXT records sit in the background to help verify domain ownership and ensure that emails and services linked to the domain are trusted.

So instead of thinking of DNS as a single setting, it is better to think of it as a small system where each record has a specific role. Together, they make sure that your website opens correctly, your emails get delivered properly, and your domain stays secure and verified on the internet.