Complete JavaScript Roadmap and Topic-Wise Tutorial

Posted on Oct 6, 2026 in Computers

JavaScript Complete Topic-Wise Explanation

1. JavaScript kya hai?

JavaScript ek programming language hai jo website ko interactive aur dynamic banati hai.

Simple example:

HTML → Website ka structure
CSS → Website ka design
JavaScript → Website ka behavior/functionality

Example: Button click karne par text change karna.

Click Me

Hello

2. JavaScript ko HTML me add karna

Internal JavaScript

External JavaScript

HTML:

script.js:

console.log("Hello JavaScript");

External JS real projects me commonly use hoti hai.

3. `console.log()`

Program ka output check karne ke liye use hota hai.

console.log("Hello");
console.log(10);
console.log(10 + 20);

Output:

Hello
10
30

Browser me F12 → Console se output dekh sakte ho.

4. Variables

Variable ek container hota hai jisme data store karte hain.

JavaScript me mainly:

let name = "Rahul";
const age = 20;
var city = "Delhi";

`let`

Value change kar sakte ho:

let age = 20;
age = 21;

`const`

Value reassign nahi kar sakte:

const pi = 3.14;

`var`

Old JavaScript me commonly use hota tha. Modern JavaScript me generally let aur const prefer kiye jaate hain.

5. Data Types

JavaScript me data ke different types hote hain.

String

Text:

let name = "Rahul";

Number

let age = 20;
let price = 499.99;

Boolean

Sirf true ya false:

let isStudent = true;

Undefined

let x;
console.log(x);

Output:

undefined

Null

Intentionally empty value:

let user = null;

Object

Multiple related information:

let person = {
    name: "Rahul",
    age: 20
};

Array

Multiple values:

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

6. Operators

Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.33
console.log(a % b); // 1

Comparison

10 > 5
10 < 5
10 == 10
10 === 10
10 != 5
10 !== 5

Important:

5 == "5"   // true
5 === "5"  // false

=== value and type dono check karta hai.

7. `if else`

Condition ke according decision lene ke liye.

let age = 20;

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

Example:

Age >= 18 → Adult
Age < 18  → Minor

8. `else if`

Multiple conditions ke liye:

let marks = 75;

if (marks >= 90) {
    console.log("A+");
} else if (marks >= 75) {
    console.log("A");
} else if (marks >= 50) {
    console.log("B");
} else {
    console.log("Fail");
}

9. Loops

Same kaam repeatedly karne ke liye loops use hote hain.

`for`

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:

`while`

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

10. Functions

Function ek reusable block of code hota hai.

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

greet();

Parameter

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

greet("Rahul");

Output:

Hello Rahul

Return

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

let result = add(10, 20);

console.log(result);

Output:

11. Arrow Functions

Modern JavaScript me functions likhne ka short syntax:

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

Aur short:

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

Ye React/Node.js jaise technologies me bahut commonly dikhega.

12. Arrays

Array me multiple values store karte hain.

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

console.log(fruits[0]);

Output:

Apple

Array indexing 0 se start hoti hai.

Apple  → 0
Mango  → 1
Banana → 2

`push()`

End me element add:

fruits.push("Orange");

`pop()`

Last element remove:

fruits.pop();

`shift()`

First element remove:

fruits.shift();

`unshift()`

Beginning me add:

fruits.unshift("Grapes");

13. Important Array Methods

Ye job/interview aur React ke liye particularly important hain.

`forEach()`

Har element par operation:

let numbers = [1, 2, 3];

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

`map()`

New array create karta hai:

let numbers = [1, 2, 3];

let result = numbers.map(num => num * 2);

console.log(result);

Output:

[2, 4, 6]

`filter()`

Condition ke according elements:

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

let result = numbers.filter(num => num > 15);

console.log(result);

Output:

[20, 25]

`reduce()`

Multiple values ko ek result me convert karne ke liye:

let numbers = [10, 20, 30];

let total = numbers.reduce((sum, num) => sum + num, 0);

console.log(total);

Output:

14. Objects

Object related information ko ek jagah store karta hai.

let student = {
    name: "Rahul",
    age: 20,
    course: "BCA"
};

Access:

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

Output:

Rahul
20

Value change:

student.age = 21;

New property:

student.city = "Delhi";

15. DOM

DOM = Document Object Model

JavaScript ke through HTML elements ko access/change karne ke liye DOM use hota hai.

HTML:

`Hello`

JavaScript:

let title = document.getElementById("title");

title.innerText = "Hello JavaScript";

Website par:

Hello

Hello JavaScript

ho jayega.

16. `querySelector()`

HTML element select karne ke liye:

let title = document.querySelector("#title");

Class:

let box = document.querySelector(".box");

Tag:

let heading = document.querySelector("h1");

17. Events

User ke action ko detect karne ke liye events.

Examples:

click
mouseover
input
submit
keydown
change

Example:

Click Me

