콜백과 비동기 함수

자바스크립트에 setTimeout() 함수는 특정 시간이 지난 후에 콜백을 실행하는 함수이다. 기다리는 동안에는 함수 아래에 있는 코드를 실행하고, 첫번째 아규먼트로는 어떤 콜백이든 전달 할 수 있다. 

// ...

setTimeout(callback, delay);

// ...


//함수의 동작은 아래와 같다.
//1. setTimeout() 이전에 있는 코드 실행
//2. setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작
//3. setTimeout() 이후에 있는 코드 실행
//4. delay가 지나면 callback 실행

console.log('1');

setTimeout(() => console.log('2'), 3000);
//첫번째 아규먼트로 콜백() => console.log('2')을 받고, 3000밀리초 = 3초가 지나면 이 콜백을 실행해준다.

console.log('3');

1
3
2

위 코드가 비동기 프로그램의 예시이다. 코드가 쓰여져 있는 순서대로 실행되지 않기 때문에.

비동기 실행 순서 설명

1. 일단 console.log('1')이 실행된다.
2. 이후에는 setTimeout 함수가 실행된다. (중요! 이 시점에는 3초 세는 타이머를 시작하기만 하고 바로 다음줄로 넘어간다. 콜백까지 실행 한 다음에 다음줄로 넘어가는 것X)
3. 그래서 일단 console.log('3')이 실행되고
4. 3초가 다되면 setTimeout에 전달된 콜백(console.log('2'))이 실행된다.

코드를 순서대로 실행하는 동기함수 였다고 가정하고 설명

1. console.log('1')이 가장 먼저 실행
2. 이후에는 setTimeout 함수가 실행
3. 타이머를 시작한 후, 3초를 기다린 다음 콜백(console.log('2')) 까지 실행한다.
4. 그러고 난 다음 console.log('3')이 실행된다.

두 프로그램을 비교해보면 비동기 프로그램이 동기 프로그램보다 조금 더 빨리 끝나는것을 확인 할 수 있다. 예시는 차이가 미세해도 setTimeout 이후의 작업이 더 오래걸리는 작업이었거나 더 많은 작업이 있었다면 비동기 프로그램이 훨씬 더 효율적이었을거다.

비동기 프로그램은 오래걸리는 작업이 있을 때 기다리는 동안 다른 작업을 먼저 처리함으로써 시간을 절약해준다.

setTimeout 함수를 비동기 함수(Asynchronous Function)하고 부르는데, 비동기 함수란 함수의 내용을 끝까지 쭉 실행하지 않고 중간에 다른 작업을 처리하다가 다시 돌아와서 마무리 하는 함수를 말한다. 콜백을 이용하면 나중에 해야하는 작업을 함수 형태(위 코드를 예로 들면 () =>  console.log('2') 같은)로 전달해 줄 수 있기 때문에 비동기 함수를 구현하는데 특히 유용하게 쓰인다.

콜백이라는 이름에 대해 생각해보면 call back : '나중에 다시 부르다' 라는 뜻이다. 바깥 함수 안에서 콜백이 언젠가 실행되기 때문에 이런 이름을 가지고 있는 것이다.

• 자바스크립트나 자바스크립트 라이브러리는 다양한 비동기 함수를 제공해준다.
• 제공되는 비동기 함수에 콜백을 넘겨주기만 하면 비동기 프로그램을 구현할 수 있다.