Calllback과 Synchronous/Asynchronous

[콜백(Callback)]

동기 비동기 개념 이전에 콜백 함수에 대해 알아봅시다.

위키에 따르면 다른 코드의 인자로 넘겨주는 실행 가능한 코드라고 적혀 있습니다.

즉, 콜백 함수란 다른 코드의 인자로 넘겨줄 수 있는 함수입니다. 다른 코드의 인자로 넘겨주게 되면 그 함수 안에서 콜백 함수를 실행시킬 수 있으며 함수의 재사용성도 증가시킬 수 있습니다.

그렇다면 콜백함수는 왜 쓰는 것이고, 이게 동기 비동기랑 무슨 상관이 있을까요?

[동기(Synchronous) vs 비동기(Asynchronous)]

먼저 동기, 비동기 개념에 대해 알아봅시다.

동기 : 작업을 요청한 후 작업 결과가 나올때 까지 기다린 후 나머지 작업을 처리하는 방식

즉, 동기 방식은 스레드(프로세스)가 하부 작업을 요청했을 때 그 작업이 완료되기 전까지 스레드의 실행이 멈추는 방식입니다.

비동기 : 시스템 호출을 요청한 뒤 나머지 작업을 처리하다 요청한 호출이 완료되면 그에 따른 처리를 진행하는 방식

반면 비동기 방식은 스레드가 하부 작업을 요청해도 실행히 멈추지 않습니다. 대신, 하부 작업에서 처리가 완료되면 요청했던 스레드에 완료 메시지를 보내고 스레드에서 이를 처리하게 됩니다.

비동기를 은행 창구에 비유하면?

비동기 방식을 은행 창구에 비유해 봅시다. 보통 은행에서 먼저 도착한 순서대로 번호표를 발급하고 차례대로 이를 처리합니다.

하지만 번호표를 받았다고 해서 은행 창구 앞에서 주구장창 기다리지 않습니다. 대신, 기다리는 동안 핸드폰을 하거나, 잡지를 읽으며 다른 작업을 수행합니다. 작업을 수행하는 중에 해당 순번이 되면 창구에 가서 나머지 작업을 처리합니다.

동기 방식 프로그램은 일반적으로 실행 흐름에 문제가 없습니다. 정해진 흐름에 따라 프로그램이 실행되고 하부 함수가 실행되는 동안 프로세스는 멈춰있으며, 실행이 완료되면 프로세스는 결과를 받아 나머지 작업을 처리합니다.

하지만 이런 동기 방식으로 어플리케이션, 웹 페이지를 만든다면 응답 시간이 길어지고 비효율 적인 프로그램이 될 것입니다.

그래서 비동기 방식 프로그램(ex. ajax)이 등장합니다. 프로세스가 하부 작업을 요청해도 이를 기다리지 않고 나머지 작업을 실행합니다.

하지만 비동기 프로그램 또한 문제점이 있습니다. 바로 실행 흐름이 엉망이 된다는 것입니다.

ajax의 예를 봅시다.

function getString() {
var stringData;

setTimeout(function(){
stringData = "Hello world";
}, 5000);

return stringData;
}

console.log(getString());

위 예시를 보면 getString을 실행했을 때 setTimeout에서 5초를 세고 stringData에 "Hello world"가 삽입된 후 이를 return하여 "Hello world"가 출력되는게 맞습니다.

하지만 실제 실행했을 때 null이 출력됩니다. 그 이유는 ajax는 비동기 방식이고 프로세스는 setTimeout에서 5초를 기다리는게 아니라 stringData를 바로 return합니다.

이처럼 비동기 방식을 사용하면 실행흐름이 꼬일 수 있다는 단점이 있습니다.

이때 콜백 함수를 사용하여 이를 처리할 수 있습니다.

위에서 콜백 함수는 다른 함수의 인자로 넘겨주는 함수라고 했습니다.  ajax에서 제공하는 콜백 기능을 사용하여 함수를 인자로 전달하면, 하부 작업에서 처리가 끝난 후 결과를 받아들여 특정 로직 순서로 작업을 처리할 수 있습니다.

위 코드를 콜백을 사용한 코드로 바꾸면 다음과 같이 바꿀 수 있습니다.

function getString(callBackFunction) {
setTimeout(callBackFunction("Hello world"), 5000);
}

getString(function(StringData){
console.log(stringData);
})

위 코드에서 callBackFunction은 getString 내에서 사용하기 위한 이름입니다. 위 코드처럼 함수를 다른 함수의 인자로 전달하면 실행흐름이 꼬이지 않고 제대로 된 값을 출력할 수 있습니다.

[참고 자료]

- 자바스크립트 비동기처리와 콜백 함수 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

- 동기 비동기 호출에 대해서 :  https://chanspark.github.io/2017/08/07/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%98%B8%EC%B6%9C.html