[JavaScript] 콜백 함수

콜백함수(Callback Function) 란?

콜백은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 이다.

즉, 파라미터로 변수가 아닌 함수를 전달하는 것을 말하며, 또한 함수이름 없이 익명으로도 전달 가능한 함수를 말한다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}

introduce("홍", "길동", function(name) {
    console.log(name);
});
// 결과: 홍길동

introduce 함수를 실행할 때, 첫번째와 두번째 인풋으로는 "홍"과 "길동"을 넣어주고, 마지막 세번째 인풋으로는 새로운 함수를 넣었다.

이 함수가 introduce 함수 안에서 callback(fullName)으로 실행되는 함수이다.

콜백이 유용한 이유는, 콜백 함수만을 바꿔줌으로서 하나의 함수를 여러가지로 응용할 수 있기 때문이다.

function introduce (lastName, firstName, callback) {
    var fullName = lastName + firstName;
    
    callback(fullName);
}

function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}

function say_bye (name) {
    console.log("제 이름은 " + name + "입니다. 안녕히계세요");
}

introduce("홍", "길동", say_hello);
// 결과: 안녕하세요 제 이름은 홍길동입니다

introduce("홍", "길동", say_bye);
// 결과: 제 이름은 홍길동입니다. 안녕히계세요

• 함수 say_hello 와 say_bye 를 정의해두고 introduce 함수에 인풋으로 사용해주면, introduce 함수에서 받아들이는 같은 인풋들을 가지고 다른 동작을 수행하는 것이 가능해진다.

즉, 함수를 나눠줌으로써 코드를 재활용 할 수 있고, 관리도 더 쉬워진다.

---

콜백함수 사용 원칙

1. 익명의 함수 사용

let number = [1, 2, 3, 4, 5];

number.forEach(function(x) {
    console.log(x * 2);
});

함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

2. 함수의 이름(만) 넘기기

function whatYourName(name, callback) {
    console.log('name: ', name);
    callback();
}

function finishFunc() {
    console.log('finish function');
}

whatYourName('miniddo', finishFunc);

/*
name: miniddo
finish function
*/

자바스크립트는 null undefined를 제외하고 모두 객체로 다룬다.
--> 함수를 변수처럼 사용할 수 있다.
--> 함수의 이름만 넘겨주면 된다.

3. 전역변수, 지역변수를 콜백함수의 파라미터로 전달

let fruit = 'apple';	// Global Variable

function callbackFunc(callback) {
    let vegetable = 'tomato';	// Local Variable
    callback(vegetable);
}

function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}

callbackFunc(eat);

// fruit: apple / vegetable: tomato

---

주의할 점

this를 사용한 콜백함수

let userData = {
    signUp: '2023.04.01',
    id: 'jungo',
    name: 'No',
    setName: function(firstName, lastName) {
        this.name = firstName + ' ' + lastName;
    }
}

function getUserName(firstName, lastName, callback) {
    callback(firstName, lastName);
}

getUserName('min', 'jungo', userData.setName);

console.log('1: ', userData.name); // No
console.log('2: ', window.name); // jungo

• 첫 번째 콘솔의 값이 min jungo 이기를 기대했지만, No가 출력된다.

• setName() 에서 사용된 this 객체가 window 글로벌 객체를 가리키기 때문이다. (콜백은 기본적으로 call by value)

따라서 this를 보호할 수 있도록 콜백함수를 만들어야 한다.

call(), apply()사용

자바스크립트의 메서드인 call()과 apply()를 사용하여 this를 보호할 수 있다.

function getUserName(firstName, lastName, callback, obj) {
    callback.call(obj, firstName, lastName); // - (1)
}

getUserName('min', 'jungo', userData.setName, userData); //	- (2)

console.log(userData.name);

<output>
min jungo

( 2 ) 에서 마지막 인자에 담긴 userData 는 ( 1 )에서 call 함수의 첫번째 인자로 전달된다.

즉, call() 에 의해서 userData에 this 객체가 매핑된다.

apply() 도 인자를 배열로 전달한다는 점만 다르고 동일하게 작동한다.

function getUserName(firstName, lastName, callback, obj) {
    callback.apply(obj, [firstName, lastName]); // 인자가 배열
}

getUserName('min', 'jungo', userData.setName, userData);

console.log(userData.name);

<output>
PARK MINIDDO