JavaScript: The Critical Parts Masterclass

Explore critical concepts in JavaScript, including the engine, call stack, memory heap, single-threaded runtime, the event loop, and asynchronous code, and learn why understanding how the language works matters.

Compare the browser and Node.js runtime environments, explain the JavaScript engine, and highlight how the DOM and Web APIs differ between these environments.

Explore how the JavaScript engine executes code by combining interpreters and just-in-time compilation, with engines like V8 powering Chrome and Node, and how ECMAScript standards and transpilers ensure cross-browser consistency.

Explore how JavaScript reclaims memory in the memory heap with a mark-and-sweep garbage collector, identifying reachable objects and sweeping away the unreachable objects to prevent memory leaks.

Master how to remove event listeners in the browser to aid garbage collection, ensuring the same DOM element, event type, and options are used when adding and removing them.

Explore how the event loop enables asynchronous JavaScript in a single-threaded environment by coordinating the call stack, web APIs, and a message queue.

Explore the Node.js runtime environment, including the V8 engine, event loop, and event queue, with a note on the single thread, call stack, and lib and web api.

Explore the call stack and the event loop with a JavaScript exercise: observe stack overflow from recursion on a 10,000 element array and refactor to use the event loop.

Explore how recursion can cause a stack overflow and how settimeout defers execution via the event loop to process large arrays without blocking.

Explore how JavaScript evolves via the script standard, ActionScript, and TC 39, and follow annual ES6-era updates through the five stages from submission to finished standard.

Explore the critical fundamentals often ignored by newcomers and misunderstood until experience with JavaScript. Strengthen your learning by mastering these essential topics for proficient coding.

Explore the execution context, its creation and execution phases, and how the global object, window or Node's global, memory heap, and call stack drive hoisting and variable behavior.

Learn how the 2020 standards introduced globalThis to provide a consistent reference to the global object across browser and Node environments, unifying window and global mappings for cross-environment code.

Understand hoisting in JavaScript, where var and function declarations are prepared during creation phase, enabling usage pre-execution with undefined values. Let and const differ and can error if not initialized.

Explore how function declarations and function expressions differ in hoisting and execution context, with examples of anonymous functions, variables, callbacks, and arrow functions.

Explore how JavaScript creates execution contexts, from the global execution context to function execution contexts, including creation and execution phases, through an interactive exercise.

We walk through the global and function execution contexts, phase one and phase two, var and function initialization, memory, the call stack, and this binding to window.

Define lexical environment as the placement of identifiers and bindings within the code's lexical nesting, showing how variables and functions sit in global and function scope.

Learn how scope controls which variables and functions are accessible in JavaScript, and how execution context and the scope chain traverse lexical environments to resolve references.

Explore block scope in JavaScript by comparing let and var, illustrating how block-level declarations differ in initialization, memory, and global exposure through if statements and blocks.

Compare let and var in a for loop by examining setTimeout and closure, highlighting block scope, iteration-specific variables, and how timing differences affect console output.

Declare constants to create scoped values and prevent reassignment, clarifying the distinction between reassignment and mutation. Show that reassigning a constant triggers an error, while mutating arrays remains allowed.

Avoid inadvertent global variables to prevent memory leaks, scope chain issues, and collisions, and maintain modular thinking by declaring variables so their scope stays in function or block, enabling modules.

Practice with scope in a four-function JavaScript file, each with a guiding comment; run the HTML page, invoke functions from the console, and determine what you think will be produced.

Explore JavaScript scope with loop variables and hoisting, identify undefined reference errors, and learn fixes by declaring variables with var to ensure proper function or block scope.

Explore JavaScript's dynamic typing, the seven primitive types (boolean, string, number, undefined, null, symbol, big int), the type of operator, and the undefined-null distinction, with TypeScript.

Explore how JavaScript treats everything else as an object, with properties, methods, and a prototype chain, and how dot syntax adds properties beside built-in wrappers like String and Number.

