[JS-Flow] 자바스크립트 콜백함수

이 글은 코어자바스크립트 특강 내용을 정리한 글입니다.

요약

콜백함수 특징

• 다른 함수(A)의 인자로 콜백 함수(B)를 전달하면, A가 B의 제어권을 갖게 된다.

• (특별한 요청(bind)이 없는 한) A에 미리 정해놓은 방식에 따라 B를 호출한다.

• 미리 정해놓은 방식이란, 어떤 시점에 콜백을 호출할지, 인자에는 어떤 값들을 지정할지, this에 무엇을 바인딩 할지 등이다.

주의!

콜백은 함수이다.

메소드로 넘겨줘도 함수의 정의만 넘어가게 된다. 메소드처럼 사용이되는것이 아니다. this 바인딩이 메소드의 호출자가 아닌 콜백함수를 사용하는 함수에게 전적으로 달렸다.

기본적으로 콜백함수의 this는 window/global(전역객체)이다.

호출한 함수가 콜백함수의 어떤 제어권을 갖는가?

1. 콜백함수의 "실행시점" 제어권

var cb = function() {
    console.log('1초마다 실행 된다.');
};

setInterval(cb, 1000);

setInterval함수가 콜백함수를 1초마다 실행하면서 언제 실행할지를 제어한다.

2. 콜백함수의 "인자"의 제어권

var arr = [1, 2, 3, 4, 5];
var entries = [];
arr.forEach(function(v, i) {
    entriese.push([i, v, this[i]]);
}, [10, 20, 30, 40, 50]);

console.log(entries)

forEach함수에 첫번째 인자로 콜백함수, 두번째 인자로 thisArg를 받는다.

콜백함수는 첫번째 인자로 arr의 값, 두번째 인자로 arr의 인덱스를 받는것이 정해저 있다.

3. 콜백함수의 "this" 제어권

document.body.innerHTML = '<div id="a">abc</div>';

function cbFunc(x) {
    console.log(this, x);
}

document.getElementById('a').addEventListner('click', cbFunc);

$('#a').on('click', cbFunc);

addEventListner함수는 콜백함수의 this를 addEventListner를 호출한 요소로 정의한다.

또한 콜백함수의 인자를 event요소로 전달하도록 정의되어있다.

4. 주의 - 콜백은 함수이다.

var arr = [1, 2, 3, 4, 5];
var obj = {
    vals: [1, 2, 3],
    logValues: function(v, i) {
        if(this.vals) {
            console.log(this.vals, v, i);
        } else {
            console.log(this, v, i);
        }
    }
};

obj.logValues(1, 2); // this는 obj가 된다.
arr.forEach(obj.logValues); // this는 window가 된다.

콜백함수는 제어권을 가진 함수가 this를 지정하지 않는이상 this는 window/global이다.