DOCSEARCHbyAlgolia
Submit Docs

Coder Yarn Learn

website·Indexed 30 days ago

https://coderyarn.github.io/coder-yarn-learn/

A collection of learning notes and code implementations covering JavaScript fundamentals, TypeScript, design patterns, and networking. Topics include JavaScript prototypes, Promises, deep cloning, debounce and throttle, TypeScript generics and type operators, design patterns like Singleton and Observer, and network protocols such as HTTPS.

Tokens
11.6K
Snippets
47
Records
60
Agent score
75%

What's inside Coder Yarn Learn

  1. Overview of Software Design Patterns

    Design Patterns are reusable code design experiences used in software development to improve code reusability, extensibility, and maintainability. They are primarily based on Object-Oriented Programming (OOP) and aim to reduce code coupling. The concept was popularized by the 'Gang of Four' (GoF), who categorized 23 common patterns into three main types: Creational, Structural, and Behavioral patterns.

  2. Understand JavaScript Function Prototypes

    In JavaScript, every function created (e.g., Function A) is associated with a prototype object (Object B) created in memory. The function has a prototype property that points to this object. Conversely, the prototype object contains a constructor property that points back to the original function.
    function A() {}
console.log(A.prototype); // {constructor: ƒ}
console.log(A.prototype.constructor === A); // true

  4. Understand Deep Cloning in JavaScript

    Deep cloning is the process of creating a complete copy of an object, including all of its nested reference-type properties. Unlike shallow cloning, a deep clone ensures that the original object and the cloned object share no data; every nested object is duplicated so that modifications to the clone do not affect the original.

  5. Use the Observer pattern for MVVM data binding

    MVVM implementations typically use a simplified Observer pattern consisting of Dep and Watcher classes. Dep (the subject/subscriber manager) maintains a list of all observers and notifies them when data changes. Watcher (the observer) performs the actual DOM update or operation upon receiving a notification from Dep.

  6. Understand JavaScript Promise states and behavior

    A Promise object acts as a proxy for a value not necessarily known at the time of the promise's creation. It allows you to associate the eventual success value or failure reason of an asynchronous operation with handlers.

    A Promise is always in one of these three states:

    • Pending: Initial state; neither fulfilled nor rejected.
    • Fulfilled: The operation completed successfully.
    • Rejected: The operation failed.

    Once a promise is fulfilled or rejected, the handlers attached via the .then() method are executed. There is no race condition between the asynchronous operation completing and the binding of handlers; if the promise is already settled when a handler is attached, the handler is still called.

  7. Compare MVC and MVVM Architectures

    MVC (Model-View-Controller) is a traditional architecture often used in backend development and SEO-friendly server-side rendering.

    • Model: Represents data (e.g., JavaBeans) and business logic.
    • View: The user interface page.
    • Controller: The intermediary that forwards user requests from the View to the Model and returns the result to the View.

    In contrast, MVVM replaces the Controller with a ViewModel that enables automatic synchronization (two-way binding) between the Model and View, reducing the need for manual DOM manipulation.

  8. Understand the MVVM Design Pattern

    MVVM is a design pattern used to separate the development of the graphical user interface (View) from the development of the business logic (Model) via a ViewModel.

    • Model: The data model, typically simple JavaScript objects.
    • View: The presentation layer (DOM rendering interface) that the user interacts with.
    • ViewModel: The core bridge that connects the Model and View. It listens to DOM elements in the View and binds them to data in the Model. When the View changes, the Model is updated; when the Model changes, the View is re-rendered, achieving two-way data binding.

  9. Understand the JavaScript Prototype Chain

    The prototype chain is a mechanism for inheritance where objects can have their own prototypes, which in turn have their own prototypes. When searching for a specific property, JavaScript first looks at the object itself; if not found, it traverses up the chain to the object's prototype, then to the prototype's prototype, and so on, until the property is found or the end of the chain is reached.
    class Person {
  constructor() {}
}

let person = new Person();
class Son extends Person {
  constructor() {
    super();
  }
}
let son = new Son();
// The chain allows tracing back to the base class prototype
console.log(Person.prototype === son.__proto__.__proto__); // true

  10. Implement function overloads in TypeScript

    Function overloading allows a single function to accept different sets of arguments and return different types based on those arguments. To implement overloads:

    1. Provide multiple function signatures (overload definitions) without a body.
    2. Provide a single implementation function that handles all cases.
    3. The implementation signature is not part of the overload list; only the explicit signatures are used for type checking.
    4. Order matters: place the most specific signatures first.
    // Overload signatures
function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };

// Implementation signature
function pickCard(x: any): any {
    if (typeof x == "object") {
        return Math.floor(Math.random() * x.length);
    } else if (typeof x == "number") {
        return { suit: "hearts", card: x % 13 };
    }
}

// Usage
const index = pickCard([{suit: "diamonds", card: 2}]); // returns number
const card = pickCard(15); // returns {suit: string, card: number}

  11. Create generic classes in TypeScript

    Generic classes allow properties and methods to share a consistent type defined at instantiation. The generic type parameter is placed after the class name in angle brackets. Note that generic types apply to the instance part of the class; static properties cannot use the generic type parameter.
    class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

// Using with number
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

// Using with string
let stringNumeric = new GenericNumber<string>();
stringNumeric.zeroValue = "";
stringNumeric.add = function(x, y) { return x + y; };

  12. Handle multiple arguments with rest parameters

    Rest parameters allow a function to collect an unlimited number of arguments into a single array. This is denoted by the ellipsis (...) followed by an array type. Rest parameters are treated as optional and can be empty.
    function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

// Function type for a function with rest parameters
let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;