Skip to content

Latest commit

 

History

History
692 lines (579 loc) · 24.6 KB

utils-javascript.md

File metadata and controls

692 lines (579 loc) · 24.6 KB

Table of Contents generated with DocToc

JAVASCRIPT

GUIDE-WEB

GUIDE-OPEN

CHEAT-SHEETS

ARTICLES BEST PRACTICES

CONTEXT / SCOPES

Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

FUNCTIONS BORROWING METHODS

  • The call() allows for a function/method belonging to one object to be assigned and called for a different object.
  • The apply() is very similar to call() but the apply method takes arguments as an array instead of separately.
  • The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. it is not necessary to pass the arguments at the time of bind. we can pass it later at the time of invocation.

PROMISE THEN VS AWAIT VS CHAINABLE

EXAMPLE

TOOLS OSS

FRAMEWORK: FRONTEND

FRAMEWORK: BACKEND

FRAMEWORK: BACKEND: ORM

LIB: LIST

LIB: DEVTOOLS

LIB: FUNCTIONNAL PROGRAMMING

LIB: DATABASE

LIB: BACKEND

LIB: JAMSTACK

LIB: UTILS

LIB: DESIGN PATTERN

LIB: PIPELINE

LIB: POLYFILL

LIB: REGEX

LIB: VALIDATION

LIB: DI

LIB: ARCHI

LIB: DATE

LIB: PARSER

LIB: ID

LIB: IP

LIB: SEARCH

LIB: UI

LIB: REACTIVE

LIB: HARDWARE

LIB: FRONTEND ALL

LIB: FRONTEND DESIGN

LIB: MATH

LIB: MAP

LIB: MEDIAS

LIB: 2D/3D/VR

LIB: AI

LIB: CALC

LIB: DATA OBJECT

LIB: PDF

LIB: AUTOMATION

LIB: TESTING

LIB: SECURITY

LIB: GAME

ALLIN

CANVAS

MEDIAS

FOUNDATION

BOOKS

IMPORTANT

FUNCTION

A function can be created in 4 ways

👉function as a declaration 👉function as an expression 👉arrow function

PURE FUNCTIONS

IMMUTABILITY

DESTRUCTURING

ALGORITHM

ARRAYS

IMPURE (avoid)

fill
pop
push
reverse
shift
sort
splice
unshift
reverse

OBJECTS

An object can be created in 4 ways

👉using object literals => let newObject = {}; 👉using new or constructor => let newObject = new Object(); 👉using Object.create() => let newObject = Object.create( Object.prototype ); 👉using a class => let newObject = new User();

OBJECT LITERALS

In plain English, an object literal is a comma-separated list of name-value pairs inside of curly braces. Those values can be properties and functions. Here’s a snippet of an object literal with one property and one function.

let greeting = {
    fullname: "Michael Jackson",
    greet: (message, name) => {
        console.log(message + " " + name + "!!");
    }
};

SCOPE

Scope determines the accessibility (visibility) of variables.

  • Local scope: Variables declared within a JavaScript function, become LOCAL to the function. They can only be accessed from within the function. They are deleted when the function is completed. Variables declared with var and let are quite similar when declared inside a function. They will both have Function Scope.
  • Global scope: A variable declared outside a function, becomes GLOBAL. A global variable has global scope: All scripts and functions on a web page can access it. Variables declared with var and let are quite similar when declared outside a block. They will both have Global Scope. In a web browser, global variables are deleted when you close the browser window (or tab).
  • Block scope: Variables declared with let inside a block {} cannot be accessed from outside the block.

With JavaScript, the global scope is the complete JavaScript environment. In HTML, the global scope is the window object. All global variables belong to the window object.

HOISTING

All declarations, both functions and variables, are hoisted to the top of the containing scope, before any part of your code is executed.

  • Functions are hoisted first, and then variables.
  • Function declarations have priority over variable declarations, but not over variable assignments.

MORE

  • IIFE
  • Scope
  • Hoisting
  • Callstack
  • Currying
  • Callbacks
  • Promises
  • Closures
  • Iterators
  • Generators
  • Async await
  • Type coercion
  • DOM Manipulation
  • Prototype inheritance
  • Understanding "this" keyword
  • apply(), .call() and .bind()

OBSERVER API

EXAMPLES

OBJECTS

Useful object methods: keys, values, and entries.

const data = {
    name: 'Pierre',
    age: 32
}

// Give me the keys in an array
Object.keys(data);
// ['name', 'age']

// Give me the values in an array
Object.values(data);
// ['Pierre', 32]

// Give me the keys and the values in an array (converts an object → array)
Object.entries(data)
// [['name', 'Pierre'], ['age', 32]]

// Give me the key-value pairs in an object. (converts an array → object)
const a = Object.entries(data);
// [['name', 'Pierre'], ['age', 32]]
const b = Object.fromEntries(data);
// { name: 'Pierre', age: 32 }

PROMISE

let promise = new Promise(function(resolve, reject) { 
    resolve(123); // immediately give the result: 123
});

DEFINITION

  • nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. Best practices to use it instead of (||) to provide default value because of the fasly potential issue (eg. '' or 0).
  • logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined).
  • logical OR assignment (x ||= y) operator only assigns if x is falsy.
  • optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain. Instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.
  • typeof operator returns a string indicating the type of the unevaluated operand
  • non-null assertion operator (myExpr!;) tell the Typescript compiler explicitly that an expression has value other than null or undefined