콜백 함수 이해하기 2일차

콜백함수

 

• 다시 콜백함수란?

console.log('콜백이에요') 라는 로직을 가지고있는 함수가 있다고보자
이 함수를 인자로서 넘겨줄때 제어권도 함께 넘겨주는것을 콜백 함수라고 한다.

1초후 실행하는 setTime함수가 있다고했을때 콜백함수를 인자로 넘겨줌으로써 
setTime 함수의 내부로직에 console.log('콜백이에요')가 추가된다고 생각하면 될듯하다.

1초후 함수가 실행되기 전까지 제어권은 setTime 함수에게 있다.

• 콜백함수에게 제어권을 위임받은함수는 어떤 제어권을 갖고있는가

콜백함수에게 제어권을 위임받은 함수는

1.호출 시점에 대한 제어권을 갖는다
2.인자에 대한 제어권을 갖는다

 

• 예시를 보며 생각해보자

/*timer라는 변수를 호출하면 1초후 펑!이라는 문자를 출력하는 로직을 실행하는 함수다
setTimeout : 매개변수로 받은 콜백함수의 로직을 일정시간이후 수행하는 메서드다*/

let timer = setIimeout(function(){
console.log('펑!')},1000) 
▲이 코드에서 
function(){
console.log('펑!')}
▲ 여기까지가 매개변수임

여기서 함수를 생성하고
let timeout = function(){
console.log('펑!')}

/*setTimeout메서드에 콜백함수로 전달한후 실행하면 언제 호출할 것인가에 대한 제어권이
setTimeout에게 위임된다.*/

let timer = setTimeout(timeout/*이부분이 콜백함수*/,1000)

console.log(timer)를 호출할시 그 안에 인자로 호출받은 timeout이 실행되면서 제어권을 다시 timeout에게 반환한다.

//권한이 나 => timer => 나 로 돌아온다고보면됨
//console.log(timeout) => 펑! 실행후 종료  => 나에게 제어권이 있음 내가 필요할때마다 수동으로 해줘야함 =>비효율

 

• 콜백함수 this 바인딩?머리아파

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

여기서 전역객체가 이해가 잘안됨
전역객체는 자바스크립트에서 모든 곳에서 접근할 수 있는 기본 객체 
console,Math,setTimeout 등이 전역객체에 속한다.
전역: 아무때나 꺼내쓸수있는 아이템창고 
전역객체:아이템창고에 있는 아이템

다시 this바인딩으로 돌아가보자
this는 어디서 어떻게 호출되었느냐 에 따라 this가 가리키는 값이 변하는데
전역 즉 아이템창고에서에 this는 전역객체(창고에 있는 아이템) 을 가리킨다.
객체의 메서드 내부에서의 this는 객체 즉 메서드의 주체가 되는 객체를 가리킴
메서드:obj.method => 여기서 this는 obj를 가리킨다.
함수 : function(){} 에서는 전역객체를 가리킨다.

예시로 map메서드를 직접 만들어봄

Array.prototype.testMap = function (callback/*map메서드의 첫번째 인자 콜백함수*/, thiss/*map함수의두번째 인자 this*/) {
  

  //map 은항상 새로운 객체를 반환함 => 함수에서 return 할 결과 배열
  let mappedArr = [];
for (let i = 0; i < this.length; i++) {
    let mappedVal = /*콜백함수를 수행한 값*/callback.call(thiss || global, this[i]);/*map메서드의 2번째인자가 들어왔다면 thiss 사용 안들어왔다면 global 사용해서
    ,this[i](arr = [1, 2, 3, 4, 5])의 문자를 넣어줘라는느낌*/
    mappedArr[i] = mappedVal; // 여기에 넣어준다.
  }
  return mappedArr; //for문이 끝나고 남은 값을 밖으로 리턴해줌
};

const arr = [1, 2, 3, 4, 5];
let newArr = arr.testMap(function (num) {
  return num * 10;
});
console.log(newArr);​