[TIL]200922 Promises

주어진 Tree 클래스에 DFSelect 메소드를 구현하세요.

예시

let root1 = new Tree(1);
let branch2 = root1.addChild(2);
let branch3 = root1.addChild(3);
let leaf4 = branch2.addChild(4);
let leaf5 = branch2.addChild(5);
let leaf6 = branch3.addChild(6);
let leaf7 = branch3.addChild(7);
root1.DFSelect(function (value, depth) {
  return value % 2;
});
// [1, 5, 3, 7]
root1.DFSelect(function (value, depth) {
  return depth === 1;
});
// [2, 3]

아직도 재귀는 너무 어렵다...

어제와 오늘은 promise강의에서 배운 것을 바탕으로 실습을 해보는 스프린트를 진행했다.

Promise

part1 Timer API

part1에서는 비동기함수를 사용하는 방법을 배웠는데 callback방식과 promise 그리고 가장 최근에 나온 async/await방식을 각각 사용해서 비동기함수를 사용해봤다.

callback방식

const delay = (wait, callback) => {
  setTimeout(callback, wait);
}

wait와 callback이라는 파라미터를 받는 delay라는 함수를 만든다. delay라는 함수 내에는 setTimeout함수가 실행되고 파라미터로 받은 callback함수를 파라미터로 받은 wait시간만큼 지연 후 실행시키게 된다. 이 함수를 이용해서 비동기 함수를 사용해 보면 아래와 같다

function runCallback() {
  resetTitle(); //1
  playVideo(); //1

  delay(1000, () => {
    pauseVideo(); //2
    displayTitle(); //2

    delay(500, () => {
      highlightTitle(); //3

      delay(2000, resetTitle);
    });
  });
}

runCallback함수는 우선 resetTitle 와 playVideo함수(1)를 실행하게 되고 delay함수에 wait파라미터로 1000ms(1초), 그리고 callback으로 pauseVideo displayTitle함수(2)를 받는다. 그럼 이 함수들은 위에 선언되었던 delay함수에 의해 1000ms(1초)후에 실행되게 된다. 그리고 그 뒤에 실행된 delay함수에 의해 highlightTitle함수(3)를 500ms(0.5초)지연 후에 실행하게 되고 그 뒤의 delay함수에 의해 2000ms(2초)뒤에 resetTitle를 실행하게 된다.

Promise방식

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}

wait라는 파라미터를 받는 sleep함수는 새로운 promise인스턴스를 생성하고 그 promise인스턴스는 resolve파라미터를 통해 setTimeout을 실행한다. setTimeout은 resolve파라미터로 들어온 함수를 wait만큼 지연 후 실행시키게 된다.

function runPromise() {
  resetTitle();
  playVideo();

  sleep(1000)
    .then(() => {
      pauseVideo();
      displayTitle();
    })
    .then(sleep.bind(null, 500))
    .then(highlightTitle)
    .then(sleep.bind(null, 2000))
    .then(resetTitle);
}

promise는 resolve를 통해 fullfilled(이행, 완료)상태가 되면 .then을 통해 결과값을 받을 수 있다.
그래서 callback방식을 promise방식으로 바꿔보면 위의 코드와 같다
runPromise함수는 resetTitle와playVideo함수를 실행하고 1000ms(1초) 지연 후 pauseVideo와displayTitle함수를 실행시키게 된다.
그 후 .then(sleep.bind(null, 500))코드는 500ms(0.5초)의 지연 시간 후 highlightTitle함수를 실행시키고 2000ms(2초)의 지연 후 resetTitle함수를 실행하게 된다.

Async/await방식

Async/await방식은 promise객체를 조금 더 보기편하게(?) 사용할 수 있는 방법이다.

const sleep = (wait) => {
  return new Promise((resolve) => {
    setTimeout(resolve, wait);
  });
}

async function runAsync() {
  resetTitle();
  playVideo();

  await sleep(1000);
  pauseVideo();
  displayTitle();

  await sleep(500);
  highlightTitle();

  await sleep(2000);
  resetTitle();
}

다른점은 function 앞에 async키워드를 붙여주고 .then대신 await를 사용해서 비동기함수를 동기함수처럼 사용한다.

Promise?

프로미스는 자바스크립트에서 비동기 처리에 사용되는 객체이다.
new promise()를 통해 프로미스 인스턴스를 생성할 수 있으며 프로미스는 세가지 상태를 가진다.

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨. .then()을 통해 결과 값을 받을 수 있다.
• 거부(rejected): 연산이 실패함. .catch()를 통해 실패한 이유(실패 처리의 결과 값)을 받을 수 있다.

프로미스는 new promise()를 통해 호출 할 때 콜백함수를 받을 수 있는데, 콜백함수의 인자는 resolve와 reject이다. resolve가 실행 되게 되면 프로미스의 상태가 대기(pending)상태에서 이행(fulfilled)상태로 바뀌고 .then()을 통해 결과 값을 받을 수 있다. 그리고 반대로 reject가 실행되게 되면 프로미스의 상태가 대기(pending)상태에서 거부(rejected)상태로 바뀌고 실패한 이유를 .catch()로 받을 수 있다.

프로미스의 처리 흐름은 위와 같다 출처:MDN