Complete JavaScript Course Textbook
Beginner to Advanced • Original Learning Guide
This original textbook is designed as a comprehensive JavaScript learning guide. It covers core language
features, modern JavaScript, browser programming, asynchronous programming, APIs, practice problems, and
projects.
How to study: Read each chapter, type the examples yourself, change the values, and complete the practice
task. For browser chapters, test the code in an HTML page and use browser developer tools.
Table of Contents
1. JavaScript Introduction
2. Syntax and Comments
3. Variables
4. Data Types
5. Type Conversion
6. Operators
7. Strings
8. Numbers and Math
9. Arrays
10. Array Methods
11. Objects
12. Destructuring and Spread
13. Dates
14. Conditions
15. Loops
16. Functions
17. Scope and Closures
18. Callbacks and Higher-Order Functions
19. Classes and OOP
20. Inheritance
21. Error Handling
22. JSON
23. Regular Expressions
24. DOM Basics
25. DOM Events
26. Forms and Validation
27. Local Storage
28. Promises
29. Async and Await
30. Fetch API
31. Modules
32. Map and Set
33. Iterators and Generators
34. Optional Chaining and Nullish Coalescing
35. Runtime and Event Loop
36. Debugging
37. Number Practice
38. String Practice
39. Array Practice
40. Mini Project: To-Do App
41. Mini Project: Quiz App
42. Mini Project: Expense Tracker
43. Interview Preparation
44. Final Cheat Sheet
Chapter 1: JavaScript Introduction
JavaScript adds behavior and interactivity to web pages and is also used on servers and in many development
tools.
Example
[Link]("Hello, JavaScript!");
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 2: Syntax and Comments
Learn statements, expressions, blocks, case sensitivity, semicolons, single-line comments, and block
comments.
Example
let message = "Hello";
if ([Link] > 0) {
[Link](message);
}
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 3: Variables
Understand var, let, const, declaration, assignment, scope, and best practices.
Example
let age = 20;
age = 21;
const country = "India";
[Link](age, country);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 4: Data Types
Study string, number, bigint, boolean, undefined, null, symbol, and object values.
Example
const name = "Arun";
const score = 95;
const active = true;
[Link](typeof name, typeof score, typeof active);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 5: Type Conversion
Convert values with Number, String, Boolean, parseInt, and parseFloat.
Example
const text = "25";
const number = Number(text);
[Link](number + 5);
[Link](String(100));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 6: Operators
Learn arithmetic, assignment, comparison, logical, conditional, nullish coalescing, optional chaining, and
bitwise operators.
Example
const a = 10;
const b = 3;
[Link](a + b);
[Link](a > b);
[Link](a === 10 && b < 5);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 7: Strings
Use indexing, template literals, length, includes, slice, substring, replace, split, trim, and case conversion.
Example
const name = "Arun";
const message = `Hello, ${name}!`;
[Link]([Link]());
[Link]([Link]("Arun"));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 8: Numbers and Math
Work with numeric values, rounding, powers, random values, min, max, and other Math methods.
Example
[Link]([Link](4.6));
[Link]([Link](4.9));
[Link]([Link](10, 20, 5));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 9: Arrays
Create and modify arrays using indexing, push, pop, shift, unshift, slice, and splice.
Example
const fruits = ["Apple", "Banana", "Mango"];
[Link]("Orange");
[Link](fruits[0]);
[Link]([Link]);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 10: Array Methods
Master map, filter, reduce, find, some, every, includes, sort, and chaining.
Example
const numbers = [1, 2, 3, 4, 5];
const doubled = [Link](n => n * 2);
const even = [Link](n => n % 2 === 0);
const total = [Link]((sum, n) => sum + n, 0);
[Link](doubled, even, total);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 11: Objects
Create objects, access properties, add methods, use this, and work with nested data.
Example
const student = {
name: "Arun",
age: 20,
greet() { [Link](`Hello, ${[Link]}`); }
};
[Link]();
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 12: Destructuring and Spread
Extract array and object values and combine or copy collections.
Example
const user = { name: "Arun", age: 20 };
const { name, age } = user;
const updated = { ...user, age: 21 };
[Link](name, age, updated);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 13: Dates
Create dates and read date components while understanding time zones and formatting.
Example
const now = new Date();
[Link](now);
[Link]([Link]());
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 14: Conditions
Use if, else if, else, switch, and the ternary operator.
Example
const mark = 75;
if (mark >= 90) [Link]("A");
else if (mark >= 60) [Link]("B");
else [Link]("C");
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 15: Loops
Use for, while, do...while, for...of, break, and continue.
Example
for (let i = 1; i <= 5; i++) {
[Link](i);
}
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 16: Functions
Learn declarations, expressions, arrow functions, parameters, return values, defaults, rest, and callbacks.
Example
function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;
[Link](add(2, 3));
[Link](multiply(4, 5));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 17: Scope and Closures
Understand lexical scope, block scope, function scope, and closure behavior.
Example
function counter() {
let count = 0;
return () => ++count;
}
const next = counter();
[Link](next());
[Link](next());
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 18: Callbacks and Higher-Order Functions
Pass functions as values and use functions that transform or return other functions.
Example
function process(value, callback) {
callback(value * 2);
}
process(5, result => [Link](result));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 19: Classes and OOP
Create classes, constructors, methods, and objects.
Example
class Person {
constructor(name) { [Link] = name; }
greet() { return `Hello, ${[Link]}`; }
}
[Link](new Person("Arun").greet());
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 20: Inheritance
Extend classes, use super, and understand method overriding.
Example
class Animal { speak() { [Link]("Sound"); } }
class Dog extends Animal { speak() { [Link](); [Link]("Bark"); } }
new Dog().speak();
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 21: Error Handling
Use try, catch, finally, throw, and Error objects.
Example
try {
throw new Error("Something went wrong");
} catch (error) {
[Link]([Link]);
} finally {
[Link]("Finished");
}
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 22: JSON
Serialize and parse structured data with [Link] and [Link].
Example
const data = { name: "Arun", age: 20 };
const text = [Link](data);
const object = [Link](text);
[Link]([Link]);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 23: Regular Expressions
Search and validate text patterns with regex.
Example
const text = "Order number: 12345";
const match = [Link](/\d+/);
[Link](match ? match[0] : "No match");
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 24: DOM Basics
Select HTML elements and change text, attributes, classes, and styles.
Example
const heading = [Link]("h1");
if (heading) [Link] = "Updated by JavaScript";
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 25: DOM Events
Handle clicks, keyboard events, input events, and form submission.
Example
[Link]("#myButton")?.addEventListener("click", () => {
[Link]("Button clicked");
});
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 26: Forms and Validation
Read input, validate values, prevent default submission, and give feedback.
Example
[Link]("#signup")?.addEventListener("submit", event => {
[Link]();
[Link]("Form submitted");
});
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 27: Local Storage
Persist browser data using localStorage and JSON.
Example
const user = { name: "Arun", age: 20 };
[Link]("user", [Link](user));
const saved = [Link]([Link]("user"));
[Link](saved);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 28: Promises
Understand pending, fulfilled, rejected, then, catch, and finally.
Example
const promise = [Link]("Success");
[Link](value => [Link](value)).catch(error => [Link](error));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 29: Async and Await
Write readable asynchronous code with async functions and await.
Example
async function loadData() {
try {
const response = await fetch("[Link]
[Link](await [Link]());
} catch (error) { [Link](error); }
}
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 30: Fetch API
Make HTTP requests, inspect responses, parse JSON, and handle errors.
Example
async function getData() {
const response = await fetch("[Link]
if (![Link]) throw new Error(`HTTP error: ${[Link]}`);
return [Link]();
}
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 31: Modules
Organize code with export and import.
Example
// [Link]
export function add(a, b) { return a + b; }
// [Link]
import { add } from "./[Link]";
[Link](add(2, 3));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 32: Map and Set
Use Map for key-value collections and Set for unique values.
Example
const unique = new Set([1, 2, 2, 3]);
const map = new Map();
[Link]("name", "Arun");
[Link](unique, [Link]("name"));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 33: Iterators and Generators
Understand iterable values, next(), [Link], function*, and yield.
Example
function* numbers() {
yield 1;
yield 2;
yield 3;
}
for (const n of numbers()) [Link](n);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 34: Optional Chaining and Nullish Coalescing
Safely access nested values and provide null/undefined fallbacks.
Example
const user = {};
[Link]([Link]?.name);
[Link]([Link] ?? "Guest");
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 35: Runtime and Event Loop
Learn the call stack, tasks, microtasks, promises, timers, and asynchronous execution order.
Example
[Link]("A");
setTimeout(() => [Link]("B"), 0);
[Link]().then(() => [Link]("C"));
[Link]("D");
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 36: Debugging
Use console tools, breakpoints, debugger, and browser developer tools.
Example
function divide(a, b) {
debugger;
return a / b;
}
[Link](divide(10, 2));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 37: Number Practice
Solve prime, factorial, palindrome, Armstrong, perfect, neon, happy, and related programs.
Example
function isPrime(n) {
if (n < 2) return false;
for (let i = 2; i * i <= n; i++) if (n % i === 0) return false;
return true;
}
[Link](isPrime(29));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 38: String Practice
Solve reverse, palindrome, frequency, duplicate, anagram, and character-count problems.
Example
function isPalindrome(text) {
const clean = [Link]().replace(/\s/g, "");
return clean === [...clean].reverse().join("");
}
[Link](isPalindrome("level"));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 39: Array Practice
Solve searching, sorting, maximum/minimum, duplicate removal, and aggregation problems.
Example
const numbers = [10, 25, 7, 30];
[Link]([Link](...numbers));
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 40: Mini Project: To-Do App
Combine arrays, DOM events, forms, rendering, and local storage.
Example
const tasks = [];
function addTask(text) {
if ([Link]()) [Link]({ text, done: false });
}
addTask("Learn JavaScript");
[Link](tasks);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 41: Mini Project: Quiz App
Combine questions, events, score tracking, and result display.
Example
const questions = [
{ question: "2 + 2 = ?", answer: "4" },
{ question: "Capital of France?", answer: "Paris" }
];
let score = 0;
[Link](questions);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 42: Mini Project: Expense Tracker
Combine forms, objects, arrays, totals, filters, and persistence.
Example
const expenses = [
{ title: "Food", amount: 10 },
{ title: "Bus", amount: 5 }
];
const total = [Link]((sum, item) => sum + [Link], 0);
[Link](total);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 43: Interview Preparation
Review scope, hoisting, closures, this, prototypes, promises, async behavior, equality, and DOM concepts.
Example
const obj = {
value: 10,
show() { return [Link]; }
};
[Link]([Link]());
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Chapter 44: Final Cheat Sheet
Quick reference for syntax, data structures, functions, DOM, asynchronous programming, and common
methods.
Example
const numbers = [1, 2, 3, 4, 5];
const result = [Link](n => n % 2 === 1).map(n => n * n);
[Link](result);
Practice: Change the example, test at least three different inputs, and write one small variation that solves a
related problem.
Complete JavaScript Learning Roadmap
• Stage 1 — Fundamentals: syntax, variables, data types, operators, strings, arrays, and objects.
• Stage 2 — Programming Logic: conditions, loops, functions, scope, closures, callbacks, and higher-order
functions.
• Stage 3 — Modern JavaScript: destructuring, spread, classes, modules, Map, Set, generators, and optional
chaining.
• Stage 4 — Browser Development: DOM, events, forms, validation, storage, and browser APIs.
• Stage 5 — Asynchronous JavaScript: promises, async/await, fetch, and the event loop.
• Stage 6 — Projects: build a to-do application, quiz application, expense tracker, and an API-based
application.
• Stage 7 — Interview Preparation: practice strings, arrays, objects, functions, closures, asynchronous
behavior, and DOM programming.