Forem: Anoop Rajoriya

Spread vs Rest Operators in JavaScript

Anoop Rajoriya — Wed, 18 Mar 2026 08:15:10 +0000

Spread and Rest both operators are used same three dots (...) But the difference is how it work? the are opposite in working to each other. Spread is expend the collections and in other hand rest collect those items. In this article we learn about both, what its syntax and how you can use it with arrya or object. Seeing some real world usecases.

What spread operator does

Spread operator is used to getting out all items form existing collections like arrays or objects. Its always used right side of the assignment operator (variable = ...something) and many times you seeing its use with function call (fn(...something)) pass all items to function infividually.

Think it like you passing entire container of items to some one and in the middle a guy picking all items one by one and giveing it to intended person.

What rest operator does

Rest operator collect each individual item and wrap it into container which will passing to you. You seeing it's use with functions declaration as a parameter (fn(...params){}) which collect all arguments passing to function and give a single parameter containing all those items.

Think it like you adding items in cart on amazon but you recieve a single parcel containing all you items. In the middle the amazon workers wrap you items into singel box so you only recieve one box rather than multiple boxes.

Differences between spread and rest

The only differences between them is direction of the data flow. Spread operator results data as individual pieces but rest operator result a single unit contain all items.

Features	Spread Operator	Rest Operator
Purpose	gettin out items form container	putting items within container
Syntax	with collections (`[1, ...nums, 2]`) and function calls (`Math.max(...nums)`)	only within function declarations (`function sum(...nums){}`)
Results	individual items form given collection	single collection contains every items

Using spread with arrays and objects

With help of spread operator you can join multiple arrays into one or can add other values to it. Can create copy of the objects with some external configurations like adding some properties with defaults. Using this copy is good way for manipulating objects rather than directly assignments because it copy reference but spread operator copy objects by values.

const postiveNums = [1,2,3,4]
const negativeNums = [-1, -2, -3, -4]
const user = {
    name: "anoop",
    salary: "50k",
}

// Merging + with 0
console.log([...negativeNums, 0, ...postiveNums])
// [-1, -2, -3, -4, 0, 1, 2, 3, 4,]

// Copy by value
const copy = {...user}
copy.salary("80k")
console.log(user) // salary: "50k"
console.log(copy) // salary: "80k"

Practical use cases

Creating Copy

You can create shalow copy with spread operator which copy values in one level depth which is safe way for data manipulation in object and arrays becuas it not mutate original one.

const user = {name: "anoop", isActive: true, salary: "50k"}
const temp = {...user}

temp.name = "dipesh"
temp.salary = "25k"

console.log(temp)
// {name: "dipesh", isActive: true, salary: "25k"}
console.log(user)
// {name: "anoop", isActive: true, salary: "50k"}
// Not mutate original one

Merging Values

For creating new object or array with properties of another one can be done with the help of it spread operator. Also can add some other properties if you want.

const defaultSettings = {
    theme: "dark",
    font: 18,
    notification: true
}

const userPreference = {
    font: 24,
    notification: false
}

const settings = {
    ...defaultSettings,
    ...userPreference
}

console.log(settings)
/*
  {
    theme: "dark",
    font: 24,
    notification: false
  }
*/

With Functions

If you don't know the how much numbers of arguments passing by user in function you can use rest Parameter to collect all those arguments with ease. It give array to you which containing all passed arguments.

In function call for passing collections items individually use spread operator for that. It spread each items for you.

// Rest Operator
const sumAll(...nums){
    return nums.reduce((acc,crr)=>acc+=crr, 0)
}
console.log(sumAll(2,4,6,3)) // 15

// Spread operator
const nums = [2,4,6,3]
const max = Math.max(...nums)
console.log(max) // 6

Summary

Spread: Getting out items form container
Rest: Putting in items from container
Spread: Used for data creating or passing
Rest: Used for captureing items

Now you fully understand what is the main difference between rest or spread operators. With this knowledge you can combine those operators use in you workflow. It gives you flexibility to work with arrays and objects for effectivly.

Template Literals in JavaScript

Anoop Rajoriya — Tue, 17 Mar 2026 10:35:47 +0000

This is a modern way to define string it introduce with JavaScript ES6 features. Now its become standard for dealing with complex string manipulation because of this it become foundation concept which every developer should know it. In this article we discussing what it is? how syntax look like? and what is the use case of it?

Problems with traditional string concatenation

