DEV Community: sanjeev singh

Function Declaration vs Function Expression: What's the Difference?

sanjeev singh — Sat, 14 Mar 2026 05:45:00 +0000

Once you start writing real JavaScript, you'll quickly realize you're doing the same things over and over — calculating totals, greeting users, validating inputs. Copy-pasting the same code every time is messy and hard to maintain. That's exactly what functions solve.

What Is a Function and Why Do We Need One?

A function is a reusable block of code that you write once and can run as many times as you need. Give it a name, define what it does, and call it whenever you need it.

// Without a function — repetitive!
console.log(5 + 3);
console.log(10 + 3);
console.log(22 + 3);

// With a function — write once, use many times
function addThree(number) {
  return number + 3;
}

console.log(addThree(5));   // 8
console.log(addThree(10));  // 13
console.log(addThree(22));  // 25

Functions make your code shorter, more readable, and easier to fix — change the logic in one place and it updates everywhere.

Function Declaration

A function declaration is the classic, traditional way to define a function. You start with the function keyword, give it a name, list any parameters in (), and write the body in {}.

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

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

Syntax breakdown

function  greet  ( name )  {
   ↑         ↑      ↑         
keyword    name  parameter(s) 

  return "Hello, " + name + "!";
     ↑
sends value back to the caller

}

Another example — adding two numbers

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

console.log(add(4, 6));   // 10
console.log(add(12, 8));  // 20

Function Expression

A function expression assigns a function to a variable. Instead of starting with function, you use const (or let), give the variable a name, then assign a function as its value.

const greet = function(name) {
  return "Hello, " + name + "!";
};

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

Notice the function after = has no name — it's anonymous. The variable greet is what holds the reference to it.

Same adding example — as a function expression

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

console.log(add(4, 6));   // 10
console.log(add(12, 8));  // 20

The output is identical. The difference is purely in how they're written and stored.

Side-by-Side Comparison

FUNCTION DECLARATION          FUNCTION EXPRESSION
──────────────────────────────────────────────────────────
function add(a, b) {          const add = function(a, b) {
  return a + b;                 return a + b;
}                             };

// How you call them — exactly the same either way:
add(3, 5); // 8               add(3, 5); // 8

They produce the same result. The key differences are under the hood.

Key Differences

1. Syntax

	Function Declaration	Function Expression
Starts with	`function` keyword	`const` / `let`
Has a name?	Always	Optional (usually anonymous)
Ends with `;`?	No	Yes (it's an assignment)

2. Hoisting — The Big Practical Difference

Hoisting is JavaScript's behaviour of reading your code before running it and making function declarations available from the very start — even before the line they're written on.

Think of it this way: JavaScript does a quick "first pass" over your file. When it spots a function declaration, it registers it immediately. Function expressions aren't registered until that line actually runs.

Function declarations CAN be called before they're defined

// Call it on line 1 — before the definition!
console.log(multiply(3, 4)); // 12   Works!

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

JavaScript hoisted the declaration to the top, so it was already available.

Function expressions CANNOT be called before they're defined

// Try to call it before the definition
console.log(multiply(3, 4)); //  TypeError: multiply is not a function

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

The variable multiply exists (it's hoisted as an empty slot), but the function hasn't been assigned to it yet. Calling it throws an error.

Hoisting Visualized

WHAT YOU WRITE                  WHAT JAVASCRIPT SEES (declaration)
──────────────────────────────────────────────────────────────────
sayHi();                        function sayHi() {   ← moved to top
                                  return "Hi!";
function sayHi() {              }
  return "Hi!";
}                               sayHi(); // works — already registered

WHAT YOU WRITE                  WHAT JAVASCRIPT SEES (expression)
─────────────────────────────────────────────────────────────────
sayHi();                        const sayHi;         ← only variable hoisted
                                sayHi(); // still undefined here!
const sayHi = function() {
  return "Hi!";                 sayHi = function() { return "Hi!"; };
};

When to Use Each

Situation	Best Choice
A general-purpose, reusable utility	Function Declaration
You need to call it before its definition	Function Declaration
Storing a function in a variable	Function Expression
Passing a function as an argument	Function Expression
Assigning different functions conditionally	Function Expression

Use a declaration for named, reusable utilities:

function calculateTax(price, rate) {
  return price * rate / 100;
}

console.log(calculateTax(1000, 18)); // 180

Use an expression when assigning or passing functions:

const double = function(n) {
  return n * 2;
};

// Passed as an argument to map()
const numbers = [1, 2, 3];
const doubled = numbers.map(double);
console.log(doubled); // [2, 4, 6]

Full Comparison Table

Feature	Function Declaration	Function Expression
Syntax	`function name() {}`	`const name = function() {}`
Hoisted?	Yes	No
Callable before definition?	Yes	No
Anonymous?	No	Yes (optional)
Stored in a variable?	Not required	Yes, always
Best for	Named utilities	Callbacks, conditionals

JavaScript Operators: The Basics You Need to Know

sanjeev singh — Sat, 14 Mar 2026 05:40:32 +0000

Every time you add two numbers, compare two values, or check two conditions at once — you're using an operator. Operators are the action symbols of JavaScript. They tell the language what to do with your data.

This guide covers the four operator types you'll use every single day.

What Are Operators?

An operator is a symbol that performs an action on one or more values. The values it works with are called operands.

10 + 5
//  ↑ operator
// 10 and 5 are operands
// result: 15

JavaScript operators fall into four main categories — arithmetic, comparison, logical, and assignment.

1. Arithmetic Operators

These work just like math class. Give them numbers, get a number back.

Operator	Name	Example	Result
`+`	Addition	`8 + 3`	`11`
`-`	Subtraction	`8 - 3`	`5`
`*`	Multiplication	`8 * 3`	`24`
`/`	Division	`8 / 2`	`4`
`%`	Modulus (remainder)	`8 % 3`	`2`

console.log(10 + 5);  // 15
console.log(10 - 5);  // 5
console.log(10 * 5);  // 50
console.log(10 / 5);  // 2
console.log(10 % 3);  // 1

The `%` Modulus Operator

Modulus gives you the remainder after division — not the result. It's one of the most useful operators in everyday coding:

console.log(10 % 3);  // 1  → 10 ÷ 3 = 3 remainder 1
console.log(15 % 5);  // 0  → 15 ÷ 5 = 3 remainder 0
console.log(7  % 2);  // 1  → 7  ÷ 2 = 3 remainder 1

Most common use: check if a number is even or odd

const number = 14;

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

`+` with Strings

The + operator also joins strings together — called concatenation:

const first = "Hello";
const second = "World";

console.log(first + ", " + second + "!"); // "Hello, World!"

Watch out when mixing types with +:

console.log("5" + 3);  // "53"  ← both treated as strings!
console.log("5" - 3);  // 2     ← subtraction converts to numbers

2. Comparison Operators

Comparison operators compare two values and always return either true or false. You'll use these constantly in if statements and loops.

Operator	Meaning	Example	Result
`==`	Equal (loose)	`5 == "5"`	`true`
`===`	Equal (strict)	`5 === "5"`	`false`
`!=`	Not equal	`5 != 3`	`true`
`!==`	Strictly not equal	`5 !== "5"`	`true`
`>`	Greater than	`8 > 5`	`true`
`<`	Less than	`3 < 10`	`true`
`>=`	Greater than or equal	`5 >= 5`	`true`
`<=`	Less than or equal	`4 <= 3`	`false`

`==` vs `===` — The Most Important Distinction

This is one of the most common sources of bugs for beginners, so pay close attention.

== (loose equality) converts types before comparing:

console.log(5 == "5");    // true  ← number 5 and string "5" are treated as equal
console.log(0 == false);  // true  ← 0 and false are treated as equal
console.log(1 == true);   // true  ← 1 and true are treated as equal
console.log("" == false); // true  ← empty string and false are treated as equal

=== (strict equality) checks both the value AND the type — no conversions:

console.log(5 === "5");    // false ← number ≠ string
console.log(0 === false);  // false ← number ≠ boolean
console.log(1 === true);   // false ← number ≠ boolean
console.log(5 === 5);      // true  ← same value, same type

     ==  (loose)                    ===  (strict)
  ┌──────────────────┐          ┌──────────────────────┐
  │  Converts types  │          │ No type conversion   │
  │  first, then     │          │ Value AND type must  │
  │  compares values │          │ both match exactly   │
  └──────────────────┘          └──────────────────────┘
   5 == "5"  →  true             5 === "5"  →  false
   0 == false → true             0 === false → false

Rule: Always use === and !==. The loose operators (==, !=) can cause subtle, hard-to-find bugs.

Practical comparison examples:

const userAge = 20;

console.log(userAge > 18);   // true  — they're an adult
console.log(userAge === 21); // false — not exactly 21
console.log(userAge >= 18);  // true  — 18 or older
console.log(userAge < 13);   // false — not a child

3. Logical Operators

Logical operators let you combine or invert boolean conditions. They're what make complex decision-making possible.

Operator	Name	Returns `true` when...
`&&`	AND	Both sides are true
`\	\	`
`!`	NOT	The value is false (inverts it)

Truth Table

| a | b | a && b | a \|\| b | !a |
|-----|-----|----------|-----------|------|
| true | true | true | true | false |
| true | false | false | true | false |
| false | true | false | true | true |
| false | false | false | false | true |

`&&` — AND (both must be true)

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Welcome! You may enter."); //  both true
}

const isRaining = true;
const hasMoney = false;

if (isRaining && hasMoney) {
  console.log("Buy an umbrella");
} else {
  console.log("Stay home!"); //  hasMoney is false, so && fails
}

`||` — OR (at least one must be true)

const isWeekend = false;
const isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("No work today!"); //  isHoliday is true
}