let btn = document.querySelector("#btn");

btn.addEventListener("click", function() {
    alert("Button clicked!");
});

18. Form Handling

HTML:


    
    Submit

JavaScript:

let form = document.querySelector("#form");

form.addEventListener("submit", function(event) {
    event.preventDefault();

    console.log("Form submitted");
});

Ye login/signup/contact forms banane me important hai.

19. ES6+ Features

Modern JavaScript ke important concepts:

Template Literals

let name = "Rahul";
let age = 20;

console.log(`My name is ${name} and I am ${age} years old.`);

Destructuring

let person = {
    name: "Rahul",
    age: 20
};

let { name, age } = person;

Spread Operator

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

console.log(arr2);

20. JSON

API se data receive karte waqt JSON bahut common hai.

Example:

{
    "name": "Rahul",
    "age": 20
}

JavaScript me:

let data = JSON.parse(jsonData);

Object ko JSON:

JSON.stringify(object);

21. API & `fetch()`

Backend/API se data lene ke liye:

fetch("https://example.com/api/users")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

Modern syntax:

async function getUsers() {
    let response = await fetch("https://example.com/api/users");

    let data = await response.json();

    console.log(data);
}

Frontend developer ke liye API + fetch + async/await bahut important hai.

22. Promises

Asynchronous operation ka result represent karte hain.

Promise ke 3 states:

Pending
   ↓
Fulfilled
   or
Rejected

Example:

let promise = new Promise((resolve, reject) => {
    resolve("Success");
});

promise.then(result => {
    console.log(result);
});

23. Async / Await

Promises ko easier way me handle karne ke liye:

async function getData() {
    try {
        let response = await fetch("API_URL");
        let data = await response.json();

        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

24. Error Handling

Errors ko handle karne ke liye:

try {
    let result = 10 / 0;
    console.log(result);
} catch (error) {
    console.log(error);
}

API requests me bhi:

try {
    // code
} catch (error) {
    // error handle
}

25. Advanced JavaScript

Basic aur intermediate ke baad ye topics padho:

Scope

let x = 10;

Variable kaha accessible hai, ye scope decide karta hai.

Hoisting

JavaScript declarations ko execution se pehle process karta hai.

Closure

Ek function apne outer scope ke variables ko remember kar sakta hai.

`this`

Current execution context ko refer karta hai; iska behavior situation ke according change hota hai.

Prototype

JavaScript ka object inheritance mechanism.

Classes

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

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

Event Loop

JavaScript asynchronous tasks ko kaise handle karta hai, ye samajhne ke liye important hai.

🎯 Aapko kis order me padhna chahiye?

Agar aap Frontend Developer banna chahte ho, to ye sequence follow karo:

1. Variables
        ↓
2. Data Types
        ↓
3. Operators
        ↓
4. if / else
        ↓
5. Loops
        ↓
6. Functions
        ↓
7. Arrays
        ↓
8. Objects
        ↓
9. Array Methods
        ↓
10. DOM
        ↓
11. Events
        ↓
12. Forms
        ↓
13. ES6+
        ↓
14. JSON
        ↓
15. Async JavaScript
        ↓
16. Promises
        ↓
17. Async/Await
        ↓
18. Fetch/API
        ↓
19. Advanced JS
        ↓
20. Projects

Sabse important baat: JavaScript ko sirf theory se mat padho. Har topic ke baad 5–10 chhote coding questions solve karo, phir ek mini-project banao. Isse JS actually samajh aayegi.

Complete JavaScript Roadmap and Topic-Wise Tutorial

JavaScript Complete Topic-Wise Explanation

1. JavaScript kya hai?

2. JavaScript ko HTML me add karna

Internal JavaScript

External JavaScript

3. console.log()

4. Variables

let

const

var

5. Data Types

String

Number

Boolean

Undefined

Null

Object

Array

6. Operators

Arithmetic Operators

Comparison

7. if else

8. else if

9. Loops

for

while

10. Functions

Parameter

Return

11. Arrow Functions

12. Arrays

push()

pop()

shift()

unshift()

13. Important Array Methods

forEach()

map()

filter()

reduce()

14. Objects

15. DOM

Hello

16. querySelector()

17. Events

18. Form Handling

19. ES6+ Features

Template Literals

Destructuring

Spread Operator

20. JSON

21. API & fetch()

22. Promises

23. Async / Await

24. Error Handling

25. Advanced JavaScript

Scope

Hoisting

Closure

this

Prototype

Classes

Event Loop

🎯 Aapko kis order me padhna chahiye?

Recent Notes

Subjects

Publicidad

3. `console.log()`

`let`

`const`

`var`

7. `if else`

8. `else if`

`for`

`while`

`push()`

`pop()`

`shift()`

`unshift()`

`forEach()`

`map()`

`filter()`

`reduce()`

`Hello`

16. `querySelector()`

21. API & `fetch()`

`this`