[JS] Syntax | 05. Callback

콜백(Callback)은 함수의 매개변수로 또 다른 함수로 전달하는 것입니다.

이렇게 전달되는 매개변수 함술를 콜백함수(callback function)라고 합니다.

 

콜백 함수를 매개변수로 전달할 때는 괄호() 없이 이름만 입력하며,

함수내에서는 일반 함수를 사용할 때와 동일하게 사용할 수 있습니다.

function a(){
	console.log('this is function a');
}

function b(){
	console.log('this is function b');
}

function printFunc(func){
	func(); // 일반 함수처럼 호출합니다.
}

// 인자로 함수 a, b를 넘겨줍니다.
printFunc(a);
printFunc(b);

새로 선언할 필요 없는 간단한 함수의 경우, arrow function을 즉석으로 만들어 사용할 수도 있습니다.

function forEach(array, callback) {
  for (let elt of array) {
    callback(elt);
  }
}

const words = ['JavaScript', 'Java', 'Python'];

forEach(words, (elem) => console.log(elem)); // 각 요소를 출력합니다.

forEach(words, (elem) => console.log(elem.toUpperCase())); // 각 요소를 대문자로 출력합니다.

콜백은 비동기 처리를 할 때 유용하게 사용됩니다.

콜백함수를 인자로 넘겨주면, 이를 처리하는 동안 다음 명령을 먼저 수행할 수 있기 때문입니다.

콜백함수의 처리가 끝나면, 프로그램은 다시 콜백함수로 돌아와 결과값을 반환합니다.

불러서(call) 다시 되돌아오도록(back)하는 함수이니까요.

콜백 헬(Callbak Hell)

콜백은 비동기 처리가 가능하다는 장점이 있지만, 단점 또한 존재합니다.

바로 비동기 작업을 연속적으로 처리할 때 코드의 가독성을 떨어뜨릴 수 있다는 것입니다.

Async1((response) => {  // Async1의 출력값은 Async2의 입력값으로 쓰입니다.
  Async2(response, (data) => {  // Async2의 출력값은 Async3의 입력값으로 쓰입니다.
    Async3(data, (result) => {  // Async3의 출력값을 콘솔에 출력합니다.
      console.log(result);
    });
  });
});

예를 들어 다음과 같은 코드에서는 세 가지 비동기 함수 Async1, 2, 3이 사용됩니다.

각각은 이전 함수의 출력값을 입력값으로 사용해야 하는 함수입니다.

콜백은 모든 작업을 함수 안에서 처리하기 때문에, 이를 구현 하려면 콜백 안에 콜백을 넣어야 합니다.

그 결과 중첩된 콜백 형태가 될 수 밖에 없고, 이는 코드의 가독성을 떨어뜨립니다.

이런 현상을 콜백 헬(Callback Hell)이라고 합니다.