Excellent goal. We'll optimize for building things, not memorizing theory.

Here's the philosophy we'll follow:

Learn → Think → Predict → Build → Repeat

We'll ignore topics that rarely matter early and spend most of our time on the concepts used every day in JavaScript, React, and Node.js.

JavaScript Roadmap (Pareto Version)

Phase 1 — JavaScript Foundations (Most Important)

Chapter 1 — Variables & Values

Goal:
Store information and use it correctly.

Chapter 2 — Conditions

if
else
else if
comparison operators
logical operators

Build:
Age checker, login system

Chapter 3 — Functions

reusable code
parameters
return
arrow functions

Build:
Calculator

Chapter 4 — Arrays

The most used data structure.

add
remove
find
map
filter
reduce (later)

Build:
Todo list logic

Chapter 5 — Objects

How real applications store data.

Build:
Student manager

Chapter 6 — Loops

for
for...of
while

Build:
Shopping cart total

Chapter 7 — Array Methods (Super Important)

map
filter
find
some
every
includes

These appear everywhere in React interviews.

Chapter 8 — Strings

Working with text.

Chapter 9 — Scope

block scope
function scope

Common interview topic.

Chapter 10 — Destructuring

Used constantly in React.

Chapter 11 — Spread & Rest

Chapter 12 — Template Literals

Chapter 13 — Objects Deep Dive

Chapter 14 — Callbacks

Chapter 15 — Promises

Chapter 16 — async/await

One of the biggest milestones.

Build:
Weather App

Chapter 17 — DOM

How JavaScript controls websites.

Build:
Interactive apps

Chapter 18 — Events

click
input
submit

Chapter 19 — Forms

Chapter 20 — Fetch API

Talking to servers.

Build:
Movie Search App

Chapter 21 — Modules

Chapter 22 — Error Handling

Chapter 23 — ES6 Features You Use Daily

Chapter 24 — Mini Project Marathon

Calculator
Todo App
Notes App
Expense Tracker
Quiz App

Chapter 25 — JavaScript Patterns Used in React

After this you're ready to start React confidently.

Chapter 1 — Variables & Values

Goal (1 line)

Learn how to store information and use it without accidentally breaking your code.

Before We Start (2-minute lesson)

Think of a variable like a labeled storage box.

const name = "Alice";

Label = name

Inside the box = "Alice"

`const`

Use when the value should not be reassigned.

const country = "India";

`let`

Use when the value will change.

let score = 0;

score = 10;

Avoid var.

In modern JavaScript you'll almost always use const first, and let only when you need to change the value.

MCQs

Q1

Which keyword should you use if the value never changes?

let

const

var

change

✅ Answer

Why?

const protects the variable from being reassigned.

Q2

Which variable should use let?

const pi = 3.14;

const country = "India";

let score = 0;

const name = "John";

✅ Answer

Because the score changes.

Q3

What will this print?

const age = 25;

console.log(age);

age

undefined

Error

✅ Answer

console.log() prints the value stored in the variable.

Q4

What happens?

let city = "Delhi";

city = "Mumbai";

console.log(city);

Delhi

Mumbai

Error

undefined

✅ Answer

let allows reassignment.

Q5

Find the bug.

const price = 100;

price = 200;

Nothing

Missing console.log

Cannot reassign a const

Should use quotes

✅ Answer

const cannot be assigned a new value.

Q6

What prints?

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

console.log(first, second);

Hello World

HelloWorld

first second

Error

✅ Answer

Passing multiple values to console.log() prints them separated by spaces.

Q7

Which is the better choice?

let country = "India";

const country = "India";

✅ Answer

If you don't plan to change it, prefer const.

Q8

Output?

let points = 5;

points = points + 2;

console.log(points);

✅ Answer

Current value (5) + 2 = 7.

Q9

Find the bug.

const age;

age = 20;

No bug

const must be given a value when it's created

Should use double quotes

Need console.log

✅ Answer

Correct:

const age = 20;

Q10

What prints?

const x = 5;
const y = 10;

console.log(x + y);

510

5 10

Error

✅ Answer

Numbers are added.

Q11

What prints?

const name = "Sam";

console.log("Hello " + name);

Hello

Sam

Hello Sam

Error

✅ Answer

The + operator joins strings.

Q12

Which variable name is better?

const x = "Alice";

const userName = "Alice";

✅ Answer

Choose names that explain what the value represents.

Q13

Output?

let count = 1;

count = count + count;

console.log(count);

Error

✅ Answer

1 + 1 = 2.

Q14

Which code is better?

let total = 100;

const total = 100;

(You never change total.)

✅ Answer

Default to const. Switch to let only when you need reassignment.

Q15 (Hardest)

Predict the output.

let apples = 3;

apples = apples + 2;

apples = apples + 5;

console.log(apples);

✅ Answer

Step by step:

Start: 3
Add 2 → 5
Add 5 → 10

Common Beginner Mistakes

❌ Using let everywhere instead of preferring const.
❌ Reassigning a const.
❌ Choosing vague names like x, data, or value when a clearer name is possible.
❌ Forgetting that console.log() is how you inspect values while learning.

Mini Coding Challenge

Without running the code, predict the output:

const price = 50;
let quantity = 2;

quantity = quantity + 3;

console.log(price);
console.log(quantity);
console.log(price * quantity);

Write down your three answers first, then run the code to check yourself.

Mini Project

Shopping Bill

Create variables for:

product name
product price
quantity

Then print:

Product: Laptop
Price: 50000
Quantity: 2
Total: 100000

Don't worry about user input yet—just hardcode the values and calculate the total with JavaScript.

Your Turn

Reply with:

Your answers to the Mini Coding Challenge (the three outputs).
Your code for the Shopping Bill mini project.

When you later reply with "ok", we'll continue with Chapter 2: Conditions, where you'll learn how programs make decisions like login systems and age checks.