const hasEmail = "";
const hasPhone = "9876543210";

if (hasEmail || hasPhone) {
  console.log("We can contact you!"); //  hasPhone is truthy
}

`!` — NOT (flips true/false)

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in."); //  !false = true
}

console.log(!true);  // false
console.log(!false); // true
console.log(!0);     // true  (0 is falsy)
console.log(!"hi");  // false ("hi" is truthy)

Combining operators in real conditions

const username = "alice";
const password = "1234";
const isAdmin  = false;

// Check login: correct credentials AND not banned
if (username === "alice" && password === "1234" && !isAdmin) {
  console.log("Regular user logged in.");
}

// Allow access: is admin OR has a special pass
const hasSpecialPass = true;
if (isAdmin || hasSpecialPass) {
  console.log("Access granted!"); // 
}

JavaScript Arrays 101

sanjeev singh — Fri, 13 Mar 2026 10:39:15 +0000

Imagine you want to store the names of five fruits in JavaScript. Without arrays, you'd write this:

const fruit1 = "Apple";
const fruit2 = "Banana";
const fruit3 = "Mango";
const fruit4 = "Orange";
const fruit5 = "Grapes";

That's five separate variables for five values. What if you had 50? Or 500? Arrays solve this problem by letting you store a whole list of values under a single name.

What Is an Array?

An array is an ordered collection of values, stored together under one variable name. Think of it like a numbered shelf in a library — each slot has a position, and you can put any value in any slot.

shelf:  [ "Apple",  "Banana",  "Mango",  "Orange",  "Grapes" ]
slot:       0          1          2          3           4

The position of each item is called its index. Indexes always start at 0 — not 1.

Creating an Array

Use square brackets [] with values separated by commas:

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

Arrays can hold any data type — strings, numbers, booleans, or even a mix:

const marks    = [88, 92, 76, 95, 81];
const tasks    = ["Buy milk", "Study JS", "Go for a run"];
const mixed    = ["Alice", 25, true];       // totally valid
const empty    = [];                        // an empty array

Accessing Elements by Index

Use the array name followed by the index inside square brackets:

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

console.log(fruits[0]);  // "Apple"   ← first element
console.log(fruits[1]);  // "Banana"
console.log(fruits[4]);  // "Grapes"  ← last element
console.log(fruits[9]);  // undefined ← index doesn't exist

The first element is always at index 0. If your array has 5 items, the last one is at index 4 (length minus 1).

Accessing the last element

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

This works no matter how long the array is — a handy pattern to memorise.

The `length` Property

Every array has a built-in .length property that tells you how many items it contains:

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

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

Note: .length gives the count of items, not the last index. With 5 items, the last index is 4.

console.log(fruits.length);      // 5
console.log(fruits[fruits.length - 1]); // "Grapes" (last item)

Updating Elements

Reassign a value at a specific index:

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

fruits[1] = "Strawberry";

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

Even though fruits is declared with const, you can still change its contents. const prevents you from replacing the entire array — not from modifying what's inside it.

fruits = ["Kiwi"];     //  Error — cannot reassign const
fruits[0] = "Kiwi";   //  Fine — updating an element

Adding Elements

Add to the end — `push()`

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

fruits.push("Mango");

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

Add to the beginning — `unshift()`

fruits.unshift("Grapes");

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

Looping Over Arrays

The real power of arrays comes when you loop over them to process every item.

`for` loop — classic and explicit

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

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

// 0: Apple
// 1: Banana
// 2: Mango
// 3: Orange
// 4: Grapes

`for...of` loop — cleaner, reads like English

for (const fruit of fruits) {
  console.log(fruit);
}

// Apple
// Banana
// Mango
// Orange
// Grapes

Use for...of when you just need the values. Use the classic for loop when you also need the index.

Storing Variables vs Arrays — Side by Side

//  Without an array — messy, hard to scale
const movie1 = "Inception";
const movie2 = "Interstellar";
const movie3 = "The Dark Knight";

//  With an array — clean, easy to loop, easy to expand
const movies = ["Inception", "Interstellar", "The Dark Knight"];

console.log(movies[0]);       // "Inception"
console.log(movies.length);   // 3

for (const movie of movies) {
  console.log(movie);
}

Quick Reference

Action	Code	Result
Create	`const a = [1, 2, 3]`	Array of 3 numbers
Access first	`a[0]`	`1`
Access last	`a[a.length - 1]`	`3`
Update	`a[1] = 99`	`[1, 99, 3]`
Count items	`a.length`	`3`
Add to end	`a.push(4)`	`[1, 99, 3, 4]`
Add to start	`a.unshift(0)`	`[0, 1, 99, 3, 4]`
Loop values	`for (const x of a)`	each item in turn
Loop with index	`for (let i = 0; i < a.length; i++)`	index + item

Understanding Objects in JavaScript

sanjeev singh — Fri, 13 Mar 2026 10:33:28 +0000

You already know how to store a single value in a variable — const name = "Alice". But what if you need to store everything about Alice in one place — her name, age, and city? That's exactly what objects are for.

An object is a collection of related data, grouped together under one name using key-value pairs.

What Is an Object?

Think of an object like a contact card in your phone. One card holds multiple pieces of information about one person:

┌─────────────────────────────┐
│  name  →  "Alice"           │
│  age   →  25                │
│  city  →  "Mumbai"          │
└─────────────────────────────┘

Each piece of information has a key (like name) and a value (like "Alice"). Together, they form a key-value pair.

Creating an Object

Use curly braces {} with key: value pairs separated by commas:

const person = {
  name: "Alice",
  age: 25,
  city: "Mumbai"
};

name, age, city are the keys (also called properties)
"Alice", 25, "Mumbai" are the values
Values can be any data type — string, number, boolean, array, even another object

Accessing Properties

Dot notation — the most common way

console.log(person.name);  // "Alice"
console.log(person.age);   // 25
console.log(person.city);  // "Mumbai"

Bracket notation — useful when the key is dynamic

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

const key = "age";
console.log(person[key]);     // 25 — key stored in a variable

Use dot notation by default. Switch to bracket notation when the key comes from a variable or contains special characters.

Updating Object Properties

You can change the value of any property directly:

const person = {
  name: "Alice",
  age: 25,
  city: "Mumbai"
};

person.age = 26;
person.city = "Pune";

console.log(person.age);  // 26
console.log(person.city); // "Pune"

Even though person is declared with const, you can still modify its properties. const only prevents you from replacing the entire object — not from changing what's inside it.

person = { name: "Bob" }; //  Error — cannot reassign a const
person.name = "Bob";      //  Fine — updating a property

Adding and Deleting Properties

Add a new property

Just assign to a key that doesn't exist yet:

person.email = "alice@example.com";

console.log(person.email); // "alice@example.com"

Delete a property

delete person.city;

console.log(person.city); // undefined — property is gone

Objects Can Have Methods

A method is a function stored as a property of an object:

const person = {
  name: "Alice",
  age: 25,
  greet() {
    return "Hi, I'm " + this.name + "!";
  }
};

console.log(person.greet()); // "Hi, I'm Alice!"

this inside a method refers to the object itself — so this.name gives you "Alice".

Looping Through Object Keys

Use for...in to iterate over every key in an object:

const person = {
  name: "Alice",
  age: 25,
  city: "Mumbai"
};

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

// name: Alice
// age: 25
// city: Mumbai

Useful object utility methods

console.log(Object.keys(person));
// ["name", "age", "city"]

console.log(Object.values(person));
// ["Alice", 25, "Mumbai"]

console.log(Object.entries(person));
// [["name", "Alice"], ["age", 25], ["city", "Mumbai"]]

Nested Objects

Objects can contain other objects:

const student = {
  name: "Rahul",
  age: 20,
  address: {
    city: "Delhi",
    pincode: "110001"
  }
};

console.log(student.address.city);    // "Delhi"
console.log(student.address.pincode); // "110001"

Destructuring — Extract Values Cleanly

Instead of writing person.name, person.age separately, pull them out in one line:

const { name, age, city } = person;

console.log(name); // "Alice"
console.log(age);  // 25
console.log(city); // "Mumbai"

Array vs Object — Which to Use?

	Array `[]`	Object `{}`
Structure	Ordered list	Named key-value pairs
Access	By index: `arr[0]`	By key: `obj.name`
Best for	List of similar items	One thing with multiple properties
Example	List of 5 scores	One student's full profile

// Array — a list of students
const students = ["Alice", "Bob", "Charlie"];

// Object — one student's details
const student = {
  name: "Alice",
  age: 20,
  grade: "A"
};

// Real-world combo — array of objects (most common pattern!)
const allStudents = [
  { name: "Alice", grade: "A" },
  { name: "Bob",   grade: "B" },
];

Understanding Variables and Data Types in JavaScript

sanjeev singh — Fri, 13 Mar 2026 09:07:30 +0000

Before you can build anything in JavaScript, you need to understand how data is stored. Think of a variable as a labelled box: you put something inside it, give the box a name, and you can open it later to read or change what's inside.

┌─────────────────┐
│ name: "Alice" │ ← the box is called "name", value is "Alice"
└─────────────────┘


That's all a variable is. Let's learn how to create them.

---

## Declaring Variables: `var`, `let`, and `const`

