Free Handbook · Runs in your browser

JavaScript Handbook

Learn JavaScript by running it. Seventeen modules from your first console.log() to a job: every example is editable and runs right here, the event loop and closures are traced line by line, and the real errors you will hit are explained with the fix. Async, the DOM, classes and prototypes, problem-solving patterns, data structures and algorithms, JavaScript with Node, React, TypeScript and Postgres, sixty interview questions, a certification exam, and a resume check at the end.

0 / 111 lessons🔥 0 day streak

ShareX LinkedIn

How this handbook works

Every lesson has code you can edit and run right here — the interpreter runs in your browser, nothing to install, a trace of what the interpreter did line by line where that matters, and the real error you will hit next, with why the interpreter said it and the fix. Lessons tick themselves as you go. Finish the handbook, sit the exam, get the certificate, then take your resume through the ATS checker and on to jobs.

17modules

111lessons

85runnable examples

46real errors explained

Module 00 · what you'll be able to do

Know where JavaScript runs — browser, Node.js, and right here on this page
Write, run and edit your first program without installing anything
Read a line-by-line trace of what the engine did
Use the ticks, the progress bar and the tutor to work through the handbook

Why JavaScript

JavaScript is the only language every web browser runs, which makes it the most widely deployed language on Earth. With Node.js it also runs servers, command-line tools and build systems; with React and friends it runs most of the apps you use; with TypeScript on top it runs the largest codebases. Learn it once and you can build the whole stack.

It is also a language with a history: designed in ten days in 1995, patched for thirty years, and now modernised every year by the ECMAScript standard. That is why there are three ways to declare a variable and two kinds of equality. This handbook teaches the modern language (ES2015 and later) and tells you exactly which old habits to avoid and why.

The browser — the DOM, events, fetch, everything you see on a web page (Module 10).
Node.js — servers, APIs, scripts, tooling. Same language, no browser (Modules 05 and 14).
Everywhere else — Electron desktop apps, React Native mobile apps, serverless functions, browser extensions.

Three ways to run JavaScript

You do not need to install anything for this handbook — every example below has a Run button and executes in your browser. But you should know the other two, because you will use them on day one of a job.

1
1. The browser console
Press F12 (or ⌘⌥J on a Mac) on any web page and click Console. Type 2 + 2 and press Enter. That is a JavaScript engine (V8 in Chrome, SpiderMonkey in Firefox) — the same one that runs the page.
2
2. Node.js
Install from nodejs.org (choose LTS). Then node in a terminal opens an interactive prompt, and node hello.js runs a file. Check with node --version.
3
3. Right here
Every javascript block on these pages is an editor. Press Run, or ⌘/Ctrl + Enter. Edit the code and run again — that is the whole method.

javascriptEdit it. ⌘/Ctrl + Enter runs.

console.log("Hello, World!")
console.log(2 + 2)
console.log("JavaScript".length)

You should see

Hello, World!
4
10

Your turn

Change the message. Print your name. Then print 7 * 6.

What runs your code on this page

A JavaScript interpreter written in JavaScript (sval), inside a Web Worker, with the real built-ins — Array, Map, Promise, JSON, timers. Nothing is sent to a server. The one thing it does not have is a web page: there is no document in a worker, so the DOM module shows code you paste into a real browser instead.

Your first program, traced

Add two numbers and print the result. Five lines — and every idea in them (variables, operators, function calls, strings) gets its own lesson in Module 01. First, run it. Then step through the trace to see what the engine did, line by line.

javascriptEdit it. ⌘/Ctrl + Enter runs.

const first = 12
const second = 30
const total = first + second
console.log("The sum is", total)
console.log(`${first} + ${second} = ${total}`)

You should see

The sum is 42
12 + 30 = 42

Your turn

Change first to "12" (a string, in quotes) and run again. Surprised? Module 01 explains coercion — it is the first JavaScript gotcha everyone hits.

VisualizeWhat the engine didStep 1 / 4

1const first = 12
2const second = 30
3const total = first + second
4console.log("The sum is", total)

Line 1

Create a constant named first and bind it to the number 12.

Variables now

first 12

All 4 steps as a table

