[자바스크립트] Callback, Promise, Async/Await

 

Callback, Promise, Async/Await 모두 비동기 프로그래밍을 다루는 데 있어 중요한 개념이다. 

 

콜백 함수

• 다른 함수에 인수로 전달되는 함수
• 특정 작업이 완료된 후 또는 주어진 시간에 실행되도록 의도된 함수
• 비동기 함수 내에서 여러 중첩된 콜백이 사용되는 콜백 지옥의 문제점이 존재한다

예시)

function fetchData(callback) {
    setTimeout(() => {
        callback('완료');
    }, 1000); // 1초 후 콜백 함수를 호출
}

fetchData((data) => {
    console.log(data); // 완료
});

 

Promise

• 비동기 연산에 사용되는 자바스크립트의 객체
• 비동기 작업의 결과를 나타내며, 결과는 성공하거나 실패할 수 있다
• Promise.then을 연달아 사용하는 프로미스 체인의 문제점이 존재

프로미스는 비동기 작업의 진행 상태에 따라 세 가지 상태 중 하나를 가질 수 있다

1. Pending (대기 중): 비동기 작업이 아직 완료되지 않은 상태
2. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료되어 프로미스가 결과 값을 반환한 상태
3. Rejected (거부됨): 비동기 작업이 실패하여 에러를 반환한 상태

예시)

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('완료');
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data)) // 완료
    .catch(error => console.error(error));

 

Async/Await

• 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 문법
• "콜백 지옥"을 효과적으로 피하고 비동기 코드의 전반적인 구조를 개선하기 위해 탄생
• async 키워드는 Promise를 반환하는 비동기 함수를 정의하는 데 사용
• await 키워드는 Promise가 해결될 때까지 함수의 실행을 일시 중지하는 데 사용

예시) 

async function fetchData() {
    return '완료';
}

async function getData() {
    try {
        const data = await fetchData(); // 프로미스가 해결될 때까지 대기
        console.log(data); // 데이터 완료
    } catch (error) {
        console.error(error);
    }
}

getData(); // 완료

 

 

예제) 다음코드의 실행 순서는 어떻게 될까?

async function foo() {
    console.log(2); // 바로 실행
    setTimeout(() => {
        console.log(5); // 5ms 후에 실행
    }, 5);
}

async function main() {
    console.log(1); 
    await foo(); 
    console.log(6); 
}

main();

 

정답은 1, 2, 6, 5 이다.