[코어 자바스크립트] 콜백함수

진형욱·2022년 7월 31일
0
post-thumbnail

콜백함수란?

콜백함수는 다른 코드의 인자로 넘겨주는 함수.
(다른 코드에 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수를 일컫는다)
콜백함수는 ‘되돌아 호출해달라’는 명령이다.

어떤 함수 x를 호출하면서, ‘특정 조건일때 함수 y를 실행해서 나에게 알려달라’는 요청을 보내는 것이며
이 요청을 받은 x는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고, y를 직접 호출한다.

콜백함수의 제어권

콜백함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 순서로 넘길것인지에 대한 제어권을 가진다.

콜백함수도 함수이기 때문에 기본적으로 this가 전역객체를 참조하지만, 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우 그 대상을 참조하게 된다.

콜백 함수는 함수다

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

var obj = {

vals : [1,2,3]

logValues : function(v, i){

console.log(thisv,i);

}

};

obj.logValues(1,2);

[4,5,6].forEach(obj.logValues);

obj객체의 logValues는 메서드로 정의됐다. 7번째 줄에서 메서드 앞에 점이 있으니 메서드로 호출한것이다.따라서 this는 obj를 가리키고, 인자로 넘어온 1,2가 출력된다.

한편 8번줄에서는 forEach 함수의 콜백 함수로 전달했다. forEach에 의해 콜백이 함수로서 호출되고 별도로 this를 지정하는 인자를 지정하지 않았으므로 함수 내부에서 this는 전역객체를 의미한다


콜백지옥과 비동기제어

콜백지옥 : 비동기 제어를 위해 콜백 함수를 사용하다가 보면 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상.

동기적인 코드와 비동기적인 코드

동기적인 코드 : 현재 실행중인 코드가 완료된 후에야 다음 코드를 실행하는 방식.

  • 즉시 처리가 가능한 대부분의 코드는 동기적인 코드이다.

비동기적인 코드 : 현재 실행중인 코드 완료 여부와 무관하게 즉시 다음코드로 넘어간다

  • 특정 시간이 경과되기 전짜기 어떤 함수의 실행을 보류
  • 사용자의 직접적인 개입이 있을때 어떤 함수를 실행하도록 대기
  • 무언가 요청하고 응답이 왔을때 비로소 어떤 함수를 실행하도록 대거하는 등

별도의 요청, 실행의 대기, 보류 등과 관련된 코드는 비동기적인 코드이다.


map메서드

map메서드는 첫번째 인자로 callback 함수를 받고,
생략 가능한 두번째 인자로 콜백 함수 내부에서 this로 인식할 대상을 특정할 수 있다.

메서드의 대상이 되는 배열의 모든 요소들을 처음부터 끝까지 하나씩 꺼내 콜백 함수로 반복 호출하고 함수의 실행 결과들을 모아 새로운 배열을 만든다.

map메서드에 정의된 규칙에는 콜백 함수의 인자로 넘어올 값들 및 그 순서도 포함돼있다.

콜백함수를 호출하는 주체가 사용자가 아닌 map메서드이므로 map메서드가 콜백 함수를 호출할때 인자에 어떤 값들을 어떤 순서로 넘길것인지가 map메서드에게 달렸다.


this의 값 지정

this에는 thisArg값이 있을 경우에는 그 값을, 없을 경우에는 전역객체를 지정한다

이게 바로 this에게 다른 값이 담기는 이유이다. 제어권을 넘겨받을 코드에서 call/apply 메서드의 첫번째 인자에 콜백 함수 내부에서의 this가 될 대상을 명시적으로 바인딩하기 때문이다.

profile
90% of my problems magically disappeared when I slept well, ate well and went on regular walks

0개의 댓글