JavaScript Pro: Mastering Advanced Concepts and Techniques

Explore how plain old JavaScript objects act as key-value stores with stringified keys, and how to access data via dot and bracket notation to create methods.

Explore mixing data with functions inside a JavaScript object, creating methods for triangle area and hypotenuse, and why this pattern isn’t scalable without classes.

Explore JavaScript classes as blueprints for reusable objects, instantiate them with the new keyword, and access shared methods like get area and get hypotenuse across distinct instances.

Learn how a constructor initializes a triangle's sides, uses the new keyword to create instances, and validates input to ensure A and B are numbers for accurate area calculations.

Design a bank account class with account number, account holder, and a zero-default balance; implement deposit and withdraw methods with balance updates and basic validation.

Learn how inheritance in JavaScript uses extends to let a child class reuse a parent class's methods like get area and get hypotenuse, while overriding describe.

Explore how to use super to call a parent constructor when extending a class, add new properties like color, and access inherited methods such as get area and get hypotenuse.

Learn how static properties and static methods attach to the class, not instances, as shown with a Cat class where Cat.species is shared by all cats.

Discover how static methods attach to the class itself rather than instances, use the class name to call them, and how this refers to the class in JavaScript.

Use static methods to group related functionality in a class and to create new instances via factories, as shown by a math object and a Jobfinder API.

Learn how getters and setters simplify object oriented patterns in JavaScript, using the get keyword to treat derived values like diameter as properties and reveal behind the scenes logic.

Master setters in JavaScript by intercepting property updates with the set keyword, validating radius and color through getters, underscore privacy, and static allowed colors.

Define a person class with first and last names, create a full name getter to combine them using dot notation, and a setter that splits a string to update both.

Master private class fields in JavaScript (ES2021) using a hash prefix to encapsulate a radius; access via a getter, while outside access remains blocked.

Define private methods in JavaScript with a pound symbol to restrict access to inside the class, enabling internal calls via this method while preventing external invocation.

Master the this keyword in JavaScript, and learn how call and bind reassign its value and affect this in methods versus stored functions.

Explore how this behaves differently in plain objects versus class methods, using a Cat example to show this.firstName access and errors when a method is stored in a variable.

Discover how this varies with the object a function is called on, and how global objects like window or global shape the behavior of methods such as console.log.

Explore how the this keyword is dynamically determined by how a function is called, often equal to the left-hand object on the dot, such as window or a custom object.

Explore how this behaves in classes and instances, including static methods and isolated method calls, and how this can become the class, the instance, undefined, or the window.

Learn how the call method explicitly invokes a function on a chosen object, sets this to that object, accepts arguments, and lets methods be reused across objects.

Explain how the apply method binds this and passes arguments from an array-like object. Compare it with call, demonstrate Math.max with arrays, and note spread as a modern alternative.

Use bind to permanently bind a function to a specific context, creating a new function with this fixed to that context, avoiding undefined this and repeated binding.

Learn how to bind this in a timer callback by using a counter class with setInterval, fixing window as this, and comparing binding in place vs extracting a method.

Learn how arrow functions handle the this keyword, showing they don’t create a new this, preserve the cat instance in setTimeout, and reduce the need for bind in many cases.

Explore how the keyword this depends on execution context, and use bind or arrow functions to preserve this in callbacks, timeouts, and event listeners.

Explore object oriented JavaScript behind the scenes, including prototypes, constructor functions, and the new keyword, and see how the class keyword sits as syntactic sugar over prototypal inheritance.

Learn how the new keyword in JavaScript creates a new object, binds this to it, and returns that object when using constructor functions or the class keyword.

Explore how JavaScript prototypes share methods like bark and sleep across all dogs, using the new keyword to create objects linked to a dog prototype, with constructor references.

Explore constructor functions and prototypes, then see how classes simplify definitions by placing methods on the prototype, and how extends and super enable prototype-based inheritance across a chain.

Explore JavaScript prototype concepts with Object.create to set a prototype, learn Object.getPrototypeOf and Object.setPrototypeOf, and use isPrototypeOf to inspect prototype chains.

Master promises as a structured alternative to callbacks, learn their three states—pending, resolved, and rejected—using fetch and the Pokemon API to write cleaner, error-aware async code.

Master promises with then and catch to handle resolved data and errors from fetch, log responses, and chain promises to avoid callback hell.

Apply a single catch at the end of a promise chain to handle any rejection, including fetch, and achieve cleaner, flatter asynchronous code.

Master async and await in JavaScript to simplify promises, declare async functions, and pause execution with await, using fetch examples to show non-blocking, synchronous-like code.

Learn how to use async/await to perform four fetch calls in series within an async function, pausing until each promise resolves, and understand promises, error handling, and syntactic sugar.

Master how to handle errors in async functions using try and catch, catching rejected promises with a single try-catch. Explore practical examples with fetch and robust error handling.

Compare then and catch with async and await to handle parallel async operations using multiple fetch calls, and learn when to use promise objects directly versus async/await.

Combine multiple asynchronous operations with Promise.all to run an array of promises in parallel and resolve when all succeed. Use async/await to log results and catch any rejection.

Master asynchronous patterns with promise.all settled to wait for all promises, then separate fulfilled and rejected results.

Learn to create custom promise objects with new Promise and the resolve and reject functions. Promisify callback-based code, use async/await or then, and control timing with setTimeout examples.

Learn how to convert Node's callback-based fs.readFile into promises, implement promise chaining and async/await for cleaner, error-handled file reads.

Learn how optional chaining simplifies accessing nested properties in JavaScript, preventing errors from undefined values when reading user data like name, address, coordinates, and optional greet methods.

Discover the array method at, which returns the element at a given index and supports negative indices to count from the end, unlike square brackets.

Learn how the logical or assignment ||= works by updating an object's properties with short-circuit evaluation, assigning a fallback value only when the left side is falsy.

Explore the logical and assignment operator &&=, updating a value only when the left side is truthy through short-circuiting, illustrated with a logged-in user’s color preference.

Demonstrate the nullish coalescing assignment operator, updating a variable only when it is null or undefined, preserving zero and empty strings, unlike the logical or assignment.

Discover new OOP features in JavaScript, including private fields using the hash syntax, public fields, private methods, and static initialization blocks that run once when the class loads.

Explore how not a number (NaN) arises in JavaScript from 0/0 or invalid string coercion, and compare isNaN with Number.isNaN to determine when a value is not a number.

Explore automatic semicolon insertion in JavaScript and how line breaks and editor behavior can affect return statements and object literals. See why using semicolons consistently helps prevent subtle runtime errors.

Explore the versatile array.from method, turning iterables such as strings, sets, and node lists into arrays, using a mapping function and length to generate sequences.

Explore JavaScript scope and hoisting, from global and function scope to block scope, and compare var with let and const as it relates to closures.

Explore how let and const differ from var in scope, showing var adds to window and risks collisions, while let and const are block- and function-scoped and not on window.

Explore how JavaScript uses static lexical scoping, not dynamic scope, and see how variable scope is determined at declaration through an example with print animal and a global animal.

Explore hoisting in JavaScript, where var declarations move to the top of their enclosing scope and initialize to undefined, while let and const trigger a temporal dead zone until initialization.

Explore closures in JavaScript by defining a function inside another function that accesses outer variables, returning the inner function to preserve scope and enable persistent data across calls.

Discover closures by creating a counter with a private variable, exposed via an object of methods like increment, decrement, and get count, using an immediately invoked function expression.

Explore closures in loops with setTimeout, showing how var loses the loop value and how let or an immediately invoked function expression preserves it.

Master JavaScript timers with setTimeout and related APIs, learning basic syntax and delays in milliseconds, including setInterval, clearTimeout, recursive timers, throttling, debouncing, and requestAnimationFrame.

Explore setInterval, a built-in window function that repeats a function at a fixed delay, and build a simple countdown timer that updates an on-page element every second.

Learn how to stop a running interval by capturing the interval id from setInterval and using clearInterval to halt the countdown and display time is up.

Learn how clear timeout cancels a scheduled function by using the timeout ID returned from setTimeout, with practical examples like canceling a 5-second redirect and debouncing.

Debouncing prevents excessive function calls by delaying execution after user input. In a live search, it waits for typing to pause before querying the api.

Create a reusable debounce higher-order function that takes a callback and delay, returning a debounced wrapper that clears timeouts, delays calls, and passes through any arguments to the callback.

Learn how requestAnimationFrame powers smoother, more performant animations by syncing with the next browser paint, compare it to setInterval, and implement frame-based rotation for visuals.

Master the smooth scroll to top using requestAnimationFrame, time stamps, and a one-second animation that computes start, end, and progress to update the vertical scroll with a performant frame-by-frame loop.