Promise와 Callback이 무엇인가요?

지치지 않는 백엔드 개발자 김성주·2023년 6월 13일

기술면접 - JS

목록 보기

11/18

Promise와 Callback이 무엇인가요?

JavaScript에서 Promise와 Callback은 비동기 코드 처리를 위해 사용되는 두 가지 기술입니다.

Callback의 개념

Callback:
Callback은 함수를 다른 함수의 인자로 전달하여 비동기 작업이 완료되었을 때 실행되도록 하는 방식입니다. 즉, 함수 A를 호출할 때 함수 B를 콜백으로 전달하면, 함수 A의 작업이 완료되면 함수 B가 실행됩니다.

function fetchData(callback) {
  // 비동기 작업 수행
  setTimeout(function() {
    const data = 'Some data';
    callback(data); // 콜백 함수 호출
  }, 2000);
}

function process(data) {
  console.log('Data:', data);
}

fetchData(process);

위의 예제에서 fetchData 함수는 2초 후에 비동기 작업을 완료하고, process 함수를 콜백으로 호출합니다. 따라서 fetchData 함수의 작업이 완료되면 process 함수가 실행되며, 데이터가 콘솔에 출력됩니다.

Promise의 개념

Promise:
Promise는 콜백 헬(callback hell)을 해결하기 위한 패턴으로, 비동기 작업의 성공 또는 실패를 나타내는 객체입니다. Promise는 비동기 작업이 완료되면 결과 값을 반환하거나 에러를 전달할 수 있습니다.

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 비동기 작업 수행
    setTimeout(function() {
      const data = 'Some data';
      resolve(data); // 작업 성공 시 resolve 호출
      // reject(new Error('Error occurred')); // 작업 실패 시 reject 호출
    }, 2000);
  });
}

fetchData()
  .then(function(data) {
    console.log('Data:', data);
  })
  .catch(function(error) {
    console.error('Error:', error);
  });

위의 예제에서 fetchData 함수는 Promise 객체를 반환하며, 비동기 작업이 성공적으로 완료되면 resolve 함수를 호출하여 데이터를 반환합니다. 작업이 실패한 경우에는 reject 함수를 호출하여 에러를 전달합니다.

then 메서드는 Promise 객체가 성공적으로 완료되었을 때 실행되는 콜백 함수를 등록하고, catch 메서드는 작업이 실패한 경우 실행되는 콜백 함수를 등록합니다. 이를 통해 비동기 작업의 성공 또는 실패에 따라 처리할 수 있습니다.

resolve, reject가 무엇인가요?

resolve와 reject는 Promise 객체의 두 개의 함수 매개변수입니다. 이들 함수는 Promise의 비동기 작업이 완료되었을 때 또는 작업이 실패했을 때 호출됩니다.

resolve: Promise가 이행(fulfilled)되었을 때 호출되는 함수입니다. 이 함수는 비동기 작업의 결과 값을 인자로 받습니다. 이행된 Promise는 resolve 함수가 반환한 값을 가지고 완료됩니다.
reject: Promise가 거부(rejected)되었을 때 호출되는 함수입니다. 이 함수는 작업의 실패 원인을 인자로 받습니다. 거부된 Promise는 reject 함수가 반환한 값을 가지고 완료됩니다.

일반적으로 resolve 함수는 성공적으로 완료된 경우에 호출되고, reject 함수는 작업이 실패한 경우에 호출됩니다. 이를 통해 Promise를 사용하여 비동기 작업의 결과를 처리하거나 에러를 처리할 수 있습니다.