JavaScript Deep Dive

About this course

Most JavaScript bugs that reach production are not exotic. A discount of zero gets replaced by a default, a copy of an order turns out to share its lines with the original, a sales report puts midnight sales on the wrong day, and one slow report freezes every other request on the server. This course explains the mechanisms behind those bugs, so you can predict what code will do instead of guessing.

You work through eight lessons set at Mangrove Market, a fictional grocery chain with stores, a customer app, a Store app for staff and a Partner app for corner shops. Each lesson runs real code in Node and shows its real output, draws the mechanism as a diagram, and ends with auto-checked JavaScript exercises that run in your browser, with tests whose names tell you what is still wrong.

By the end you can read and review JavaScript with confidence: types and safe defaults, closures and this, references and immutable updates, arrays, dates and money in integer cents, classes and ES modules, the event loop, promises with timeouts and concurrency limits, and debugging and testing with VS Code and Vitest.

What you will be able to do

• Predict what everyday JavaScript returns, including coercion, falsy values, ?? and ?., and avoid the classic default-value and equality bugs
• Use closures, this, prototypes, classes and ES modules deliberately, and explain lookup, hoisting and the temporal dead zone
• Transform data without mutating it, choosing correctly between spread, structuredClone and immutable updates for React-style state
• Handle money as integer cents, format it with Intl for USD or a local currency, and compute business days in each store's own time zone
• Predict the order of timers, promises and await, keep the event loop free, and write async code with allSettled, timeouts, retries and concurrency limits
• Find bugs from stack traces and VS Code breakpoints, and lock fixes in with Vitest tests, mocks and a coverage gate

Syllabus

8 stops, about 5 h in total. Each stop fills in when you complete the lesson.

1. 1

   JavaScript in one sitting

   Welcome to JavaScript Deep Dive. This first lesson is a fast tour of the parts of JavaScript you use every day: values and types, variables, comparisons, conditions and loops. Each part comes with the trap that catches people, so the deeper lessons that follow have solid ground to stand on.

   30 minBeginnerEpisode2 exercises

   JavaScript fundamentalsType coercionMoney and dates

2. 2

   Functions, scope and closures

   Functions are the main building block of JavaScript, and most of the language's surprising behaviour comes from three rules: where a name is visible, when it exists, and what this means. This lesson shows the mechanism behind each, then uses closures to build discount rules and a cache.

   35 minIntermediateEpisode3 exercises

   Functions and closuresScope and hoistingPure functions

3. 3

   Objects, arrays and references

   When you assign an object, JavaScript does not copy it. It copies a reference, so two names can point at the same order and a change through one shows up in the other. This lesson shows the mechanism, the copy tools and their limits, and the immutable update style React and Redux depend on.

   35 minIntermediateEpisodeSimulator2 exercises

   References and immutabilityDeep and shallow copiesUnit testing

4. 4

   Working with data: arrays, Maps, JSON, dates and money

   Most business code takes rows of data, reshapes them and adds them up. This lesson covers the tools for that and the four places where they quietly give wrong answers: sorting, JSON, time zones and decimal money.

   40 minIntermediateEpisode3 exercises

   Data transformationMoney and datesJSON and serialisation

5. 5

   Prototypes, classes and modules

   Two mechanisms decide how a JavaScript codebase is organised: how objects share behaviour (prototypes, with classes on top) and how files share code (modules). NestJS is built on classes and React Native on modules, so knowing what happens underneath turns confusing errors into quick fixes.

   35 minIntermediateEpisode2 exercises

   Classes and modulesPrototypesComposition over inheritance

6. 6

   The event loop

   JavaScript runs your code on one thread, yet a Node API serves hundreds of stores at once and an app stays responsive while it waits for the network. The event loop is how. This lesson shows the machinery step by step, how to predict the exact order of output, and what to do when one slow job freezes everyone.

   40 minAdvancedEpisodeSimulator1 exercise

   Event loopAsync JavaScriptPerformance

7. 7

   Async JavaScript: callbacks, promises and async/await

   Almost everything your team's code waits for is slow: the network, the database, a file, a payment gateway. This lesson shows how JavaScript waits without freezing, how to run waits in parallel safely, and how to stop waiting when something hangs.

   40 minAdvancedEpisodeSimulator3 exercises

   Async JavaScriptError handlingTimeouts and retries

8. 8

   Errors, debugging and testing

   Bugs are normal. What separates a calm team from a stressed one is how fast they find the cause, and whether they add a check so the same bug cannot come back. This lesson gives you all three skills: reading errors, debugging in VS Code, and writing tests with Vitest.

   40 minIntermediateEpisode2 exercises

   DebuggingUnit testingError handling

9. Capstone: Build the nightly store sales summary

   A realistic project with a rubric and a model answer.

10. Final exam and certificate

    10 questions drawn at random, 70% to pass.

Capstone project

Check what you know

Questions