Skip to content

Latest commit

 

History

History
171 lines (152 loc) · 9.74 KB

File metadata and controls

171 lines (152 loc) · 9.74 KB

Flow Control

2021

Automatically provided arguments in JavaScript callback functions 6/28
Learn callbacks, promises, Async/Await by Making Ice Cream 🍧🍨🍦 6/24
How to structure asynchronous JavaScript with async and await 2/16
How to use async and await in vanilla JS 2/15
What is Zone.js in 5 Minutes 1/29
The for...of loop in vanilla JS 1/22

2020

5 ways to refactor if/else statements in JS functions 11/19
Conditional JavaScript for Experts 10/3
Run a function after a specified amount of time using vanilla JS 7/26
How to run a function repeatedly at a desired interval using vanilla JS 7/12
The nullish coalescing operator in vanilla JS (sorry, the what now?) 6/30
Optional chaining in vanilla JS 6/29
Cache API in JavaScript 6/4
Stop Putting So Many If Statements in Your JavaScript 5/24
JavaScript setTimeout Tutorial 5/6
The delay on setTimeout() and setInterval() is just a suggestion 4/15
What the heck is the event loop anyway? | Philip Roberts | JSConf EU 2/21
Control Flow is in computer science the order that the instructions or statements or functions are executed.
Event Loop Continuously checks if the call stack is empty before adding callback queue functions
//ternary
// 1. Condition
// 2. what to do if true
// 3. what to do if false
const word = count === 1 ? 'item' : 'items';

//if else statement
let word;
if (count === 1) {
  word = 'item';
} else {
  word = 'items';
}

//optional chaining
let house = wizards.harry?.house.toLowerCase() ?? 'hufflepuff';
//switch
      switch (event.key) {
        case 'ArrowUp':
          y = y - 1;
          rotate = -90;
          break;
        case 'ArrowDown':
          y = y + 1;
          rotate = 90;
          break;
        case 'ArrowLeft':
          x = x - 1;
          rotate = 0;
          flipped = true;
          break;
        case 'ArrowRight':
          x = x + 1;
          rotate = 0;
          flipped = false;
          break;
        default:
          console.log('That is not a valid move');
          break;
.clearInterval()
.clearTimeout()
.setInterval()
.setTimeout()

{% code title="promise" %}

    function makePizza(toppings = []) {
      return new Promise(function (resolve, reject) {
        // reject if people try with pineapple
        if (toppings.includes('pineapple')) {
          reject('Seriously? Get out 🍍');
        }
        const amountOfTimeToBake = 500 + (toppings.length * 200);
        // wait 1 second for the pizza to cook:
        setTimeout(function () {
          // when you are ready, you can resolve this promise
          resolve(`Here is your pizza 🍕 with the toppings ${toppings.join(' ')}`);
        }, amountOfTimeToBake);
        // if something went wrong, we can reject this promise;
      });
    }
    
        makePizza(['pepperoni'])
      .then(function (pizza) {
        console.log(pizza);
        return makePizza(['ham', 'cheese']);
      })
      .then(function (pizza) {
        console.log(pizza);
        return makePizza(['hot peppers', 'onion', 'feta']);
      })
      .then(function (pizza) {
        console.log(pizza);
        return makePizza(['pineapple']);
      })
      .then(function (pizza) {
        console.log(pizza);
        return makePizza(['one', 'two', 'three', 'four', 'one', 'two', 'three', 'four', 'one', 'two', 'three', 'four']);
      }).then(pizza => {
        console.log('All done! here is your last pizza');
        console.log(pizza);
      })
      .catch(handleError)
      
      //catch handle error
      function handleError(err) {
      console.log('Ohh noooo!!');
      console.log(err);
    }

    makePizza(['cheese', 'pineapple'])
      .then(pizza => {
        console.log(pizza);
      }).catch(handleError)

{% endcode %}

{% code title="async/await" %}

    function wait(ms = 0) {
      return new Promise((resolve) => {
        setTimeout(resolve, ms);
      })
    }

    async function go() {
      console.log('Starting');
      await wait(2000);
      console.log('running');
      await wait(200);
      console.log('ending');
    }

{% endcode %}

async The async function declaration defines an asynchronous function — a function that returns an AsyncFunction object. Asynchronous functions operate in a separate order than the rest of the code via the event loop, returning an implicit Promise as its result. But the syntax and structure of code using async functions looks like standard synchronous functions.
await The await operator is used to wait for a Promise. It can only be used inside an async function.
.all() The Promise.all() method returns a single Promise that fulfills when all of the promises passed as an iterable have been fulfilled or when the iterable contains no promises or when the iterable contains promises that have been fulfilled and non-promises that have been returned. It rejects with the reason of the first promise that rejects, or with the error caught by the first argument if that argument has caught an error inside it using try/catch/throw blocks.
.allSettled() The Promise.allSettled() method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describes the outcome of each promise.
.catch() The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected) (in fact, calling obj.catch(onRejected) internally calls obj.then(undefined, onRejected)). This means that you have to provide an onRejected function even if you want to fall back to an undefined result value - for example obj.catch(() => {}).
.race() The Promise.race() method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.
.then() The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.
try...catch The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown.