콜백 함수( callback function )

✨ 콜백 함수( callback function )
함수의 매개 변수로 함수 객체를 전달해 다른 함수의 내부에서 매개변수 함수를 실행하는 것
Cf. 고차 함수: 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수

콜백 함수는 매개 변수로 '함수 객체'를 전달해 다른 함수의 내부에서 전달된 함수를 실행하는 것이다. 이 때 매개 변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수( Higher-Order function, HOF )라고 한다.

콜백 함수는 함수의 변하지 않는 공통 로직은 미리 정의해 두고, 경우에 따라 변경되는 로직은 추상화를 통해 함수 외부에서 함수 내부로 전달하여 의존성을 낮추어 '재사용성'을 높이기에 유용하다.

고차 함수는 콜백 함수를 자신의 일부분으로 합성하고, 매개 변수로 전달받은 콜백 함수의 호출 시 필요에 따라 콜백 함수에 인수 전달한다. 따라서 고차 함수에 콜백 함수를 전달 시에 콜백 함수를 호출하지 않고 함수 자체를 전달한다 ! ( 'function( )'이 아닌 'function' 형태로 ! )

function coffeeMachine(shot, callback) {
	for(let i = 0; i < shot; i++ ){
	callback(i); //콜백 함수 실행 부분
  }
};

const addMilk = function(i){
	console.log('☕️ caffeLatte');
};

const addWater = function(i){
  console.log('☕️ Americano')
}

coffeeMachine(3, addMilk) // ☕️ caffeLatte ☕️ caffeLatte ☕️ caffeLatte

콜백 함수는 비동기 처리( 이벤트 처리, Ajax 통신, 타이머 함수 등 )와 배열 고차 함수 등에 사용되는 중요한 패턴이다 !

---

✔️ 콜백 함수 사용 원칙

1. 익명의 함수 사용

콜백 함수는 호출 함수에서 일회용으로 사용하는 경우가 많고 함수 내부의 '매개변수'를 통해 실행되기 때문에 이름이 필요하지 않은 경우가 많다 이런 경우 이름 없는 익명의 함수를 사용함으로써 코드를 간결하게 만들 수 있고, 함수 이름의 충돌을 방지할 수 있다.

const greeting = (name, callback) => {
  const sayHello = `Hello! ${name}!`;
  
  callback(sayHello);
}

greeting('Tia', function(name){
  console.log(name)
})

2. 화살표 함수 모양의 콜백

코드를 한 단계 더 간결하게 하고 싶다면 화살표 함수 형태의 콜백을 활용할 수 있다.

const greeting = (name, callback) => {
  const sayHello = `Hello! ${name}!`;
  
  callback(sayHello);
}

greeting('Tia', (message)=>{
  console.log(message);
});

3. 함수 이름 넘기기

콜백 함수가 일회용이 아닌 여러 번 재사용 되는 경우, 별도로 함수를 정의하고 함수의 이름을 호출 함수 인자에 전달하는 방식으로 활용 가능하다. 매개변수에 전달할 콜백 함수 종류만 바꿔줌으로서 여러가지 함수 형태를 활용할 수 있다.

function greeting(firstName, lastName, callback){
	let fullName = `${firstName} ${lastName}`;

	callback(fullName);
}

function sayHello(name){
	console.log(`Hello, ${name}!`);
}

function sayBye(name){
	console.log(`Bye, ${name}!`);
}

greeting('Tia', 'Kim', sayHello);
// Hello, Tia Kim!

greeting('Tia', 'Kim', sayBye);
// Bye, Tia Kim!

---

✔️ 콜백 함수의 활용 예시

고차함수

let numbers = [1,2,3,4,5];
let decremented = [];

numbers.forEach((num)=>{
	decremented.push(num-1);
});

console.log(decremented); //[0,1,2,3,4]

Ajax 결과값 받기

fetch(url)
.then(response => response.json())
.then(result => console.log(result))

이벤트 리스너

<button onClick={() => {console.log('Clicked Button!')}}>

타이머 실행

setTimeOut(() => {console.log(`Time's up!`)}, 1000);