JavaScript · Intermediate
Object Destructuring with Aliasing and Defaults
Destructuring allows extracting object properties into variables with custom names (aliasing) and default values if the property is missing.
Open snippet →Code library
Intermediate JavaScript exercises
Read these Intermediate JavaScript snippets line by line — each one comes with a written breakdown of what the code does and why.
JavaScript · Intermediate
Private State with Closures
A closure is created when an inner function references variables from its outer scope, allowing for private data encapsulation.
Open snippet →JavaScript · Intermediate
Resilient Parallel Async with Promise.allSettled
Unlike Promise.all, Promise.allSettled waits for all promises to finish regardless of whether they fulfilled or rejected.
Open snippet →JavaScript · Intermediate
Optional Chaining and Nullish Coalescing
Optional chaining (?.) stops evaluation if the reference is nullish, while nullish coalescing (??) provides a default value only for null or undefined.
Open snippet →JavaScript · Intermediate
Declarative Data Transformation
Chaining higher-order functions like filter and map allows for processing collections in a clean, readable, and declarative way.
Open snippet →JavaScript · Intermediate
Clean Async Cancellation with AbortController
The AbortController interface allows you to abort one or more Web requests as and when desired. This is essential for intermediate developers to handle component unmounting in frameworks or to prev…
Open snippet →JavaScript · Intermediate
Custom Iteration Logic with Generators
Generators are functions that can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. Using the '*' syntax and the 'yield' keyword, you can produce…
Open snippet →JavaScript · Intermediate
Dynamic Data Validation with Proxies
The Proxy object allows you to create a wrapper for another object, which can intercept and redefine fundamental operations for that object, such as property lookup, assignment, and enumeration. In…
Open snippet →JavaScript · Intermediate
Managing Private State with WeakMap
WeakMap is a collection of key/value pairs in which the keys are objects and are weakly referenced. This is an intermediate pattern for creating truly private state in JavaScript classes before the…
Open snippet →JavaScript · Intermediate
Advanced Processing with Tagged Templates
Tagged templates allow you to parse template literals with a function. The first argument contains an array of string literals, and the subsequent arguments are the values of the substituted expres…
Open snippet →JavaScript · Intermediate
Metaprogramming with Proxies
The Proxy object allows you to create a wrapper for another object, which can intercept and redefine fundamental operations for that object, such as property lookup, assignment, and enumeration.
Open snippet →JavaScript · Intermediate
Implementing Custom Iterators
By implementing the Symbol.iterator method, an object becomes 'iterable', allowing it to be used in for...of loops and with the spread operator. The method must return an object with a next() funct…
Open snippet →JavaScript · Intermediate
Function Currying
Currying is a pattern where a function with multiple arguments is transformed into a sequence of nesting functions, each taking a single argument. It is useful for partial application and creating…
Open snippet →JavaScript · Intermediate
The Power of 'finally' in Control Flow
The finally block always executes regardless of whether an error was thrown or a return statement was encountered in try/catch. Importantly, a return in finally will override any previous return va…
Open snippet →JavaScript · Intermediate
Tagged Template Literals
Tagged templates allow you to parse template literals with a function. The first argument is an array of string literals, and the remaining arguments are the evaluated expressions.
Open snippet →JavaScript · Intermediate
Encapsulation with Private Class Fields
Private class fields (using the # prefix) ensure that internal data cannot be accessed or modified from outside the class instance, providing true encapsulation in JavaScript.
Open snippet →JavaScript · Intermediate
Higher-Order Functions for Memoization
Memoization is an optimization technique where you store the results of expensive function calls and return the cached result when the same inputs occur again.
Open snippet →JavaScript · Intermediate
Memory-Safe Metadata with WeakMap
WeakMap allows you to associate data with an object without preventing that object from being garbage collected, making it ideal for managing private state or metadata.
Open snippet →JavaScript · Intermediate
Robust Async Control with Promise.allSettled
Unlike Promise.all, Promise.allSettled waits for all promises to finish (either fulfilled or rejected), allowing you to handle partial successes in a batch of operations.
Open snippet →JavaScript · Intermediate
Efficient Property Initialization with Nullish Assignment
The nullish coalescing assignment operator (??=) only assigns a value if the variable is null or undefined, which is safer than using || for falsy values like 0 or empty strings.
Open snippet →JavaScript · Intermediate
Custom Error Classes
Extending the built-in Error class allows you to create specialized error types for your application. This makes error handling more granular by allowing you to catch specific error types and attac…
Open snippet →JavaScript · Intermediate
Functional Pipe Composition
Pipe composition is a functional pattern where the output of one function becomes the input of the next. It allows you to build complex logic by combining simple, reusable functions in a readable t…
Open snippet →JavaScript · Intermediate
Object Destructuring with Aliasing and Defaults
Destructuring can extract nested properties and assign them to new variable names (aliasing) in a single step. You can also provide default values that are used if a property is missing or undefined.
Open snippet →JavaScript · Intermediate
Performance Optimization with Set
The Set object is a collection of unique values. Using a Set for lookups is significantly faster than using an array (O(1) vs O(n) complexity) and it provides an elegant way to remove duplicates fr…
Open snippet →JavaScript · Intermediate
Object Immutability with Spread and Rest
Maintaining immutability is crucial for predictable state management. Combining rest syntax to exclude properties and spread syntax to merge new ones allows you to derive new state without modifyin…
Open snippet →JavaScript · Intermediate
Controlling Object Mutability with Object.seal()
Object.seal() prevents new properties from being added and existing properties from being removed, but allows modification of existing property values. This is ideal for fixed configuration objects…
Open snippet →JavaScript · Intermediate
Data Grouping with Array.prototype.reduce()
The reduce method is a versatile tool for transforming an array into a single object. By initializing with an empty object, we can iterate through the list and dynamically build a categorized map o…
Open snippet →JavaScript · Intermediate
Encapsulating State using Closures
Closures allow a function to 'remember' the environment in which it was created. Here, the variable 'count' is inaccessible from the outside world, providing a pattern for private state without cla…
Open snippet →JavaScript · Intermediate
Race Conditions and Timeouts with Promise.race()
Promise.race() returns a promise that settles as soon as any of the input promises settles (either resolves or rejects). This is commonly used to implement timeouts for network requests or long-run…
Open snippet →JavaScript · Intermediate
Contextual Debugging with Error Cause
The 'cause' property in the Error constructor allows you to wrap an original error inside a new one. This preserves the stack trace and context of the root cause while allowing for higher-level err…
Open snippet →