1. CallBack 함수란?

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

2. 표현법

기본 사용법

function getName (lastName, firstName, callback) {
    let fullName = lastName + firstName;
    
    callback(fullName);
}

getName("홍", "길동", function(name) {
    console.log(name);
});
// name = "홍길동"

여러가지 사용법

function getName (lastName, firstName, callback) {
    let fullName = lastName + firstName;
    
    callback(fullName);
}
 
function say_hello (name) {
    console.log("안녕하세요 제 이름은 " + name + "입니다");
}
 
function say_bye (name) {
    console.log("지금까지 " + name + "이었습니다. 안녕히계세요");
}
 
getName("홍", "길동", say_hello);
// 결과 = 안녕하세요 제 이름은 홍길동입니다
 
getName("홍", "길동", say_bye);
// 결과 = 지금까지 홍길동이었습니다. 안녕히계세요

콜백이 유용한 이유는, 콜백 함수만을 바꿔줌으로서 하나의 함수를 여러가지로 응용할 수 있기 때문입니다. 이런식으로 함수를 나눠줌으로써 코드를 재활용 할 수 있고, 관리도 더 쉬워지게 됩니다.

3. 콜백함수 사용 원칙

1. 익명의 함수 사용

let number = [1, 2, 3, 4, 5];
 
number.forEach(function(x) {
    console.log(x * 2);
});

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

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

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

// name: SuperMan
// nothing

자바스크립트는 null과 undefined 타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다.
함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.

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

let fruit = 'apple';	// 전역변수
 
function callbackFunc(callback) {
    let vegetable = 'tomato';	// 지역 변수
    callback(vegetable);
}
 
function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}
 
callbackFunc(eat);
 
// fruit: apple / vegetable: tomato