In early developers use single (') and double (") quotes to define string. With this if they need to add variable with string they need to use (+) operator to do this, called string concatenation. This approach work well but if there are many variables then it becomes massy and hard to read or manage it.

But with template literals its easy to add any number of variables directly within the string, no need concatenation here. This approach is good for work with dozens of variables and also provide good readability.

const name = "Anoop"
const age = 20

// old way
console.log("Hello my name is " + name + " and i am " + age + " years old")

// new way
console.log(`Hello my name is ${name} and i am ${age} years old`)

Template literal syntax

Traditional syntax of string use single or double quotes to define string but in the template literals syntax its use backtick symbols to define it.

Old Syntax:

console.log('Defining strings with single quotes')
console.log("Defining strings with double quotes")

New Syntax:

console.log(`Defining strings with backticks`)

Embedding variables in strings

In old way to embed variables developers need to use concatenation with (${}) operator or built-in method. In new way no need to do this anymore, template literals use dolor symbol and curly braces to wrap any kind of variable and place it within intended place of string, this called string interpolation. It also support expressions and function call which provide more flexibility to work with data.

Example:

const a = 10
const b = 15
console.log(`Sum of ${a} and ${b} is ${a+b}`)

function capitalize(name){
    return `${name.slice(0, 1).toUpperCase()}${name.slice(1)}`
}

const input = "wOrLd"
console.log(`Hello ${capitalize(input)}`)

Multi-line strings

Working with multiline text data with older way developers use new line character () to add new line in string this method is not readable for larger data set. But with template literals it's easy as pressing enter, no need to put these characters here.

Example:

const multiLine = `This is line 1
This is line 2
This is line 3`
console.log(multiLine)

Use cases in modern JavaScript

You seeing it lot's of time in multiple places during development. These are few uses i encounter during development:

Dynamic HTML Code Blocks: defining html code blocks in JavaScript to use it dynamically with html.
Constructing URLs: it used construct URLs with adding id's, parameters dynamically to fetch resources on apis.
Logs Messages: creating meaning full messages with system information which used in logging during debugging.
Math Expressions: creating math expressions explanations is very helpful because in complex logic older way become massy and hard to read.

No need to worry about it just read this and remember its concepts not syntax because syntax is only one google search far from you. Practice it and remember what problem it solve and what it's use cases is.

Array Flatten in JavaScript

Anoop Rajoriya — Mon, 16 Mar 2026 12:48:08 +0000

Array flatten is the foundation concept of programming, in javascript you will seeing it's use in lots of places like in data fetching form api points, showing data tree as list on pages. In this article we seeing what and why it is, differenct approaches and scenerios you facing in interview on that.

What nested arrays are

In javascript, nested arrays are a simple array whose contain elments or another arrays those can conaint either elments or more arrays. This structure of arrays called nested arrays and also known as multidimentional arrays.

You can think it like a big container box in that we place multiple elements or other boxes as elments those further contain elements in sequence.

[1, [2,3], 4, [5, [6]], 7]

Here example nested array contain 1, then array [2,3], another elment 4, one more array [5, [6]], and lastly element 7. In that there are two nested array first contain 2, 3 and other contain 5 and single value arrya with 6.

Why flattening arrays is useful

Flattening arrays simplify the complex heirarchical structure (a structure contain more structured elments) into a simple linear array structure (a simple version contain only single element). There are several reasons describe why flattening arrays useful:

Simplifies Data Processing : many data processing and visualizing library like Chart.js, and Plotly.js requried linear datasets to perform operation in a optimistic way.
Data Integration : data fetching from api, reading form other files or databases often give nested structured data to use those data flatteing process are required.
Common Use Cases : rendering cards information into dom, using flattening to create well suited formate of cards information are used.

Concept of flattening arrays

Flattening arrays simply means is transforming nested array into an array containing only non-arrya elements. All elments are puting into arrya with concating all nested arryas elements.

Think it like get out all small boxes from container which have elments, taking all those elements and putting it down in sequence into container box.

// Nested array
[1,2,[3,4],[[5],6], 7]

// Flatten array
[1,2,3,4,5,6,7]

Different approaches to flatten arrays

There are multiple ways exist for flatteing arrays in programming but in JavaScript we have native methods supports lets seeing these with other approaches:

Native `Array.prototype.flat()`

JavaScript support native array flatten method flat() which flatten arrya. By default it only flatten single level nesting. You can pass argument flat(number) represent nesting level which you want to flatten.

Like nested.flat(2) it flatten 2 level nesting, for flattening array completely you can use infinity.

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

const shalowFlat = deeplyNested.flat() // 1 level flat
console.log(shalowFlat) // output: [1,2,[3,4],5,6]

const deepFlat = deeplyNested.flat(Infinity) // completely flat
console.log(deepFlat) // output: [1,2,3,4,5,6]

Recursive approach

A recursive approach implemented using custom logic function. In that function call itself to break down nested arrays into single array. To do this there are two important cases need to handle:

Base Case: a condition which return elment if it's not an array
Recursive Case: a condition which call itself with current elment if its a array and evaluated into flatten arrya.

function flattenRecursively (arr){
    let res = []
    for(let i = 0; i<arr.length; i++){
        if(Array.isArray(arr[i])){
            // recursively call for element which is arrya and merge it into result
            res = res.concat(flattenRecursively(arr[i]))
        }else{
            // merge current not-array elment into result end
            res.push(arr[i])
        }
    }

    return res
}

const highlyNested = [1, [2, 3], [4, [5, 6]]];
console.log(flattenRecursively(highlyNested)); // Output: [1, 2, 3, 4, 5, 6]

Iterative approach

Instead of relies on recursion implicit stack, iterative approach use explicit stack or queue data structure to keep track of array flattening iteration.

In that two array used one for original array copy and other for result. In each iteration, for element shift it form copy and push into result but in case of array shift it form copy and un-wrape all elements and unshift back into copy so in next iteration it will moved into result.

function flattenIteratively(arr){
    let result = []
    let copy = [...arr] // copy original so we don't modify orignal

    while(copy.length){
        const firstItem = copy[0]
        if(Array.isArray(firstItem)){
            // if is array shift it, spread it and unshift it
            copy.shift()
            copy.unshift(...firstItem)
        }else{
            // if element shift it from copy and push into result
            copy.shift()
            result.push(firstItem)
        }
    }
    return result
}

const heavilyNested = [1, [2, [3, 4]], 5];
console.log(flattenIteratively(heavilyNested)); // Output: [1, 2, 3, 4, 5]

Common interview scenarios

Prepare about the following points because demonstrating only knowledge of how implementation and working is not enough, you should know why these are and what are the trade-offs for each one.

Implementation without native approaches

Most of the cases interviewer forbid the use of array.prototype.flat(), ask for the implement this becuase thay want to test you thinking ability how you tackle problem and what approach should you prefer.

Here in this scenerio you should need to give the both flatten logic implementation along with its comparison and trade-offs.

Recursive approach with its stack overflow scenerios.
Iterative approach and efficiency of shift-unshift.

Performance optimizetion trade-offs

Clearly explain each approach optimizetion trade-offs:

Native array.prototype.flat(): explain why its optimized for other approaches.
Recursive approach: clearly dicuss its call overhead probelm in heavely deep and large arrays.
Iterative approach: describe how its use of explicit stack solve recursive stack overflow problem but its unshift-shift reduce efficiency.

Clearly explian shalow vs deep flat

Explain difference of shalow and deep flat, which approach support deep and shalow flat.

Native flat(): demonstrate its defalut behaviour and passing level arguments with infinity for completely flatten array.
Recursive approach: proper implementation support deep flatten but not efficient for larger array input.
Iterative approach: also support deep flatten but have efficiancy problem via use of shift-unshift.

Practising all approaches only not enough for taking control of interview, proper mastering need to build a mental understading. Understading how logic work and tracing on paper for different examples help to build solid understading.

JavaScript Arrays 101

Anoop Rajoriya — Wed, 11 Mar 2026 17:18:39 +0000

Today i reviste JS with arryas late night. Creating dozens of variable to store every new items feel cluttered. If you feel this pain point. Than this guide help you to fix it.

What arrays are and why we need them

Think you are building a shoping list. Without arryas you're creating fresh varialbe each time when item added.

const item1 = "milk"
const item2 = "bread"
const item3 = "ots"

If there are 100 of items were adding, you need to create dozens of variables for that. With this approach deleting one of them like thired one or managing feel impossible.

**So the solution is array. Arrya is a data type in javascript, which allow to store collection of data items within a single variable and you can access these item by using indexes. You can think it like a single box with multiple compartments and each have a index to identify each compartment.

How to create an array

In JavaScript is vary simple to create arrays. Use [] square bracket to wrap , comma separated items and assign them to any variable.

// A collection of employees name
const employees = ["anoop", "pankaj", "nikhil"]

Instead of creating three separate varibales there only one varible used.

Accessing elements using index

Items in arryas are easily access by index. In JavaScript indexing start from 0 means first element stored at 0, second at 1 and thired at 2. Every items follow this indexing from 0 to "number of items - 1".

console.log(employees[0]) // output: anoop
console.log(employees[2]) // output: nikhil

To access the items use intentional item index and used this within [] square bracket followed by variable name.

Updating elements

In javascript arryas are mutable means if you're figuring you add something wrong by mistakes. Dont worry about it you can simply update its value by using it's index like how you're accessing it, here you just assigning newer value instead of getting value form it.

// nikhil is not employee any more
// kartik take place of him
employees[2] = "kartik"

Array length property

If you ever need to know how many items in you array. You don't need to count it manually, JavaScript do it for you. Every time you add item in arrya JS track its count and add it into .length property which every arrya have. So you can use it to access how many items are exist in you arrya.

console.log(employees.lenths) // output: 3

Pro Tip: You can access last elment directly by using length - 1. Which return last valid index.

Basic looping over arrays

Arrays are iterable means you can iterate over it by using loops. Think if you're array have 1000 or more items, accessing or updating them manully take soo much time. Its like wast of time. So you can use for loop to count index from 0 to array last index (length - 1) and by using these indexes can easily access or do what ever you want with that.

for(let index = 0; index < employees.length; index++){
    console.log(`Employee ${index} is "${employees[index]}"`)
}

In that loop let index = 0; initialize starting point where loop start counting. index < employees.length; this is the condition where stop loop if evaluated into false. The last increamenting index++ which increament index in every step of loop. These whole work together so employees printing code print next name in each iteration.

Summary

Arrya: collection of items within single varialbe.

Creating: const name = [1,2,3], use [] bracket.

Accessing: name[1], use variable + [index].

Updating: name[0] = 4, just use = assignment.

Iterating: use for loop with increamenting index.

Your Turn: The Movie Challenge

Try it your self. Here is the quick assignment to test how much you grab through this guide:

Create a favMovies variable with 5 movies names.
Print the first and the last movie name on the console.
Update the thired movie name to something else in you list.
Print length of you movies arrya list on console.
Loop through it and print each movie name with its index.

Give it a Shot! Mastering Arrays data type in JavaScript unlock the most important tool in programming tool-kit.

Arrow Functions in JavaScript: A Simpler Way to Write Functions

Anoop Rajoriya — Tue, 10 Mar 2026 15:25:31 +0000

In this article we will discuss about different way of declaring function, how you use and declare them? and the major difference between them. By the end of the article you will understand more about the Regular and Arrow function in JavaScript.

What arrow functions are

Arrow function is the consice way of writing function in javascript. It give ability so you can skip the boilerplate code which you write every time in function declaration before ES6.

Arrow function support more features like lexical this binding, implicit return, more predictability than normal function.

Every normal function declaration required boilderplate setup code like function keyword, {} curly braces, and return keyword.

function greet (name){
    return `Hello! Good Morning ${name}`
}

But with arrow function it become optional it can be skipped. It only needed in some cases.

const greet = name =>`Hello! Good Morning ${name}`

Basic arrow function syntax

Any basic arrow function requried three things for declaration parameters for accepting arguments, fat arrow symbol =>, and function body.

It always created as anonymously (not contain any name) and assigned to a variable to create reference so can be used later.

Normal Function Syntax:

/* Basic setup required
function name (parameters){
    body
    return value
}
*/

function square (n){
    return n**2
}

Arrow Function Syntax:

const squre = n => n**2

Arrow functions with one parameter

As we shown above examples if your arrow function only have one parameter than you can skip () parentheses and direct write name of the parameter.

const squre = n => n**2

Arrow functions with multiple parameters

In case of multiple parameters you need to wrape you arguments in () parentheses else first parameters are skipped.

/* Wrong syntax: a will skipped
const sum = a,b => a+b
*/

const sum = (a,b) => a+b

Implicit return vs explicit return

Returning value form normal function declaration required to use of return keyword, but in case of arrow function you can skip it.

Implicit Return

When you funciton body can fit in one line or it can be a expression than you can skip {} curly braces and return keyword in arrow function.

// a+b --> expression
const sum = (a,b)=>a+b

In case of returning object literals you need to wrap it by () parentheses to aboud JS interpeting object braces as function body.

const user = ()=>({name:"user", age:30})

Explicit Return

If you function contain more than one line of code than you need to wrap it in {} curly bracess and use return statement for returning value.

const checkOdd = (n)=>{
    if(n%2 === 0) return "Odd"
    else return "Even"
}

Basic difference between arrow function and normal function

Both are used used to abstract code block and perform task in same way but still both have some key difference:

1. Concise way to write code

We discuss it already discuss about that, normal function use function keyword and the arrow function use shorthand way to reduce this boiler plate code.

// normal function
function greet (name){return `Hello, ${name}`}

// Concise way to write it
const greet = name=>`Hello, ${name}`

2. `this` keyword behaviour

In normal function this is dynamically bound to the function (means it have its own this object) but in arrow function it inherit this from its lexical scope (code surrounding it).

// Timeout with normal function print undefined becuase its detached during execution and have its own this, which not have name

// But Arrow function print "Arrow Timeout" because it inherit code surrounded them (lexical inheriting)

const obj3 = {
    name: "Arrow Timeout",
    sayName: function () {
        setTimeout(function () {
            console.log("function(){}", this.name)
        }, 1000)
        setTimeout(() => {
            console.log("()=>{}", this.name)
        }, 1000)
    }
}

obj3.sayName()
// function(){}: undefined
// ()=>{}: Arrow Timeout

3. `arguments` object

Regular function have arguments object which os a iterable list object which holds all the arguments passed to it and you can access it within.

But in arrow function you don't have access arguments object because it not have that But we can use rest paramets to acheiving it.

function showArgs() {
    console.log(arguments);
}
showArgs('a', 'b', 'c'); // Output: { '0': 'a', '1': 'b', '2': 'c' }

const showArgsArrow = () => {
    // ReferenceError: arguments is not defined
    console.log(arguments);
};
showArgsArrow('a', 'b', 'c');

Both have those tradoffs some times you need regular function and some types you will need arrow function. Understanding both and the differece: syntax, this binding, arguments object and usecase will makes you to predict code flow required in today world of development.

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

Anoop Rajoriya — Mon, 02 Mar 2026 18:21:29 +0000

Topics To Cover

What functions are and why we need them
Function declaration syntax
Function expression syntax
Key differences between declaration and expression
Basic idea of hoisting (very high level)
When to use each type

What functions are and why we need them

A function in programming is the self-contained, named block of code it used to perform a specific task. Its like a sub-programm or black-box which take some input, process it and return a output.

Think it like a vending machine:

Input (arguments): it take some mony the input and punch button start running.
Body (function): its internal machanics of the vending machine. it identify is stock available and which item need to drop, calculate changes mony.
Output (return value): machine drop item and changes in the slot.

Why we need it? You dont need to knwo how to build the vending machine every time when you need snacks, its electronics, complex coin slote mechanics. You only need to know how to use its interface.

Function declaration syntax

The standard JavaScript function declaration defined by the function keyword followed by name, with an optional parameters. Its body contain statements which executed when function will call.

Syntax :

function functionName (parameter1, parameter2, ...){
    // code to be executed
    return value; // optional return statement
}

function keyword: A required keyword, used to tell you are defining funciton.
functionName name: Function idetifire its a name, it use rules same as variable declaration (uses camel case). It used to called function later for using it.
(...) parantheses: It enclosed optional, parameters a local variables used to hold arguments a input vlaues provided during calling.
{...} curlybraceses: It enclosed bunch of statements which executed when function call. It has a access of there parameters.
return optional statement: it used to return some values at places where function is called.

Example :

// Funciton declaration
function calculateSum(a,b){
    return a+b
}

// Invoking (calling) the function
const result = calculateSum(2, 5)
console.log(result) // output: 7

In the given example i define a function named calculateSum, its job is to take two arguments in a and b parameters. These parameters used to calculate sum by using addition operator +. After that function return the calcualted sum value of given arguments.

Bellow that declaration i defined a constant variable named result which hold the ouput of calculateSum function. I use assignment operator = to hold the returned value.

Function calling syntax is, you can used its named with () parantheses which indicating that your calling this function mean executing there body. In the given example i put tow arguments 2 and 5 these will holded by the function parameters a and b. After the execution finished the final valued returned by function.

Finally useing console.log to log the result on the console which print vlaue 7.

Function expression syntax

Function declaraing a part of larger expression, typicaly assigning it into a variable. It only execute when code reaches to execution. Unline the funciton declaration, fuction expression can be unonymous (without name).

Syntax :

const greet = function(name){
    return `Hello $(name)`
}

// The function is invoked using variable name
console.log(greet("Anthony")) // output: Hello Anthony

Most common syntax involve assigning a anonymous function to a variable using let, const, and var.

It can also be named for debugging purpose or recursion, though the it only accessible within the its own scope.

const factorial = function recursion(n){
    if(n <= 1) return 1

    return n * recursion(n-1)
}

const fact = factorial(3)
console.log(fact) // output: 6

Key differences between declaration and expression

The key difference is, function expression is evaluated into a value but funciton declaration is a statement which do action not evaluated into values. The most practicle difference is how they are handle hoisting and there use in certain context.

Evaluat to value: statements cannot be evaluated into values, its ony perform actions. The expression can evaluats to a single value like number, string or function object.
Hoisting: Declaration is hoisted on the top of their scope allowing them to invok before they apear in code. The expressions are not hoisted in same way. The variable holding expression may hoisted depending on keyword used for variable declaration, but the assignment happen when the code execution reach that line.
Naming: Function declaration must have name but function expression can be anonymous.

Basic idea of hoisting (very high level)

Hoisting means at very high level, you can use variable or function before you formaly declare them in code.

Its a mechanism in javascript in there function and variable declaration conceptually move to top of their containing scope during the compilation phase before the code actually executes.

Function Declaration

It is fully hoisted means the name and the body of the function is moved to top of the scope. It allow you to call it before it defined.

The javascript engine read its name and its body at the compilation time, that's why its hoisted.

// Works!
sayHello(); 

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

Function Expression

It is the function stored into the variable, it's not hoisted in the same way. Only the variable declaration is hoisted but the assignment stays in place.

// Throws TypeError: greet is not a function
greet(); 

var greet = function() {
    console.log("Hello!");
};

The function greet is declared and assigned undefined. When you called it, you'r trying to call undefined()

Note: let and const are not hoisted so you can not access it before it's declaration. If you trying to do it you got reference errors.

When to use each type

Choise of using funciton declaration or expression is depends on wheter you need hoisting, how funciton is used, and the desired scope and code style.

Use Funciton Declaration when

Its a standalone statement use it when you need to access it from anywhere in you code. It hoisted so you can call it before its declaration apears. The keyword function at the start makes it easy to spot, improving code structure for top level funcitons. The funciton name is always available withitn its own scope, useful for recurion function.

// This is work because "add" is hoisted to the level
console.log(add(7, 8))

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

Use Funciton Expression when

It create a funciton as a value which is than assigned to variable. In callback -- use it to pass as argument inside other funcitons. When you need to invok funciton immediatly and want to prevent variable polution of global scope. Used in conditional function definition -- defining function logic based on certain condition. Since they are not hoisted so it only exist when interpreter reaches it, which can lead more predictable or structured code flow.

// This will cause error if call before expression
// console.log(multiply(2,3)) // ReferenceError: cannot access 'multiply' before initialization

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

// Must be called after definition
console.log(multiply(2,3)) // output: 6

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

Anoop Rajoriya — Fri, 27 Feb 2026 18:00:47 +0000

In JavaScript If, Else, and Switch are conditional statements. Those are a piece of code executed based on certain conditions if evaluated into true. Like JavaScript every programming languages has those statements, those are the fundamentals of the programming.

In this guide we will discuss about what are those? why you need it? and how you can use them to improve you programming skills.

Content List

What control flow means in programming
The if statement
The if-else statement
The else if ladder
The switch statement
When to use switch vs if-else

What control flow means in programming

In JavaScript code execute line-by-line. When code load into JS environment, the interpreter read it from top line to the bottom line and executre it. The order of reading code by JavaScript interpreter in sequence called control flow.

look at the bellow image:

In the code visualization you see the 15 lines of code. When it load in Js environment, Interpreter read and execute it form line 1 to 16. During the execution iterpreter see the conditional statements at line 9 if(user.isLoggedIn) and 11 else. It allow program to either be executed or skipped line 10 console.log("Jump to profile screen") or 12 console.log("Jumpt to login screen"). in our case line 10 statement will executed and statement at line 12 will skipped.

The if statement

If statements use to define a control flow statement.

// Syntax:
if(condition){
    // statement
}

It use a condition and a statement, if condition evaluated into true the statement code will executed other wise it will skiped. Lets see example:

const age = 44

if(age>0 && age<100){
    console.log("valid age: ", age)
}

In above code example if the given condition evaluated into true than code statement will execute otherwise its skipped.

The if-else statement

The else clause used to execute statement when condition evaluated to false.

// Syntax:
if(condition){
    // Statement A
} else {
    // Statement B
}

It always need to used with if clause other wise interpreter throws error. If your statments is inline than you can skip the curly braces {}. Lets see Example:

const age = 17
if(age>0 && age<100){
    console.log("Age is valid: ", age)
}else{
    console.log("Age is invalid: ", age)
}

In the given code if the condition evaluated into true than statement A will executed other wise statement B.

The else if ladder

Using else if ladder allow to use multiple condition to executed as many statements as we want. You can use else if statement to do this.

// Syntax:
if(condition A){
    // Statement A
} else if (condition B){
    // Statement B
} else{
    // Statement C
}

The flow is go throw every statement, first check for condition A if its evaluted to false then move to next condition B and so on untile reach to last condition or else statement if exist. Lets see Example:

// Vote System
const age = 19

if(age >= 18 && age <= 100){
    console.log("You can vote, your eligible: ", age)
} else if(age > 0 && age < 18){
    console.log("You can not vote, your not eligible: ", age)
} else{
    console.log("Please give valid age", age)
}

In the given code if the age is greater than or equal to 18 and lesser or equal to 100 than it's valid age for statement A, in second condition if age is greather than 0 and lesser to 18 than it's valid for staement B, if both condition is failed than last else caluse handle it. In our case the first condition setisfy it so you see the statement A will executed.

Do It Your Self: Create a grade system in there check score if score is greather than 80 or lesser or equal to 100 than give a grade A+. If score is greather than 50 or lesser or equal to 80 than give a grade A. If score is greather than 35 or lesser or equal to 50 than give grade B and handle the fail condition using else with grade F.

The switch statement

If you check a multiple conditions based on single value so instead using if-else statements you can use switch-case statements. Which are more readable and optimized for these types of control flow.

switch(expression){
    case lable 1:
        statement A
        break; 
    case lable 2:
        statement B
        break; 
    case lable 3:
        statement C
        break;
    default:
        statement D
}

Here a single expression is evaluated and matched to each label in the flow if any one is matched than corresponding statement will executed and control flow transfered to outside the switch statement by break keyword. If non of them are matched than default statement are executed if exist.

The break keyword is optional but it mostly used with it. It normally stop to matching remaing labels when one them had matched. If not using it the control flow is not transfered untile all labels are matched.

const dayNumber = new Date().getDay();
let dayName;

switch(dayNumber){
case 0:
    dayName = "Sunday";
    break;
  case 1:
    dayName = "Monday";
    break;
  case 2:
    dayName = "Tuesday";
    break;
  case 3:
    dayName = "Wednesday";
    break;
  case 4:
    dayName = "Thursday";
    break;
  case 5:
    dayName = "Friday";
    break;
  case 6:
    dayName = "Saturday";
    break;
  default:
    dayName = "Unknown Day";
}

console.log("Today is: ", dayName)

In the above code, day number is matched to every day in the week one-by-one using switch-case stament. if one of them matched. The control flow transfered to the last console which print today day. If non of them are matched than default value is used.

Do It Your Self: Try to replicate this example by own self. Run it in you JavaScript environment and test will it give the correct output or not.

When to use switch vs if-else

There are few consideration for using switch-case and if-else statements to keep in mind:

Use if-else statements when you are handling complex logical conditions. But if you are only need to checking fixed value like numbers, and strings and matching it to specific case value than using switch-case is batter.
Using if-else with multiple statements and nesting them each other making it hard to read. Its easier to read switch-case labaled statements.
Its rarely noticable with small code base. Using if-else statements making code slower as compare to switch-case. Because switch-case use some type of jump table which help it to jumpt to specific label and than evaluate each condition sequenctially.

Using switch-case and if-else statement claverly make you a good programmer. If you following all practise than it will make you understanding good on these conditional statements. If you need to read official or more docs you can try bellow resources which i read to write this guid.

Resources

JavaScript Operators: The Basics You Need to Know

Anoop Rajoriya — Thu, 26 Feb 2026 19:13:01 +0000

If you are learning JavaScript, operator is neccessary for you because they help you to perform mathmatical or logical operations in the programs. In this guide we are learning about: expressions, operators, their types, and how to work with them with examples.

Content List

What operators are
Arithmetic operators (+, -, *, /, %)
Comparison operators (==, ===, !=, >, <)
Logical operators (&&, ||, !)
Assignment operators (=, +=, -=)

What operators are

Operators are just a symbols or keyword those instruct compiler or interpreter to perform specific mathmatical, logical, and relational manipulation on data (also called operands).

In simple term you can say these are the things tell computer what to do with data.

For Example: in the expression 2+3, + is the operator and 2, and 3 are the oprators.

Note: Compilers and Interpreters are tools those converte programs (human readable) into machine-code (computer readable). Expressions are the combinations of constants, variables, operators that are prouced a single value.

Lets see some most important operators in JavaScript with examples:

Arithmetic operators

Arithmetics operators takes numerical values as operands and evaluated into a single numeric value. In JavaScript there are some operators with there uses:

Operator Name	Operator Symbol	Description
Addition	`+`	return result of arithmatic addition of given two numbers
Negation	`-`	return result of artihmatic negation of given two numbers
Multiplication	`*`	return multiplication of given two numbers
Division	`/`	return result of arithmatic division of given two numbers
Remainder	`%`	return a left over remainder result of given numbers division

Remember number division by zero return a infinity. Lets see some examples:

/*-------------- Arithmatic Addition ---------------*/
const sum = 10 + 7
console.log(sum) // 17

/*-------------- Arithmatic Negation ---------------*/
const sub = 10 - 7
console.log(sub) // 3

/*-------------- Arithmatic Multiplication ---------------*/
const mul = 10 * 7
console.log(mul) // 70

/*-------------- Arithmatic Division ---------------*/
const div = 10 / 7
console.log(div) // 1.4285714285714286

/*-------------- Arithmatic Remainder ---------------*/
const rem = 10 % 7
console.log(rem) // 3

Do It Your Self: Open browser console tab. Copy paset each snippet one-by-one and ovserve its output.

Comparison operators

Comparison operators used to compare two operands and results logical values like true or false. Operands can be string, numbers or logical values.

String operands are compare each other based on standard lexicographical ordering, using unicode values.

When operands type differe to each other, than JavaScript try to convert them into appropriate type (generally result numerically). It also called implicit type conversion.

But with the === or !== operators, it firstly check those types if not match than no need to compare next. It also known as strict comparison. Most developers prefer to use them instead of normal comparison, which reduce the potential bugs in code.

Operator Name	Operator Symbol	Description
Equal	`==`	return `true` if operands are equal
Not Equal	`!=`	return `true` if operands are not equal
Strict Equal	`===`	return `true` if operands are equal and have same type
Strict Not Equal	`!==`	return `true` if operands are same type but are not equal or are of different type
Less Than	`<`	return `true` if left side operand are lesser to right side
Greather Than	`>`	return `true` if left side operand are greather to right side
Less Than or Equal	`<=`	return `true` if left side operand are lesser or equal to right side
Greather Than or Equal	`>=`	return `true` if left side operand are greather or equal to right side

Lets see some examples:

const five = 5
const ten = "10"

/*----------------- Equal / Not Equal ------------------*/
console.log("5" == five)
console.log(10 != ten)

/*------------- Strict Equal / Not Equal ---------------*/
console.log("5" === five)
console.log(10 === ten)

/*------------- Less Than / Greater Than ---------------*/
console.log(3 < five)
console.log(100 > ten)

/*----- Less Than or Equal / Greater Than or Equal -----*/
console.log(5 <= five)
console.log(ten >= five)

Do It Your Self: Try to guess the output of each console.log of snippet than execution them on the console after that to check your understanding.

Logical operators

Logical operator are used work with boolean values. Using && and || return boolean value if the all operands are boolean else return on of them. These values also known as value selection operators. Lets see them:

Operator Name	Description
Logical OR	If on of them are true it return true or return value on of them if operands are not boolean.
Logical AND	If on of them are false it return false or return first operand.
Logical Negation	If operand is boolean it invers it or if not boolean the it convert it type into boolean than invers it.

Logic table for Logical OR `||` operator

First Operand	Second Operand	Result
True	True	True
True	False	True
False	True	True
False	False	False

Lets see some examples:

/*------ With Booelan Values -------*/
console.log(true || true) // true
console.log(true || false) // true
console.log(false || true) // true
console.log(false || false) // false
/*------ With Non-Booelan Values -------*/
console.log("dogs" || "cats") // true || true return "dogs"
console.log(null || "cats") // false || true return "cats"
console.log("dogs" || undefined) // true || false return "dogs"

Logic table for Logical AND `&&` operator

First Operand	Second Operand	Result
True	True	True
True	False	False
False	True	False
False	False	False

Lets see some examples:

/*------ With Booelan Values -------*/
console.log(true || true) // true
console.log(true || false) // false
console.log(false || true) // false
console.log(false || false) // false
/*------ With Non-Booelan Values -------*/
console.log("dogs" || "cats") // true || true return "dogs"
console.log(null || "cats") // false || true return false
console.log("dogs" || undefined) // true || false return false

Logic table for Logical Nagetion `!` operator

Operand	Result
True	False
False	True

Lets see some examples:

console.log(!true) // false
console.log(!false) // true
console.log(!"false") // false

Do It Your Self: Try to guess the output of each console.log of snippet than execution them on the console after that to check your understanding.

Assignment operators

Assignment operators used to assign right operands to its left operand. Assignment expression x = f() here value off() is assigned to x.

Lets see some common assignemts operators with examples:

Operator Name	Operator Symbol	Description
Assignment	`=`	assigne right operands to right operand
Addition Assignment	`+=`	its a assignemt with addition it's a shorthand of `x = x + f()`
Subtraction Assignment	`-=`	its a assignemt with subtraction it's a shorthand of `x = x - f()`
Multiplicaiton Assignment	`*=`	its a assignemt with multiplication it's a shorthand of `x = x * f()`
Division Assignment	`/=`	its a assignemt with division it's a shorthand of `x = x / f()`
Remainder Assignment	`%=`	its a assignemt with remainder it's a shorthand of `x = x % f()`

/*--------- Assignment ---------*/
const email = "something@gmail.com"
const age = 26
const salary = 26000

/*--------- Addition Assignment ---------*/
const age += 2
const salary += 50

/*--------- Subtraction Assignment ---------*/
const age -= 2
const salary -= 50

/*--------- Multiplication Assignment ---------*/
const age *= 2
const salary *= 50

/*--------- Division Assignment ---------*/
const salary /= 50

/*--------- Remainder Assignment ---------*/
const salary %= 50

Do It Your Self: Replicate those examples on you browser console and print them to see its output.

These operators are essential for building foundation of performing mathmatical or logical operaiton in javaScript. Here are more than those operators in JavaScript but those are essentials if you wan't to lean more about than visite MDN official Expression and Operators article.

Understanding Variables and Data Types in JavaScript

Anoop Rajoriya — Wed, 25 Feb 2026 15:41:51 +0000

Welcome to the world of programming. If you are learning programming this is the essential thing you should master. Think you are shifting from current house to new one. You get many cardboard boxes and labeled them like library for books, foot-wears for shoes and slippers etc.

Just like it in the programming there are thing called variables just like you labels and the data types like your stuffs you putting into boxs labeled by there categories.

What variables are and why they are needed

In the computer programming, variables are the named or symbolic container which used to store data values within computer memroy. It act as a placeholder or label for information such as user input, component states or calculation which can be used or updated during the programm execution without that storing, manipulation data whould be nearly impossible.

Varialbes are essential for creating efficient or flexible programms:

Flexible and Reusable: instead of hard coding fixed value like 3+5 you can use a+b, allow to use same code for different data inputs.
Data Storage and Manipulation: programmes need to remember data like user names, game state, raw data form files. Variables allow developers to use store this in memory so it can be reused later.
Readability and Maintainability: using discriptive name make programm easy to read, understand so it can be updated in future reduce errors during debugging.
Managing Program Logic: variables used to manage the program flow logic such as using boolean state to decide which part of the code block should be execute during run time.

Note: Always use descirptive names like use user_name or userName instead of only name, for data you can use common naming cases like camelCase, snack_case, PascelCase, and kabab-case etc.

How to declare variables using var, let, and const

Inside a JavaScript "declare" variables just means of creating a box and giving it a name. There are three possible way to do this:

The Old Way

Using var keyword was a original way to declare variables. You seeing it many times in old codebase but modern developers rarly use it because of it's quirky behaviours which some times lead bugs in code.

// Syntax:
var userName;

The Modern Way

There were let and const keywords released in js new version to reduce this quirky behaviours.

Use let when you know the vlaue of the variable need to be change later like playerScore in a game.

// Syntax:
let playerScore = 0;

Use const this is short for constants. It used to declare variables with the fixed value which can not be changed in any cost within the program execution like userDOB.

// Syntax:
const userDOB = 1990;

Note: Always avoid of using var keyword for declaring variables because that can lead potential errors in you code.

Primitive data types

Think when you bring some kitchen grocery, you never put item within wrong container like you never put oil in box or rice in bottle. You can do but naturally we did not do this. Just like it Javascript use proper data types for storing information within computer. There are some common primitive data types:

1. String Data Type

it's a sequence of characters. It's used to store textual informaiton in computer. Strings are immutable meaning it can not be changed after creating, but you can assingned new string to the same variable.

// Syntax:
const userEmail = "something@email.com"

2.Number Data Type

it can be a interger or floating point numbers, JavaScript didn't differentiate between different kids of number it store all them as floating point number. It is also immutable data type. JavaScript also has a special type of numbers infinity and -inifinity both represent mathmetical infinities for positive side or negative side. NaN is also a number type which represent values those are Not a Number.

// Syntax:
const integer = 10;
const floating = 10.550;
const negative = -10;
const infy = infinity;
const negInfy = -infinity;

3. Boolean Data Type

it use to represen true and false values majority used to run specific block of code.

// Syntax:
const isLogin = true;
const isAdmin false;

4. Null Data Type

in JavaScript programmer explicitly use null data type to intenally represent absance of any object value of empty values. It only have one possible value null. The well-knowen quirky or historical bug is that using typeof operator with null give a string of object not null. This behaviour of JavaScript is maintain for backword compatibility to avoid breaking existing websites.

// Syntax:
let data = null
console.log(typof data) // "object"

Truthy & Falsy values

Meaning of Truthy and Falsy is if we convert these values into Boolean Type the truthy values are converted into true and falsy values are converted into false. There are some values treat as falsy values those are:

Booelan value false
Number zero including 0.0 or -0
The big int zero value 0n
Empty string "", ''
Intentinoal absance of value null
Undefined
Not a number NaN

Excluding these, all values are treated as a truthy values.

5. Undefined Data Type

It also used to represent absence of a value like null do. Major different is JavaScript automatically assinged undefined to a varialbes has declare but not yet assinged explicitly value.

// Syntax:
let score;
console.log(score) // undefined

Do It Your Self: Open browser go inside console tab in dev tools. Try to declaring some variables with differnet data types and try convert into boolean using ! operator. You understand the concept of truty or falsy values.

What is scope

Scope is the region where variables, function or objects are accessible and visible. It determin how the JavaScript engine looks for the identifires (names) in different part of you code. There are several types of scopes form a heirarchy known as Scope Chain

1. Global Scope

Variables declare outside of any block or function resides in global scope. These variables are accessible for every one in the program. Think it like a light bulb in hallway so every one can see or use it in house.

2. Funciton (Local) Scope

Every function has its own scope. Declaring variables inside function its only accessible within that function, variables not visible outside that funciton or global scope.

3. Block Scope

It introduce in ES6 with the let and const keywords. The variables declared inside the block scope (area inside the curly bracket {}) are only accessible inside, not outside. It include if statement, loops and standalone blocks.

4. Module Scope

When using ES6 modules (via import or export), variables declare inside module are scoped to that specific file. They are not accessible globally or inside any other module unless explicitly exported.

5. Lexical Scope

It is known as Scope Chaining or Static Scope. It means the scope of variables determins by their physical location within sorce code at compile time, not where they are called in run time. When interpreter need to access the specific variable it following scope chain:

It first find in current scope (innermost scope).
If not found, then it move to the its parent scope.
Continue untile it reach to the global scope.
If variable is still not found, a ReferenceError is thrown.

Basic difference between `var`, `let`, and `const`

Each of these keyword has certain purpose and distinct scope. We shall examin the difference between the var, let and consts with example:

Var keyword

Var-declared variables are has function scoped. Which means they are accessible any where inside the function it declared. Here's an example of using var:

function verDeclaration(){
    if(true){
        var x = 10;
    }
    console.log(x) // 10
}

In that example x is declared inside the if statement so it can accessible inside that. But it also accessible inside the entire verDeclaration function.

Let keyword

Let-declared variables has block scope. Which means let declaration limit the variable into block where they are specified. It specifically helpfull to prevent unintentional Hoisting or lowering the scope related errors.

Note: Hoisting is behaviour of JS whre declaration of variable or functions are apeared move to the top of their scope during compilation phase.

Lets see above example with let declaration:

function letDeclaration(){
    if(true){
        let y = 20;
    }
    console.log(y) // ReferenceError: y is not defined
}

Here y is declared with let keyword means it have block scope so it only accessible within the if statement. Try to access y outside of that state will throws an ReferenceError: y is not defined.

Const keyword

Declareing variable with const keyword is also has block scope like let. It primarly helpfull for declaring variables those will not mutate. It also throws an ReferenceErrors if trying to access outside its scope.

Do It Your Self: Learn the way to execute JS code in browser (hint: use html file or console). Declare some variables like name, age, isStudnet. Print them in console use console.log() method. Try to change these values of with let and consts and observe the behaviours.

Understanding difference between let, const, and var is the essential fundation for web development. Eash developer should know these difference for writing bug free code. For learning these concepts i read articles like varialbes in JS, scopes in JS, Difference of let, const, and var,

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

Anoop Rajoriya — Mon, 23 Feb 2026 19:16:51 +0000

Ever you figure out yourself writing <div> and </div> or <ul> than <li> and so on. This slow down you for just writing repetitive code in the modern world you need to be a faster.

Building house by preparing each brick from scratch like molding it, baking it this way take years for just building a wall. Instead of that think having a machine which prepare a wall just by taking few commands. This is the what like Emmet do things.

What is Emmet

In very simple term, Emmet is a free, open source plugin for code editors which help you to write HTML, CSS code much, much faster. Thinks its like a faster shorthand language for web development in that you just need to write a short abbreviation and when press enter or tab it generated into full structured code block.

Why it useful for HTML beginners

Emmet is useful for beginners coder for several reasons:

Save Time & Reduce Typos : lesser you typed faster you code, Emmet handle closing tags and proper nesting.
Focus on structure not syntax : instead bogged into the every tag syntax focusing on what you build and let Emmet to complete repetitive work.
Building Good habits : it encourage to think about the logical structure of page which is crucial.
Boost confidence : see code generated by just short abbreviation empowering confidence and make coding feel fun.

How Emmet works inside code editors

Emmet is usually built in most popular code editors like vs-code or available as a simple extension can plugged in just one click.

Let's see the workflow Emmet:

Typing Abbreviation : you typing short string of abbreviations like div in HTML or df in CSS.
Trigger to Expend : in most editors it's tab key, Ctr+E, and Cmd+E commands in some setup which trigger the abbreviation expending.
Expend to Code : When expending key pressed the abbreviation is converted into the calculated code structure by its engine.

Basic Emmet syntax and abbreviations

Emmet is use CSS selectors like syntax to predict what you want to create. lets dive into some fundamental abbreviations patterns to understand it batter:

Creating some elements by typing some basics abbreviation patterns

For creating elements we only need to use their names. Emmet doesn't has predefined tags so we can type any tag name which converted into HTML tag.

Example: creating div element
Type: div and
Press tab key
Expended to:

<div></div>

Example: creating h1 element
Type: h1
Press tab key
Expended to:

<h1></h1>

Try It Your Self: Open you code editor and just typing some common elements like ul, img, input, span, and section and press tab key.

Adding classes, IDs, and attributes

Here are the real use case of Emmet. You can combine these attributes with the any element abbreviation pattern. Without any element the abbreviation pick the div element by default.

Class Attribute: for class abbreviation pattern using . CSS selector with following class name.
ID Attribute: for id abbreviation pattern using # CSS selector with following id name.
Other Attribute: for any other attribute abbreviation pattern using [attribute="value"] CSS selector for creating element with any attribute.

Example: Element With Class
Type: div.container
Press tab key
Expended To:

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

Example: Element With Id
Type: header#main-header
Press tab key
Expended To:

<header id="main-header"></header>

Example: Element With Class and ID
Type: p.lead#intro-text
Press tab key
Expended To:

<p class="lead" id="intro-text"></p>

Example: Element With Custom attribute
Type: a[href="#contact" title="Contact Us"]
Press tab key
Expended To:

<a href="#contact" title="Contact Us"></a>

Try It Your Self: create an button with class name btn and id name submit-btn. Then create an img element with src="Image.jpg" and alt="My Image"

Creating nested elements

The > (child) operator it allow you to nest element each other. It is useful for creating little bit complex layouts with ease. lets see some examples:

Example: li inside ul
Type: ul>li
Press tab key
Expended To:

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

You cannot nesting text by use > (child) operator alone you need something else. nesting text you need to use {} brackets to wrap the text:

Example: Text inside H1
Type: h1>{Title}
Press tab key
Expended To:

<h1>Title</h1>

There are one more operator are used called "+" (sibling) operator which is not used for nesting, it used for create multiple elements in same level. Like two element site side by side. Lets see example:

Example: span with logo id, button with Signup text inside header
Type: header>span#logo+button>{Signup}
Press tab key
Expended To:

<header>
  <span id="logo"></span>
  <button>Signup</button>
</header>

Try It Your Self: create a div element has a class card with h1 and p elements both have some title and description text inside them.

Repeating elements using multiplication

Some times you need to create multiple elements like list items in unorder list or multiple card components in grid component. Than here you can use * with number N represent how many items you want. lets see examples:

Example: 5 li inside ul
Type: ul>li*5
Press tab key
Expended To:

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

Example: 3 a inside nav
Type: nav>a*3>{links}
Press tab key
Expended To:

<nav>
  <a href="">links</a>
  <a href="">links</a>
  <a href="">links</a>
</nav>

There are one more thins you often see many coder do. when they create multiple item they use $ symbols in Ids, Class or inside other attributes and some times inside elements as a part of text. Purpose of using it is to create indexes in sequences. or some times it used with @- to reverse the order. Lets see examples:

Example: 3 a with link counts inside nav
Type: nav>a*3>{links$}
Press tab key
Expended To:

<nav>
  <a href="">links1</a>
  <a href="">links2</a>
  <a href="">links3</a>
</nav>

Example: 4 li with class items and text index with reverse order inside ul
Type: ul>li.items*4>{list$@-}
Press tab key
Expended To:

<ul>
  <li class="items">list4</li>
  <li class="items">list3</li>
  <li class="items">list2</li>
  <li class="items">list1</li>
</ul>

Try It Your Self: create a nav with ul containing 4 list items li has class item each item has its own a element with text link-index.

Generating full HTML boilerplate with Emmet

One of the most usable thing is to create a full HTML boiler plate code. That is the starting code every page needed. You need to use ! symbol or sometimes html:5 for older version editors. Lets see final example:

Example: HTML boiler plate code
Type: ! or html:5
Press tab key
Expended To:

<!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>

Emmet is optional tool to learn but if you learned it it change the whole level of speed and understanding of writing HTML and CSS code. It might takes practice to write abbreviation but once you do it you'll wonder how ever you coded without it. Once you get comfortable you naturally discover more advanced Emmets.

I use Emmet official documentation or cheat sheet for learning it you can also read it if want to know more about Emmet concepts.

CSS Selectors 101: Targeting Elements with Precision

Anoop Rajoriya — Sat, 31 Jan 2026 18:12:13 +0000

Introduction

Understanding, How to precisely select HTML elemtn is criticle concept for every frontend developer. These article provide you a good knowledge about What are selectors and How to use them to select elements with precision.

Content List

What Selectors & Why Needed
Basics Selectors
Combined Selectors
Selectors Priority

What CSS Selectors & Why Need It

Selectors are patterns alow pointing HTML element from the CSS code. This pointing enable to apply styles to specific or group of elements. The selectors are the fundamental concept used in CSS without these its hard to apply styles efficiently. Selectors enable to create complex and interactive layouts, applying consistant styles across entire page, help to seperate styles to HTML which make code more readable.

If There multiple rules are defined for the same HTML elements the browser determin which one wins by using the rules called Cascading (means styles read later by browser is that one get applied) & Specificity (rules prioritize styles).

Basics CSS Selectors

These are the foundation selectors which provide a very straightforword way to select HTML elements. It include four major selectors Universal Selector, Element Selectors, Id Selectors, and Class Selectors.

1: Universal Selector

The universal selector used to select every element a HTML page contain. It mostly used to apply test styles quickly on a entire page. It implemented by using * symbol. This selector recomandade to not use it in production because it push weight on browser and affact performance.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    color: red;
}

