JavaScript Deep Dives

Explore arrays as a tool for modeling complex application behavior, represent result lists from backend JSON objects, and master filtering and searching in array based result lists.

Explore an exemplary web application skeleton in JavaScript, wiring up callbacks for four menu buttons, handling result lists and specials of the day using the provided app.js and initial code.

Learn to render a dynamic sushi menu by mapping an array to HTML, using template strings and innerHTML, and joining items into a single HTML fragment.

Learn to merge the sushi menu and specials of the day by concatenating arrays and rendering the combined list in HTML with map and join.

Apply the array filter method to show only result items whose description includes the word maki, noting includes is case sensitive and requires lowercase input.

Learn how to sort result lists by name with the array sort method, using 1 or -1 as return values, and when to implement a custom sort for complex objects.

Explore practical use of array methods map, join, filter, and sort to manipulate lists of objects in JavaScript, with sample source code and guidance for broader array applications.

Explore how arrays model process flows in a programmable drum machine, using array methods to define drill positions and sequences, and manage flow by adding, moving, and deleting steps.

Explore the exemplary application skeleton, featuring an index html and svg of a drill machine, a single drill machine class in app.js, and array-based process flow stubs.

Build a javascript process chain by wiring button callbacks to update a drill process array. Add steps with push, remove with pop, and display the flow by joining the array.

Explore inserting multiple instructions into a drill process with array splice, flatten with flat to remove levels, and reassign after mutating versus returning a new array in JavaScript.

Execute the process chain by iterating over an array with a for-of loop, using a switch to handle move and drill actions, and visualize async movement with timeout and await.

Build a basic process chain without creating hierarchies by using push to add elements, pop to remove, splice to replace, and flat to flatten, then iterate with for...of.

Explore queues and stacks as essential structures for managing sequential transaction flows, using arrays to model and compare their differences in front end and back end.

Compare first-in, first-out queues with last-in, first-out stacks, using examples from e-commerce order flow. See how queues enable orderly processing and a fast lane, while stacks support history and undo.

Explore an exemplary application skeleton that switches between queue and stack modes, with events represented as strings added to an event chain and priority mode toggles.

Create and process queue and stack structures by using push and unshift for inserting events, and pop and shift for processing and removing them, while honoring priority and mode settings.

Explore the differences between queues and stacks and where they are used. Learn how they are implemented.

Discover what currying is and where it can be used in JavaScript, including scenarios where it proves helpful despite not being needed daily.

Explore currying in JavaScript by building a URL from a schema, domain, and subdir, then predefining left-hand arguments to create flexible, reusable functions.

Explore a simple localization approach using region and language in a JSON table, and refactor getLocalizedValue with currying to predefine region and language.

Implement currying to create a reusable translation function that binds region and language, using get localized value and a predefined function with two arguments, enabling updated translations for labels.

Explore currying and how cascading function calls enable cleaner, more efficient code by presetting arguments. Apply currying when faced with many parameters to avoid global state and simplify complex functions.

Explore how functions serve as the core of JavaScript and why generator functions, with their star, deserve a deeper understanding.

Explore how generator functions work by building a sample generator, using yield and next to produce values and the done status, and compare this flow with ordinary functions.

Implement a generator function that yields the current date and time on three next calls, then yields hello world with done set to true on the fourth call.

Show how a generator function makes an object iterable, enabling a for-of loop to yield elements from data and illustrating iterables and iteration in the course.

Use a generator function to create a simple unique identifier with an infinite loop, yield, and next that increments x. Mix Unix epoch, Math.random, and a counter to generate identifiers.

Explore how generator functions act as observers that process data handed by next, using yield to accumulate sums and respond to add, return, reset, or quit.

Explore how the await statement makes promises behave synchronously, and how generator functions provide the interrupt and resume mechanism that JavaScript uses to implement await.

Explore how yield* delegates control to other generator functions, enabling code reuse and modular flow with G1 and G2, and apply it in a composite observer example.

Explore the differences between generator functions and regular functions, identify meaningful use cases, and reveal how JavaScript internally benefits from generators, including yield star integration.

Explore how JavaScript implements an inheritance model through the prototype chain, defining object types with inherited properties and methods, and how classes relate as syntactic sugar over these object types.

Explore the differences between prototype-based and class-based languages, and see how JavaScript uses prototype objects and prototype chains for inheritance. Objects in prototype-based languages can change their prototype at runtime.

