JavaScript: Under the Hood ( Beginner to Expert )

Explore how the lexical environment defines where variables live and how execution context tracks the currently running code, including global and functional contexts.

Explore the global execution context and the window object, showing how global code runs in the global environment and how variables and functions attach to the window.

Explore how JavaScript hoists variables and functions and how creation and execution phases allocate memory. Understand why undefined appears and how hoisting shapes code execution.

Explore how the functional execution context runs when a function is invoked and how creation and execution phases set up memory for first name and last name.

Explore how the call stack and scope chain work in the global execution context, detailing the creation and execution phases, memory flow, and the outer reference to the global environment.

Explore how the call stack and scope chain govern variable lookup as execution contexts form, with memory allocation during creation and hoisting shaping output like hello and hola.

Learn to create object literals in JavaScript, define properties like first name and last name with a nested address, and access them for object oriented JavaScript.

Discover how functions are objects in JavaScript, enabling first-class functions you can pass to other functions, assign as properties (methods), and invoke with a code property.

Explore how JavaScript treats functions as first-class citizens, allowing passing and assignment; compare function statements with function expressions, including anonymous functions and their invocation within execution context.

Explore higher order and first-class functions to build a flexible calculator that avoids repeating code by passing operations as functions.

Explore higher order functions and callbacks in JavaScript by examining map, reduce, and filter patterns, demonstrating how functions are passed and invoked later to power asynchronous code.

Learn about the immediately invoked function expression (IIFE) in JavaScript, showing how a function expression can be invoked immediately to execute code and limit scope.

Explore arrow functions, a shorter, cleaner alternative to function statements and expressions, and see how replacing the function keyword enables concise single-parameter usage and easier callbacks.

Explore closures as a core JavaScript concept, showing how they create persistent memory inside functions, track scope across calls, and avoid polluting global state.

learn how to return functions from functions within JavaScript, clarifying higher-order functions, closures, and the roles of execution context and scope in function execution.

Explore how nested function scope in JavaScript handles returning a function, memory allocation across global and local execution contexts, and how variables traverse scopes.

Explain how returning a function carries a backpack of outer variables through scope, enabling the function in JavaScript to access data defined outside even after it is returned.

Discover how function closures in JavaScript capture and persist outer variables across calls, using a backpack-like private storage to access a number beyond local scope.

Explore the power of closures by creating multiple closure instances, each with its own scope (backpack) and outputs independent from the others.

Compare synchronous and asynchronous programming in JavaScript, highlighting the single-threaded call stack. Discover how the browser enables asynchronous features like timeouts, intervals, and HTTP requests for modern web apps.

Demystify asynchronous JavaScript execution by showing how browser features and the JavaScript engine handle delays, call stacks, and the two second timing, with skeleton loading as data arrives.

Explore how the event loop coordinates asynchronous JavaScript with the browser, web APIs, and the callback queue, ensuring code in the call stack runs in the correct order.

Explore how asynchronous JavaScript works behind the scenes, the browser's role in fetch API network requests, and how promises move data into the JavaScript engine memory for use.

Explore how the fetch API enables HTTP requests in JavaScript, returning a promise that resolves with data from the internet and can be logged or processed with then.

Explore how promises work in JavaScript, including fetch, the value property, then and catch handlers, and the role of fulfilled and rejected states in asynchronous execution.

Explore how the microtask queue prioritizes microtasks over callbacks in JavaScript, demonstrated by a two-second blocking operation and a promise, shaping execution order.

Learn to make a function asynchronous with the async keyword and use await to pause until the server response arrives. Observe non-blocking execution and the resulting console log order.

Learn how object oriented programming in JavaScript bundles data and behavior into objects, using new keyword, this, subclassing, call, apply, bind, prototype inheritance, and new class keyword to avoid duplication.

Create objects with the object literal syntax, define a human with first name and last name, and use the dot operator to access properties and methods like walk and eat.

Create objects with functions to avoid manual, polluted code and return a user with first name and last name. Explore creation and execution phases and the drawbacks of duplicated functions.

Demonstrate how Object.create links objects to a shared set of functions, defining those functions once and avoiding per-instance copies, saving memory.

Explore how functions in JavaScript are regular objects with a prototype property that links to other objects, and why modern practices favor prototype-based object creation.

Create objects in JavaScript using the new keyword and this, and extend them with prototype-based methods like walk and eat, illustrating constructor patterns with a human creator function.

Explains the this keyword in JavaScript, how it binds in methods and constructors, and how arrow functions use lexical this to avoid scope and binding pitfalls.

Explore how to create objects with the class keyword in JavaScript, using constructors and methods, arrow functions, and reveal what happens behind the scenes with prototypes and object instantiation.

Learn how to control this and reuse object methods in JavaScript using call and apply. See how two user objects can increment ages and print results by passing arguments.

Explore how inheritance in JavaScript lets a child class extend a parent class, building on the previous generation’s features and adding new functionalities with specialized powers.

Explore inheritance in JavaScript by creating constructor functions, linking prototypes, and using the new keyword and call to build a super human from a base human.

Demonstrates how the new keyword creates a fresh object, links its prototype, and enables prototypical inheritance by sharing methods like walk and brain power through the prototype chain.

Explore JavaScript's class, extends, and super to implement prototype inheritance and clean object construction, compare constructors and super calls, and visualize how modern syntax underpins inheritance.

Explore inheritance in JavaScript using class, extends, and super to connect constructors to prototypes. See how super initializes base properties and establishes the prototype link when extending a class.