[JavaScript] CallBack Function

(코어 자바스크립트(정재남 저- 위키북스)를 참조하여 작성.)

코어 자바스크립트 - YES24

콜백함수란?

다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행할 수도 있다.
-위키백과-

콜백함수에 대해 일상생활의 알람시계에 비유.

약속시간에 늦지 않기 위해 중간중간 잠에서 깨어 핸드폰을 확인하는 것과(수시로 구하는 함수를 직접 호출),

알람시계의 알람을 맞춰놓는 것.

(알람설정 함수를 호출 -> 호출 당시에는 아무것도 하지 않음 -> 시간이 되면 알람이 울림.)

알람이 울리는 것을 직접 제어하는 것이 아닌 알람시계에 제어권을 넘겨준 것. 콜백 함수는 제어권과 관련이 깊음.

 

=> 다른 코드의 인수로서 넘겨주는 실행가능한 코드, 직접 제어가 아닌 제어권을 넘겨줌.

호출시점

var count = 0;
var timer = setInterval(function() {
  console.log(count);
  if(++count > 4) clearInterval(timer);
}, 300);

//same code
var count = 0;
var cbFunc = function () {
  console.log(count);
  if(++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);

1. count에 0할당.
2. timer에 setInterval 함수 실행 결과 할당. (익명함수와 delay시간을 매개변수로 전달)

콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 시점에 대한 제어권을 가짐.

 

함수로서의 호출

콜백함수는 어떤 객체의 메서드를 전달하더라도 그 메서드는 메서드가 아닌 함수로서 호출됨.

var obj = {
  vals: [1,2,3],
  logValues: function(v, i) {
    console.log(this, v, i);
  }
};

obj.logValues(1, 2); // { vals: [1,2,3], logValues: f } 1 2
[4, 5, 6].forEach(obj.logValues); 
// Window { ... } 4 0
// Window { ... } 5 1
// Window { ... } 6 2

obj.logValues(1, 2)는 메서드로서의 호출이기 때문에 obj를 가리킴.

[4, 5, 6].forEach(obj.logValues)는 메서드로서의 호출이지만 forEach 함수의 콜백함수 인자로서 전달함.

 

obj.logValues가 가리키는 함수만 전달하는 것. funtion(v, i) { ... } 만 전달함.

즉, obj와의 관계가 없어지게 됨으로 this는 전역객체를 가리킴.

 

문제점

지속적인 비동기 호출이 일어나는 코드에서 흔히 '콜백지옥'이라 불리는 현상이 일어날 수 있음.

setTimeout(function(message) {
  let messageList = message;
  console.log(messageList);

  setTimeout(function(message) {
  messageList += ' ' + message;
  console.log(messageList);

    setTimeout(function(message) {
      messageList += ' ' + message;
      console.log(messageList);
      setTimeout(function(message) {
        messageList += ' ' + message;
        console.log(messageList);
      }, 500, '4');
    }, 500, '3');
  }, 500, '2');
}, 500, '1');

가독성이 엄청 떨어지고 유지보수가 어려워짐.

그래서 Promise라는 문법이 나왔음.

 

Primise 문법