Step	Line	What happened	Variables now
1	1	Create a constant named `first` and bind it to the number 12.	`first = 12`
2	2	Same for `second`.	`second = 30`
3	3	Evaluate the right side first: look up `first` (12) and `second` (30), add them. Bind the result to `total`.	`total = 42`
4	4	Call the `log` function that lives on the `console` object, with two arguments. It prints them separated by a space.

Variable: A name bound to a value. const for names that never get reassigned (most of them), let for ones that do. Never var in new code — Module 01 says why.
Expression: Anything that produces a value: 12, first + second, "a".length.
Statement: An instruction: a declaration, an if, a loop. A program is a list of statements.
Template literal: A string in backticks. ${…} inside it drops in any expression. Use it instead of + to build strings.

Comments, semicolons and style

javascriptEdit it. ⌘/Ctrl + Enter runs.

// A line comment: the engine ignores everything after //

/* A block comment
   can span lines. Use it for a paragraph. */

/**
 * A doc comment above a function describes what it does.
 * Editors show it when you hover the name.
 */
function area(width, height) {
  return width * height // trailing comment
}

console.log(area(3, 4))

// Semicolons are optional in modern JavaScript: the engine inserts them at
// line ends. Most teams pick one style and let a formatter (Prettier) enforce it.
const a = 1;
const b = 2
console.log(a + b)

You should see

12
3

The one place missing semicolons bite

