(작성중) [JS] 콜백 함수(Callback Function)

📌 콜백 함수(Callback Function)란?

파라미터로 함수를 전달하는 함수

콜백함수(Callback Function)란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.

let number = [1, 2, 3, 4, 5]
number.forEach(el => console.log(el * 2));

/*
<output>
  2
  4
  6
  8
  10
  */

콜백함수는 이미 우리의 코드 속에서 자주 사용되고 있다.
예를 들어, forEach함수의 경우 함수 안에 익명의 함수를 넣어서 forEach문을 동작시킨다.

📌 콜백 함수(Callback Function)사용 원칙

✔️ 익명의 함수 사용

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

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

위의 예제를 화살표 함수에서 일반 함수로 바꾼 예제이다.
콜백함수는 이름이 없는 '익명의 함수'를 사용한다. 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.


✔️ 함수의 이름(만) 넘기기

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

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

whatYourName('jihoo', finishFunc);

/*
<output>
name: jihoo
finish function
*/

💡TIP

JavaScript Data Type

• number
• string
• boolean
• object(function, array, data, regexp)
• null
• undefined

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


✔️ 전역변수, 지역변수 콜백함수의 파라미터로 전달 가능

• 전역변수(Global Variable): 함수 외부에서 선언된 변수
• 지역변수(Local Variable): 함수 내부에서 선언된 변수

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);

/*
<output>
fruit: apple / vegetable: tomato
*/