Advanced JavaScript

Master JavaScript scope, including global, local, nested, and block scopes, and see how closures and module patterns encapsulate variables while avoiding global namespace pollution.

Explore closures and scopes in JavaScript, showing how a function accesses a parent scope and parameters after finishing, via a make counter example and its incrementing inner function.

Demonstrate how scope and closures create private variables with factory functions in JavaScript. Expose only the public interface while keeping capitalized string and print string private, enabling encapsulation and modularity.

Use factory functions in JavaScript to encapsulate player data with private variables and public methods. Expose actions like get level, get name, attack, and damage, while keeping internals private.

Learn how to selectively inherit methods from one function factory using prototype-based inheritance and ES6 destructuring, enabling you to reuse a single 'same name' method while keeping other properties private.

Explore the module pattern using an immediately invoked function expression and use strict to encapsulate code with private and public methods, creating a singleton-like service module exported via its interface.

Implement private variables denoted by an underscore and a private calculate function inside an iife to reveal public methods getTaxDue and getNationalInsurance in a singleton tax calculator.

Explore how modules declare dependencies and expose public methods like make uppercase and write to the DOM, using dependency injection and an immediately invoked function expression to ensure testable code.

Explore how the Bootstrap alert module is implemented as an immediately invoked function expression with global and factory dependencies in the Bootstrap JS dist, on GitHub.

Explore JavaScript prototype inheritance, where objects inherit properties and methods from a parent via the hidden prototype chain, using rabbit and animal as examples.

Explore JavaScript prototype inheritance across multiple levels, from animal to rabbit to long ear, and how the prototype chain provides inherited methods like walk.

Explore how accessor properties work with prototypes, where a user object provides a full name getter and setter, and an admin object inherits to read and set the full name.

Understand that in a method call, this points to the calling object, not its prototype; sleep on rabbit adds a sleeping property to the rabbit instance.

Compare object keys and the for...in loop to reveal own versus inherited properties, and use hasOwnProperty and property descriptors to inspect enumerability.

Learn the modern, recommended way to set an object's prototype in JavaScript using Object.create, enabling explicit prototype inheritance with inherited methods and avoiding __proto__ manipulation.

Share methods and properties across objects with prototypes to reduce duplication, avoid modifying built-ins, and consider performance using Object.create for safe prototype-linked creation.

Explore the event loop and how JavaScript handles asynchronous tasks on a single thread using the heap and code stack, with browser engines like V8.

Illustrate how the JavaScript runtime environment uses the Web API, DOM, canvas, and fetch APIs, and how the event loop, task queue, and micro task queue handle callbacks and promises.

The lecture shows how promises populate the micro task queue and how it differs from the task queue, shaping call stack, web api, and the event loop.

Learn how functions are passed as arguments and executed after the main function completes, enabling callbacks for asynchronous tasks like file reads, API calls, and events.

Learn how callback functions enable asynchronous operations, using setTimeout examples to simulate delays, and discover how nested callbacks, or callback hell, hurt readability and error handling.

Explore the difficulties of decoding callback functions in asynchronous JavaScript, including error handling, nesting, and readability, and compare our brain's sequential thinking with the engine's execution order.

Explore the inversion of control problem with callbacks in a purchase tracking example, highlighting risks like multiple or missing callbacks and callback hell, and preview promises as the ES6 solution.

Explore how promises address callback hell and inversion of control in JavaScript, outlining pending, fulfilled, and rejected states, and showing a promise constructor with resolve and reject and converting callbacks.

Discover how to invoke promises, chain then and catch for fulfillment or rejection, and manage resolve, reject, and error handling to avoid callback hell.

Promises organize asynchronous tasks with clean chaining of thens, making the code easier to read and reason about than nested callbacks.

Learn to handle multiple errors in a promise chain by adding individual catch blocks after each then, enabling continued execution and fine-grained error control.

Explore promise chaining and error handling in JavaScript, where each then returns a new promise, and learn how chained vs separated then calls affect settled value and inversion of control.