A line that starts with (, [ or a backtick can be glued onto the previous line:

const x = 1
[1, 2].forEach(…)

is read as 1[1, 2]. If you skip semicolons, never start a line with those characters — or let Prettier handle it. Comments explain why, not what: // retry: the API rate-limits bursts, not // add one to i.

How this handbook works

Seventeen modules, each its own page, each a set of lessons like this one. The rail on the left lists them; the bar at the top and the pill at the bottom-left track how far you are. A lesson ticks itself when you reach its end or run its code, and the tick survives closing the tab — no account needed.

Run blocks are editors. The fastest way to learn any line is to change it and see what happens.
Traces show what the engine did line by line — the mental model that makes async, closures and this click.
Error cards are the real errors you will hit next, with why the engine said that and the fix. Module 11 collects the fifteen most common.
Interview questions appear where the topic is taught and are collected in Module 15, tiered junior / mid / senior.
The handbook ends with a certification exam (Module 16 → exam), then the ATS resume checker and the job board. From console.log() to a job.

The tutor

The pill at the bottom-left opens a tutor that can see the code you last edited on this page. Ask it "why did this print undefined" and it answers about your code. It is a language model — verify what it says by running it.

Using AI to learn (without letting it learn for you)

ChatGPT and Claude can write any example on these pages in seconds. That is exactly why you should type them yourself: the goal is not the code, it is the model in your head that lets you read someone else's code, spot the bug in an interview, and know what to ask the AI for. Use AI the way a senior engineer does — to explain, to review, to unblock — not to produce the thing you were supposed to learn.

Do this

Paste an error and ask what it means — then fix it yourself
Ask "what is the difference between let and var, with an example"
Write the function first, then ask for a review
Ask for three edge cases you forgot

Not this

Ask for the answer to the "Your turn" task and paste it in
Copy a solution you cannot explain line by line
Skip running the code because the AI said it works
Use it in an interview (they can tell)

Ready? Module 01 starts with the four things every program is made of: values, variables, operators and output.

Module 01 →Fundamentals

Every lesson in the handbook

17 modules · 111 lessons · each one ticks itself when you reach the end or run its code.

00Getting Started0 / 6

Why JavaScript Three ways to run JavaScript Your first program, traced Comments, semicolons and style How this handbook works Using AI to learn (without letting it learn for you)

01Fundamentals0 / 7

Variables: let, const and why not var Data types and typeof Coercion and conversion: "5" + 3 Output and input Operators Precedence and associativity Keywords, identifiers and strict mode

02Flow Control0 / 6

if, else if, else switch for and for…of while and do…while break, continue and labels for…in, forEach and which loop to use

03Data Types0 / 7

Numbers and Math Strings Arrays Objects Map and Set JSON Choosing the right type

04Functions0 / 7

Three ways to define a function Parameters: defaults, rest, destructuring Scope, hoisting and the temporal dead zone Closures this: four rules Recursion map, filter, reduce and friends

05Modules & Packages0 / 5

ES modules: export and import CommonJS: require and module.exports npm and package.json Node.js vs the browser Standard library tour

06Async JavaScript0 / 6

The event loop Callbacks and callback hell Promises async / await fetch and JSON APIs Timers, intervals and event emitters

07Errors & Exceptions0 / 5

The built-in error types try / catch / finally throw and custom error classes Reading a stack trace Errors in async code

08Objects, Prototypes & Classes0 / 6

Objects with methods The prototype chain Classes Inheritance and super Getters, setters, static and #private Composition, mixins and making a class iterable

09Advanced JavaScript0 / 7

Destructuring and spread, in depth Iterators and generators Immutability and copying Regular expressions Dates and time Closures in practice: debounce, memoize, curry Symbol, WeakMap and Proxy

10DOM, Events & the Browser0 / 5

The DOM: a tree you can change Events: listeners, bubbling, delegation Forms localStorage, fetch and the browser APIs A tiny app: state → render → events

11Errors & Debugging0 / 5

The fifteen errors every beginner hits console beyond log The debugger and DevTools Reading library and framework errors "It works on my machine"

12Problem Solving0 / 7

How to read a problem Big-O in plain English Pattern 1 & 2: two pointers, sliding window Pattern 3 & 4: hash map, stack Pattern 5 & 6: recursion / backtracking, sorting Pattern 7 & 8: BFS / DFS, dynamic programming Worked examples: from statement to solution

13Data Structures & Algorithms0 / 14

What a data structure is (and why you already use them)Arrays: what an Array really is Hash maps and sets: O(1) lookup Stacks: last in, first out Queues: first in, first out (and why shift() is a trap)Linked lists: nodes and pointers Recursion, revisited: the call stack you can see Trees and binary search trees Heaps: always know the smallest Graphs: BFS and DFS Searching: linear vs binary Sorting: from bubble sort to toSorted()Dynamic programming, gently Cheat sheet and what to practise

14JavaScript + Tools0 / 9

JavaScript + Node.js JavaScript + npm scripts, ESLint, Prettier JavaScript + Express JavaScript + React JavaScript + TypeScript JavaScript + PostgreSQL JavaScript + Docker JavaScript + Jest / Vitest JavaScript + Git

15Interview Questions0 / 5

Junior — 25 questions Mid-level — 25 questions Senior — 10 questions The coding round, walked through The take-home checklist

16Job Ready0 / 4

What a JavaScript resume must show Portfolio: three projects that get callbacks Where the jobs are, and how to read a posting Certification exam → certificate

Frequently asked questions

Is this JavaScript handbook free?

Yes — every module, every runnable example and the certification exam are free, with no signup and no paywall. The exam asks you to sign in with Google so the certificate can carry your name.

Do I need to install Node.js?

No. Every example runs inside your browser: press Run and a JavaScript interpreter is loaded once, then everything executes locally in a Web Worker. Nothing you type is sent to a server. Module 00 shows you how to install Node.js for when you want to build real projects, and Module 14 builds one.

How long does it take?

Reading and running the seventeen modules takes roughly 22 to 28 hours. Most people do a module a day. The lessons tick themselves as you go, so you can stop and resume where you left off.

What is different from freeCodeCamp, MDN or W3Schools?

They teach syntax and reference; this handbook also traces the event loop and closures step by step, explains the fifteen errors every beginner hits and why the engine says them, teaches eight problem-solving patterns and a data-structures-and-algorithms module written for beginners, shows JavaScript with Node, Express, React, TypeScript, PostgreSQL, Docker and Jest, has sixty interview questions by level, and ends at the ATS resume checker and the job board.

Which JavaScript version?

Modern JavaScript — ES2015 through ES2024: let and const, classes with private fields, async/await, modules, optional chaining, destructuring, toSorted and Object.groupBy. Everything taught runs in every current browser and in Node 20 or newer.

Is there a certificate?

Yes. Pass the 25-question exam with 70% or more and generate a SolutionGigs JavaScript certificate with your name, score, date and a certificate ID — download it, print it or add it to LinkedIn.

Finish the JavaScript handbook, then get hired

Sit the exam for your certificate, run your resume through the ATS checker, and see the jobs that ask for exactly this.

Check my resume

Found this course useful? Share it.

ShareX LinkedIn

Comments

Join the conversation. Sign in to leave a comment — we'd love to hear your thoughts.