JavaScript gives you three keywords to create variables. Each one behaves a little differently.

### `const` — a locked box

Use `const` when the value will **never change**. Once you put something in, it's sealed.

js
const siteName = "MyBlog";
const pi = 3.14159;

siteName = "NewBlog"; // Error — cannot reassign a const


### `let` — a regular box

Use `let` when the value **needs to change** over time.

js
let score = 0;

score = 10; // allowed
score = 20; // allowed again

console.log(score); // 20


### `var` — the old way (avoid it)

`var` is how variables used to be written before ES6 (2015). It works, but has quirky scoping behaviour that causes bugs. You'll see it in old code — but don't write new code with it.

js
var name = "Bob"; // works, but prefer let or const


---

### The golden rule

> Start every variable with `const`. Only switch to `let` if you know the value will need to change.

---

## Primitive Data Types

Every value in JavaScript has a **type** — it tells you what kind of data you're working with. There are five core primitive types that every beginner must know.

### 1. String — text

Any text value, wrapped in quotes (single, double, or backticks):

js
const firstName = "Alice";
const greeting = 'Hello!';
const message = Welcome, ${firstName}!; // template literal

console.log(message); // Welcome, Alice!


### 2. Number — numeric values

JavaScript uses a single `Number` type for both whole numbers and decimals:

js
const age = 25;
const price = 199.99;
const temp = -3;

console.log(typeof age); // "number"


### 3. Boolean — true or false

Only two possible values. Used for yes/no, on/off decisions:

js
const isStudent = true;
const isVerified = false;


### 4. Undefined — declared but empty

When you create a variable but don't give it a value, JavaScript fills it with `undefined` automatically:

js
let username;
console.log(username); // undefined


### 5. Null — intentionally empty

`null` means you *deliberately* set a variable to "no value". The box exists, but you've chosen to leave it empty:

js
let selectedUser = null; // no user selected yet


> `undefined` = "I never put anything in". `null` = "I chose to leave this empty".

---

## The `typeof` Operator

Use `typeof` to check what type a value is:

js
console.log(typeof "Alice"); // "string"
console.log(typeof 25); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" ← a known JS quirk!


The `null` result is a historic bug in JavaScript — `null` is *not* an object, but `typeof null` has always returned `"object"`. Just something to be aware of.

---

## A Practical Example

Let's put it all together with a real student profile:

js
const name = "Priya"; // string — won't change
let age = 20; // number — might change
const isStudent = true; // boolean — won't change
let email = null; // null — not provided yet

console.log(name); // "Priya"
console.log(age); // 20
console.log(isStudent); // true
console.log(email); // null

// Update age with let — this is fine
age = 21;
console.log(age); // 21

// Try to update a const — this will error
// name = "Sneha"; // TypeError


---

## What Is Scope?

Scope is the question: *"Where in my code can I use this variable?"*

Think of it like a house. Code inside a room can see what's in that room **and** in the hallway. But the hallway cannot see inside the rooms.

js
const hallway = "I'm visible everywhere";

function bedroom() {
const insideBedroom = "only visible in here";

console.log(hallway); // works — hallway is in the outer scope
console.log(insideBedroom); // works — we're inside the room
}

bedroom();
console.log(insideBedroom); // Error — hallway can't see into the room


### `let` and `const` are block-scoped

A block is anything wrapped in `{}`. `let` and `const` only live inside the block where they're created:

js
if (true) {
let blockVariable = "I only exist here";
console.log(blockVariable); // works
}

console.log(blockVariable); // Error — out of scope


### `var` ignores blocks (one reason to avoid it)

`var` leaks out of blocks, which leads to surprising bugs:

js
if (true) {
var leaked = "I escape the block!";
}

console.log(leaked); // "I escape the block!" — unexpected!


This is exactly why `let` and `const` were introduced. They behave predictably.

---

## Putting It All Together

js
// Good, modern JavaScript variable declarations

const userName = "Rahul"; // string, never changes
const userAge = 22; // number, never changes
const isStudent = true; // boolean, never changes
let score = 0; // number, will change during the game
let lastLogin = null; // null, no login recorded yet

console.log(typeof userName); // "string"
console.log(typeof userAge); // "number"
console.log(typeof isStudent); // "boolean"
console.log(typeof score); // "number"
console.log(typeof lastLogin); // "object" ← the null quirk

// Update the mutable ones
score = 150;
lastLogin = "2026-03-13";

console.log(score); // 150
console.log(lastLogin); // "2026-03-13"

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

sanjeev singh — Fri, 13 Mar 2026 08:58:03 +0000

Every day, you make hundreds of decisions without thinking about them. If it's raining, carry an umbrella. If the traffic light is red, stop — otherwise, go. Programs work exactly the same way. Control flow is how JavaScript decides which lines of code to run, and which to skip.

In this article, you'll learn the three main tools for control flow: if, else if, else, and switch.

What Is Control Flow?

By default, JavaScript runs code line by line, top to bottom. Control flow lets you break out of that pattern — you can skip blocks of code, choose between paths, or repeat actions.

Start → Check a condition → take path A or path B → Continue

Think of it like a road with forks. The condition is the signpost that tells your program which way to turn.

The `if` Statement

The simplest form: "If this condition is true, run this block."

const age = 20;

if (age >= 18) {
  console.log("You can vote!");
}
// Output: You can vote!

If age were 15, the condition 15 >= 18 would be false, so the block is skipped entirely — nothing is printed.

Syntax:

if (condition) {
  // runs only when condition is true
}

The `if...else` Statement

Add an else block to handle the false case:

const marks = 45;

if (marks >= 50) {
  console.log("Result: Pass");
} else {
  console.log("Result: Fail");
}
// Output: Result: Fail

One path or the other always runs — never both, never neither.

The `else if` Ladder

When you have more than two possible outcomes, chain else if blocks:

const marks = 72;

if (marks >= 90) {
  console.log("Grade: A");
} else if (marks >= 80) {
  console.log("Grade: B");
} else if (marks >= 70) {
  console.log("Grade: C");
} else if (marks >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}
// Output: Grade: C

JavaScript checks each condition in order. The moment one is true, it runs that block and skips the rest. The else at the end is the safety net — it runs only if every condition above was false.

Truthy and Falsy

JavaScript conditions don't need to be strict true/false. Any value can be used:

Falsy (treated as false): false, 0, "", null, undefined, NaN

Everything else is truthy (treated as true):

if ("hello")    { console.log("runs"); }  // ✅ non-empty string
if (42)         { console.log("runs"); }  // ✅ non-zero number
if (0)          { console.log("runs"); }  // ❌ skipped — 0 is falsy
if ("")         { console.log("runs"); }  // ❌ skipped — empty string is falsy

The Ternary Operator — a One-Line Shortcut

For simple if/else assignments, the ternary is more concise:

// Long form
let status;
if (marks >= 50) {
  status = "Pass";
} else {
  status = "Fail";
}

// Ternary
const status = marks >= 50 ? "Pass" : "Fail";

condition ? value_if_true : value_if_false

Use ternary for simple value choices. For logic with side effects or multiple lines, stick with if/else.

The `switch` Statement

When you're comparing one value against many specific options, switch is cleaner than a long else if chain.

const day = 3;

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

Key parts of `switch`

Part	Purpose
`switch(value)`	The value being tested
`case "X":`	A possible match (uses `===` internally)
`break;`	Stop executing — exit the switch
`default:`	Runs if no case matches (like `else`)

The `break` Keyword — Don't Skip It!

Without break, JavaScript falls through into the next case and keeps running:

const num = 1;

switch (num) {
  case 1:
    console.log("One");
    // no break!
  case 2:
    console.log("Two");
    break;
  case 3:
    console.log("Three");
}
// Output:
// One
// Two  ← also ran because of fall-through!

Always add break unless you intentionally want fall-through.

Intentional fall-through — grouping cases

Sometimes fall-through is useful: run the same code for multiple values.

const month = 4; // April

switch (month) {
  case 12:
  case 1:
  case 2:
    console.log("Winter");
    break;
  case 3:
  case 4:
  case 5:
    console.log("Spring");
    break;
  case 6:
  case 7:
  case 8:
    console.log("Summer");
    break;
  default:
    console.log("Autumn");
}
// Output: Spring

Arrow Functions in JavaScript: A Simpler Way to Write Functions

sanjeev singh — Wed, 11 Mar 2026 09:33:08 +0000

Modern JavaScript introduced arrow functions in ES6, and they quickly became one of the most-used features in the language. They let you write functions with less code, making your programs cleaner and easier to read.

What Are Arrow Functions?

Arrow functions are a shorter way to write functions in JavaScript. Instead of using the function keyword, you use a fat arrow =>.

They're not a replacement for every function — but for simple, focused tasks, they're the cleaner choice.

Basic Arrow Function Syntax

Let's start by converting a regular function into an arrow function.

Regular function:

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

Arrow function:

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

Syntax Breakdown

const greet = (name) => { return "Hello, " + name + "!"; };
  ↑              ↑     ↑           ↑
variable      params  arrow      function body

Arrow Functions with One Parameter

When you have exactly one parameter, you can drop the parentheses:

// With parentheses (always valid)
const square = (n) => {
  return n * n;
};

// Without parentheses (one param shorthand)
const square = n => {
  return n * n;
};

console.log(square(5)); // 25

Both versions work. The second is just a little shorter.

Arrow Functions with Multiple Parameters

When you have two or more parameters, the parentheses are required:

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

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

