콜백함수란?
다른 코드의 인자로 넘겨주는 함수! 인자로 넘겨준다는 얘기는 콜백함수를 넘겨받는 코드가 있다는 얘기. forEach, setTimeout 등이 있다.
콜백 함수를 넘겨받은 위와 같은 코드 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다.(제어권이 그들 forEach, setTimeout에게 있음!)
코어자바스크립트 예시 기억하기 쉬워서 발췌 !
(코어자바스크립트의 예시) 다음 날 친구와 8시에 만나기로 한 스펀지밥 😂
- (현명하지 않은) 알람을 안 맞춘 스펀지밥..
- 불안한 마음으로 계-속 깨요
- 밤새 몇시인지 확인하느라 뒤척여 컨디션이 좋지 않아요
- 수시로 시간을 구하는 함수를 직접 호출했어요(제어권 : 스펀지밥)
- 시간을 구하는 함수 : 눈 뜨고 → 일어나고 → 시계 보고 → 아직 안됐네? → 다시 눕고 → 눈 감고 → 잠 들고
- (현명한) 알람을 맞춘 스밥
- 알람시계를 세팅하고 꿀잠을 자요!
- 6시에 알람소리를 듣고 상쾌하게 일어나 컨디션이 너무 좋아요
- 시계의 알람을 설정하는 함수(알람시계)를 호출했고, 그 함수(알람시계)가 ‘알아서’ 스펀지밥이 정해놓은 시간이 됐을 때 ‘알람이 울리는 결과’를 반환했어요(제어권 : 함수 즉, 알람시계) →
action에 대한 제어권은 함수에게 있었어요 😎
직관적인 설명... 너무 귀엽고 이해가 쏙쏙 된다
callback = call(부르다) + back(되돌아오다) = 되돌아와서 호출해줘!
📍다시 말하면, 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘!
즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께
위임한 함수. 콜백 함수를 위임받은 코드는자체적으로내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행 ← 이 적절한 시점 역시 제어권이 있는 위임받은 코드가 알아서 할것이다!
제어권
호출 시점
콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가짐!
예시)
var count = 0;
// timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지'
// 알려주는 id값
var timer = setInterval(function() {
console.log(count);
if(++count > 4) clearInterval(timer);
}, 300);var count = 0;
var cbFunc = function () {
console.log(count);
if (++count > 4) clearInterval(timer);
};
var timer = setInterval(cbFunc, 300);
// 실행 결과
// 0 (0.3sec)
// 1 (0.6sec)
// 2 (0.9sec)
// 3 (1.2sec)
// 4 (1.5sec)→ 원래 cbFunc()를 수행한다면 그
호출주체와제어권은 모두 사용자가 되지만.
→ setInterval로 넘겨주게 되면 그호출주체와제어권은 모두 setInterval이 된다.
| code | 호출 주체 | 제어권 |
|---|---|---|
| cbFunc(); | 사용자 | 사용자 |
| setInterval(cbFunc, 300); | setInterval | setInterval |
인자 (map 함수 예시)
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 이 변수의 순서를 바꿔 보자
var newArr2 = [10, 20, 30].map(function (index, currentValue) {
console.log(index, currentValue);
return currentValue + 5;
});
console.log(newArr2);
// -- 실행 결과 --
// 10 0
// 20 1
// 30 2
// [ 5, 6, 7 ] -> "currentValue가 아니라 index +5가 됨"📍결론 ! 컴퓨터는 사람이 아니기 때문에,
index - currentValue의 의미를 사람처럼 이해할 수 없다. 따라서 의도하지 않은 값이 나와버림
이처럼, map 메서드를 호출해서 원하는 배열을 얻고자 한다면 정의된 규칙대로 작성해야 한다.(콜백 내부의 인자도 물론 포함) 이 모든것은 전적으로 map 메서드. 즉, 콜백 함수를 넘겨받은 코드에게 그 제어권이 있다. 인자(의 순서)까지도 제어권이 그에게 있는 것.
this
콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다
제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.
예시
// Array.prototype.map 구현
Array.prototype.map123 = function (callback, thisArg) {
//map 함수 인자 -> (콜백함수, this)
//map 함수에서 return할 결과 배열
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 newArr = [1, 2, 3].map123((number) => {
return number * 2;
});
console.log(newArr); // [2, 4, 6]...추후 업데이트