Explore type coercion in JavaScript, distinguishing explicit and implicit conversions between strings, numbers, and booleans, and how values have truth and false values.

Explore loose equality versus strict equality in JavaScript and how double equals coerces values. Always use triple equals, unless you need loose equality for numbers or null or undefined comparisons.

Practice coercion in JavaScript by writing an if statement that adds five to a value, and completing a loop that adds five to numbers and concatenates with strings.

Explore coercion and truthiness with zero, use increment assignment, log results, and manipulate arrays in a loop by adding five and concatenating with strings via template strings and Number conversion.

Explain why the BigInt type exists beyond the max safe integer, created with n or the BigInt constructor, and note no decimals in division and loose versus strict equality.

Learn three JavaScript cloning techniques: Object.assign for a shallow clone, the spread operator for a simpler shallow clone, and JSON.stringify/parse for deep cloning of nested objects.

Demonstrate how passing an array by reference mutates the same array, how the spread operator spreads values without cloning, and how final scores can avoid mutation.

Discover how to opt in to JavaScript strict mode to catch errors early, prevent global variables, and flag issues like duplicate parameter names, whether at file or function scope.

Tackle tricky fundamentals by exploring callbacks as a critical JavaScript pattern and the this keyword, and learn how callbacks affect this before moving to additional topics.

Explore callbacks in JavaScript, from synchronous execution to asynchronous callbacks, including setTimeout and event listeners, and learn how higher-order functions invoke a function after something else happens.

Understand the this keyword in JavaScript as the object that invokes a function, with its value determined by invocation, not declaration, and explore window behavior, strict mode, const and let.

Learn how the this keyword refers to the invoking object in JavaScript object methods, enabling methods to access properties like name. Explore object examples and the shorthand method syntax.

Explore the keyword this in JavaScript through a hands-on exercise that reveals what object each this references in several console logs, and discusses common pitfalls.

Trace how this defaults to the window in certain calls, and to the containing object when invoked as a method. See how strict mode yields undefined, highlighting its dynamic binding.

Explain rules of the keyword this, including strict mode and window or undefined default, and identify common problems when this loses its object reference in callbacks, setTimeout, and events.

Explore how bind returns a new function that binds an object to this and optionally pre-sets parameters, contrasting with call and apply, and introducing currying or partial application.

Master how to control the this keyword in JavaScript by using call, apply, and bind, plus anonymous callbacks and timeout patterns to ensure methods reference the correct object.

Practice solving two callback examples by using call, apply, or bind to invoke the object's display name method, and fix the get element by ID based click event wiring.

Master the choice between call, apply, and bind to preserve this when passing functions to event listeners, and learn when to use anonymous wrappers as an alternative.

Learn arrow functions in JavaScript, converting traditional function expressions to concise syntax and exploring parameters and lexical this binding in the JavaScript: The Critical Parts Masterclass.

Learn how arrow functions resolve the this keyword via lexical binding, contrast them with traditional functions, and identify when to use or avoid arrow functions in objects and event handlers.

Learn when not to use arrow functions in JavaScript, including object methods, dynamic contexts like event listeners, and constructors, while avoiding nested arrows that make code hard to read.

Explore central JavaScript concepts centered on functions, including first-class function status, higher-order use, closures, and immediately invoked function patterns you can apply in your coding.

Explore how JavaScript treats functions as values by assigning them to variables, object properties, and arrays. Learn to pass, return, and invoke functions as first class citizens.

Explore higher order functions in JavaScript, where first-class functions enable passing and returning functions as values, enabling flexible, dry code and callbacks like setTimeout and event listeners.

Demonstrate a higher order function by building a create greeting function that takes a greeting, a name, and an optional callback to act on the combined greeting.

The lecture introduces the traditional module pattern, highlighting how it leverages closure and encapsulation and connects to namespace patterns, with guidance to jump ahead for deeper coverage.

Explore how closures fix undefined results in delayed setTimeout calls by capturing loop variables with function scope and let block scope, contrasting var and let.

