[WIL] 콜백함수(Callback Function) 란?

콜백(Callback)은 간단히 말하면 함수 안에서 실행하는 또 다른 함수 이다.
또 다른 함수를 만들 때 인풋(parameters)을 함수로 받아서 사용할 수 있는데, 이 때 인자로 사용되는 함수를 말한다.
즉, 파라미터로 변수가 아닌 함수를 전달하는 것을 말하며, 또한 함수이름 없이 익명으로도 전달 가능한 함수를 일컫는다.

 

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);
// 결과 -> 지금까지 홍길동이었습니다. 안녕히계세요

 

 

사용 원칙

1. 익명의 함수 사용
콜백함수는 이름이 없는 '익명의 함수'를 사용한다.
함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.

2. 함수의 이름(만) 넘기기
자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다.
함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.
위의 예제에서, 함수를 인자로 사용할 때 callback, finishFunc 처럼 () 를 붙일 필요가 없다는 것이다.



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: '2020-10-06 15:00:00',
    id: 'minidoo',
    name: 'Not Set',
    setName: function(firstName, lastName) {
        this.name = firstName + ' ' + lastName;
    }
}

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

getUserName('PARK', 'MINIDDO', userData.setName);

console.log('1: ', userData.name); // Not Set
console.log('2: ', window.name); // PARK MINIDDO

첫 번째 콘솔의 값이 PAKR MINIDDO 이기를 기대했지만, Not Set이 출력된다.

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



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

 

call()과 apply()를 사용

자바스크립트의 메서드인 call()과 apply()를 사용하여 this를 보호할 수 있다. 이 내용은 아직 어려워서 심화적인 내용은 이해가 되는대로 추가하겠다.

 

콜백지옥 (Callback Hell)

비동기 호출이 자주 일어나는 프로그램의 경우 콜백 지옥이 발생한다.
콜백 지옥이란 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들어질 정도로 깊어지는 현상이다.