Explore how to set up a prototype chain in JavaScript by modeling person and student object types, with static members, inheritance, and explicit super constructor calls.

Learn how constructor functions create objects with new versus plain calls, and how prototype enables shared methods and inheritance, while clarifying writes to instances versus the prototype.

Introduce the static type based persons property to collect all person objects. Define get persons returning the collection; static properties belong to the class, not the prototype chain.

Create a student subtype of person, call the super constructor with person.call, set up the prototype chain, and enable inheritance of methods like get number of fields of study.

Create a prototype-based JavaScript system with an animal object type and a derived bird type, wiring the prototype chain and implementing getName, getWeight, getFoot, and getCanfly.

Define an animal constructor with name, weight, and foot, plus prototype methods like getName and getWeight; extend with a bird that calls Animal.call and adds canFly.

Compare implementing the same data model with JavaScript classes versus constructor functions. See how classes provide syntactic sugar over the prototype chain, with person and student, extends, and get methods.

Practice converting the animals and birds app from constructor functions and the prototype chain to class-based code, adapting your final result while ensuring it works.

Replace the animal constructor with a class, add getters for name, weight, and food, extend to a bird class using super, and include static properties.

Explore extending built-in object types by creating a named array subclass with a custom constructor, spread arguments, the name property, and overloading concat behavior.

Implement method overloading of concat in a named array class, reusing the original array's concat via call or apply, and return a new named array with the combined elements.

Learn how well known symbols, especially symbol.species, control the constructor used for new instances in array, set, and map methods like concat, turning named arrays into plain arrays.

Summarize object types and class usage by examining constructor functions, the prototype chain, and how well-known symbols manage object type as well as instance behavior.

Explore iterability in JavaScript by examining how objects become iterable and how the for...of loop relies on synchronous and asynchronous implementations.

Explore how to make objects iterable by adding a symbol.iterator and a custom iterator function. Use for..of to traverse all object properties with Object.keys and return values.

Explore assigning iterator functions at the object type level using Symbol.iterator to enable for...of, illustrated with a class storing name and age and a prototype-based equivalent.

Discover how JavaScript generator functions simplify iterator construction by using yield to pause and resume, replacing manual next handling with a concise iteration flow.

Learn how asynchronous iterators in JavaScript are invoked with for await, supporting both async and synchronous iterables by using the symbol.asyncIterator property. Discover how promises drive async iterators, returning objects with done and value, and how for await waits for promise resolution to emit results.

Discover how an asynchronous iterator function, a generator, reads from a reader stream using for await of, decodes chunks with UTF-8, after fetching from a URL.

Explore how iterators work, when objects become iterable, and the differences between synchronous and asynchronous iterators, with guidance on practical usage scenarios.

Explore how JavaScript objects map to JSON data structures and vice versa, including implications for data interchange and MongoDB persistence.

Model a zoo IT data model with a class animal, create Leo, Joe, and Mia with birth dates and descendants, then convert to JSON with JSON.stringify and back with JSON.parse.

Explore how JSON interoperability loses object types and how JSON.parse and Object.assign restore objects by creating a flexible animal shell and copying properties.

Explore how JSON.stringify converts date objects into ISO strings and how to restore them to date objects with new Date in the create animal method.

Explore how JavaScript objects become JSON, distinguishing descendants as references versus copies, and show how unique IDs guide receiver-side handling of subobjects.

Explore how to transform a javascript object containing references to other javascript objects into json for transfer between systems, highlighting key considerations and potential pitfalls.

Explore how memory management works in JavaScript and other languages, including object references and garbage collection. Learn how the garbage collector determines unused memory and how to avoid memory leaks.

Understand memory management in JavaScript by examining the stack and heap. See how primitives and objects interact via references and how garbage collection treats weakref, weakset, and weakmap.

Demonstrate how garbage collection works by using a weak reference to an HTML element and showing that objects disappear only after no references remain, with variation across engines.

Learn how memory leaks arise in JavaScript through a cuboid caching example, and replace a map with a weakmap to let garbage collection reclaim unused cached objects.

Explore why garbage collection is far more complex than it appears. Understand that it detects objects no longer accessible from outside, even when they reference each other, using advanced algorithms.

Explore application development fundamentals, memory management, and how to avoid memory leaks by using weak objects and understanding garbage collection.