콜백 함수
함수의 다른 코드에게 인자로 넘겨줌으로써 제어권을 위임하는 것을 말한다.
즉, X라는 조건이 충족 되었을 때, Y라는 함수를 실행하라는 제어권을 다른코드에게 맡기는 것이다.
콜백 함수의 this
보통의 콜백 함수는 함수와 동일한 특성을 가지고 있기 때문에
this가 전역 객체를 참조한다. 하지만, 제어권을 넘겨받은 코드에서 콜백함수에 별도로 this될 대상을 지정할 수 있을 때, 그 대상을 참조할 수 있다.
//1)this가 전역 객체를 참조
setTimeout(()=>{console.log(this)},300);//Window {0: global, window: Window,
//2)this의 특정 대상 지정
[1,2].forEach((x)=>{console.log(this,x)});
//Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …} 1
//Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …} 2
//3)함수 자체에서 this지정
document.body.innerHTML+=`<button id='a'> </button>`
document.querySelector('#a').addEventListener('click',()=>{console.log(this)});
//`<button id='a'> </button>1)setTimeout은 내부에서 콜백함수를 호출할때, call 메서드의 첫번자 인자로 전역 객체를 넘긴다.
2)forEach의 경우 호출 할때 특정인자로 this를 받는다. 여기선 넘겨주지 않았기 때문에 this가 전역객체가 된다.
참고
//[, thisArg])자리에 this값을 지정하면 된다.
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
3)addEventListener를 호출할때 call메서드의 첫번째 인자로 addEventListener를 호출한 주체를 'this'의 대상으로 넘긴다.따라서 호출 주체의 element가 된다.
this에 다른 값 바인딩
콜백함수의 경우 제어권 자체를 넘기기 때문에 this를 인자로 제공받지않는한 다른 값으로 변경하는 것이 어려웠다.
하지만 es5에서 제공하는 bind함수의 등장으로 간편해졌다.
callback 지옥
콜백지옥이란, 콜백함수를 익명함수로 전달하는 과정에서 반복되어 들여쓰기 감당이 어려울 경우를 말한다.
가장 간단한 해결 방법은 '가명함수'로 변경하는 것이다.
es6문법을 활용하여Promise,yield나async, await을 활용 할 수도 있다.
특징
-
콜백함수를 호출하는 시점을 스스로 판단한다.
-
콜백함수를 호출할때, 인자로 넘겨줄 값들의 순서가 정해져있다.
-
콜백함수의 this가 무엇을 바라볼 지 정해져있는 경우도 있다.
정해지지 않은 경우에는 전역 객체를 바라본다. this를 임의로 바꾸고자 할때는 bind를 사용할 수 있다. -
어떤 함수에 인자로 전달해도 결국은 함수이다.
참고한 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