Explore closures by building a three-button exercise that tracks each button’s clicks and the combined total, displaying real-time counts as the user interacts.

In JavaScript, utilize closures to manage a total count and per-button counts with a single increment-and-display function, using an array of buttons and a loop to attach event listeners.

Master immediately invoked function expressions (IIFEs), a function expression defined and invoked instantly, and learn how they create private data and prevent global variable collisions.

Apply immediately invoked function expressions (IIFEs) to closures and initialization patterns in JavaScript, using setTimeout for delayed greetings and on-load or button-click behaviors.

Convert the given code into an immediately invoked function expression (IIFE) to log a message to the console as the page loads.

Turn code into an immediately invoked function expression to create a local scope and avoid global variables, then log results with console.log to verify the pattern.

Explore critical fundamentals of objects in JavaScript, focusing on prototypes, the prototype chain, and how prototypes provide properties and methods for objects.

Explore the nature of objects in JavaScript as composite values of key-value properties, created with literals or constructors. Understand mutability and writable, configurable, and enumerable attributes.

Understand what a prototype is in JavaScript and why it matters, including how objects borrow methods from their prototype, override prototype properties, and how the engine resolves properties.

See how prototypes empower arrays and dates with shared methods, inspect the prototype object and Object.getPrototypeOf, and discover the prototype chain that links objects to their parent prototypes.

Explore how prototype chains connect arrays and objects, showing how methods flow up from the prototype to the prototype of the prototype, enabling property lookup.

Explore how an object's own properties override prototype methods, and how valueOf and toString influence primitive conversions within the prototype chain.

Explore the concept of programming paradigms as styles for building software, including procedural, object-oriented, and functional approaches in JavaScript, and note that these paradigms are not mutually exclusive.

Explore the advantages of programming paradigms in JavaScript, including structured code, memory efficiency, the dry principle, and clearer communication that eases extension and maintenance.

Explore factory functions, constructor functions, and classes to create room objects with name, capacity, availability, and a reserve method that updates a schedule, while understanding abstraction, encapsulation, and prototypes.

Practice factory functions by creating a post object with text and department, record its creation date, and define a prototype getAge method to compute milliseconds since creation.

Explore constructor functions for creating objects in JavaScript, using new and an uppercase convention, with examples like Date, Array, and a meeting room constructor; learn this, properties, and prototypes.

Create a constructor function for message board posts, using new to set text, department, and creation date, and add a prototype getAge method for all posts.

Explore building objects with a constructor function, defining properties like text, department, and date, and adding a prototype method getAge to measure age in milliseconds.

Explore gotchas in creating objects with constructor functions, focusing on this binding, arrow function pitfalls, internal variables, and prototype versus constructor behavior.

Explore ES6 classes in JavaScript, compare them with constructors, and learn how to instantiate objects, use the prototype, and add methods and properties within a class.

Practice creating a post class to model message board entries, placing the get age method on the prototype, and matching the factory and constructor function exercise to reinforce class concepts.

Create a post class with a constructor taking text and department, initializing date, and a get age method on the prototype to compute milliseconds since creation.

Learn how to create JavaScript subclasses with extends, inherit from a base room class, customize constructors with super, implement polymorphic reserve methods, and manage properties like capacity and default values.

Explore encapsulation in JavaScript by turning data private with a hash prefix, and control access through getters and setters to prevent outside modification and enforce constraints.

Navigate the JavaScript class debate, recognizing that classes are syntactic sugar for prototype inheritance and do not alter underlying mechanisms. Choose your preferred pattern, study alternatives, and move forward.

Unlock functional programming in JavaScript by separating data from behavior, embracing pure functions, and using composition and immutability to build predictable, testable code.

Discover the advantages of functional programming, including easier testing of independent functions, no side effects, and reusable code. See how self-contained functions improve readability, debugging, and maintenance.

Master the spread and rest syntax in JavaScript, using spread to expand arrays and rest to collect arguments, with practical examples for copying arrays and objects and summing numbers.

