내일배움캠프 9일차 : 자바스크립트 콜백함수

위기가 찾아왔다. 콜백함수가 이해가 가지 않아 진도를 나가지 못하고있다. 빠르게 과제도 시작해야하는데 말이다... 우선은 여기에 최대한 콜백함수를 정리하면서 이해를 해보고 바로 과제를 시작해봐야겠다. 하다보면 되겠지..이해..

 

콜백함수 : 다른 코드에게 인자를 넘겨줌으로써 제어권도 함께 위임한 함수

ex) forEach, setTimeout -> 위임 받은 코드를 필요에 따라 적절한 시점에 실행 (제어권 가지고 있음)

 

- 제어권

1. 호출 시점 : 콜백함수 넘겨받은 코드는 콜백 함수 호출 시점에 제어권을 가짐

setInterval(콜백함수, 시점);

ex) setInterval(function() {  -> 제어권 넘겨받은 코드

      console.log(count);

     if(++count > 4) clearInterval(timer);

     }, 300);       -> 0.3초에 한 번씩 호출

 

2. 인자 : map 함수. 각 배열 요소 변환하여 새로운 배열 반환 -> 기존 배열을 변경하지 않으면서 새롭게.

var newArr = [10, 20, 30].map(function (currentValue, index) {

console.log(currentValue, index);

return currentValue + 5;

});

console.log(newArr);

 

// -- 실행 결과 -- //

10 0

20 1 

30 2 

[ 15, 25, 35 ]

여기서 currentValue와 index 인자 위치 바꿔 넣으면 전혀 다른 배열 값이 나옴. 위치로 출력하기 때문

-> 인자의 순서까지 콜백함수를 넘겨받은 코드가 제어권을 가지고 있음

 

 

3. this

콜백함수 - 함수이기 때문에 기본적으로 this -> 전역객체 참조

예외 : 제어권 넘겨받을 코드에서 콜백 함수로 별도 this 대상 지정할 경우 

Array.prototype.mapaaa = function (callback, thisArg) {

var mappedArr = [];

for (var i = 0; i < this.length; i++) {

// call의 첫 번째 인자는 thisArg가 존재하는 경우는 그 객체, 없으면 전역객체

// call의 두 번째 인자는 this가 배열일 것(호출의 주체가 배열)이므로,

// i번째 요소를 넣어서 인자로 전달

var mappedValue = callback.call(thisArg || global, this[i]);

mappedArr[i] = mappedValue;

}

return mappedArr;

};

 

const a = [1, 2, 3].mapaaa((item) => {

return item * 2; });

 

console.log(a);

 

제어권을 넘겨받을 코드(for)에서 call/apply 메서드의 첫 번째 인자에서 콜 백 함수 내부에서 사용될 this를 명시적으로 binding 하기 때문에(.mapaaa를 통해 지정) this에 다른 값(전역객체가 아닌)이 담길 수 있다.

 

- 콜백함수는 함수다

콜백 함수로 어떤 객체의 메서드를 전달해도, 그 메서드는 함수로 호출

 

- 콜백함수 내부 this에 다른 값 바인딩하는 방법

• self로 this를 연결시켜놓은 경우 등.. 다양한 방법 -> 하지만 비효율적
• bind 메서드 이용 -> 가장 좋은 방법
  var obj1 = {
  name: 'obj1',
  func: function () {
  console.log(this.name);
  } };
  
  //함수 자체를 obj1에 바인딩
  //obj1.func를 실행할 때 무조건 this는 obj1로 고정해줘!
  setTimeout(obj1.func.bind(obj1), 1000);
  
  var obj2 = { name: 'obj2' };
  //함수 자체를 obj2에 바인딩
  //obj1.func를 실행할 때 무조건 this는 obj2로 고정해줘!
  
  setTimeout(obj1.func.bind(obj2), 1500);

 

 

콜백지옥과 비동기 제어부분이 남았는데 이것은 다음에 기회가 된다면 정리하려한다. 다행히 블로그로 정리하면서 빠르게 강의를 듣고 읽으며 놓쳤던 부분을 집고갈 수 있어 이해가 아예 가지 않았던것이 이해가 가기 시작했다. 앞으로는 시간이 오래 걸리더라도 이해가 가지 않는 부분은 블로그에 정리하며 작은것까지 따져봐야겠다.