JavaScript Roadmap for Juniors (2026 Edition)

JavaScript is where everything connects. No frameworks, no libraries - just vanilla JS that runs in every browser.

Master this first, and React, Vue, Svelte, and AI-generated code all start to make sense.

---

Phase 1: JavaScript Basics (1–2 Weeks)

1.1 Variables & Data Types

let name = 'John';
const age = 25;
var isOld = false; // Avoid this

// Primitives
let number = 42;
let string = 'hello';
let bool = true;
let undef;
let nul = null;
let symbol = Symbol('id');
let bigInt = 123n;

• let vs const vs var (and why var is mostly dead)
• Primitives vs objects vs arrays
• typeof, instanceof, truthy and falsy values

1.2 Control Flow

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

// Ternary
const status = age >= 18 ? 'Adult' : 'Minor';

// Loops
for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (const item of array) {
  console.log(item);
}

• if/else, switch, ternary
• for, for...of, for...in, while
• break, continue, labeled loops

1.3 Functions

function greet(name) {
  return `Hello ${name}`;
}

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

const sayHello = (name = 'World') => `Hello ${name}`;

• Declarations vs expressions vs arrow functions
• Parameters, defaults, rest (...args)
• Return values and early returns

---

Phase 2: Working With Data (1 Week)

2.1 Arrays

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

fruits.push('grape');
fruits.pop();

fruits.forEach(fruit => console.log(fruit));
const upper = fruits.map(fruit => fruit.toUpperCase());
const long = fruits.filter(fruit => fruit.length > 5);
const hasApple = fruits.some(fruit => fruit === 'apple');

• push/pop/shift/unshift, slice/splice
• map, filter, reduce, forEach, some, every, find
• Spread (...), destructuring

2.2 Objects

const person = {
  name: 'John',
  age: 25,
  greet() {
    return `Hi, I'm ${this.name}`;
  }
};

const { name, age } = person;
const updated = { ...person, age: 26 };

• Dot vs bracket access
• Methods and this
• Object.keys, values, entries, hasOwnProperty

---

Phase 3: DOM Manipulation (2 Weeks)

3.1 Selecting & Changing Elements

const title = document.querySelector('.title');
const buttons = document.querySelectorAll('.btn');

title.textContent = 'New Title';
title.classList.add('active');
title.style.color = 'blue';

button.setAttribute('disabled', 'true');

• querySelector / querySelectorAll
• textContent vs innerHTML
• classList, styles, attributes

3.2 Creating & Removing Elements

const newDiv = document.createElement('div');
newDiv.className = 'card';
newDiv.innerHTML = '<h3>New Card</h3>';
document.body.appendChild(newDiv);

newDiv.remove();

parent.insertAdjacentHTML('beforeend', '<p>New content</p>');

• createElement, appendChild, remove
• insertAdjacentHTML
• Event delegation basics

---

Phase 4: Events (1 Week)

button.addEventListener('click', handleClick);

function handleClick(e) {
  e.preventDefault();
  e.stopPropagation();
  console.log(e.target);
}

button.removeEventListener('click', handleClick);

• addEventListener / removeEventListener
• Event object and bubbling
• Delegation for dynamic content

---

Phase 5: Asynchronous JavaScript (2 Weeks)

5.1 Timers & Callbacks

setTimeout(() => console.log('Delayed'), 1000);
setInterval(() => console.log('Tick'), 1000);

• Timers
• Callback patterns and why they don’t scale

5.2 Promises

const promise = new Promise((resolve) => {
  setTimeout(() => resolve('Success!'), 1000);
});

promise
  .then(result => console.log(result))
  .catch(err => console.error(err))
  .finally(() => console.log('Done'));

• Creating promises
• then, catch, finally
• Promise.all, allSettled, race

5.3 Async / Await

async function fetchData() {
  try {
    const response = await fetch('/api/users');
    return await response.json();
  } catch (error) {
    console.error(error);
  }
}

• async/await syntax
• try/catch error handling

---

Phase 6: Fetch & Real Data (1–2 Weeks)

async function getUsers() {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error(response.status);
  return response.json();
}

• fetch API
• Status handling
• Headers, POST/PUT, FormData

---

Phase 7: Modern JavaScript (1 Week)

7.1 ES6+ Syntax

const { name } = user;
const message = `Hello ${name}`;
const street = user?.profile?.address?.street;

• Destructuring
• Spread / rest
• Optional chaining, nullish coalescing
• import / export

7.2 Array Methods Deep Dive

const expensive = items
  .filter(i => i.price > 100)
  .map(i => i.price * 1.1)
  .sort((a, b) => a - b);

• Chaining
• Immutability mindset

---

Phase 8: Error Handling & Debugging (1 Week)

try {
  const data = await riskyOperation();
} catch (error) {
  console.error(error.message);
}

class ApiError extends Error {
  constructor(message, status) {
    super(message);
    this.status = status;
  }
}

• try/catch
• Throwing custom errors
• DevTools, breakpoints, debugger

---

Practice Plan

Daily (45–90 minutes):

• Logic challenges (arrays, strings)
• DOM interactions
• Async data fetching

Weekly projects:

• Calculator
• To-do list (localStorage)
• Weather app
• Quiz game
• Notes app (CRUD + search)

Deploy everything.

---

Why Vanilla JavaScript First

• You understand what frameworks abstract
• Debugging becomes easier
• AI-generated code makes sense
• Smaller bundles and faster sites

Learn JavaScript once. Everything else becomes a layer on top.