Course
JavaScript & Modern JavaScript (ES6+)
99 lessons across 12 modules
Beginner to advanced, as one course - ES6 is part of the language, not a sequel to it. Fundamentals, control flow, arrays and objects, the modern syntax, functional array methods, closures and this, async and the event loop, the DOM, modules and tooling, prototypes and classes, and debugging - ending in five projects. The road is laid out in full; lessons are being written one at a time.
JavaScript Fundamentals
What the language is, and the values it works with
What is JavaScript?
1The language of the browser, now running almost everywhere else too.
The same function running in a browser tab and in Node
JavaScript Runtime
2Engine, runtime, and host - and why the browser and Node differ.
document existing in one runtime and not the other
Variables
3Naming a value, and the three keywords that do it differently.
The same program with var, let, and const
Data Types
4Seven primitives and one object type, and typeof getting one wrong.
Why typeof null is "object"
Operators
5Arithmetic, comparison, logical - and == against ===.
Six comparisons that surprise everyone once
Type Conversion
6Explicit conversion, implicit coercion, and truthiness.
"5" + 1 against "5" - 1
Strict Mode
7Opting out of the silent failures, and why modules are strict already.
An assignment to an undeclared name, with and without it
Control Flow and Functions
Making decisions, repeating work, and naming it
if / else
8Branching on a condition, and the truthiness rules it applies.
Validating a form field in three branches
switch
9Matching one value against many, and the fall-through trap.
A missing break running the next case too
for Loop
10The counted loop, and its three parts.
Printing a numbered list
while Loop
11Looping until a condition changes, and making sure it does.
Retrying until success or a limit
do...while
12The loop that always runs at least once.
Prompting until the input is valid
Functions
13Declarations against expressions, and hoisting between them.
Calling a function above the line that defines it
Function Parameters
14Parameters against arguments, and what happens to missing ones.
A call with too few arguments, and undefined arriving
Return Values
15Returning, returning nothing, and the automatic-semicolon trap.
A return on its own line that returns undefined
Scope
16Global, function, and block scope - and which keyword gets which.
A var leaking out of an if block
Arrays and Objects
The two structures almost everything is built from
Arrays
17Ordered lists, zero-based indexes, and length.
Reading the last element without knowing the length
Array Methods
18push, pop, shift, unshift, slice, splice - which ones mutate.
slice leaving the array alone while splice changes it
Objects
19Keys and values, and the reference that makes copying tricky.
Two variables and one object
Object Properties
20Dot against bracket access, adding, deleting, and checking.
A property name held in a variable
Object Methods
21Functions stored on objects, plus keys, values, and entries.
Looping over an object with Object.entries
Nested Objects
22Objects inside objects, and reaching into them safely.
A user with an address with a city
Destructuring
23A first look - reading several values out in one line.
Pulling name and email out of a user object
Modern JavaScript (ES6+)
The syntax that changed how the language is written
let and const
24Block scope, the temporal dead zone, and why var is retired.
A loop of timeouts printing the wrong number with var
Arrow Functions
25Shorter syntax, implicit return, and no own this.
Returning an object literal and needing the brackets
Template Literals
26Interpolation, multi-line strings, and tagged templates.
Building a message without a single plus sign
Default Parameters
27Defaults evaluated at call time, and only for undefined.
A default that does not apply when null is passed
Rest Operator
28Collecting the remaining arguments or properties into one value.
A sum() that takes any number of arguments
Spread Operator
29Expanding an array or object in place - and copying one level deep.
Merging two objects, with the right-hand one winning
Destructuring
30The full syntax - defaults, renaming, nesting, and in parameters.
A function signature that documents its options object
Enhanced Object Literals
31Shorthand properties, methods, and computed keys.
An object built from variables with no repetition
Optional Chaining
32?. and ??, and the difference between ?? and ||.
A count of 0 surviving ?? and lost to ||
Array and Object Programming
Transforming data without writing the loop
map()
33Transforming every element into a new array of the same length.
Prices with tax added, the original untouched
filter()
34Keeping the elements that pass a test.
Active users out of all users
reduce()
35Folding an array into one value, and the initial value that matters.
A cart total, and reduce on an empty array throwing
find()
36The first element that matches, or undefined.
Looking up a user by id
findIndex()
37The position of the first match, or -1.
Replacing one item in place by its position
some()
38True as soon as one element passes, and it stops there.
Does any item in the cart need shipping?
every()
39True only if all pass - and true for an empty array.
Validating that every field is filled
includes()
40Membership by value, and why it finds NaN when indexOf does not.
Checking a role against an allowed list
sort()
41Sorting in place, the string default, and the comparator.
[10, 9, 1].sort() giving [1, 10, 9]
flat()
42Flattening nested arrays, and flatMap for the common case.
Every lesson from every module in one list
Functions and Advanced Concepts
Functions as values, closures, and this
First-Class Functions
43Functions stored, passed, and returned like any other value.
A table of handlers keyed by action name
Higher-Order Functions
44Functions that take or return functions.
Writing your own map to see there is no magic
Callbacks
45Passing a function for someone else to call later.
A sort comparator as the simplest callback there is
Closures
46A function remembering the scope it was created in.
A counter with genuinely private state
Lexical Scope
47Scope decided by where code is written, not where it is called.
The same function called from two places, one result
this
48Decided by how a function is called - four rules and the arrow exception.
A method losing this when passed as a callback
call()
49Invoking a function with an explicit this.
Borrowing one object method for another
apply()
50call with an array of arguments, and what spread replaced.
Math.max over an array, before and after spread
bind()
51A new function with this fixed permanently.
An event handler that keeps its object
Asynchronous JavaScript
One thread, and how it still does several things
Watch the event loop step by step →Synchronous vs Asynchronous
52Blocking against non-blocking, on a single thread.
A long loop freezing the page
Call Stack
53What is running right now, and the overflow you get from recursion.
Reading a stack trace from the bottom up
Web APIs
54Timers, fetch, and events - handled outside the engine.
Where a setTimeout actually waits
Event Loop
55Tasks, microtasks, and the order they really run in.
A promise callback beating a setTimeout of zero
Callbacks
56Asynchronous callbacks, error-first style, and the pyramid.
Four nested requests and nowhere to put the error
Promises
57A value that arrives later - states, then, catch, and chaining.
The same four requests, flat
async/await
58Promises written to read like synchronous code.
A sequential await that should have been parallel
Promise.all()
59Running in parallel, and failing on the first rejection.
Three requests at once, one failure losing all three
Promise.allSettled()
60Waiting for every result, success or failure.
A dashboard that shows what loaded and what did not
Error Handling
61try/catch with await, and the unhandled rejection.
A rejected promise nobody was listening to
DOM and Browser APIs
Reading and changing the page
DOM
62The page as a tree of objects your code can change.
The HTML source against the live DOM
Selecting Elements
63querySelector, querySelectorAll, and live against static lists.
A NodeList that does not update when the page does
Modifying Elements
64Text, attributes, classes, and creating new nodes.
textContent against innerHTML, and why it matters
Events
65Listening, the event object, and removing a listener.
A listener that cannot be removed because it was anonymous
Event Bubbling
66Events travelling up the tree, and stopping them.
A click on a button also firing its card
Event Delegation
67One listener on a parent handling every child.
A list whose new items work without new listeners
Forms
68Reading values, validating, and preventing the default submit.
FormData collecting a whole form in one call
Local Storage
69Persisting strings in the browser, and serialising everything else.
Saving an object and getting "[object Object]" back
Browser APIs
70Fetch, history, clipboard, and intersection observer.
Lazy-loading images as they scroll into view
Modules and Tooling
Splitting code across files, and the ecosystem around it
ES Modules
71The standard module system, and what changes inside one.
A script tag with type="module"
import
72Named, default, namespace, and dynamic imports.
Loading a heavy library only when a button is clicked
export
73Named against default exports, and why named usually wins.
A rename that a named export makes safe
CommonJS
74require and module.exports, and living alongside ES modules.
An ESM package that CommonJS code cannot require
npm
75Installing, dependencies against devDependencies, and the lockfile.
Two machines installing different versions without a lockfile
package.json
76The manifest - fields that matter and the ones that do not.
Reading a package.json and knowing what the project is
npm Scripts
77Naming the commands a project runs.
dev, build, test, and lint as the project contract
Environment Variables
78Configuration outside the code - and the browser caveat.
A secret that ended up in a frontend bundle
Advanced JavaScript
Prototypes, classes, and the less familiar built-ins
Prototypes
79How objects share behaviour without copying it.
A method found on the prototype rather than the object
Prototype Chain
80Lookup walking up the chain until it finds a match or reaches null.
Why every array has toString
Classes
81Class syntax - and the prototypes still underneath it.
A class and the prototype code it becomes
Inheritance
82extends, super, and when composition is the better answer.
A class hierarchy three levels deep, and its replacement
Getters and Setters
83Computed properties, and validating on assignment.
A fullName that stays in sync with its parts
Iterators
84The protocol behind for...of and spread.
Making a custom object iterable
Generators
85Functions that pause, and the lazy sequences they make.
An infinite id generator that never runs out of memory
Symbols
86Unique keys, and the well-known symbols the language uses.
Symbol.iterator as the hook for the previous lesson
WeakMap and WeakSet
87Holding data about objects without keeping them alive.
Caching per DOM node without leaking memory
Error Handling and Debugging
Failing clearly, and finding out why
try/catch
88Catching, finally, and what not to catch.
A catch that swallows an error and hides the bug
throw
89Throwing Error objects, never strings.
A thrown string with no stack trace
Custom Errors
90Extending Error so callers can tell failures apart.
ValidationError and NotFoundError handled differently
Debugging
91A method, not guessing - reproduce, isolate, then fix.
Narrowing a bug to one line by halving
Browser DevTools
92Console, Sources, Network, and the panels that answer questions.
Finding a failed request and its response body
Breakpoints
93Line, conditional, and event breakpoints - and stepping.
Pausing only on the loop iteration that goes wrong
Debugging Async Code
94Async stack traces, and breaking inside promise chains.
Tracing an error back across an await
JavaScript Projects
Five builds that use the whole course
Next: the React course →Calculator
95DOM, events, and state held in plain variables.
Chained operations and a clear button that really clears
Todo Application
96Arrays of objects, rendering, delegation, and local storage.
Add, complete, filter, and survive a refresh
Weather Application
97Fetch, async/await, loading and error states.
A search that handles an unknown city gracefully
API-based Application
98Several endpoints, parallel requests, and a service layer.
A dashboard assembled with Promise.allSettled
Final JavaScript Project
99Modules, classes, async, and the DOM, designed and built end to end.
A project planned before it is written, and reviewed after