2: Element Selectors

Element selector used to select any HTML element by using their tag name. When you apply some style to element by using element selector remember it apply given style to every element that tag name used as selector.

p {
  color: red;
}

h2 {
  color: blue;
  text-transform: uppercase;
  border-bottom: 2px solid;
}

3: Id Selectors

Id selector use HTML id name provided to element which uniquly identified it within entire page. It implemented by using # symbol with the following id name of element. It mostly used to targeting unique element for applying specific styles.

#main-header {
    background-color: #f4f4f4;
    padding: 40px;
    text-align: center;
    border-radius: 8px;
}

4: Class Selectors

This selector use class attribute name to target elements in HTML page. It use . dot symobe along with the class name. It mostly used to select group of elements to apply same type styles, its a common standard in web-dev.

.subtitle {
  font-style: italic;
  color: #555;
  margin-top: 20px;
}

Combined CSS Selectors

Combined selectors are the high level selecors these selectors are implement with the help of basics selectors. Majorly used combined selecors are Grouped Selector, Chained Selector, Descendants Child Selector, Direct Child Selector, Adjacent Sibling Selector, and General Sibling Selector

1: Grouped Selector

Grouped selectors are used to target multiple elements with different type selectors. It implement those by writing basics selectors and separating them with , comma. It mostly used to reduce redundant styles by grouping them.