Promise-based flow to replace callbacks, race track purchase against a timeout with Promise.race, and regain control to finalize transactions even if analytics fail.

Create a custom promise implementation to reveal how the native Promise API works and why it behaves that way, using my promise class with then, catch, resolve, and reject.

Explore implementing the then function for a custom promise, returning a new promise, handling pending, fulfilled, and rejected states by saving and invoking callbacks with resolve and reject.

Implement the unfulfilled with resolve in the custom promise, validating the callback, invoking it with the settled value, handling errors, and queueing a microtask to resolve or reject.

Implement the on rejected with resolve path for a custom promise, queuing a microtask, handling on rejected callbacks, and propagating values through resolve or reject with proper state updates.

Demonstrate building a custom promise from scratch, with state, then and catch, and chaining via a bespoke waiting for function, alongside native promise comparisons.

Learn how to use Promise.all to run multiple promises concurrently, wait for all to resolve, and handle errors, enabling parallel resource loading and batch API requests.

Explore how the fetch API returns promises, chain then, convert responses to JSON, and render cat GIFs from Giphy while learning promise-based workflows in asynchronous JavaScript.

Explore how async/await in es eight wraps promises to simplify asynchronous code, using the async keyword on functions, returning values as resolved promises, and using then to access results.

Use the await keyword inside async functions to pause execution until a promise resolves, assign the result to a variable, and write non-blocking code that looks synchronous.

Convert promise-based code to async/await by creating an async fetch gifs function, awaiting fetch, response.json, and updating the image element with the gif url.

Explore how await accepts thenable objects and resolves values via a callable then method, enabling compatibility with promise-like objects.

Wrap the Giphy API call in a try block and catch errors with async/await, logging issues to the console. Compare promise-based error handling with async/await to ensure robust error responses.

Explore modern JavaScript and its significant advancements from es six to es eight, learning alternatives to error-prone features, additions found in other languages, and meta programming capabilities.

Learn how let and const provide block scope to replace var, preventing hoisted undefined variables and reference errors in conditional blocks within modern JavaScript.

Learn how let differs from var: you cannot access before initialization (var hoists to undefined), and you cannot redeclare let, improving variable safety.

Const declarations create constants that must be initialized immediately and cannot be reassigned; for objects, you can update properties, but you cannot reassign the variable, and const is block-scoped.

Discover template strings in modern JavaScript, enabling embedded expressions with ${...}, multi-line strings, and intuitive string interpolation using backticks.

Learn how to pad strings in modern JavaScript using padStart and padEnd to produce fixed-width outputs, with examples showing leading zeros such as 007 and alignment for reports.

Advanced JavaScript lecture explains how default parameters give functions fallback values in the parameter list, preventing falsey inputs from breaking calls and simplifying code.

Continue using default parameters with valid expressions, including set height; apply previous-parameter defaults for subsequent values, as in multiply where num2 defaults to num1.

Explore the rest operator in modern JavaScript by collecting extra parameters into an array and summing them, and learn that the rest parameter must be last.

Understand the spread operator in JavaScript, spreading array elements into individual arguments, contrasting with the rest operator, and comparing it to apply for combining arrays and function calls.

Explore arrow functions in JavaScript, including implicit returns in one-line expressions, parameter handling (single vs multiple), and the difference between function declarations and function expressions assigned to variables.

Explore how arrow functions resolve the get full name this context, using lexical this to replace self hacks and ensure this.firstName and this.lastName access the correct object.

Explore modern JavaScript objects and learn the object literals shorthand, creating objects where property names and values are the same, improving code brevity and clarity.

Destructure objects to pull properties like X, Y, and Z into variables using braces. Destructure arrays with flexible variable names, noting counts must match to avoid undefined values.

Advanced JavaScript explains how to add a function to an object as a method, using function expressions and ES6 shorthand syntax for defining object methods.

