콜백함수란?

고차함수와 콜백함수

콜백함수를 살피기 전에, 고차함수의 개념을 알아보자.

•  고차함수란?
  • 함수를 인자(argument)로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수
  • 함수 내부에서 콜백 함수를 호출(invoke) 할 수 있다

그렇다면 콜백함수란 무엇일까?

• 콜백함수(callback function) : 다른 함수(caller)의 인자(argument)로 전달되는 함수. 어떤 작업이 완료되었을 때 호출하는 경우가 많다.

map, filter, reduce

콜백함수는 어떤 방식으로 쓸 수 있을까?

이 콜백함수의 간단한 예제를 살피면 잘 알다시피 map, filter, reduce 등의 고차함수가 있다.

• map : 배열의 각 요소에 콜백함수를 적용시킨 새로운 배열을 리턴한다. (immutable). 콜백함수에 두번째 인자를 줄 경우 인자의 인덱스를 가지고 온다.
  • 배열의 각 요소가
  • 특정 논리(함수)에 의해
  • 다른 요소로 지정(map) 된다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]
// 출처 : MDN

• filter : 배열 각 요소에 콜백함수를 적용시켰을 때, true를 리턴하는 요소만 모은 새로운 배열을 리턴한다.(immutable). 모든 배열의 요소 중에서 특정 조건을 만족하는 요소를 걸러내는 메소드이다.
  • 배열의 각 요소가
  • 특정 논리(함수)에 따르면, 사실(boolean)일 때
  • 따로 분류(filter)한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
// 출처 : MDN

• reduce : 배열의 각 요소를 콜백함수에 맞게 하나로 응축시킨 값을 리턴한다. 초기값을 설정하지 않으면 배열의 첫번째 요소가 acc. cur는 두번째 요소부터 시작한다. return을 해줘야 응축을 해줄 수 있다. 초기값이 주어졌을 경우에 cur는 첫번째 요소부터 시작. 세 개 인자를 줄 경우 (acc, cur, idx)로 활용. idx는 인덱스 값.

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10
// 출처 : MDN

콜백함수는 메소드로 사용되는 것 외에 어떤 식으로 사용될까?

동기와 비동기

이것을 알기 전에 동기와 비동기의 개념에 대해 알아보자.

• synchronous(동기) : 시작 시점과 완료 시점이 같은 과정. 요청에 대한 결과가 동시에 일어난다.
  • 예를 들어, A작업과 B 작업을 순서대로 처리할 때, A작업이 종료되는 시점에 B 작업이 시작된다. (시작 시점과 완료 시점이 같다) 순서대로 하나씩 처리하기 때문에 작업시간이 길어진다. 
• asynchronous(비동기): 요청에 대한 결과가 동시에 일어나지 않는다.
  • 예를 들어, 서버에 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행 할 수 있다. 즉 A작업을 시작한 후 이를 완료하는 것과 상관 없이 B작업이 실행된다. A와 B작업은 각각 결과값이 나오는대로 출력된다.

비동기의 주요 사례

• Dom Element 이벤트 핸들러
  • 마우스, 키보드 입력
  • 페이지 로딩(DOMContentLoaded)
• 타이머
• 타이머 API(setTImeout)
• 애니메이션 API(requestAnimationFrame)
• 서버에 자원 요청 및 응답 : 비동기적 실행은 웹 개발에서 유용함. 백그라운드 실행, 로딩 창 등의 작업, 인터넷 서버로 요청을 보내고 응답 기다리기, 큰 용량 파일 로딩하기 등
  • fetch API
  • AJAX(XHR)

이 중 타이머 API를 잠깐 살펴보자.

Timer API

• setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행

setTimeout(function () { console.log('1초 후 실행'); }, 1000);

• setInterval(callback, millisecond) : 일정 시간의 간격을 가지고 함수를 반복적으로 실행

setInterval(function () { console.log('1초마다 실행'); }, 1000);

const timer = setInterval(function () { console.log('1초마다 실행'); }, 1000); 
clearInterval(timer); // 반복 실행중인 타이머를 종료. 더 이상 반복 실행되지 않음

 

콜백함수는 비동기 처리를 위해 사용되곤 한다. 콜백함수의 전형이라 할 수 있는 setTimeout이 비동기 로직에서 어떻게 사용되는지 살펴보자.

const printString = (string, callback) => {
  setTimeout(
    () => {
    console.log(string);
    callback();
  },
  Math.floor(Math.random() * 100) + 1
  )
}

const printAll = () => {
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {
      })
    })
  });
}
printAll();

콜백함수가 반복되면 어떤 일이 일어날까? 앞의 단 몇 줄의 코드에서 볼 수 있듯이, 코드가 많이 어지럽다. 콜백이 콜백을 부르고 콜백을 부르는 방식은 코드 정리가 어렵다. 옆으로 누운 피라미드, 즉 callback hell이 발생할 수 있다.

콜백 헬을 다루기 위해 Promise 객체가 사용되는데, 이 개념은 다른 포스팅에서 다뤄보기로 하겠다.