콜백함수, this

콜백 함수 

 -> 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행한다. (알아서)

 

콜백함수를 넘겨 받은 코드가 가지는 제어권

1. 호출 시점 

var count = 0;

//timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고 있는지'
//알려주는 id값

var timer = setInterval(function() {
 console.log(count);
 if(++count >4) clearInterval(timer); // count 변수가 4보다 커지면 clearInterval 함수를 사용하여 타이머를 중지.
 }, 300); //  300밀리초(0.3초)마다 익명 함수를 실행.

- 'clearInterval' 함수 : 특정 ID를 가진 타이머를 중지. 이 함수에 'setInterval'에서 반환된 타이머 ID를 전달하여 타이머를 중지함. 

 > setInterval가 호출 주체가 되어 제어권을 가진다. 

 

2. 인자

 (map 함수는 각 배열 요소를 변환하여 새로운 배열을 반환한다. 기존 배열을 변경하지 않고, 새로운 배열을 생성한다.)

//map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있다. 
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]

-map은 매개변수로 function(콜백함수)를 갖는다. 

-만약 currentValue, index 의 순서를 바꾸어 (index, currentValue)로 쓰면 인식하지 못한다. 이처럼 map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야 한다. 인자(의 순서)까지도 제어권이 map에게 있는 것. 

 

3. this

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

 

//Array.prototype.map을 구현해보았다.
Array.prototype.mapaaa = function (callback, thisArg){ // mapaaa = map 함수의 이름, 첫 번째 인자는 항상 콜백 함수, 두 번째 인자는 항상 this.
	var mappedArr = []; // map함수에서 return 할 결과 배열
	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);

-바로 제어권을 넘겨받을 코드에서 call/apply 메서드의 첫 번째 인자에서 콜백 함수 내부에서 사용될 this를 명시적으로 binding 하기 때문에 this에 다른 값이 담길 수 있다.