파라미터로 함수를 전달하는 함수
콜백함수(Callback Function)란 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.
let number = [1, 2, 3, 4, 5] number.forEach(el => console.log(el * 2)); /* <output> 2 4 6 8 10 */
콜백함수는 이미 우리의 코드 속에서 자주 사용되고 있다.
예를 들어, forEach
함수의 경우 함수 안에 익명의 함수를 넣어서 forEach
문을 동작시킨다.
✔️ 익명의 함수 사용
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
자바스크립트는 null
과 undefined
타입을 제외하고 모든 것을 객체로 다룬다.
함수를 변수 or 다른 함수의 변수처럼 사용할 수 있다. 함수를 콜백함수로 사용할 경우, 함수의 이름만 넘겨주면 된다.
위의 예제에서, 함수를 인자로 사용할 때 callback
, finishFunc
처럼 ()
를 붙일 필요가 없다는 것이다.
✔️ 전역변수, 지역변수 콜백함수의 파라미터로 전달 가능
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 */