h1, h2, h3 {
  font-family: 'Helvetica', sans-serif;
  color: darkblue;
  letter-spacing: -1px;
}

2: Chained Selector

It is defined by writing multiple selectors wihout any spaces between them. It target element only if it has all these qulifires at the same time. It also a good way to narrow down the targeting view.

.footer-note.important {
  background-color: #fff566;
  border: 1px solid #ffeeba;
  font-weight: bold;
  padding-inline: 12px;
  padding-block: 8px;
  margin-block: 6px;
}

3: Descendants Child Selector

It implemented by just writing selectors by seperating spaces. It used when you want to select all perticular y elements inside of another x element. Ensure y do not have to be direct childe of x elements.

.parent-box p {
  color: blue;
  text-decoration: underline;
}

4: Direct Child Selector

It use > symbol to target direct childs of elements. It target all direct y elements of the another elements x, here it only target all y elements those are a direct childes of x elements.

.parent-box > p {
  background-color: #d1ecf1;
  padding: 5px;
}

5: Adjacent Sibling Selector

It used when you want to apply styles to a element that comes just after the another element. You write a selector targeting a element, than + plus symbol, and than writing a selector that targeting element want to apply style on that.

h3 + p {
  color: #8e44ad;
  font-weight: 700;
  font-size: 1.1rem;
}