console.log(add(3, 4));      // 7
console.log(multiply(3, 4)); // 12

No parameters? Use empty parentheses:

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

Implicit Return vs Explicit Return

This is where arrow functions get really powerful.

Explicit Return

Uses curly braces {} and the return keyword — just like regular functions:

const double = n => {
  return n * 2; // explicit return
};

Implicit Return

When your function body is a single expression, you can remove the curly braces and return keyword entirely:

const double = n => n * 2; // implicit return

They do exactly the same thing! The second version just skips the boilerplate.

More examples:

const greet   = name => "Hello, " + name + "!";
const isEven  = n    => n % 2 === 0;
const addTen  = n    => n + 10;

console.log(greet("Alice")); // Hello, Alice!
console.log(isEven(4));      // true
console.log(addTen(5));      // 15

Important: Implicit return only works for a single expression. If you need multiple lines of logic, use curly braces and return.

Normal Function vs Arrow Function

Feature	Normal Function	Arrow Function
Syntax	`function name() {}`	`const name = () => {}`
`return` keyword	Always needed	Optional (implicit return)
Hoisting	Hoisted	Not hoisted
`this` keyword	Own `this`	Inherits `this` from parent
Best for	Methods, constructors	Short callbacks, transforms

Transformation Example

BEFORE (normal function)              AFTER (arrow function)
─────────────────────────────         ──────────────────────
function add(a, b) {          →       const add = (a, b) => a + b;
  return a + b;
}

Real-World Use: Arrow Functions Inside map()

Arrow functions really shine when used as callbacks — for example, inside map():

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

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

// Arrow function version — much cleaner!
const doubled = numbers.map(n => n * 2);

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

Array Methods You Must Know

sanjeev singh — Wed, 11 Mar 2026 09:22:23 +0000

Arrays are the backbone of JavaScript programming. Whether you're building a shopping cart, filtering search results, or transforming data from an API — you'll use array methods every single day. This guide walks you through the six most important methods you need to master, with clear examples you can run right now in your browser console.

1. push() and pop()

These two methods work on the end of an array. push() adds one or more items to the end. pop() removes the last item and returns it.

push() — Add to the end

const fruits = ['apple', 'banana'];

fruits.push('mango');

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

Before	After
`['apple', 'banana']`	`['apple', 'banana', 'mango']`

pop() — Remove from the end

const fruits = ['apple', 'banana', 'mango'];

const removed = fruits.pop();

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

Before	After
`['apple', 'banana', 'mango']`	`['apple', 'banana']` (removed: `'mango'`)

💡 Try it! Open your browser DevTools (F12), go to the Console tab, and try these examples live!

2. shift() and unshift()

These mirror push/pop, but work on the beginning of an array instead of the end.

unshift() — Add to the front

const queue = ['Bob', 'Charlie'];

queue.unshift('Alice');

console.log(queue); // ['Alice', 'Bob', 'Charlie']

Before	After
`['Bob', 'Charlie']`	`['Alice', 'Bob', 'Charlie']`

shift() — Remove from the front

const queue = ['Alice', 'Bob', 'Charlie'];

const first = queue.shift();

console.log(first); // 'Alice'
console.log(queue); // ['Bob', 'Charlie']

Before	After
`['Alice', 'Bob', 'Charlie']`	`['Bob', 'Charlie']` (removed: `'Alice'`)

Quick Reference

Method	Action	Where?
`push()`	Add item(s)	End of array
`pop()`	Remove item	End of array
`unshift()`	Add item(s)	Start of array
`shift()`	Remove item	Start of array

3. map()

map() creates a brand new array by transforming every element. The original array is never changed. Think of it as: "For every item, give me a new version of it."

const prices = [10, 20, 30];

// Double every price
const doubled = prices.map(price => price * 2);

console.log(doubled); // [20, 40, 60]
console.log(prices);  // [10, 20, 30]  ← original unchanged!

Before	After
`prices = [10, 20, 30]`	`doubled = [20, 40, 60]` (prices unchanged)

Traditional for loop vs map()

Traditional for loop:

const prices = [10, 20, 30];
const doubled = [];

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

map() — cleaner!

const prices = [10, 20, 30];

const doubled = prices.map(price => price * 2);

How map() works

[10, 20, 30]  →  price => price * 2  →  [20, 40, 60]
   Input              Transform             Output

💡 Try it! map() always returns a NEW array of the SAME length as the original.

4. filter()

filter() creates a new array containing only the elements that pass a test you define. If the test returns true, the item is kept. If false, it's skipped.

const scores = [5, 12, 8, 21, 3, 18];

// Keep only scores above 10
const highScores = scores.filter(score => score > 10);

console.log(highScores); // [12, 21, 18]
console.log(scores);     // [5, 12, 8, 21, 3, 18]  ← unchanged!

Before	After
`scores = [5, 12, 8, 21, 3, 18]`	`highScores = [12, 21, 18]`

Traditional for loop vs filter()

Traditional for loop:

const scores = [5, 12, 8, 21, 3, 18];
const highScores = [];

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

filter() — cleaner!

const scores = [5, 12, 8, 21, 3, 18];

const highScores = scores.filter(score => score > 10);

How filter() works

[5, 12, 8, 21, 3, 18]  →  score > 10?  →  [12, 21, 18]
        Input               Test (true/false)    Output

💡 Try it! filter() returns a NEW array that may be SHORTER than the original (only passing items are kept).

5. reduce() — The Accumulator

reduce() is the most powerful of the group, but let's keep it simple for now. It takes an array and reduces it to a single value — like a running total.

It uses two things: an accumulator (the running total) and the current item being processed.

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

const total = numbers.reduce((accumulator, current) => {
  return accumulator + current;
}, 0); // ← 0 is the starting value

console.log(total); // 15

Step-by-step breakdown

Step	Current	Accumulator before	Result (new acc.)
1	1	0 (start)	0 + 1 = 1
2	2	1	1 + 2 = 3
3	3	3	3 + 3 = 6
4	4	6	6 + 4 = 10
5	5	10	10 + 5 = 15 ✓

💡 Try it! For now, just remember: reduce() is perfect for calculating totals, sums, and counts.

6. forEach()

forEach() runs a function on every item in the array, one at a time. Unlike map(), it does NOT create a new array — it's used for side effects like logging, updating the DOM, or sending data.

const students = ['Alice', 'Bob', 'Charlie'];

students.forEach(student => {
  console.log('Hello, ' + student + '!');
});

// Hello, Alice!
// Hello, Bob!
// Hello, Charlie!

When to use forEach() vs map()

Use `map()` when...	Use `forEach()` when...
You want a NEW array back	You just want to DO something
e.g. doubling prices, formatting names	e.g. logging, updating UI, sending data

CSS Selectors 101: Targeting Elements with Precision

sanjeev singh — Sun, 01 Feb 2026 17:35:52 +0000

You've written your HTML. You've got a heading, a few paragraphs, some buttons. Now you want to make it look good. You open your CSS file and you write:

p {
  color: blue;
}

And suddenly — every single paragraph on the page turns blue. Every one of them. But you only wanted to style that one paragraph near the top. The one that says "Welcome."

How do you tell CSS, "No, not all of them. Just that one"?

That's exactly what selectors solve. They're how CSS targets specific elements on a page. And once you understand them, you'll have precise control over exactly what gets styled and what doesn't.

How do we tell CSS which elements to style — and how specific can we get?

Let's find out.

1. Why CSS Selectors Are Needed

CSS works by attaching styles to elements. But a webpage can have hundreds of elements — dozens of paragraphs, multiple headings, countless divs. If every style rule applied to everything, webpages would be a mess.

Selectors solve this problem. A selector is the part of a CSS rule that says which element(s) should receive the style.

Every CSS rule has two parts:

selector {
  property: value;
}

The selector is the targeting system. The property: value is the style being applied. This entire article is about that first part — the selector.

Analogy: Imagine you're a teacher with a classroom of 30 students. You don't want to shout the same instruction at everyone every time. Sometimes you call on one specific student by name. Sometimes you address the whole row. Sometimes you say "everyone wearing a red shirt." Selectors work the same way — they let you choose who you're talking to.

2. The Element Selector

The simplest selector is the element selector. You just type the name of an HTML element, and CSS styles every element of that type on the page.

How It Works

h1 {
  color: darkblue;
  font-size: 36px;
}

p {
  color: gray;
  line-height: 1.6;
}

That h1 selector targets every <h1> on the page. That p selector targets every <p>.

Seeing It in Action

HTML:                                   CSS:
─────                                   ───
<h1>My Website</h1>                     h1 { color: darkblue; }
<p>Welcome to my site.</p>              p  { color: gray; }
<p>Here is some more text.</p>

Result:
────────────────────────────────────────
  My Website                ← darkblue (matched by h1)
  Welcome to my site.       ← gray     (matched by p)
  Here is some more text.   ← gray     (matched by p)
────────────────────────────────────────

Both paragraphs turn gray because the p selector matches all of them.

Analogy: The element selector is like saying "everyone in this room." It doesn't care about names or labels — it just catches every element of that type.

3. The Class Selector

The element selector is useful, but it's not precise enough when you need to style only some elements of a type. That's where the class selector comes in.

A class is a reusable label you attach to any HTML element using the class attribute. Then in CSS, you target that label with a dot . in front of it.

How It Works

<p>This is a regular paragraph.</p>
<p class="highlight">This one is special.</p>
<p>This is another regular paragraph.</p>

p {
  color: gray;
}

.highlight {
  color: red;
  font-weight: bold;
}