Explore the object.assign method in modern JavaScript to merge a defaults object with a provided options object, giving precedence to user-supplied properties and creating a final options object.

Explore why maps were added to JavaScript and how they store key value pairs more flexibly than objects. Use maps with set, get, has, delete, size, and clear.

Iterate over maps with for-of to access keys and values via keys and values methods. Use maps to store keys of any data type and preserve insertion order.

Join the memory-efficient weak maps, which use only objects as keys, disallow primitives and allow garbage collection of unused key objects while the map remains in use.

Learn how to use JavaScript sets to store unique values, create sets with the Set constructor, add and delete items, check membership with has, inspect size, and clear them.

Discover how to use sets to remove duplicates from an array in JavaScript and convert the resulting set back to an array with Array.from.

Create a union of two sets, then compute their intersection and difference using the spread operator on sets and arrays to reveal unique or common elements.

Discover weak sets as memory-efficient counterparts to sets that only store objects, with add, delete, and has methods, and use unions, intersections, and differences for large data sets.

Master the object.entries method, which returns [key, value] pairs for an object's own enumerable properties and can be used to map, iterate with forEach, and transform or sort entries.

Use Object.values to obtain an array of an object's own enumerable property values in the same order as a for...in loop, then reduce to sum or transform them.

Explore the Object.getOwnPropertyDescriptors method to list own properties and their attributes, including enumerable, configurable, writable, and value. See how descriptors enable precise cloning and controlled property behavior.

Explore the for of loop in JavaScript; it iterates arrays by assigning each element directly. It works with arrays and other iterables, but not with objects.

Learn to use the array.find method to return the first object with activated true. Explore the array.includes method to check a value's presence and get a boolean result.

Learn how to create and structure modular JavaScript code using exports, imports, and named exports, achieving maintainability and reusability by encapsulating functionality into self-contained modules.

Import all modules as an object with import * as calculator and access functions via calculator.add. Export named members at the bottom to streamline exports.

Learn how to re-export modules with an index file acting as an intermediary, using named and default exports to centralize access and simplify imports across files.

Import modules only at the top of the file; do not use conditional imports. Imports are hoisted and read-only, so they cannot be modified after import.

Master the latest JavaScript updates with hands-on exercises across the full stack, using online, in-browser tools and requiring no heavy setup.

Explore block scoping with let versus var, understanding hoisting and scope boundaries, and see how immediately invoked function expressions create private variables in JavaScript.

Explore how closures interact with for loops, showing how using var causes all functions to share the same loop variable, and how let creates per-iteration bindings to fix this.

learners discover how let works in JavaScript, including temporal dead zone and reference errors when accessing before declaration. it also covers block scope and redeclaration rules within the same scope.

Explore how default parameters in advanced JavaScript work, including handling undefined and zero values, with examples of function parameters like color and height and specifying defaults in the function declaration.

Learn expressions as default parameter values in JavaScript ES2015, using function returns and previous parameters as defaults, demonstrated with height and multiply examples.

Explore the rest operator in advanced JavaScript, transforming the arguments object into a real array and gathering variadic parameters, contrasting with slice and noting syntax rules.

Examine the spread operator in JavaScript, using three dots to spread array elements into function arguments, compare with the rest operator, and relate to apply and concat patterns.

Explore arrow functions in JavaScript, using concise syntax, implicit returns for single parameters, and when to use braces for multiple expressions, while understanding function expressions and declarations.

Explore how arrow functions solve the this binding problem in JavaScript by replacing the self hack and bind patterns with lexical this, contrasting with function expressions.

Explore object initialization shorthand in JavaScript, using the same name for keys and variables to create cleaner, less repetitive objects like first name, last name, and full name.

Destructure objects using curly braces to assign X, Y, Z to corresponding variables in a single step, without dot notation. Keep variable names matching object keys.

Learn how to add functions to objects using the ES6 method shorthand, converting full function declarations into concise object methods while preserving existing properties.