6: General Sibling Selector

Just like a adjacent sibling selector its also use to select siblings but it select all the siblings of an element. First write selector of element x and ~ symbol, than write another selecor which target all the elements y those come after the x element.

h3 ~ p {
  color: white;
  background-color: #333;
  padding-left: 14px;
}

Selector Priority (Specificity)

In starting we have discussesd about how CSS styles applied to elements it used Cascading (we already disscueesed in starting) and Specificity rules:

Specificty is like a weight system a browser use to identified which rule win when multiple styles applyied on element. Think it like a scoring system, when more specific selector is the higher score it get. We can assure in the specificity hierarchy each selector have a specificty score which determins its priority:

Inline styles have a 1000 most higher priority score which is higher than others.
ID Selectors have a 0100 second higher priority scores.
Class Selectors have a 0010 third higher priority scores.
Element Selectors have a 0001 least higher priority scores.

Based on these scores we can determine which style rule wins. Lets see an example which clearify the specificity rules:

We have a three different styles rule with different selectors:

/*<p id="intro" class="highlight">Hello World</p>*/

p{
    color: red;
}

.highlight{
    color: blue
}

#intro{
    color: green;
}

Think which style wins and apply color to paragraph element. If your answer is green you nailed it, its right answer. Lets see score calculation:

Here element selector style get score 0001, class selector get 0010, and id selector get 0100. To seeing all that we figured the higher score is 0100 so here id selector wins.

What if there are multiple styles rule those have same specificity?
Than here the cascading rules decides the result, in same case if specificity apears than styles rules wins which apears in last.

Summary

CSS selectors function as a foundational pattern-matching system that dictates how styles are targeted and prioritized through a weighted scoring mechanism known as specificity.

Understanding CSS selectors and cascading.
Basics CSS selectors.
Combined CSS selectors.
Selector priority (Specificity) scores.

To maintain a maintable code prioritize use of classes and ids for reusabilty, readability in large projects and separation of concerns.

Understanding HTML Tags and Elements

Anoop Rajoriya — Thu, 29 Jan 2026 12:12:12 +0000

Content List

What is HTML and why we using it
What is HTML tags
What is elements & elements vs tags
Self closing elements
Inline and blcok level elements
Rerences

What HTML is and why we use it?

HTML stand for Hyper Text Markup Language. In that hyper text refere to system that provide a link to access other pages on web, markup means use of annotate text give instruction to browser how to structure and display page content.

Brower can not read html like humans do it need a instruction to differentiate between instruction and the actual content. Html provide this information so browser can understand which part of the content is display as heading and which part is the paragraph or links without that browser show all information as a big paragpah of text.

