[JS] Callback

Callback

콜백 함수는 다른 함수의 인자로 전달된 함수를 의미한다.
자바스크립트가 함수를 일급 객체로서 가지는 특징 중 하나이다.

💡 일급 시민(객체)이란?
❗️ 변수의 값이 될 수 있는 것들.

 

예를 들어, 숫자 또는 함수 등은 변수의 값이 될 수 있으므로 일급 시민이다.
반면, 조건문처럼 변수의 값이 될 수 없는 값들은 이급 시민이다.

함수가 일급 시민이 되기 위한 또 다른 조건이 있다.

위 처럼 함수가 다른 함수의 리턴 값이 될 수 있다면, 해당 언어는 함수를 일급 시민으로 대우하고 있는 것이다.(함수가 다른 함수의 입력값으로 사용되는 것 또한 마찬가지이다.)

그리고, 위 사진의 val 함수처럼 다른 함수의 입력값으로 전달돼서
다른 함수에 의해 나중에 호출되는 함수를 콜백 함수(Callback Fn)라고 한다. (다른 코드의 인자로 넘겨주는 함수)

---

콜백 함수를 소비하는 함수를 살펴보자. 아래의 filter 함수를 예시로 사용하였다.

 

1. 첫 번째 과정

2. 두 번재 과정

첫 번째의 4~9 줄은 두 번째의 4번 줄과 동일한 내용이다.

3. 세 번째 과정

일반적으로 콜백 함수는 딱 한 번만 사용하는 경우가 많다. + 두 번째 처럼 멀리 떨어져 있으면 응집력이 떨어진다. 따라서, 이처럼 익명함수로 콜백 함수를 사용한다.(또는 화살표 함수)

4. 네 번째 과정 - 화살표 함수 사용

위의 filter는 내가 공급한 콜백 함수를 소비한다. 그러면, 위의 filter와 같이 콜백함수를 소비하는 함수를 만들어보자.

최종 결과(직접 만든 filter 함수)

 

위와 같이 myFilter라는 함수를 새로 만들었다.

이 함수는 filter와 같은 역할을 하는 함수다. 첫 번째 파라미터로 배열을 받고, 두 번째 파라미터로 콜백 함수를 받는다. 그 후, 배열 내의 정보를 콜백 함수로 필터링을 한다.

지금까지 콜백 함수란 어떤 것이며, 어떤 방식으로 사용되는지 알아보았다. 다음에는 Promise에 관해 알아볼 예정이다.

---

피드백 환영합니다 :)

 

참고자료
생활코딩