[자바스크립트] 동기와 비동기(feat. 콜백 함수)

 

동기와 비동기 의미

• 동기는 하나의 요청이 오면 완료가 되어야 다음 요청을 실행하는 순차적 방식으로 흐름을 쉽게 예측할 수 있고
• 비동기는 어떤 요청이 완료되기 전에 다음 요청을 실행하는 동시적 방식으로 여러 작업을 동시에 효율적으로 처리할 수 있다.

 

콜백 함수

콜백 함수의 사용 목적

• 비동기 방식으로 작성된 함수를 동기 처리하기 위해 주로 사용된다.
• 비동기 처리를 기본으로 하면서 일부 순차적인 처리를 해야될 때가 있기 때문이다.

 

콜백 함수 형태

function main(param1, param2, callbackFunc) {
    // ... 처리 내용
    callbackFunc();
}

main(1, 2, func());

• 보통 함수를 선언한 뒤 함수 타입 파라미터를 맨 마지막에 하나 더 선언해주는 방식으로 정의한다.
• 처리가 끝나면 파라미터로 전달 받은 함수를 실행하고 필요한 경우 결과 값을 인자로 넘겨줄 수도 있다.

 

물건 구매 프로세스

function purchase(product, price, quantity) {
    console.log(product + ' 상품을 ' + quantity + '개 구입하려고 합니다.');
    console.log('계산이 필요합니다.');
    let total = price * quantity;

    return total;
}

function pay(tot) {
    console.log(tot + '원을 지불하였습니다.');
}

 

• 동기 방식은 순차 처리를 하기 때문에 purchase에 작성된 순서로 결과를 얻을 수 있다.

 

잘못 처리된 비동기 방식

function purchase(product, price, quantity) {
    console.log(product + ' 상품을 ' + quantity + '개 구입하려고 합니다.');
    setTimeout(function() {
        console.log('계산이 필요합니다.');
        let total = price * quantity;

        return total;
    }, 1000);    
}

function pay(tot) {
    console.log(tot + '원을 지불하였습니다.');
}

• 물건을 구매할 때 계산하기까지 1초의 시간이 걸린다는 가정을 하였다.
• setTimeout을 이용해서 1초 후에 total이 리턴될 것이라고 예상하고 출력해보았다.

• 그러나 tot 는 계산된 값을 반환받지 못하고 먼저 출력이 되었고 1초 뒤에 setTimeout 함수가 실행되었다.

setTimeout 함수는 순차적인 흐름을 보장하지 않는 비동기 방식의 대표적인 예이다.

 

콜백 함수를 이용한 동기 처리

• 위와 같이 비동기 처리 구문에서 순차적으로 함수를 실행할 필요가 있기 때문에 콜백 함수를 사용하게 된다.

function purchase(product, price, quantity, callback) {
    console.log(product + ' 상품을 ' + quantity + '개 구입하려고 합니다.');
    setTimeout(function() {
        console.log('계산이 필요합니다.');
        let total = price * quantity;

        callback(total);
    }, 1000);    
}

function pay(tot) {
    console.log(tot + '원을 지불하였습니다.');
}

• 아까와 다른 점은 total을 계산한 이후에 total값을 파라미터로 갖는 함수를 실행한다는 순서를 갖게 된 것이다.

 

• 함수 실행 후 1초 뒤에 '계산이 필요합니다' 라는 메시지가 출력이 되고 이어서 pay함수가 실행이 되며 정상적으로 출력이 된다!

---

참고 자료

• 코딩애플_콜백함수가 뭔지 한국어로 쉽게 설명하는 영상
• 자바스크립트 콜백 함수 예제를 통해 개념 및 원리 쉽게 이해하기