Think, in building a house the blueprint and fram of the house is html provide the initial structre. In human body the skeleton is the html not skin and mucles which provide styling (css) and interactibity (js) to web page.

What is HTML tags?

In html tags are the commands that tells browswer how to handle specific piece of content. It is a fundamental building block it used to structre and apply content formating on web pages.

Every tag contain tree parts open angle bracket <, tag name like head, body, h1, and close angle bracket > this tree thing complete every tag like <head>. Most of the tags in html comes with pair, opening and closing tags which enclose content. Closing tag contain / wich differentiate closing tag with opening tag.

without a closing tag, browser get confused. If you open a heading tag and put heading content on to it but if you don't close it broswer assume all content after that are the part of heading and all content print like a big giant heading every thing big and bold. Closing tag tell borswer "stop" instruction heading ends right here.


<section>
    <h1>Hello world</h1>
</section>

Think its like a putting object into box. You open the box lid (Opening tag), put object into that (content) and close the box lid (Closing tag).

HTML element & element vs tag

Most of the peoples assume the tags and elemetns are interchangable but there are slightly technical difference here. Element is the package of the tree main thinks:

Opening Tag: start command. It consist element name wrap with the opening and closing angle bracket <p> tells the browser i'm starting paragraph now.
Content: this is the actual text, image, and link you want to user see.
Closing Tag: stop command. it has same configuration like start command with forward slash / make the difference </p> and tell the browser this here paragraph ends.

