JavaScript - herougo/SoftwareEngineerKnowledgeRepository GitHub Wiki

Table Test

Format Tag example
Headings =heading1===heading2=====heading3===

Promises

Sources:

The call .catch(f) is a complete analog of .then(null, f), itโ€™s just a shorthand

p = new Promise((resolve, reject) => {  // function in promise constructor is called an executor
  console.log("Executed 1st"); // called synchronously and immediately
  resolve();
  reject(); // IGNORED: after resolve or reject is called, further calls to either are ignored
}).finally(
  () => {
     // clean-up
  }
).then(
  (result) => {
    console.log("Executed 3rd"); // Executed once after the current thread of execution
    return 0;  // returns result for future then handlers
  }, (error) => {
    console.log("Not executed");
  }
);
console.log("Executed 2nd");

Execute all promises and "then" when all are complete.

Promise.all([
  promise1,
  promise2,
  promise3
]).then((messages) => {
  console.log(messages);
})

A handler, used in .then(handler) may create and return a promise. In that case further handlers wait until it settles, and then get its result.

loadScript("./one.js")
  .then(script => loadScript("./two.js"))
  .then(script => loadScript("./three.js"))
  .then(script => {
    // scripts are loaded, we can use functions declared there
    one();
    two();
    three();
  });

Promises vs async

Source:

An async function always returns a promise. If the async function returns a non-promise, it is implicitly wrapped in a promise.

ES6 Modules

Source: https://www.youtube.com/watch?v=cRHQNNcYf6s

class User {
  constructor(name) {
    this.name = name
  }
}

function printName(user) { ... }

export default User
export { printName }

import User, { printName } from './thing.js'

Closures

Sources:

Closures - the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

  • i.e. a closure gives functions access to variables from their outer scopes, even after the outer scopes have returned.
  • closures are created every time a function is created

lexical environment - composed of 2 parts: Lexical Environment Record (object that stores all local variables like properties) and a reference to the outer lexical environment

Example

function createAdder(x) {
    return function(y) {
        return x+y;
    }
}
const add5 = createAdder(5);
console.log(add5(2)); // 7

Note:

  • The 5 is stored in the lexical environment with add5.
  • This value can change over time depending on the code.

Interview Question: What is the output of the following?

// A
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// B
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

Solution:

  • A: (prints "3" three times) var is defined outside each for block scope (function/global scoped)
  • B: (prints "0", "1", and "2") let is defined inside each for block scope (block scoped)