📌 목차

✨ 자바스크립트 기초 강의 (ES5+): 같이 노트를 작성하며 배워요 📒

💁🏻

자바스크립트의 역사와 목적 및 동향
자바스크립트 동작원리

Promise (12강)

프로미스는 비동기를 간단하게 처리할 수 있도록 자바스크립트가 제공하는 오브젝트이다.

state를 이해하고
'producer(정보 제공자)와 consumer`(정보 사용자)로 나누어진다.

1. Producer

promise함수는 resolve,reject함수를 콜백함수로 받는다.

// when new Promise is created, the executor runs automatically.
// 프로미스를 만드는 순간 네트워크 통신이 시작되고 콜백함수가 바로 실행된다.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});

2. Consumers: then, catch, finally

promise //
  .then(value => {
    console.log(value);
  })
  //에러가 발생했을 때 호출
  .catch(error => {
    console.log(error);
  })
  //성공하든 실패하든 마지막에 수행하는 함수
  .finally(() => {
    console.log('finally');
  });

3. Promise chaining

const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000)
})

fetchNumber
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000)
    })
  })
  .then((num) => console.log(num))

4. Error Handling

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000)
  })
const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000)
  })
const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000)
  })

getHen() //
  .then(getEgg)
  .catch((error) => {
    return 'bread'
  })
  //egg를 받아오지 못해 에러가 발생한 경우
  //bread로 값을 교체해 나머지가 잘 작동하도록 만듦
  .then(cook)
  .then(console.log)
  .catch(console.log)

Async & Await (13강)

1. async

async function fetchUser() {
  // do network reqeust in 10 secs....
  return 'ellie'
}

const user = fetchUser()
user.then(console.log)
console.log(user)

2. await ✨

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms))
}

async function getApple() {
  await delay(2000)
  return '🍎'
}

async function getBanana() {
  await delay(1000)
  return '🍌'
}

async function pickFruits() {
  const applePromise = getApple()
  const bananaPromise = getBanana()
  const apple = await applePromise
  const banana = await bananaPromise
  return `${apple} + ${banana}`
}

pickFruits().then(console.log)

3. useful APIs ✨

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()]).then((fruits) => fruits.join(' + '))
}
pickAllFruits().then(console.log)

function pickOnlyOne() {
  return Promise.race([getApple(), getBanana()])
}

pickOnlyOne().then(console.log)