Corejavascript_04.callback(1)
15564 단어 corejavascriptcallbackcallback
해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.
콜백함수
-
콜백함수란?
다른 코드의 인자로 넘겨주는 함수이다.
-
콜백 함수를 넘겨받은 해당 코드 혹은 메서드는 그 함수에 대한
제어권을 가지게 되는데, 제어권 이라고 함은 콜백함수의
- 호출시점
- 인자
- this
에 대한 내용을 제어할 수 있다는 것이다.
호출시점 / 인자 / this
- 각 제어권은 아래 예시를 통해 확인할 수 있다.
let i = 0;
let timer = setInterval(() => {
console.log(i);
i++;
i > 4 ? clearInterval(timer) : null;
}, 300);
// 0.3초마다 콜백함수가 호출되도록 제어하는 setInterval
[1, 2, 3].map((idx, value) => {
console.log(idx, value);
/*
1 0
2 1
3 2
*/
});
// 인자의 명칭과 상관없이 첫번째 인자에는 요소가 두번째 인자에는 인덱스가 배치된다
// map 메서드처럼 콜백 함수가 받는 인자에 대한 규칙이 있을시 제어할 수 있다.
[1, 2, 3].forEach(
function () {
console.log(this); // [1,2]
},
[1, 2]
);
// forEach 같은 this 인자를 받는 메서드 같은 경우에는 콜백함수의 this 값을 지정해주기도 한다.
콜백 함수는 함수다.
- 위 제목은 당연한 말이지만 호출방식을 생각해보면 좀더 신중하게 생각할 수 있다.
let obj = {
val: [6, 7],
func: function () {
console.log(this);
},
};
[1, 2].forEach(obj.func);
// obj 가 아닌 전역객체가 출력된다 왜일까?
- 그 이유는 앞선 this 챕터에서 학습했다시피
this
값은 호출 되어야 결정되기 때문이다.
즉, 콜백함수(인자로 넘겨받은 함수)는 호출된 것이 아닌 함수 자체로써 넘어간 것일 뿐이기 때문에
forEach 코드 내부에서 호출되며, 그 위치에서 thisBinding 단계가 이루어진다.
콜백 함수 내부 this에 다른값을 바인딩
- 위와 같은 현상 때문에 콜백함수 내에서는 자신 원래 속한 객체의 값을 this 로 가져올 수 없다.
그래서 이를 위해서 활용하는 방법는 다른 변수에 this 값을 담아 함수 내에서 사용하는 방식이 있다.
let obj = {
val: [5, 6],
func: function () {
let self = this;
return function () {
console.log(self);
};
},
};
let newFunc = obj.func();
[1, 2].forEach(newFunc); // { val: [ 5, 6 ], func: [Function: func] }
// 이런식으로 활용할 this 값을 미리 정의한 함수를 반환하여 새로운 변수에 할당하는 방식이다.
- 이 방식으로 다른 객체에도 적용하여 this 값으로 끌어낼 수 있을까?
// 두가지 방식이 있다.
let obj = {
val: [5, 6],
func: function () {
let self = this;
return function () {
console.log(self);
};
},
};
// 1. 프로퍼티로서 해당 함수를 그대로 활용하는 법
let obj2 = {
val: [7, 8],
func: obj.func,
};
let newFunc2 = obj2.func();
[1, 2].forEach(newFunc2); // { val: [ 7, 8 ], func: [Function: func] }
// 2. call 메서드를 활용하여 this 값을 지정하는 법
let obj3 = { val: [9, 0] };
let newFunc3 = obj.func.call(obj3);
[1, 2].forEach(newFunc3); // { val: [ 9, 0 ] }
Bind
- 앞서 this 챕터에서 나온
bind
활용하여 좀더 간략한 코드 정리가 가능하다.
let obj = {
val: [5, 6],
func: function () {
console.log(this);
},
};
[1, 2].forEach(obj.func.bind(obj));
// bind 메서드는 새로운 함수를 반환하기 때문에 this 값이 지정된 함수를 넘겨줄 수 있다.
Author And Source
이 문제에 관하여(Corejavascript_04.callback(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sgyos000/Corejavascript04.callback1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
콜백함수란?
다른 코드의 인자로 넘겨주는 함수이다.
콜백 함수를 넘겨받은 해당 코드 혹은 메서드는 그 함수에 대한
제어권을 가지게 되는데, 제어권 이라고 함은 콜백함수의
- 호출시점
- 인자
- this
에 대한 내용을 제어할 수 있다는 것이다.
let i = 0;
let timer = setInterval(() => {
console.log(i);
i++;
i > 4 ? clearInterval(timer) : null;
}, 300);
// 0.3초마다 콜백함수가 호출되도록 제어하는 setInterval
[1, 2, 3].map((idx, value) => {
console.log(idx, value);
/*
1 0
2 1
3 2
*/
});
// 인자의 명칭과 상관없이 첫번째 인자에는 요소가 두번째 인자에는 인덱스가 배치된다
// map 메서드처럼 콜백 함수가 받는 인자에 대한 규칙이 있을시 제어할 수 있다.
[1, 2, 3].forEach(
function () {
console.log(this); // [1,2]
},
[1, 2]
);
// forEach 같은 this 인자를 받는 메서드 같은 경우에는 콜백함수의 this 값을 지정해주기도 한다.
let obj = {
val: [6, 7],
func: function () {
console.log(this);
},
};
[1, 2].forEach(obj.func);
// obj 가 아닌 전역객체가 출력된다 왜일까?
this
값은 호출 되어야 결정되기 때문이다.즉, 콜백함수(인자로 넘겨받은 함수)는 호출된 것이 아닌 함수 자체로써 넘어간 것일 뿐이기 때문에
forEach 코드 내부에서 호출되며, 그 위치에서 thisBinding 단계가 이루어진다.
그래서 이를 위해서 활용하는 방법는 다른 변수에 this 값을 담아 함수 내에서 사용하는 방식이 있다.
let obj = {
val: [5, 6],
func: function () {
let self = this;
return function () {
console.log(self);
};
},
};
let newFunc = obj.func();
[1, 2].forEach(newFunc); // { val: [ 5, 6 ], func: [Function: func] }
// 이런식으로 활용할 this 값을 미리 정의한 함수를 반환하여 새로운 변수에 할당하는 방식이다.
// 두가지 방식이 있다.
let obj = {
val: [5, 6],
func: function () {
let self = this;
return function () {
console.log(self);
};
},
};
// 1. 프로퍼티로서 해당 함수를 그대로 활용하는 법
let obj2 = {
val: [7, 8],
func: obj.func,
};
let newFunc2 = obj2.func();
[1, 2].forEach(newFunc2); // { val: [ 7, 8 ], func: [Function: func] }
// 2. call 메서드를 활용하여 this 값을 지정하는 법
let obj3 = { val: [9, 0] };
let newFunc3 = obj.func.call(obj3);
[1, 2].forEach(newFunc3); // { val: [ 9, 0 ] }
bind
활용하여 좀더 간략한 코드 정리가 가능하다.let obj = {
val: [5, 6],
func: function () {
console.log(this);
},
};
[1, 2].forEach(obj.func.bind(obj));
// bind 메서드는 새로운 함수를 반환하기 때문에 this 값이 지정된 함수를 넘겨줄 수 있다.
Author And Source
이 문제에 관하여(Corejavascript_04.callback(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sgyos000/Corejavascript04.callback1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)