DOCSEARCHbyAlgolia
Submit Docs

Gemstone: JavaScript Advanced Programming Guide

website·Indexed 29 days ago

https://zhaoyuuu.github.io/blog/

A comprehensive technical resource for advanced JavaScript development, featuring deep dives into ECMAScript specifications, BOM objects, and core language mechanics. The collection includes detailed guides on async/await, Promises, Proxies, and the prototype chain, alongside a 'handwritten' section providing manual implementations of common interview patterns like debounce, throttle, deepClone, and LRUCache, as well as Webpack and Browser rendering internals.

Tokens
31.6K
Snippets
155
Records
199
Agent score
75%

What's inside Gemstone

  1. Understand JSON syntax and data types

    JSON (JavaScript Object Notation) is a language-independent data format used for structured data. It supports three types of values:

    1. Simple values: Strings, numbers, booleans, and null. Note that undefined is not a valid JSON value.
    2. Objects: Unordered sets of name/value pairs (keys must be strings).
    3. Arrays: Ordered lists of values of any type, including other objects or arrays.

    JSON does not support variables, functions, or object instances.

  2. Understand JavaScript Garbage Collection strategies

    JavaScript uses automatic memory management to allocate memory and reclaim idle resources. There are two primary marking strategies used to determine which variables are no longer needed:

    1. Mark-and-Sweep (Most Common):
      • The garbage collector marks all variables in memory.
      • It then removes marks from variables currently in context and those referenced by variables in context.
      • Any remaining marked variables are considered unreachable and are cleared from memory.
    2. Reference Counting: A less common strategy that tracks how many references exist to a value. This strategy can struggle with circular references.

  3. Understand JSONP for cross-origin GET requests

    JSONP (JSON with Padding) is a technique used to bypass cross-origin restrictions. It works by dynamically creating a <script> element and setting its src attribute to the target URL. Because <script> tags are not subject to the Same-Origin Policy, they can load content from any domain. However, JSONP is limited to GET requests only. While CORS is the modern standard for cross-origin requests, JSONP remains a relevant concept for legacy systems and technical interviews.

  4. Understand JavaScript Execution Contexts

    JavaScript uses execution contexts to manage code execution. There are two primary types:

    1. Global Context: The outermost context. In a browser environment, this is the window object. Variables and functions defined globally via var become properties of window. This context is destroyed only when the application exits (e.g., closing the tab).
    2. Function Context: Created when a function is invoked and pushed onto the Context Stack. Once the function finishes executing, its context is popped off the stack, returning control to the previous execution context.

  5. Create a basic Proxy to intercept object operations

    The Proxy constructor allows developers to create a proxy object that wraps a target object. This enables the interception and modification of fundamental operations (like property access or assignment) before they affect the target object. A Proxy requires two arguments: the target object and a handler object. If either is missing, a TypeError is thrown.
    const target = { id: 'target' };
const handler = {}; // Empty handler means operations pass through to target
const proxy = new Proxy(target, handler);

console.log(proxy.id); // 'target'
proxy.id = 'bar';
console.log(target.id); // 'bar' (changes reflect on target)
console.log(target === proxy); // false

  6. Use WeakMap for key-value storage with garbage-collectable keys

    A WeakMap is a collection of key-value pairs where the keys must be Objects (or types inheriting from Object). Unlike a standard Map, the references to keys in a WeakMap are 'weak', meaning they do not prevent the garbage collector from reclaiming the key object if there are no other strong references to it. This prevents memory leaks when associating data with objects that may be destroyed elsewhere in the application.
    const wm = new WeakMap();
const objKey = {};
wm.set(objKey, "value");

  7. Understand React core principles and characteristics

    React is a JavaScript UI library for building efficient and fast user interfaces. Its core characteristics include:

    • Component-Based Development: Building UIs using small, isolated pieces of code.
    • Declarative Programming: Describing what the UI should look like based on state, rather than the step-by-step process of how to change it (imperative).
    • Functional Programming: Emphasizing pure functions and avoiding side effects.
    • Virtual DOM: Using a JS representation of the DOM to optimize updates.
    • Unidirectional Data Flow: Data flows in one direction (parent to child).

  8. Understand the window object and Global scope

    The window object serves two roles: the ECMAScript Global object and the JavaScript interface for the browser window. Variables and functions declared with var in the global scope become properties and methods of the window object. However, variables declared with let or const are not added to the global window object.
    // var adds to window
var name = 'peter';
alert(window.name); // peter

// let/const do NOT add to window
let age = 29;
const sayAge = () => alert(this.age);
alert(window.age); // undefined
window.sayAge(); // TypeError: window.sayAge is not a function

  10. Understand parameter passing in ECMAScript

    In ECMAScript, all function arguments are passed by value. When a parameter is passed, the value is copied into a local variable (a slot in the arguments object).

    While it may appear that objects are passed by reference because modifying a property of an object inside a function affects the original object, this is actually because the 'value' being passed is the reference to the object. The reference itself is passed by value.

  11. Technical stack for building the violet-design component library

    The violet-design library is built using the following technical stack to ensure quality and maintainability:

    • Framework: React 18 + TypeScript (initialized via create-react-app for simplified webpack configuration).
    • Testing: React-testing-library for unit testing.
    • Documentation: Storybook for component demonstration and debugging (integrated directly into the React project).
    • Styling: SCSS as the CSS preprocessor.
    • Bundler: Rollup is used for the final library build to produce flat, high-performance ES Modules (ESM) and UMD bundles.

  12. Understand how HTTP cookies work for session management

    HTTP cookies are used to store session information on the client side. The server initiates a cookie by sending a Set-Cookie header in its HTTP response. The browser stores this information and automatically includes it in the Cookie header of every subsequent request to that same domain, allowing the server to uniquely identify the client.
    # Server response setting a cookie
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value

# Subsequent client request sending the cookie
GET /index.jsl HTTP/1.1
Cookie: name=value