자바스크립트 비동기처리 - callback함수

자바스크립트는 기본적으로 동기적으로 코드를 실행한다. 동기적이라는 뜻은 코드가 작성된 순서대로 차례대로 실행된다는 것을 의미한다. 그러나 실행 시간이 오래 걸리는 코드가 중간에 있을 때 문제가 발생할 수 있다. 이러한 문제를 해결하기 위해 콜백 함수를 사용하여 비동기적으로 코드를 실행할 수 있다. 비동기적 실행은 시간이 걸리는 코드가 실행되는 동안 자바스크립트가 다음 줄로 넘어가서 다른 코드를 실행하는 것을 의미한다.

기본 비동기 처리

아래의 코드를 살펴보자.

console.log(1);
 setTimeout(() => {
    console.log(2);   
}, 2000);
console.log(3);

여기서 setTimeout은 콜백 함수로, 두 번째 인자로 주어진 시간(2000ms) 동안 기다린 후에 콜백 함수를 실행한다. 이 함수는 비동기로 처리되기 때문에, 결과는 1이 출력된 후 3이 출력되고, 2초 후에 2가 출력된다.

비동기 처리 문제

다음 코드를 살펴보자.

let product;
let price;

function goMart(){
    console.log('마트에 가서 어떤 음료를 살지 고민한다');
}

function pickDrink(){
    //고민하는데 시간이 걸리므로 
    //setTimeout을 이용해 3초를 기다린 후에 코드 실행
    setTimeout(function(){
        console.log('고민 끝');
        product = '제로 콜라';
        price = 3000;
    },3000)
}


function pay (product, price){
    console.log(`상품명: ${product} // 가격: ${price}`)
}

goMart();
pickDrink();
pay(product,price);

pickDrink 함수에 setTimeout이 있어 비동기 처리가 된다. 따라서 다음 코드인 pay 함수가 pickDrink 함수가 완료되기 전에 실행된다. 이 경우 pay 함수가 실행될 때 product와 price 값은 아직 설정되지 않았으므로 undefined가 출력된다.

문제 해결: 콜백함수 사용

이 문제를 해결하기 위해 콜백 함수를 사용할 수 있다. 콜백 함수란 다른 함수의 실행이 끝난 후에 실행되는 함수다. 이 경우, pickDrink 함수가 완료된 후에 pay 함수를 실행해야 하므로 콜백 함수를 사용한다.

아래의 코드를 보자

let product;
let price;

function goMart(){
    console.log('마트에 가서 어떤 음료를 살지 고민한다');
}

function pickDrink(callback){
    //고민하는데 시간이 걸리므로 
    //setTimeout을 이용해 3초를 기다린 후에 코드 실행
    //callback 매개변수: 콜백함수가 들어올 예정
    setTimeout(function(){
        console.log('고민 끝');
        product = '제로 콜라';
        price = 3000;
        callback(product, price)//매개변수로 받은 콜백 함수를 실행
    },3000)
}

function pay (product, price){
    console.log(`상품명: ${product} // 가격: ${price}`)
}

goMart();
pickDrink(pay);

위의 코드처럼 pickDrink에 pay 함수를 인자로 넣어 호출하고 pickDrink 함수에서 매개변수로 받는 callback 함수가 이 pay 함수가 된다. 따라서 이때 callback(product, price)는 pay(product, price)와 동일하게 작동하여 pay 함수가 product와 price 값을 받아서 실행된다.

이렇게 하면 pickDrink 함수가 완료된 후에 pay 함수가 실행되므로, pay 함수는 product와 price 값을 정상적으로 받아서 출력할 수 있게 된다.