JavaScript Complete Course

Learn modern JavaScript from your first script to closures, async code, modules and the event loop, with projects you build as you go.

  • Beginner
  • 54 lessons
  • 23 hours

Start the course

JavaScript is the programming language of the web. It turns static HTML and CSS into pages that respond to people: forms that check their input, lists that filter as you type, dashboards that load fresh data. The same language also runs on servers and in build tools through Node.js.

This course goes from your first script to advanced patterns. The early lessons cover variables, types, operators, control flow, functions, arrays and objects. You then learn the DOM, events and debugging while building a small, accessible quiz app. The middle of the course covers closures, array methods, asynchronous code and fetch, and you build a course dashboard that loads, filters, sorts, searches and caches JSON data. The final modules cover modules, classes, the event loop, iterators, Proxy, performance, how engines work and designing a small library.

Every lesson uses modern JavaScript with small examples that run in the browser console or Node.js, with no frameworks and no third-party APIs.

Type the examples rather than copying them. Mistyping and fixing code is how you learn to read error messages, which is half of programming.

Curriculum

  1. 1 Getting started

    What JavaScript is, where it runs, and how to run it in the console, in a page and with Node.js.

    1. What is JavaScript? 8 min
    2. Running JavaScript: the console, script tags and Node.js 8 min

  2. 2 Values, types and operators

    Variables, data types, operators and equality, strings and numbers.

    1. Variables: let, const and var 7 min
    2. Data types and typeof 7 min
    3. Operators and comparison: == versus === 7 min
    4. Strings and template literals 7 min
    5. Numbers and Math 7 min

  3. 3 Control flow, functions and collections

    Conditionals, loops, functions, arrow functions, arrays and objects.

    1. Conditionals: if, else, switch and the ternary operator 7 min
    2. Loops: for, while, for…of and for…in 8 min
    3. Functions: declarations, parameters and return values 8 min
    4. Arrow functions 7 min
    5. Arrays: creating, reading and updating 7 min
    6. Objects: properties, methods and dot notation 8 min

  4. 4 The DOM, events and debugging

    Select and change elements, handle events and forms, and debug in DevTools while building a small quiz app.

    1. Selecting elements in the DOM 9 min
    2. Changing content, attributes and classes 8 min
    3. Handling events with addEventListener 8 min
    4. Working with forms in JavaScript 9 min
    5. Debugging with the console and DevTools 9 min

  5. 5 Functions and objects in depth

    Scope, closures, this, array methods, destructuring, object utilities, optional chaining, JSON and dates.

    1. Scope, hoisting and the temporal dead zone 7 min
    2. Closures 7 min
    3. The this keyword 7 min
    4. Array methods: map, filter, reduce, find and more 6 min
    5. Destructuring, spread and rest 6 min
    6. Working with objects: keys, entries, copying and freezing 6 min
    7. Optional chaining and nullish coalescing 6 min
    8. JSON: parse and stringify 6 min
    9. Dates, times and formatting with Intl 7 min

  6. 6 DOM patterns and asynchronous code

    Create elements, delegate events, then move from callbacks to promises, async and await, and fetch.

    1. Creating, inserting and removing DOM elements 8 min
    2. Event bubbling, capturing and delegation 9 min
    3. Callbacks and asynchronous code 8 min
    4. Promises 9 min
    5. async and await 7 min
    6. Fetching data with fetch() 10 min

  7. 7 Organising and hardening code

    Modules, error handling, classes, Map and Set, regular expressions, timers, and values versus references.

    1. ES modules: import and export 9 min
    2. Error handling: try, catch, finally and custom errors 9 min
    3. Classes 9 min
    4. Map, Set, WeakMap and WeakSet 9 min
    5. Regular expressions in JavaScript 9 min
    6. Timers: setTimeout, setInterval and requestAnimationFrame 9 min
    7. Values and references: copying and mutation bugs 9 min

  8. 8 Advanced JavaScript

    Prototypes, the event loop, promise combinators, iterators and generators, Proxy, memory, performance and testable code.

    1. Prototypes and inheritance 10 min
    2. The event loop, tasks and microtasks 10 min
    3. Promise combinators: all, allSettled, race and any 8 min
    4. Iterators and generators 8 min
    5. Async iteration and for await…of 8 min
    6. Getters, setters, Proxy and Reflect 8 min
    7. Memory management and leaks 8 min
    8. Performance: debouncing, throttling and layout thrashing 8 min
    9. Modern JavaScript features by year 7 min
    10. Writing testable, modular JavaScript 9 min

  9. 9 Expert topics

    How engines run your code, symbols, cancellation and retries, and designing a small library.

    1. How JavaScript engines work: parsing, JIT and hidden classes 8 min
    2. Symbols and well-known symbols 7 min
    3. Cancellation, retries and backoff 10 min
    4. Designing a small JavaScript library 9 min

Test yourself: JavaScript Complete Course: final quiz

15 questions. Pass mark 70%.

  1. Question 1 of 15 What does this code log?
    JavaScript
    const scores = [10, 20];
scores.push(30);
console.log(scores.length);
  2. Question 2 of 15 What does typeof null return?
  3. Question 3 of 15 Which of these expressions evaluate to true?

    Select all that apply.

  4. Question 4 of 15 Why does 0.1 + 0.2 === 0.3 evaluate to false?
  5. Question 5 of 15 What does this loop log?
    JavaScript
    const letters = ["a", "b"];
for (const i in letters) {
  console.log(typeof i);
}
  6. Question 6 of 15 Which statement about arrow functions is true?
  7. Question 7 of 15 What does this code log?
    JavaScript
    function makeCounter() {
  let count = 0;
  return () => ++count;
}

const a = makeCounter();
const b = makeCounter();
a();
a();
console.log(a(), b());
  8. Question 8 of 15 What is the value of result?
    JavaScript
    const result = [1, 2, 3, 4]
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
  9. Question 9 of 15 What does this code log?
    JavaScript
    const volume = 0;
console.log(volume || 50, volume ?? 50);
  10. Question 10 of 15 You need to show a name that a visitor typed into a form inside a paragraph. What should you use?
  11. Question 11 of 15 In what order are the letters logged?
    JavaScript
    console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
  12. Question 12 of 15 getUser() and getCourses() both return promises and do not depend on each other. Which code inside an async function starts both at once and waits for both?
  13. Question 13 of 15 A fetch() request gets a 404 Not Found response. What happens?
  14. Question 14 of 15 What does this code log?
    JavaScript
    const original = { tags: ["js"] };
const copy = { ...original };
copy.tags.push("css");
console.log(original.tags.length);
  15. Question 15 of 15 You load three independent reports and want every result, even if one of the requests fails. Which method fits?