Explore template strings in JavaScript to embed expressions, create multiline strings, and interpolate variables cleanly, reducing string concatenation and improving readability.

Explore how object.assign creates a new object to update properties like completed, compare with the spread operator, and preserve immutability in stateful contexts such as React and Redux.

Explore array destructuring in advanced JavaScript: assign fruits to variables without indexing, skip values with a blank, and pull elements directly from an array.

Explore how the for of loop iterates over arrays by assigning each element to a named variable. It shows why this replaces index-based access using a fruits array.

Introduce the array.find method, which uses a testing function and an implicit return to locate the first object with activated true in a services array.

Explore how maps in JavaScript use any value as a key and do not convert keys to strings, using the map constructor and set to add entries.

Explore weak maps, a special JavaScript map variant that uses objects as keys, supports set and get, and allows entries to be garbage collected when keys are no longer referenced.

This lecture explains maps as key-value structures where any value can be a key and objects are not stringified, recommending maps for runtime-generated keys and plain objects for predefined keys.

Iterate a JavaScript map with for..of, destructure key and value from each entry, and log pairs using template strings, leveraging the map's iterable symbol iterator.

Learn why plain JavaScript objects are not iterable with the for..of loop, and how Symbol.iterator determines iterability, contrasting with arrays that expose a function at Symbol.iterator.

Learn how sets enforce uniqueness in JavaScript by using new Set, the add method, and the size property, illustrated with a cars example where duplicates are ignored.

Learn that sets are iterable and remove duplicates, then loop with for..of to display each unique item and use destructuring to assign set elements to variables.

Compare sets and weak sets in JavaScript by illustrating that weak sets accept only objects, support add, has, and delete, and are not iterable, enabling memory efficiency.

Use weak sets to track when a view is accessed without mutating data, improving immutability and memory efficiency, while not preventing garbage collection to avoid memory leaks.

Use constructor functions to create objects, attach prototype methods, and implement prototype inheritance to build subclasses like Audi from a generic object.

Explore how ES6 classes simplify object creation by wrapping constructors in a class, while JavaScript remains prototype-based. See a car class example with a constructor and a drive method.

Explore ES6 class inheritance with extends and super to initialize base object properties. Create an Audi class to illustrate cleaner syntax and inherited engine properties.

Learn how JavaScript's single-threaded model handles AJAX calls with callbacks, see how nested callbacks create callback hell, and discover promises as a progression from these patterns.

Explore how promises manage asynchronous operations with then, catch, and all, using a promise-based ajax call to fetch tasks. Track pending, fulfilled, and rejected states as promises resolve or reject.

Learn promises in action by creating a new promise with resolve and reject, delaying with setTimeout, perform a name check, and handle outcomes with then.

Advance your understanding of promises by chaining then calls, replacing nested callbacks with clean, reusable logic, and handling errors with a rejected promise.

Master error handling in promises by using the catch method to resolve and continue execution, contrasting with callback-based error handling in ES6 promises.

Learn to run multiple promises at once using Promise.all by passing them as an array and retrieving an ordered array of results in the input sequence.

Learn to import all module functions as a single object and call them as properties, then export multiple items at once using a single export statement, with practical subtraction examples.

Boot six modules quickly with Create React App to bypass configuration and focus on module system. Start the development server with npm start and view the React boilerplate on localhost.

Explore boilerplate setup in a preconfigured JavaScript project, navigate source, public, and modules directories, leverage hot loading, and begin creating, importing, and exporting files from the console.

Explore named exports in JavaScript by exporting helper functions from a calculator module and importing them with named imports. Ensure exported names match the imported identifiers for correct usage.

Explore using export default to define a single default export, import it under any name, and enforce that a module contains only one default export, illustrated with a greeting function.

Learn how to convert a calculator into a class, export it as default or as a named export, import it, create an instance, and use its methods to perform operations.

Learn how to conditionally import or export ES6 modules and why imports must be top level. Discover that imported bindings are read-only, yet you can modify properties of imported objects.