To understand difference between element and tag think element like a sandwich:

Opening tag is the top slice of bread.
Content is the middle part (cheez, butter, and jelly) of the sandwich.
Closing tag is the bottom slice of bread
Element is the entire sandwich, you can't have sandwich without all part working together.

Self closing (Void) element

In the world of HTML there are the some tags have opening and closing becase thay wrap around the content to tell the broswer where this specific content ended. What if tag is the content.

There are type of tags in html which only have one tag no need to close it because this type of tags are work as content not wrap around content. Think its like a sticker or stamp you don't need to open sticker, put someting in it, and close it. You just directly put it down.

These element called self closing Element and Void Element, these some major elements:

<img>: used to put image on page don't put text on it.
<br>: a simple line break like enter in keyboard.
<hr>: a horizontal rule, line acrose the page.

In the older version of the html you might see the self closing tags written with forward slash at end like <img/> but in the latest version of the html in HTML5 the slash is optional and usually omitted.

Block vs Inline elements & commonly used elements

Think as your webpage is the grid where every element is box. There are two main ways to arrange them:

Block Level Element

This type of elements are always start on new line and take up full width. It stratch out to left and right as far as it can. Think these as bricks when you stack these bricks each other it always start new layer. You can put two bricks side by side in same verticle space without some extra support. There are some common example of block level elements:

<header>
    <h1>Logo</h1>
    <ul>
        <li>About</li>
        <li>Contact</li>
    </ul>
</header>

<main>Block level elements</main>

Inline Level Element

An inline elements does not start on new line it only takes as much width as necessary for its content. it sits "in line" with elements around it. Think it like a marker. If you using marker to highlith a word in sentant it does not break the sentace in apart, the highlight just site right there on top of the word. There are common inline words:

<b>Lorem Ipsum</b> is simply dummy text of the <i>printing</i> and typesetting industry. <strong>Lorem Ipsum</strong> has been the <em>industry's</em> standard dummy text ever since the <time>1500s<time>, when an unknown printer took a <span>galley of type and scrambled</    span> it to make a type <a>specimen book</a>.

Forem: Anoop Rajoriya

Spread vs Rest Operators in JavaScript

What spread operator does

What rest operator does

Differences between spread and rest

Using spread with arrays and objects

Practical use cases

Creating Copy

Merging Values

With Functions

Summary

Template Literals in JavaScript

Problems with traditional string concatenation

Template literal syntax

Embedding variables in strings

Multi-line strings

Use cases in modern JavaScript

Array Flatten in JavaScript

What nested arrays are

Why flattening arrays is useful

Concept of flattening arrays

Different approaches to flatten arrays

Native Array.prototype.flat()

Recursive approach

Iterative approach

Common interview scenarios

Implementation without native approaches

Performance optimizetion trade-offs

Clearly explian shalow vs deep flat

JavaScript Arrays 101

What arrays are and why we need them

How to create an array

Accessing elements using index

Updating elements

Array length property

Basic looping over arrays

Summary

Your Turn: The Movie Challenge

Arrow Functions in JavaScript: A Simpler Way to Write Functions

What arrow functions are

Basic arrow function syntax

Arrow functions with one parameter

Arrow functions with multiple parameters

Implicit return vs explicit return

Implicit Return

Explicit Return

Basic difference between arrow function and normal function

1. Concise way to write code

2. this keyword behaviour

3. arguments object

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

Topics To Cover

What functions are and why we need them

Function declaration syntax

Function expression syntax

Key differences between declaration and expression

Basic idea of hoisting (very high level)

Function Declaration

Function Expression

When to use each type

Use Funciton Declaration when

Use Funciton Expression when

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

Content List

What control flow means in programming

The if statement

The if-else statement

The else if ladder

The switch statement

When to use switch vs if-else

Resources

JavaScript Operators: The Basics You Need to Know

Content List

What operators are

Arithmetic operators

Comparison operators

Logical operators

Logic table for Logical OR || operator

Logic table for Logical AND && operator

Logic table for Logical Nagetion ! operator

Native `Array.prototype.flat()`

2. `this` keyword behaviour

3. `arguments` object

Logic table for Logical OR `||` operator

Logic table for Logical AND `&&` operator

Logic table for Logical Nagetion `!` operator

Basic difference between `var`, `let`, and `const`