[면접대비 예상꼬리질문] Promise에 대해서 알고있나요?

모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다.

Promise에 대해서 알고있나요?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 일반적으로 fetch 함수를 통해 데이터를 받아올 때 사용됩니다.

그렇다면 Promise는 왜 생긴것일까요? 그냥 받아오면 되는데

서버에 데이터를 요청하고 데이터를 받아오는 과정에서 데이터를 다 받아온 것처럼 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이를 해결하기 위해 나온 것이 Promise입니다.

비동기 처리가 뭔가요?

동기식(Synchronous) : 작업이 끝날 때 까지 다른 작업을 시작하지 않고 기다리는 방식
비동기식(Asynchronous) : 작업의 완료 여부와 상관없이 새로운 작업을 시작하는 방식

자바스크립트에서는 어떤 비동기 처리 방식이 있나요?

1. CallBack 함수 사용
2. Promise
3. async/await

어떤 경우에 비동기 처리를 해야할까요?

1. 사용자 이벤트 처리 시
2. 네트워크 응답 처리 시
3. 파일을 읽고 쓰는 등의 파일 시스템 작업 시
4. 의도적으로 시간 지연을 사용할 때

CallBack 함수는 뭔가요?

나중에 호출되는 함수를 말합니다. 개발자는 함수를 등록하기만 하고 어떤 이벤트가 발생하거나 특정 시점이 도달했을 때 시스템에서 호출하는 함수입니다. 대표적으로 EventHandler가 있습니다.

CallBack 함수가 있는 상태인데 Promise와 async/await는 왜 생겼을까요?

CallBack 함수가 중첩되어 있는 경우에 코드가 복잡해지고 가독성이 떨어지기 때문입니다.

// 가장 간단한 CallBack 함수 중첩
function first(callback) {
  let value;

  setTimeout(() => {
    value = { name: "임정민", age: 26 };
    callback(null, value);
  }, 4000);
}

first(function callbackOne(error, value) {
  if (error) {
    // ErrorHandling
  } else {
    second(value, function callbackTwo(error, value) {
      if (error) {
        // ErrorHandling
      } else {
        third(value, function callbackThree(error, value) {
          if (error) {
            // ErrorHandling
          } else {
            console.log(
              `Final value is ${value}. Here is end of Callback hell...`
            );
          }
        });
      }
    });
  }
});

Promise는 어떤식으로 그 문제를 해결하나요?

Promise는 생성되고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Promise가 Pending 상태라면 콜백 함수 인자로 resolve(성공), reject(실패)를 사용할 수 있습니다. resolve를 호출하면 Fulfilled 상태가 되고, reject를 호출하면 Reject 상태가 됩니다.
Promise가 Fulfilled 상태가 되면 then()을 이용하여 처리 결과 값을 받을 수 있습니다.
Promise가 Rejected 상태가 되면 catch()를 통하여 실패 이유를 받을 수 있습니다.

function async(num) {
    return new Promise((resolve, reject) => {
      if (num > 20) resolve();
      else reject();
    });
}
  

setTimeout(() => {
    const promise1 = async(25);
    promise1
        .then(() => {
        console.log("1 then!");
        })
        .catch(() => {
        console.log("1 catch!");
        });
    const promise2 = async(15);
    promise2
        .then(() => {
        console.log("2 then!");
        })
        .catch(() => {
        console.log("2 catch!");
        });
}, 3000);

async/await 과 Promise는 무슨 연관이 있죠?

async/await를 사용하면 위에서 사용하던 new Promise()를 리턴하는 함수를 손쉽게 만들 수 있습니다. 그 말은 async 함수의 리턴값은 무조건 Promise가 된다는 뜻이기도 합니다.

async function async(num) {
    if(num> 20) return `Success`
    else throw new Error()
}
  

setTimeout(() => {
    const promise1 = async(25);
    promise1
        .then(() => {
        console.log("1 then!");
        })
        .catch(() => {
        console.log("1 catch!");
        });
    const promise2 = async(15);
    promise2
        .then(() => {
        console.log("2 then!");
        })
        .catch(() => {
        console.log("2 catch!");
        });
}, 3000); // 위의 함수와 동일하게 작동합니다.

await는 Promise가 끝날 때 까지 기다리는 함수입니다. async 함수 안에서만 사용할 수 있습니다.

async function async(num) {
    if(num> 20) return `Success`
    else throw new Error('ERROR!!!')
}
  
function setTimeoutPromise(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(), ms);
    });
  }
  

const startAsync = async () => {
    await setTimeoutPromise(1000);
    try{
        const promise1 = await async(25)
        console.log(promise1)
    }catch(e){
        console.log(e)
    }
    try{
        const promise2 = await async(15);
        console.log(promise2)
    }catch(e){
        console.log(e)
    }
}

startAsync()

다음과 같이 사용할 수 있습니다. await를 사용하면 resolve 값을 리턴합니다. reject가 발생하면 예외가 발생하기 때문에 try, catch문으로 예외처리를 해야합니다.

Promise와 async/await의 차이점이 뭔가요?

Promise를 활용할 때에는 .catch()를 통해 에러 핸들링이 가능하지만 async/await는 try-catch문을 이용해야 합니다.

async/await은 비동기 코드가 동기 코드처럼 읽히게 해주어 코드가 길어질수록 async/await를 이용한 코드가 가독성이 좋다.

여러 비동기 동작을 한꺼번에 기다리는 건 어떻게 해야할까요?

Promise.all을 통해서 여러 비동기 동작을 한꺼번에 해결할 수 있습니다.
예를들어 밑과 같은 예시로는 여러 비동기 동작을 한꺼번에 해결할 수 없습니다. for문을 통해서 한개씩 기다리기 때문입니다.

function setTimeoutPromise(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(), ms);
    });
  }
  
  async function fetchAge(id) {
    await setTimeoutPromise(1000);
    console.log(`${id} 사원 데이터 받아오기 완료!`);
    return parseInt(Math.random() * 20, 10) + 25;
  }
  
  async function startAsyncJobs() {
    let ages = [];
    for (let i = 0; i < 10; i++) {
      let age = await fetchAge(i);
      ages.push(age);
    }
  
    console.log(
      `평균 나이는? ==> ${
        ages.reduce((prev, current) => prev + current, 0) / ages.length
      }`
    );
  }
  
  startAsyncJobs();

위와 같은 코드는 어떨까요? 1초만에 모든 사원의 정보를 모두 가져올 수 있습니다.

async function startAsyncJobs() {
  let promises = [];
  for (let i = 0; i < 10; i++) {
    promises.push(fetchAge(i));
  }
  
  let ages = await Promise.all(promises);

  console.log(
    `평균 나이는? ==> ${
      ages.reduce((prev, current) => prev + current, 0) / ages.length
    }`
  );
}

startAsyncJobs();

출처 : https://elvanov.com/2597