The .highlight selector targets only the paragraph that has class="highlight". The others stay gray.

Seeing It in Action

HTML Elements:                          Which selector matches?
──────────────                          ──────────────────────
<p>                                     p        → gray
<p class="highlight">                   p + .highlight → red, bold
<p>                                     p        → gray

Result:
────────────────────────────────────────
  This is a regular paragraph.          ← gray
  This one is special.                  ← red + bold
  This is another regular paragraph.    ← gray
────────────────────────────────────────

Why Classes Are So Powerful

Classes are reusable. You can apply the same class to completely different elements:

<h2 class="highlight">A Heading</h2>
<p class="highlight">A Paragraph</p>
<div class="highlight">A Div</div>

All three get the .highlight styles, even though they're different element types. This is one of the most important ideas in CSS.

Analogy: A class is like a colored name tag. You can hand out the same red name tag to anyone in the room — it doesn't matter if they're sitting in the front row or the back. Everyone wearing that red tag gets the same treatment.

4. The ID Selector

The ID selector works similarly to the class selector, but with one critical difference: an ID must be unique on the page. There can only be one element with a given ID.

In HTML, you set an ID with the id attribute. In CSS, you target it with a # in front of the name.

How It Works

<h1 id="main-title">Welcome</h1>
<h1>Another Heading</h1>

h1 {
  color: gray;
}

#main-title {
  color: darkgreen;
  font-size: 48px;
}

Only the heading with id="main-title" gets the green color and larger size. The other <h1> stays gray.

Seeing It in Action

HTML Elements:                          Which selector matches?
──────────────                          ──────────────────────
<h1 id="main-title">                    h1 + #main-title → darkgreen, 48px
<h1>                                    h1               → gray

Result:
────────────────────────────────────────
  Welcome                               ← darkgreen, large (ID match)
  Another Heading                       ← gray (element match only)
────────────────────────────────────────

Class vs ID — What's the Difference?

This is one of the most common beginner questions, so let's lay it out clearly:

                  Class (.name)           ID (#name)
                  ─────────────           ──────────
Can you reuse it? Yes — as many times     No — must be unique
                  as you want             on the page

How to write it   class="card"            id="main-title"
in HTML?

How to target     .card                   #main-title
it in CSS?

When to use it?   Styling a group of      Styling one specific,
                  similar elements        unique element

Priority?         Lower                   Higher (we'll cover
                                          this in section 7)

Analogy: A class is like a job title — multiple people can be "Designer." An ID is like a social security number — it belongs to exactly one person and no one else.

5. Group Selectors

Sometimes you want to apply the exact same styles to several different elements at once. You could write the same block of CSS three times. But that's repetitive and hard to maintain.

The group selector solves this. You simply list the selectors you want, separated by commas.

How It Works

h1, h2, h3 {
  color: darkblue;
  font-family: Georgia, serif;
}

That single rule styles <h1>, <h2>, and <h3> — all three at once.

Seeing It in Action

Without group selector:                 With group selector:
───────────────────────                 ────────────────────
h1 {                                    h1, h2, h3 {
  color: darkblue;                        color: darkblue;
  font-family: Georgia, serif;            font-family: Georgia, serif;
}                                       }
h2 {
  color: darkblue;                      ← Same result. One-third the code.
  font-family: Georgia, serif;
}
h3 {
  color: darkblue;
  font-family: Georgia, serif;
}

You can also mix element selectors, class selectors, and ID selectors in a group:

h1, .intro, #banner {
  margin-bottom: 20px;
}

Analogy: A group selector is like calling out multiple names at once — "Sarah, James, and Priya, come to the front." One instruction. Multiple targets.

6. Descendant Selectors

Now we're getting into the really useful stuff. A descendant selector lets you target an element only when it's inside another specific element.

You write it by putting a space between two selectors. The element on the left is the ancestor. The element on the right is the one being styled — but only when it lives inside that ancestor.

How It Works

<div class="card">
  <p>I am inside the card.</p>
</div>

<p>I am outside the card.</p>

p {
  color: gray;
}

.card p {
  color: darkgreen;
  font-weight: bold;
}

The .card p selector says: "Find a <p> that is inside an element with class card." Only that paragraph turns green. The one outside stays gray.

Seeing It in Action

HTML Structure:
────────────────────────────────────────
  <div class="card">
    <p>I am inside the card.</p>       ← matched by .card p
  </div>

  <p>I am outside the card.</p>        ← matched by p only
────────────────────────────────────────

Targeting Flow:
────────────────────────────────────────
  .card p

    .card    →  Find an element with class "card"
      p      →  Then find a <p> INSIDE it
                (anywhere inside, at any depth)
────────────────────────────────────────

Result:
────────────────────────────────────────
  I am inside the card.                 ← darkgreen, bold
  I am outside the card.                ← gray
────────────────────────────────────────

Why This Matters

Descendant selectors let you style elements contextually. The same <p> tag can look completely different depending on where it lives on the page:

