[자바스크립트] 콜백함수 이해하기

 

📌  콜백함수?

 

어느 함수에 인자로 넘겨주는 함수로 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수이다. 쉽게 설명해서 다른 함수의 실행이 끝나고 실행하는 것이 콜백함수이다. forEach , setTimeout 등이 있다.

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

function print(callback) {
    callback();
}

 

💡 익명함수

 

콜백함수는 일회성으로 사용하는 경우가 많아 코드의 간결성을 위해 익명함수를 사용한다. 함수 내부에서 매개변수로 실행되기 때문에 이름을 붙이지 않아도 되기 때문이다. 함수 이름 충돌을 방지하기 위함도 있다.

 

---

 

 

 

 

자바스크립트는 코드를 위에서 아래 순으로 실행하지만 순차적으로 실행되지 않을 때도 있다. 이걸 비동기 프로그래밍이라고 한다. 

아래 예시는 0.3초 후라는 적절한 시점에서 자신의 함수에서 적어놓은대로 실행하게된다. 0.3초 뒤 메세지 출력되는걸 확인 할 수 있다.

const message = setInterval(function(){
    console.log('3 second meassage');
    clearInterval(message);
},300);

var cbFunc = function () {
	console.log('3 second meassage');
    clearInterval(message);
};
var timer = setInterval(cbFunc, 300);

 

setTimeout(() => {
    console.log("3 second meassage");
}, 3000);

 

code	호출 주체	제어권
cbFunc()	사용자	사용자
setInterval()	setInterval()	setInterval()
setTimeout()	setTimeout()	setTimeout()

 

여기서 cbFunc의 호출 주체와 제어권은 모두 사용자에게 있고 setInterval과 setTimeout의 호출 주체와 제어권은 자기 자신이다.

화살표 함수는 자신만의 this를 가지지 않고 상위 스코프의 this를 참조하기 때문에 전역 객체를 무시하고 무조건 자신을 들고 있는 상위 객체를 가리킨다.

 

 

 

 

this와 콜백함수

이전 this 바인딩 포스팅을 할 때 콜백함수도 찍먹으로 글을 썼었는데 잊혀지지 않은 구문.. 콜백함수도 함수다. 제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다.

// Array.prototype.map
Array.prototype.map = function (callback, thisArg) {
    var mappedArr = [];
    for (var i = 0; i < this.length; i++) {
        // call의 두 번째 인자는 this가 배열일 것(호출의 주체가 배열)이므로,
        // i번째 요소를 넣어서 인자로 전달
        var mappedValue = callback.call(thisArg || global, this[i]);
        mappedArr[i] = mappedValue;
    }
    return mappedArr;
};
const a = [1, 2, 3].map((item) => {
    return item * 2;
});
console.log(a);

 

여기서 call의 첫 번째 인자는 thisArg로 thisArg가 존재하는 경우는 그 객체, 없으면 전역객체를 가리킨다.

call/apply 메서드의 첫번째 인자에서 콜 백 함수 내부에서 사용될 this를 명시적으로 binding 하기 때문에 this에 다른 값을 넣을 수 있다.

 

 

 

콜백함수에서 this가 전역객체인 이유

콜백 함수는 다른 함수의 인자로 전달되는 함수다. 그래서 콜백 함수는 자신을 전달받은 함수에 의해 호출되는데, 이때 콜백 함수 내부에서의 this는 해당 콜백 함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역 객체를 참조하게 된다.

 

 

 

콜백함수 this 해결

 

✅ call() : 첫 번째 인자로 this 객체 사용, 나머지 인자들은 , 로 구분

✅ apply() : 첫 번째 인자로 this 객체 사용, 나머지 인자들은 배열 형태로 전달

 

참초할 객체를 추가로 함수의 매개변수로 전달하고, 콜백함수 내에서 call과 apply 메서드를 통해 콜백함수가 참조할 객체를 지정해주면 된다.

var mappedValue = callback.call(thisArg || global, this[i]);

 

 

 

 

이벤트 리스너와 콜백함수

document.queryselector("#callback-btn")
    .addEventListener("click", function() {
      console.log("User has clicked on the button!");
});

 

버튼에 id값을 사용해서 버튼을 선택하고 addEventListener 메서드를 사용하여 이벤트 리스너를 추가했다. 이때 이벤트 리스너 함수는 두개의 파라미터를 필요로 하는데, 첫번째 파라미터로는 이벤트 타입인 '클릭' 이고, 두번째는 버튼이 클릭되었을 때 메세지를 남기는 콜백함 수이다. 콜백함수는 이렇게 이벤트 정의를 위해 사용되기도 한다.

 

 

var obj = {
vals: [1, 2, 3],
logValues: function(v, i) {
console.log(this, v, i);
}
};
//method로써 호출
obj.logValues(1, 2);
//callback => obj를 this로 하는 메서드를 그대로 전달 X
//단지, obj.logValues가 가리키는 함수만 전달
[4, 5, 6].forEach(obj.logValues);