JavaScript in depth
Through experiments you grasp how the language really works, from prototypes, this, closures, iterators and generators to Proxy, and can explain the cause of surprising behaviour.
Level 301 · 18 lessons · 15 practice labs
Lessons
Values and types
- Primitives and references
- Type coercion rules
- Numbers, floating point and BigInt
- Equality algorithms: ==, === and Object.is
- Short task: a coercion puzzle
Objects and functions
- The prototype chain
- The this binding: four rules
- Closures and memory
- Classes, private fields and static blocks
- Property descriptors and frozen objects
- Short task: a small model layer with prototypes
Advanced constructs
- The iteration protocol
- Generators and lazy sequences
- Symbols and well-known symbols
- Proxy and Reflect
- Map, Set, WeakMap and WeakRef
- Immutability and structuredClone
- Capstone: an observable state store
Practice labs
- Fix an invoice with a floating-point error: Rewrite an invoice calculation that loses cents to the 0.1 + 0.2 problem using integer cents.
- Fix a sort that scrambles numbers: Fix a price list sorted wrongly like [10, 9, 100].sort() with a comparator and explain why with coercion rules.
- Keep large IDs intact with BigInt: 19-digit order numbers from JSON get rounded; show the loss and carry them safely with BigInt or strings.
- Fix the lost this: Fix a counter that breaks because this is lost in a method passed to a timer, using bind or an arrow function.
- Trace a method along the prototype chain: Trace in the console which prototype each of an object's methods comes from and sketch the chain.
- Move copied methods onto a prototype: Move methods copied into each of a thousand vehicle objects onto a prototype and measure the memory difference.
- Protect a balance with a private field: Stop an account class's balance from being changed from outside with a #private field and methods.
- Deep-freeze the app settings: Deep-freeze the settings object and catch fields that something tries to change at runtime.
- Define a read-only computed property: Use defineProperty to add a non-enumerable, non-writable "total" property computed by a getter.
- Give a playlist for...of support: Add Symbol.iterator to a playlist object so it can be walked with for...of.
- Write an invoice number generator: Write a generator that produces invoice numbers in sequence and can be reset on request.
- Add field validation with a Proxy: Write a Proxy that throws when a wrong-typed value is assigned to a user object and logs every change.
- Collect unique tags with a Set: Collect blog post tags without repeats and sort them alphabetically.
- Make a cache leak-free with a WeakMap: A cache keyed by request objects keeps finished ones in memory; switch it to a WeakMap and show the difference.
- Catch deep-copy traps: Copy a state with dates, a Map and a circular reference with structuredClone instead of JSON and prove the differences.
About this course
Through experiments you grasp how the language really works, from prototypes, this, closures, iterators and generators to Proxy, and can explain the cause of surprising behaviour.
What you will learn
- Values and types
- Objects and functions
- Advanced constructs
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run in your own Kali Linux terminal that opens in the browser. Nothing to install; the lab starts clean in every lesson.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.