Practice spread and rest syntax by combining arrays, creating an object copy with an added score, and writing an arrow function that returns any number of scores as an array.

Apply the spread syntax to merge arrays and copy objects without mutation, then use the rest operator in an arrow function to gather any number of scores.

Learn how pure functions in JavaScript, foundational to functional programming, guarantee the same output for given inputs, avoid side effects, and why closures and the spread operator preserve purity.

Discover when functions can be pure in JavaScript; identify common impure side effects like console logging and DOM updates, and design strategies to keep as many functions pure.

Refactor the function into multiple parts to practice functional thinking, slice text to 17 characters with an ellipsis, wrap in a post paragraph, set up head, and update the DOM.

Explore declarative programming and its contrast with imperative programming across the spectrum from machine code to higher-level languages, including PHP techniques and JavaScript's reduce, map, and filter.

Learn to use reduce, map, and filter to process arrays declaratively in JavaScript. Explore summing scores, computing averages, and filtering passing values with these methods.

Master immutability in functional programming by avoiding side effects, using map and filter to create new arrays, and cloning objects with spread, assign, or JSON methods.

Currying transforms a multi-argument function into a chain of single-argument (unary) functions, using closure to remember inputs and create specialized functions, like multiplying by 100 for converting decimals to percentages.

Bind some arguments with the bind method to create a more specialized function through partial application, often reducing three-argument functions to two-argument ones.

Master function composition by chaining pure functions to produce complex results, demonstrated with a unique passphrase generator built from uppercase, string-to-array, remove-duplicates, array-to-string, and a reduce-based compose.

Learn piping as an alternative to compose for functional composition, processing functions left-to-right with pipe, and convert compose to pipe with order and simple transformations like deduplication and lowercase.

Master arity by learning how the number and order of function arguments affect composition, then build a composed function for mapping post texts to post headings using bind.

Apply function composition and bind to create functions that clone objects, extract text, and produce post headings via ellipse head 20 and do HTML head post, mapped over posts.

Practice a functional programming exercise that uses compose or pipe to create a pure function translating a string into title case, with optional integration for post headings.

Discover how to solve problems with functional programming by breaking tasks into small functions, mapping over words, and composing to produce title case strings.

Explore key functional programming concepts in JavaScript, including pure functions and minimizing side effects. Create functions that receive data and return data, and use composition to build specialized functions.

Learn how object-oriented programming and functional programming complement each other in JavaScript, using OOP for many objects and FP for data heavy business logic.

Explore how JavaScript uses asynchronous patterns such as callbacks, promises, and async/await to prevent blocking, guided by the event loop and practical Fetch API examples.

Explore JavaScript promises as an asynchronous pattern, representing future events that resolve or reject, and learn how to create and monitor promise objects using async functions.

Learn to monitor a promise and act when it fulfills or rejects. Use the then method to handle resolved values and manage rejections in asynchronous code.

Explore how the fetch API retrieves data, returns a promise, and uses then chains to convert responses to JSON, filter by user, and catch errors.

Practice promises by using the fetch api to fetch todos from json placeholder, filter for user 2 where completed is false, and extract the title array using dedicated functions.

Explore promises in practice by fetching data, parsing JSON, and chaining then and catch, while applying functional techniques like filter and map to extract post titles from the data.

Learn to create and return promises with a Promise constructor to run long tasks asynchronously, handle resolve and reject with then, and use setTimeout with event loop for non-blocking execution.

Explore how to use Promise.all, Promise.allSettled, Promise.any, and Promise.race to manage multiple asynchronous tasks, illustrated with timers and fetch examples.

Refactor a promise example into an async function using await for fetch and response.json, then apply try/catch to handle errors and log results.

Create an async function that fetches data from a given url, processes the response, and use it to retrieve json placeholder data such as comments or posts.

Explore creating and using async functions with arrow syntax, handle errors with catch blocks, and fetch data using await, then transform responses to JSON and return data.