.sidebar p    { font-size: 14px; color: #666; }
.main-content p { font-size: 16px; color: #333; }
.footer p     { font-size: 12px; color: #999; }

Three different styles. All targeting <p>. All based on where that paragraph lives.

Analogy: A descendant selector is like saying "find all the chairs inside the library." Not every chair on campus — just the ones inside that specific room. The ancestor sets the context; the descendant is what you're actually targeting.

7. Selector Priority (The Basics)

Here's a question that comes up a lot: what happens when two selectors try to style the same element differently? Which one wins?

CSS has a built-in ranking system called specificity. The more specific your selector, the higher it ranks — and the more likely its styles are to win.

Here's the basic priority order, from lowest to highest:

Priority    Selector Type       Example
────────    ─────────────────   ─────────────────
Lowest      Element selector    p
  │         Class selector      .highlight
  │         ID selector         #main-title
Highest     ↑                   ↑

Seeing It in Action

<p class="intro" id="opening">Hello, World!</p>

p {
  color: gray;          /* Element selector — lowest priority */
}

.intro {
  color: blue;          /* Class selector — medium priority */
}

#opening {
  color: red;           /* ID selector — highest priority */
}

All three selectors match the same paragraph. But the ID selector wins because it has the highest priority.

Result:
────────────────────────────────────────
  Hello, World!                         ← red (ID wins)
────────────────────────────────────────

Why?
  p          →  matches ✓   priority: low
  .intro     →  matches ✓   priority: medium
  #opening   →  matches ✓   priority: high  ← WINNER
────────────────────────────────────────

The Simple Rule to Remember

  ┌────────────────────────────────────┐
  │  More specific = higher priority   │
  │                                    │
  │  Element  <  Class  <  ID          │
  │  (low)      (medium)   (high)      │
  └────────────────────────────────────┘

Analogy: Think of it like authority at work. A general instruction from the company ("all employees wear name tags") can be overridden by a department rule ("engineers wear blue badges"), which can be overridden by a direct manager order ("you specifically — wear this badge today"). The more targeted the instruction, the more authority it carries.

Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

sanjeev singh — Sun, 01 Feb 2026 16:35:40 +0000

Imagine you're writing HTML and you need a navigation bar with five links inside a list. Without any shortcuts, you'd type something like this by hand:

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
  </ul>
</nav>

That's 9 lines. Typed character by character. Now imagine doing that dozens of times a day.

With Emmet, you can generate that exact same block of HTML by typing this:

nav>ul>li*5>a[href="#"]{Link $}

One line. Then you press Tab, and the entire structure appears. That's the power of Emmet.

How does a single line of shorthand turn into a full block of HTML — and how can you start using it today?

Let's break it down.

1. What Emmet Is

Emmet is a shortcut language built into most modern code editors. You type a short abbreviation, press a key (usually Tab), and Emmet expands it into a full block of HTML.

That's it. It's not a plugin you need to learn from scratch, it's not a framework, and it's not something that changes how HTML works. It's simply a faster way to write HTML.

Analogy: Think of Emmet like autocomplete, but on steroids. Instead of suggesting the next word, it generates an entire structure from a tiny hint you give it.

2. Why Emmet Is Useful for HTML Beginners

You might think, "I'm a beginner — shouldn't I be typing everything out by hand to learn?" That's a fair thought, and honestly, understanding what the HTML looks like is important. But here's the thing: Emmet doesn't hide the HTML from you. It shows you the full expanded output right in your editor.

So Emmet is actually a great learning tool because it:

Generates correct HTML structure instantly, so you can see how nesting works
Saves you from repetitive typing, which means less frustration
Helps you experiment faster — want to try a different layout? Generate it in seconds
Reinforces patterns — the more you use Emmet, the more you internalize how HTML is structured

Analogy: Learning to cook with a recipe book doesn't make you a worse cook. It lets you focus on understanding the dish instead of struggling to remember every ingredient. Emmet is your recipe book for HTML.

3. How Emmet Works Inside a Code Editor

Emmet comes pre-installed in VS Code (the most popular code editor for web development). In most other editors, you can install it as a plugin.

Here's the workflow, step by step:

┌─────────────────────────────────────────────────────┐
│  Step 1: Open a file with a .html extension         │
│                                                     │
│  Step 2: Type your Emmet abbreviation               │
│          e.g.  ul>li*3                              │
│                                                     │
│  Step 3: Press Tab                                  │
│                                                     │
│  Step 4: Emmet expands it into full HTML            │
│          <ul>                                       │
│            <li></li>                                │
│            <li></li>                                │
│            <li></li>                                │
│          </ul>                                      │
└─────────────────────────────────────────────────────┘

A few things to keep in mind:

Make sure your file is saved with a .html extension. Emmet needs to know you're writing HTML.
The abbreviation must be typed on its own — don't put it inside another tag or add extra spaces.
If Tab doesn't work, try Ctrl + Space first to trigger the suggestion, then press Enter.

4. Basic Emmet Syntax and Abbreviations

Emmet has a simple grammar. Once you learn a handful of symbols, you can build almost anything. Here's what each symbol means:

Symbol    Meaning                          Example
──────    ──────────────────────────────   ─────────────
>         Child (nest inside)              div>p
+         Sibling (next to)                h1+p
*         Multiply (repeat)                li*3
.         Class name                       div.container
#         ID name                          div#main
[]        Attribute                        a[href="url"]
{}        Text content                     p{Hello!}
$         Auto-number (increments)         li*3{Item $}

Don't worry about memorizing all of these right now. We'll use each one in the examples below, one at a time.

5. Creating HTML Elements Using Emmet

The simplest thing you can do is type the name of an element and press Tab. Emmet will generate the opening and closing tags for you.

Single Elements

You type:        Emmet generates:
─────────        ────────────────
p                <p></p>

h1               <h1></h1>

div              <div></div>

section          <section></section>

Clean. Simple. No typos on closing tags.

Adding Text Content

Wrap your text in curly braces {} to put content inside the element:

You type:                Emmet generates:
─────────────────        ────────────────────────
p{Hello, World!}         <p>Hello, World!</p>

h1{My Website}           <h1>My Website</h1>

6. Adding Classes, IDs, and Attributes

This is where Emmet starts to feel like a superpower. You can attach classes, IDs, and attributes directly into your abbreviation.

Classes (using `.`)

You type:                    Emmet generates:
─────────────────────────    ─────────────────────────────────
div.container                <div class="container"></div>

p.intro                      <p class="intro"></p>

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

Notice that last one — you can chain multiple classes by adding multiple dots. Emmet stacks them all into one class attribute.

IDs (using `#`)

You type:                    Emmet generates:
─────────────────────────    ─────────────────────────────────
div#main                     <div id="main"></div>

section#about                <section id="about"></section>

Combining Classes and IDs

You type:                    Emmet generates:
─────────────────────────    ──────────────────────────────────────────
div#header.top.dark          <div id="header" class="top dark"></div>

Custom Attributes (using `[]`)

You type:                              Emmet generates:
─────────────────────────────────      ──────────────────────────────────────────
a[href="https://example.com"]          <a href="https://example.com"></a>

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

input[type="email"]                    <input type="email">

Analogy: Think of . and # as quick-access labels you stick on an element — like color-coded sticky notes. The [] brackets are for anything more specific, like writing a custom note on the sticky.

7. Creating Nested Elements

This is one of the most useful Emmet features. The > symbol creates a parent-child relationship — exactly like nesting tags in HTML.

Simple Nesting

You type:        Emmet generates:
─────────        ────────────────────────
div>p            <div>
                   <p></p>
                 </div>

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

What's Actually Happening

    div > p
     │    │
     │    └── Child: <p> is INSIDE <div>
     │
     └─── Parent: <div> wraps around <p>

    Produces:

    ┌── <div> ─────────────┐
    │                      │
    │   ┌── <p> ─────────┐ │
    │   │                │ │
    │   └────────────────┘ │
    │                      │
    └──────────────────────┘

Using Siblings with `+`

What if you want elements next to each other instead of nested? Use +:

You type:            Emmet generates:
─────────────        ──────────────────────
h1+p                 <h1></h1>
                     <p></p>

h1+p+p               <h1></h1>
                     <p></p>
                     <p></p>

Combining `>` and `+` Together

You type:            Emmet generates:
─────────────        ──────────────────────
div>h1+p             <div>
                       <h1></h1>
                       <p></p>
                     </div>

Here, h1 and p are both children of div, and they sit next to each other as siblings.

Analogy: The > symbol is like saying "put this inside that." The + symbol is like saying "put this next to that." Together, they let you describe any layout structure in a single line.

8. Repeating Elements Using Multiplication

The * symbol is one of the most time-saving features in Emmet. It lets you repeat an element any number of times with a single keystroke.

Basic Multiplication

You type:        Emmet generates:
─────────        ────────────────────────
li*3             <li></li>
                 <li></li>
                 <li></li>

div*2            <div></div>
                 <div></div>

Multiplication with Nesting

You type:        Emmet generates:
─────────        ──────────────────────────
ul>li*4          <ul>
                   <li></li>
                   <li></li>
                   <li></li>
                   <li></li>
                 </ul>

Auto-Numbering with `$`

Here's the magic trick. Add $ inside your text content and Emmet will automatically number each repeated element:

You type:                Emmet generates:
─────────────────        ──────────────────────────
ul>li*3{Item $}          <ul>
                           <li>Item 1</li>
                           <li>Item 2</li>
                           <li>Item 3</li>
                         </ul>

The $ acts as a placeholder that increments by 1 for each repetition. This is incredibly handy when you're building lists, cards, or any repeated layout.

Seeing the Full Picture

Emmet abbreviation:   ul>li*5{Item $}

What Emmet sees:
─────────────────────────────────────────────
  ul          →  Create a <ul>
    > li      →  Put <li> elements inside it
      * 5     →  Repeat the <li> five times
      {Item $}→  Fill each one with "Item 1", "Item 2"...

What gets generated:
─────────────────────────────────────────────
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

9. Generating a Full HTML Boilerplate with Emmet

Every HTML file needs a basic structure to work properly — the <!DOCTYPE>, <html>, <head>, <title>, and <body> tags. Typing all of that from scratch every single time is tedious.

Emmet has a shortcut for the entire thing. Just type this:

That's it. A single exclamation mark. Press Tab, and Emmet generates:

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



</body>
</html>

A complete, ready-to-go HTML file from one character. This is the single most useful Emmet shortcut for beginners.

What Each Part Does

<!DOCTYPE html>                          Tells the browser this is an HTML5 document
<html lang="en">                         The root element. lang sets the language.
  <head>                                 Contains info about the page (not visible)
    <meta charset="UTF-8">               Supports all characters and languages
    <meta name="viewport" ...>           Makes the page look right on mobile
    <title>Document</title>              The title shown in the browser tab
  </head>
  <body>                                 Everything the user actually sees goes here

  </body>
</html>

Understanding HTML Tags and Elements

sanjeev singh — Sun, 01 Feb 2026 04:57:35 +0000

If a webpage were a house, HTML would be the skeleton — the structure that holds everything together. Without it, there's no layout, no content, no webpage at all. CSS adds the paint and decoration, JavaScript adds the interactivity, but HTML? HTML is where it all begins.

In this article, we're going to break down exactly what HTML tags and elements are, how they work, and why they matter. By the end, you'll be able to look at any piece of HTML code and instantly understand what's happening.

What exactly is an HTML tag, and how is it different from an HTML element?

Let's find out.

1. What HTML Is and Why We Use It

HTML stands for HyperText Markup Language. That's a fancy name, but the idea is simple: it's a language we use to mark up (structure) the content on a webpage.

Think about a book. A book has a title, chapters, paragraphs, and sentences. HTML does the same thing for a webpage — it tells the browser, "This is a heading. This is a paragraph. This is an image."

Without HTML, the browser would just see a blob of text with no structure. It wouldn't know what's a title, what's a paragraph, or what's a link. HTML gives meaning to the content.

Analogy: Imagine writing a document without any formatting — no bold titles, no paragraphs, no bullet points. It would be nearly impossible to read. HTML is the formatting system that makes webpages readable and organized.

2. What an HTML Tag Is

A tag is the instruction we write in HTML to tell the browser what to do with a piece of content. Tags are always wrapped in angle brackets: < >.

Here's a simple tag:

<p>

That's it. That single piece of text — <p> — is a tag. It tells the browser, "Hey, what comes next is a paragraph."

Analogy: Think of a tag like a label on a box. The label tells you what's inside the box without you having to open it. <p> is the label that says "paragraph inside."

3. Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs: an opening tag and a closing tag. The content sits in between.

Opening Tag    Content      Closing Tag
     ↓            ↓              ↓
   <p>     Hello, World!      </p>

Here's how each part works:

Opening tag (<p>) — Tells the browser, "A paragraph is starting here."
Content (Hello, World!) — The actual text or content the user sees.
Closing tag (</p>) — Tells the browser, "The paragraph ends here." Notice the / — that's how you know it's a closing tag.

Analogy: Think of it like a sandwich. The opening tag is the top slice of bread, the content is the filling, and the closing tag is the bottom slice. You need both pieces of bread to hold the filling together!

  ┌─────────┐
  │  <p>    │  ← Opening tag (top bread)
  ├─────────┤
  │ Content │  ← The filling
  ├─────────┤
  │  </p>   │  ← Closing tag (bottom bread)
  └─────────┘

4. What an HTML Element Means

Now here's where a lot of beginners get confused — and it's a very common question:

What's the difference between a tag and an element?

The answer is simple once you see it:

A tag is just the label itself (like <p> or </p>).
An element is the complete package — the opening tag + the content + the closing tag, all together.

              ← The entire thing is ONE element →
              ┌──────────────────────────────────┐
              │                                  │
              ▼                                  ▼
            <h1>  Welcome to My Website!  </h1>
            ────  ─────────────────────  ─────
             tag         content          tag

So when someone says "the <h1> element," they don't just mean the <h1> tag — they mean the whole thing: <h1>Welcome to My Website!</h1>.

Analogy: A tag is like a single label. An element is like the entire labeled box — the label, the contents, and everything together.

5. Self-Closing (Void) Elements

Not every element needs a closing tag. Some elements have no content at all — they just do something on their own. These are called void elements or self-closing elements.

Here are some examples:

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

Let's look at each one:

<br> — Inserts a line break. There's no "content" to wrap — it just breaks the line.
<hr> — Draws a horizontal line across the page.
<img> — Displays an image. The image file is referenced using src, not placed between tags.
<input> — Creates an input field (like a text box). The field itself is the element.

  Regular Element:          Void Element:
  ─────────────────         ─────────────
  <p>Hello!</p>             <br>
  ↑   ↑        ↑            ↑
  |   |        |            |
  |   content  |            No content, no closing tag!
  |            |
  open       close

Analogy: A void element is like a stamp. You just place it down and it does its job — there's nothing to put inside it.

6. Block-Level vs Inline Elements

This is one of the most important concepts in HTML. Every element behaves in one of two ways when it comes to layout:

Block-Level Elements

Block elements take up the full width of their container and always start on a new line. They stack on top of each other like bricks in a wall.

Common block elements: <div>, <p>, <h1> to <h6>, <ul>, <ol>, <li>

Inline Elements

Inline elements only take up as much space as their content needs. They flow along with the text on the same line, like words in a sentence.

Common inline elements: <span>, <a>, <strong>, <em>

Seeing the Difference

<p>I am a block element.</p>
<p>I am also a block element.</p>
<p>We each get our own line.</p>

<span>I am inline.</span>
<span>So am I.</span>
<span>We share the same line!</span>

This produces a layout like this:

┌──────────────────────────────────────────┐
│ I am a block element.                    │  ← <p> fills the full width
├──────────────────────────────────────────┤
│ I am also a block element.               │  ← next <p> goes to a new line
├──────────────────────────────────────────┤
│ We each get our own line.                │  ← same here
├──────────────────────────────────────────┤
│ I am inline. So am I. We share the       │  ← <span> elements flow
│ same line!                               │    together like words
└──────────────────────────────────────────┘

Analogy: Block elements are like paragraphs in a book — each one starts on a new line and stretches across the page. Inline elements are like words in a sentence — they sit side by side and only take up the space they need.

7. Commonly Used HTML Tags

Now that you understand how tags and elements work, let's look at the tags you'll use most often. You don't need to memorize all of them right away — just get familiar with what they do.

Headings

<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Sub-Section Title</h3>

<h1> is the biggest heading, <h2> is slightly smaller, and so on down to <h6>. Think of them as the hierarchy of titles in a book — <h1> is the book's title, <h2> is a chapter name, <h3> is a section within that chapter.

Paragraph

<p>This is a paragraph of text. It can be as long or as short as you want.</p>

<p> is for blocks of text. Whenever you have a chunk of writing, wrap it in <p> tags.

Division (The Universal Container)

<div>
  <p>I am inside a div.</p>
  <p>So am I!</p>
</div>

<div> is a block-level container with no built-in styling. It's incredibly useful for grouping elements together — think of it as a generic box you can put anything inside.

Span (The Inline Container)

<p>This sentence has a <span>highlighted word</span> inside it.</p>

<span> is the inline version of <div>. It wraps inline content without adding any new lines. It's often used to style a specific piece of text within a paragraph.

Links

<a href="https://www.example.com">Click here to visit Example</a>

<a> creates a hyperlink. The href attribute tells the browser where to go when the link is clicked.

Images

<img src="my-photo.jpg" alt="A photo of me">

<img> displays an image. Remember — it's a void element, so there's no closing tag! The src tells the browser which image to show, and alt is a description for accessibility.

Lists

<!-- Unordered List (bullet points) -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Oranges</li>
</ul>

<!-- Ordered List (numbered) -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<ul> creates a bullet-point list, <ol> creates a numbered list, and each item inside is wrapped in <li>.

Quick Reference

Tag          Type      Purpose
───────────  ────────  ─────────────────────────────
<h1>-<h6>   Block     Headings (largest to smallest)
<p>          Block     Paragraphs
<div>        Block     Generic container (block)
<span>       Inline    Generic container (inline)
<a>          Inline    Hyperlinks
<img>        Void      Images
<ul>         Block     Unordered (bullet) list
<ol>         Block     Ordered (numbered) list
<li>         Block     List item (inside ul or ol)
<br>         Void      Line break
<hr>         Void      Horizontal rule (divider line)
<strong>     Inline    Bold text (important)
<em>         Inline    Italic text (emphasis)

How a Browser Works: A Beginner-Friendly Guide to Browser Internals

sanjeev singh — Sat, 31 Jan 2026 05:44:13 +0000

Have you ever wondered what happens in those few seconds between typing a URL and seeing a webpage appear on your screen? It feels like magic, but it's actually a fascinating journey through multiple components working together in perfect harmony. This guide will take you on that journey, explaining how browsers work in a way that's easy to understand.

Don't worry if you don't remember everything at once. The goal is to understand the flow of how browsers work, not to memorize every detail. Let's start with a simple question:

What happens after I type a URL and press Enter?

1. What a Browser Actually Is

Most people think of a browser as just a tool that "opens websites." While that's true, it's like saying a car "moves you around." There's so much more happening under the hood!

A browser is actually a sophisticated piece of software that:

Fetches resources from the internet (HTML, CSS, JavaScript, images)
Interprets and processes these resources
Renders them into the beautiful webpages you see
Responds to your interactions (clicks, scrolling, typing)
Stores data locally for faster access next time

Think of a browser as a universal translator and artist combined. It takes code (HTML, CSS, JavaScript) and translates it into the visual experience you see and interact with.

2. Main Parts of a Browser (High-Level Overview)

A browser is like a well-organized team, where each component has a specific job. Here are the main players:

Browser Architecture Diagram

┌─────────────────────────────────────────────────────┐
│     User Interface (Address Bar, Tabs, Buttons)    │
└─────────────────────────────────────────────────────┘
              │                         │
              ▼                         ▼
    ┌──────────────────┐      ┌──────────────────┐
    │ Browser Engine   │      │ Rendering Engine │
    └──────────────────┘      └──────────────────┘
              │                         │
              ▼                         ▼
    ┌──────────┐  ┌─────────────┐  ┌─────────────┐
    │Networking│  │  JS Engine  │  │Data Storage │
    └──────────┘  └─────────────┘  └─────────────┘

2.1 User Interface

This is the part you interact with every day: the address bar where you type URLs, the back and forward buttons, bookmarks, tabs, and the refresh button. Everything except the actual webpage content is part of the User Interface.

Analogy: Think of it as the dashboard and controls of a car – it's how you tell the browser what you want to do.

2.2 Browser Engine

The Browser Engine is the coordinator. It sits between the User Interface and the Rendering Engine, managing queries and actions between them. When you click the back button, the Browser Engine tells the Rendering Engine to load the previous page.

Analogy: Like a project manager who coordinates between different teams to get work done.

2.3 Rendering Engine

This is where the magic happens! The Rendering Engine takes HTML and CSS and transforms them into the pixels you see on screen. Different browsers use different rendering engines:

Blink – used by Chrome, Edge, Opera
Gecko – used by Firefox
WebKit – used by Safari

Analogy: Think of it as an artist who takes a blueprint (HTML) and design specs (CSS) and paints the actual picture you see.

2.4 Networking

The Networking component handles all communications with the internet. It fetches HTML files, CSS stylesheets, JavaScript files, images, and any other resources the webpage needs. It also handles protocols like HTTP and HTTPS.

Analogy: Like a delivery service that goes out and brings back all the packages (files) you need.

2.5 JavaScript Engine

The JavaScript Engine executes JavaScript code, making webpages interactive. When you click a button, see an animation, or submit a form, that's JavaScript in action. Popular engines include V8 (Chrome) and SpiderMonkey (Firefox).

Analogy: Like a brain that processes instructions and makes things happen dynamically.

2.6 Data Storage

Browsers need to remember things: your login status, website preferences, browsing history, and cached files. The Data Storage component manages cookies, localStorage, IndexedDB, and the browser cache.

Analogy: Like your computer's memory and hard drive – storing information for quick access later.

3. Networking: How a Browser Fetches Resources

When you type a URL and hit Enter, here's what happens:

Step 1: DNS Lookup

URLs like "www.example.com" are human-readable, but computers need IP addresses (like 192.168.1.1). The browser contacts a DNS (Domain Name System) server to convert the URL into an IP address.

Analogy: It's like looking up someone's name in a phone book to find their phone number.

Step 2: TCP Connection

The browser establishes a connection to the server using TCP/IP. For secure sites (HTTPS), this includes a TLS handshake to encrypt the connection.

Step 3: HTTP Request

The browser sends an HTTP GET request asking for the webpage. The server processes this request and sends back the HTML file.

Step 4: Fetching Additional Resources

As the browser reads the HTML, it discovers references to CSS files, JavaScript files, images, and fonts. It makes additional HTTP requests to fetch these resources, often doing multiple requests in parallel for speed.

4. HTML Parsing and DOM Creation

Once the browser receives the HTML file, it needs to make sense of it. This process is called parsing.

What is Parsing?

Parsing means breaking down a document into its component parts and understanding its structure. Think of it like reading a sentence and understanding which words are nouns, verbs, and adjectives.

When the browser parses HTML, it converts the raw text into a tree-like structure called the DOM (Document Object Model).

HTML to DOM Transformation

HTML Code:                          DOM Tree:
─────────────                       ─────────
<html>                                 html
  <head>                              /    \
    <title>My Page</title>        head      body
  </head>                            |         |
  <body>Hello!</body>              title    "Hello!"
</html>                               |
                                  "My Page"

Understanding the DOM Tree

The DOM is a tree structure where:

Each HTML element becomes a node in the tree
Parent-child relationships are preserved (like how <body> contains <h1> and <p>)
Text content becomes text nodes

Analogy: Think of a family tree. Just like a family tree shows relationships between people, the DOM tree shows relationships between HTML elements.

The DOM is powerful because it allows JavaScript to access and modify any part of the webpage. When you click a button and the page updates without reloading, that's JavaScript modifying the DOM!

5. CSS Parsing and CSSOM Creation

While the browser is building the DOM from HTML, it also needs to process CSS (Cascading Style Sheets) to understand how the page should look.

CSS to CSSOM Transformation

CSS Code:                           CSSOM (CSS Object Model):
─────────                           ─────────────────────────
h1 {                                    StyleSheet
  color: blue;                              |
  font-size: 24px;                       h1 Rule
}                                        /      \
                              color: blue      font-size: 24px

The browser parses CSS into the CSSOM (CSS Object Model), which is similar to the DOM but specifically for styles.

What Does the CSSOM Contain?

The CSSOM is a tree structure that contains:

All CSS rules (selectors and their properties)
Computed styles for each element
The cascade and inheritance information

Important: The browser must fully parse CSS before it can render the page. CSS is render-blocking, which means the page won't display until the CSSOM is built. This is why optimizing CSS is so important for performance!

6. How DOM and CSSOM Come Together

Now comes the exciting part! The browser combines the DOM and CSSOM to create the Render Tree.

   DOM          +        CSSOM        =     Render Tree
─────────              ─────────           ─────────────
   html                 Styles                 body
  /    \                for:                   /   \
head   body          h1 (blue)              h1     p
 |      / \          p (black)          (blue)  (black)
title h1  p          body                         

Only visible elements with their computed styles!

What is the Render Tree?

The Render Tree contains only the elements that will actually be displayed on the screen, along with their computed styles. It's like a blueprint for what the page will look like.

What Gets Included?

Visible elements: paragraphs, headings, images, divs with content
Their computed styles: final colors, fonts, sizes, positions

What Gets Excluded?

Hidden elements (display: none)
Meta tags, script tags
Elements with no visual representation

Key Point: Elements with "visibility: hidden" are included in the Render Tree (they take up space), but elements with "display: none" are not (they don't take up space).

7. Layout (Reflow), Painting, and Display

Once the browser has the Render Tree, it goes through three final stages to show you the webpage:

Render Tree  →  Layout  →  Paint  →  Display
   (DOM +       (Calculate   (Draw    (Show on
   CSSOM)       positions)   pixels)   screen!)

7.1 Layout (Reflow)

Layout is the process of calculating the exact position and size of each element on the page. The browser needs to figure out:

Where each element should be positioned (x, y coordinates)
How big each element should be (width, height)
How elements affect each other (like text wrapping around an image)

This calculation starts from the root of the tree and works its way down. If you resize your browser window, the browser has to recalculate the layout – this is called a reflow.

Analogy: Think of laying out furniture in a room. You need to decide where each piece goes and how much space it takes up.

7.2 Painting

After layout, the browser knows where everything should go. Now it needs to actually draw the pixels on the screen. This is called painting.

Painting happens in layers, similar to how an artist might paint a canvas:

Background colors and images
Borders
Text
Shadows and other visual effects

Performance Tip: The browser tries to be smart about repainting. If only a small part of the page changes (like hovering over a button), it only repaints that area, not the entire page.

7.3 Display (Compositing)

Finally, the painted layers are combined and sent to the screen for display. Modern browsers use GPU acceleration for this step to ensure smooth animations and scrolling.

Analogy: Like stacking transparent sheets (layers) on top of each other to create the final image you see.

8. A Simple Example of Parsing

Let's understand parsing better with a simple math example. Consider the expression: 2 + 3 * 4

A parser needs to:

Break it into parts (numbers and operators)
Understand the rules (multiplication before addition)
Build a structure that represents this understanding

Expression: 2 + 3 * 4              Parse Tree:
                                        +
                                       / \
                                      2   *
                                         / \
                                        3   4

                   Result: 2 + (3 * 4) = 14

The parser creates a tree where:

The + operator is at the root (it's evaluated last)
2 is the left child
The * operator (with 3 and 4) is the right child (evaluated first)

This is exactly how browsers parse HTML and CSS – they read the text, understand the structure, and build a tree representation that makes it easy to work with!

9. Putting It All Together: The Complete Flow

Now that we've covered all the pieces, let's see the complete journey from URL to pixels:

1. Type URL → 2. DNS Lookup → 3. Fetch HTML
                                      ↓
9. Display! ← 8. Paint ← 7. Layout ← 6. Create Render Tree
                                      ↓
                         5. Build DOM & CSSOM ← 4. Parse HTML

Step-by-Step Breakdown:

User types URL and presses Enter
- The journey begins!
DNS Lookup
- Convert the domain name to an IP address
Fetch HTML
- Browser requests and receives the HTML file from the server
Parse HTML
- Build the DOM tree while discovering CSS and JavaScript references
Build DOM & CSSOM
- Construct both the Document Object Model and CSS Object Model
Create Render Tree
- Combine DOM and CSSOM, filtering out non-visible elements
Layout (Reflow)
- Calculate exact positions and sizes for every element
Paint
- Draw the pixels, converting boxes and styles into actual colors and shapes
Display!
- Composite the layers and show the final result on your screen

10. Key Takeaways

As you continue your web development journey, here are the most important things to remember:

Browsers are complex: They're sophisticated software with many components working together.
Everything starts with parsing: HTML becomes DOM, CSS becomes CSSOM.
The Render Tree is key: It's the combination of structure (DOM) and style (CSSOM).
Performance matters: Understanding layout and paint helps you write faster websites.
It's a pipeline: Each step depends on the previous one – from HTML to pixels.
Don't memorize, understand the flow: You don't need to remember every detail, just the general process.

Conclusion

Congratulations! You now understand how browsers transform code into the beautiful, interactive webpages you see every day. This knowledge will help you:

Write more performant code
Debug issues more effectively
Understand why certain optimizations matter
Appreciate the incredible engineering behind your web browser

Remember, you don't need to be an expert in browser internals to build great websites. But having this foundational understanding will make you a better developer!

DEV Community: sanjeev singh

Function Declaration vs Function Expression: What's the Difference?

What Is a Function and Why Do We Need One?

Function Declaration

Syntax breakdown

Another example — adding two numbers

Function Expression

Same adding example — as a function expression

Side-by-Side Comparison

Key Differences

1. Syntax

2. Hoisting — The Big Practical Difference

Function declarations CAN be called before they're defined

Function expressions CANNOT be called before they're defined

Hoisting Visualized

When to Use Each

Use a declaration for named, reusable utilities:

Use an expression when assigning or passing functions:

Full Comparison Table

JavaScript Operators: The Basics You Need to Know

What Are Operators?

1. Arithmetic Operators

The % Modulus Operator

+ with Strings

2. Comparison Operators

== vs === — The Most Important Distinction

Practical comparison examples:

3. Logical Operators

Truth Table

&& — AND (both must be true)

|| — OR (at least one must be true)

! — NOT (flips true/false)

Combining operators in real conditions

JavaScript Arrays 101

What Is an Array?

Creating an Array

Accessing Elements by Index

Accessing the last element

The length Property

Updating Elements

Adding Elements

Add to the end — push()

Add to the beginning — unshift()

Looping Over Arrays

for loop — classic and explicit

for...of loop — cleaner, reads like English

Storing Variables vs Arrays — Side by Side

Quick Reference

Understanding Objects in JavaScript

What Is an Object?

Creating an Object

Accessing Properties

Dot notation — the most common way

Bracket notation — useful when the key is dynamic

Updating Object Properties

Adding and Deleting Properties

Add a new property

Delete a property

Objects Can Have Methods

Looping Through Object Keys

Useful object utility methods

Nested Objects

Destructuring — Extract Values Cleanly

Array vs Object — Which to Use?

Understanding Variables and Data Types in JavaScript

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

What Is Control Flow?

The if Statement

The if...else Statement

The else if Ladder

Truthy and Falsy

The Ternary Operator — a One-Line Shortcut

The switch Statement

Key parts of switch

The break Keyword — Don't Skip It!

Intentional fall-through — grouping cases

Arrow Functions in JavaScript: A Simpler Way to Write Functions

What Are Arrow Functions?

Basic Arrow Function Syntax

Syntax Breakdown

The `%` Modulus Operator

`+` with Strings

`==` vs `===` — The Most Important Distinction

`&&` — AND (both must be true)

`||` — OR (at least one must be true)

`!` — NOT (flips true/false)

The `length` Property

Add to the end — `push()`

Add to the beginning — `unshift()`

`for` loop — classic and explicit

`for...of` loop — cleaner, reads like English

The `if` Statement

The `if...else` Statement

The `else if` Ladder

The `switch` Statement

Key parts of `switch`

The `break` Keyword — Don't Skip It!

Classes (using `.`)

IDs (using `#`)

Custom Attributes (using `[]`)

Using Siblings with `+`

Combining `>` and `+` Together