[JavaScript] 자바스크립트 콜백함수(callback) 가볍게 이해하기

자바스크립트의 함수는 일급 객체다. 처음 접하는 사람에겐 다소 생소할 수 있는 용어다.
궁금하다면 일급객체를 좀 더 찾아 볼 수 있겠지만, 

간단하게 자바스크립트에서 함수는

 

1. 변수나 데이터안에 담길 수 있고

2. 매개변수로 전달 할 수 있고

3. 반환 값으로 사용할 수 있고

4. 실행도중에 생성될 수 있다

 

정도의 특징을 기억하면 좋을 것 같다.

 

콜백함수는 이 중에서 두번째 특징을 활용한 내용이다.

 

콜백함수란?

콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다.

매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

function linkGang() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goodGang() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkGang, goodGang);

예를 들자면 이런 것이다.
코드를 살펴보면 checkGang, linkGang, goodGang 총 3가지 함수를 선언하고

checkGang 함수를 호출할 때 매개변수로 count에 숫자값을,

그리고 link와 good에 각각 linkGang과 goodGang함수를 전달했다.

 

여기서 linkGang함수와 goodGang함수가 콜백함수 인 것이다.

 

checkGang함수가 먼저 호출되고, 매개변수로 들어온 count의 값에 따라
linkGang과 goodGang함수 둘 중 한 가지가 나중에 호출된다.

 

위 코드는 count가 2이기 때문에 linkGang이 실행된다.

 

콜백함수가 필요한 이유?

자, 그렇다면 도대체 이 콜백함수는 왜 필요할까? 

 

콜백함수의 이유에 대해 설명을 할 때
변수의 유효범위(scope)에 대한 이야기도 하고

동기/비동기(Synchronous/Asynchronous) 처리에 대한 이야기도 하면 좋을 것이다.

 

하지만,

컴퓨터 과학 분야를 기본기부터 탄탄하게 준비한 사람이라면 그 내용들을 쉽게 이해하겠지만,

(나만 그랬는지 모르겠지만..)

사실 처음 그런 개념을 접하는 사람은 아무리 쉽게 설명해도 단번에 이해하기란 마냥 쉬운 개념이 아니다.

이해를 한다고해도 어느정도 느낌만 느낄 뿐..(?)

 

그래서 처음에는 그냥 간단하게, 콜백함수가 필요한 이유를 찾기보다는

함수를 활용하는 하나의 방식으로 이해해두는 것이 좋다.

필요한 상황이 찾아오면, 말그대로 정말 필요한 때가 되면 필요를 느끼게 된다.

근데 그 필요할 때 콜백함수가 어떤 개념인지도 모른다면 활용할 수도 없지 않은가.

 

함수를 포스팅한 다음에 이 콜백함수를 정리한 이유도 이러한 이유에서다.

 

콜백함수는 그냥 방금 위에서 본 동작을 구현하기 위해서 필요했다.

여러 함수들을 선언하고, 어느 한 함수가 실행될 때,
상황에 따라 필요한 다른 함수를 실행하고 싶을 때 활용할 수 있다.

 

방금 들었던 예시에,
변수의 유효범위에 대한 개념도,

비동기 처리 방식에 대한 개념도 설명할 필요가 없었다.

그냥 코드가 흘러가는 대로 충분히 이해할 수 있는, 콜백함수의 예시였다.

 

콜백함수는 때로는 그냥 가독성이나 코드 재사용성 면에서도 활용한다.

function add(a, b) {
  return a + b;
}

function sayResult(value) {
  console.log(value);
}

sayResult(add(3, 4));

위 코드도 콜백함수를 이용하면 아래와 같이 바꿀 수 있다.

function add(a, b, callback) {
  callback(a + b);
}

function sayResult(value) {
  console.log(value);
}

add(3, 4, sayResult);

결과는 같지만, 함수를 호출하는 시점이나 동작하는 순서가 조금씩 달라진다.

 

이렇듯 콜백함수를 처음 접할 때는 어떤 특수한 필요에 의해 작성되어지는 개념 보다는
그저 코드를 작성할 때 다양하게 활용되어지는 함수의 표현방식중 하나라고 이해하는 것이
더 좋지 않을까 라는 생각을 해 봤다.