DOCSEARCHbyAlgolia
Submit Docs

jScripted Documentation

website·Indexed 30 days ago

https://jscripted.vercel.app

A collection of JavaScript and React resources, featuring UI challenges, custom React hooks like useTimeout, polyfill implementations for Array.map() and Promise.all(), and detailed notes on the Namaste JS series covering the V8 engine, hoisting, and closures.

Tokens
23.7K
Snippets
107
Records
140
Agent score
74%

What's inside jScripted

  1. Overview of the Intersection Observer API

    The Intersection Observer API allows developers to asynchronously monitor when a target element intersects with another element (an ancestor) or the top-level document's viewport. Instead of polling the main thread to check element positions, the browser executes a registered callback function whenever the target enters, exits, or changes the amount of intersection with the observer's target.

    Common use cases include:

    • Lazy-loading images or content during scrolling.
    • Implementing infinite scrolling by loading more content as the user reaches the end of the page.
    • Tracking advertisement visibility for revenue calculations.
    • Triggering animations or tasks only when the user can see the result.

    Note: The API does not provide the exact pixel count of the overlap, but it can trigger actions based on a percentage threshold of intersection.

  2. Understand JavaScript Closures

    A closure is a combination of a function and its lexical scope bundled together. In practical terms, it is a function along with a reference to its outer environment, allowing the inner function to access variables from the outer function's scope even after the outer function has finished executing.
    function outer() {
  var a = 10;
  function inner() {
    console.log(a);
  } // inner forms a closure with outer
  return inner;
}
outer()(); // 10

  3. Understand the purpose and use of JavaScript Polyfills

    A polyfill is a piece of code (typically JavaScript) used to provide modern functionality on older browsers that do not natively support it. Polyfills ensure a standards-compliant way to access features even when different browsers implement the same features in different ways or lack support entirely.

  4. Understand the JavaScript Runtime Environment (JRE) components

    The JavaScript Runtime Environment (JRE) is a container that provides everything necessary to execute JavaScript code. It consists of the following core components:

    • JS Engine: The core responsible for executing the code.
    • Web APIs: Sets of APIs that allow JavaScript to interact with the outside environment (e.g., DOM, timers).
    • Event Loop: Manages the execution of multiple chunks of your code.
    • Callback Queue & Microtask Queue: Manage the order of asynchronous task execution.

  5. Understand JavaScript Lexical Environment and Scope Chain

    In JavaScript, the Lexical Environment consists of the local memory of the current execution context plus a reference to the lexical environment of its parent. The 'Scope Chain' (or Lexical Environment chain) is the process of traversing these parent references one by one to resolve a variable's value.

    Key rules of lexical scoping:

    1. Inner functions can access variables defined in outer functions, regardless of how deep the nesting is.
    2. Local variables take precedence over global variables of the same name (shadowing).
    3. Functions can access variables in the global scope, but the global execution context cannot access variables defined within a local function scope.
    4. Lexical (or Static) scope is determined by the physical location of the variables and functions within the source code.
    // Example of Scope Chain and Lexical Environment
function a() {
  var b = 10; // Local to a()
  
  function c() {
    console.log(b); // Accesses 'b' from parent scope a()
  }
  
  c();
}

a();
console.log(b); // ReferenceError: b is not defined (Global cannot access local)

  6. Understand memory allocation for variables in JavaScript

    JavaScript allocates memory to variables and functions before executing the code. If a variable is declared but not initialized with a value, JavaScript automatically assigns undefined as a placeholder in the reserved memory space. Note that undefined is a specific keyword and is not the same as null or an 'empty' value.

  7. Identify common use cases for closures

    Closures are fundamental to several advanced JavaScript patterns, including:

    • Module Design Pattern
    • Currying
    • Memoization
    • Data hiding and encapsulation
    • Managing asynchronous callbacks (e.g., setTimeout)

  8. Google V8 Engine Architecture components

    Google's V8 engine implements the JavaScript specification using specific internal components:

    • Ignition: The interpreter that converts JavaScript to bytecode.
    • TurboFan: The optimizing compiler that improves performance during runtime.
    • Orinoco: The garbage collector responsible for memory management.

  9. Understand the JavaScript Event Loop and Web API interaction

    JavaScript's call stack is single-threaded and does not have a built-in timer. To handle asynchronous operations, the browser provides Web APIs (e.g., setTimeout, fetch, DOM APIs, localStorage). When an asynchronous function is called, it is handed off to the Web API environment. Once the asynchronous operation completes (e.g., a timer expires or a network request returns), the associated callback is placed into a queue. The Event Loop acts as a gatekeeper, constantly monitoring the call stack; once the stack is empty, it pushes the pending callbacks from the queues into the call stack for execution.

  10. Understand JavaScript function execution contexts and variable environments

    In JavaScript, every function invocation creates its own execution context. This context includes a 'Variable Environment' (Memory Component) where local variables and functions are stored. This mechanism ensures that variables declared inside a function are scoped locally and do not interfere with variables of the same name in other functions or the global scope. JavaScript resolves variables using lexical scoping: it first searches the local variable environment, then moves outward to parent environments, eventually reaching the global variable environment.

  11. Understand JavaScript Hoisting behavior

    Hoisting is a JavaScript mechanism where variable and function declarations are processed during the memory creation phase of the execution context before the code is executed.

    Key behaviors include:

    • Function Declarations: Fully hoisted. The entire function body is stored in memory, allowing the function to be called before its declaration in the code.
    • Variable Declarations (var): Hoisted and initialized with undefined. Accessing a var variable before its assignment results in undefined rather than a ReferenceError.
    • Function Expressions and Arrow Functions: These are treated as variable declarations. They are hoisted as variables (initialized to undefined), not as functions. Calling them before the assignment results in a TypeError because the variable is not yet a function.

  12. Understand the JavaScript Execution Context

    Everything in JavaScript is executed inside an Execution Context, which acts as a container for the running code. It is composed of two primary parts:

    1. Memory Component (Variable Environment): Stores variables and functions as key-value pairs.
    2. Code Component (Thread of Execution): The area where the JavaScript code is executed line by line.