callback

KHS·2022년 2월 16일
0

프로그래밍에는 first Class Citizen(일급객체)라는 표현이 있다.
이 일급 객체에 해당 하는 문법을 살펴보자.
var = 1
위 코드를 보면 숫자 1은 변수의 값이 될 수 있는가? 당연히 있다. 그렇다면 숫자는 프로그래밍 세계에서 일급 객체이다.
그렇다면
var = if(a){
b;
}
이러한 조건문은 변수의 값으 될 수 있는가? 이건 될 수 없다.
그렇기에 일급 객체가 될 수 없다.
그렇다면 함수는 어떨까?
var = function(a){
return b;
}
자바스크립트에서 함수는 변수의 값이 될 수 있다. 이렇게 함수를 변수에 담으면 그 변수는 함수를 가르키게 된다.
그렇기에 함수는 숫자와 마찬가지로 1급 객체의 자격을 가질 수 있다.
일급 객체가 되기 위한 또 하나의 조건은
function fn(){
val = function(a){
return b;
}
return val;
}
이 fn이라는 함수를 val이라는 함수를 리턴하고 있다. 이렇게 함수가 다른 함수의 리턴 값이 될 수 있다면, 그 언어는 함수를 일급 객체로 대우해주고 있는 것이다.

val = function(a){
return b;
}
fn(val);
이 코드를 보면 함수가 다른 함수의 입력 값이 될 수 있다면 그 언어에서는 함수를 일급 객체로 대우해주고 있는것이다.
자, 그럼 여기서 콜백이란 무엇일까?
val = function(a){
return b;
}
function fn(arg){
arg();
}
fn(val)
이 코드를 보면 fn이라는 함수는 arg라는 파라미터를 받아서 함수 안에서 저 파라미터를 함수로써 호출하고 있다.

그럼 여기서 val이라는 함수가 fn이라는 함수의 입력 값으로 들어갔고,

이 val이라는 함수는 fn이라는 함수 안에서 arg라는 이름을 갖게 된다. 그리고 이걸 fn안에서 호출한다. 이 val라는 함수를 지금 바로 실행 되진 않지만, 다른 함수의 입력 값으로 전달 돼서 다른 함수에 의해 나중에 호출 된다라고 해서 callback 함수라고 부른다.
다시 말해서 val 자체는 콜백함수는 아니지만 이 val이라는 함수가 다른 함수의 입력 값으로 전달 돼서 이게 호출이 된다면 저 val은 이 맥락에서 콜백 함수가 되는것이다.


예시로 filter함수를 보자 이 필터 함수는 words라는 배열 안에서 각 word라는 변수로 배열의 데이터에 하나하나 접근 하면서 길이가 6초과인 데이터들을 배열에 담에 리턴한다.
자, 이때 word=>word.length>6 이 부분이 함수이고 이 함수를 필터라는 함수의 입력 값으로 주입하였다. 이때의 word=>word.length>6 이 함수는 콜백 함수라 할 수 있다.

이 함수의 입력 값을 살펴보면 첫 번째 파라비터로 콜백 함수를 받게 되어 있고 이 콜백 함수는 3개의 인자를 받게 되어 있다.
저 화살표 함수를 풀어서 작성하자면

이런식으로 작성 될 수 있다.
조금 더 간단하게 만들면

이렇게도 작성할 수 있다.
이 콜백 함수같은 경우는 함수를 만들어 쓰는 경우가 있지만 많은 경우에 딱 한번만 사용하는 경우가 많다.
그리고 콜백 함수와 콜백함수가 멀리 떨어져 있으면 응집력이 떨어진다. 그렇기에 우리가 많이 쓰는게 익명함수인데

이런식으로 function 옆에 callback이란 이름을 떼어냈다.
그리고

이 콜백 함수 안에 그대로 함수를 넣어버렸다.
그 다음 나온게 화살표 함수인 것인데 이 function이라는 단어도 떼어내고

이렇게 직관적으로도 표현 가능하다.
이번엔 우리도 필터 함수와 똑같이, 콜백 함수를 소비하는 함수를 만들어 보자.

먼저 두개의 인자(하나는 words라는 배열, 하나는 콜백함수)를 받는 myfilter라는 함수를 만들고 그 안에 배열안에 값들을 하나하나 current라는 변수에 저장 하면서 이 current라는 변수를 callback함수에 태운다. 그리고 if문으로 분기를 걸어 callback함수의 동작을 제어한다.
result라는 빈 배열을 만들고 이 callback함수가 true이면 result 배열 안에 current를 하나씩 넣는것.
이렇게 우리만의 필터 함수를 하나 만들어 보면서 콜백 함수를 이해해 볼 수 있다.
콜백함수는 네트워크 통신을 하거나 사용자의 어떤 동작을 이벤트 프로그래밍 할 때 콜백 함수가 광범위하게 사용된다고 하니 잘 이해해 놓고 있어야 할 것 같다..
이 글은 유튜브 생활코딩의 강의 영상을 보며 공부한 내용을 기록한 게시글입니다.

profile
천천히 개발 공부하기

0개의 댓글