비동기패턴 – 콜백 - 풀스택개발 EastFlag

자바스크립트 실행순서

Q: 아래를 실행하면 실행결과가 무엇인가?

a) 실행할때마다 A-B-C 로 출력되거나 또는 A-C-B 로 다르게 출력된다.
b) 실행할때마다 항상 A-C-B로 출력된다.

console.log("A");

setTimeout(function () {
	console.log("B");
}, 0);

console.log("C");

console.log("A");

setTimeout(function () {

console.log("B");

}, 0);

console.log("C");

setTimeout 부분은 0초 후에 B를 출력하라는 것이다.
만일, 자바스크립트가 멀티쓰레드라면 a가 정답일것이다. 메인쓰레드 외에 setTimeout 이라는 부분을 별도의 쓰레드가 담당하게 되어서 두개의 쓰레드가 경합하게 되면 메인쓰레드가 C를 출력할지 setTimeout을 담당한 쓰레드가 B를 출력할지는 CPU가 그때마다 다르게 할당할 것이기 때문이다.

그러나, 자바스크립트는 싱글스레드이다. 따라서 setTimeout 부분을 별도의 쓰레드로 할당하지 않고 나중에 실행하기 위해서 큐에 넣어둔다. 그리고 메인쓰레드는 C까지 출력하고 자기의 일을 다 하고 나면 그 담에 큐에 쌓여진 job을 갖고 와서 처리한다. 따라서 항상 A-C-B 순서로 출력되게 된다.

Q: 맨 끝에 무한 루프를 추가하면 출력은 어떻게 되는가?

console.log("A");

setTimeout(function () {
	console.log("B");
}, 0);

console.log("C");

while(true) {}

console.log("A");

setTimeout(function () {

console.log("B");

}, 0);

console.log("C");

while(true) {}

메인쓰레드가 자기일을 다하고 여유가 있을때 큐에 쌓여진 job을 처리하는데, while 문에서 무한루프로 계속 일을 하고 있으면 큐에 쌓여진 job을 처리할 수 없다. 따라서 출력은 A-C 까지만 출력되고 더이상 출력되지 않는다.

콜백패턴

Q: 1초후에 A를 출력하고 그 일이 끝나면 1초후에 B를 출력, 그 일이 끝나면 C를 차례대로 출력하시오. 여기서 문제의 핵심은 A, B, C 출력을 동시에 하는것이 아니라 A, B, C를 순차적으로 실행한다는 것이다.

setTimeout(function() {
  console.log("A");
  setTimeout(function() {
    console.log("B");
    setTimeout(function() {
      console.log("C");
    }, 1000);
  }, 1000);
}, 1000);

setTimeout(function() {

console.log("A");

setTimeout(function() {

console.log("B");

setTimeout(function() {

console.log("C");

}, 1000);

setTimeout의 첫번째 파라메터인 펑션은 1초후에 실행될 펑션이다. 해당 펑션은 큐에 쌓이고 1초후에 메인쓰레드가 실행하게 된다. 이렇게 비동기로 실행되는 펑션을 콜백 펑션이라고 하고 이러한 패턴을 콜백 패턴이라고 한다.

그런데, 이런 콜백 패턴을 중첩해서 사용하게 되면 문장이 점점 더 깊숙하게 들어가게 되고 코드의 가독성이 떨어지게 된다. 이런것을 callback hell, callback triangle 이라고 부르며 이것을 해결하기 위해서 Promise 패턴이 등장하였다.

CodePen

See the Pen javascript callback example by LeeDongKee (@eastflag) on CodePen.default