220917 TIL 일급 객체?? callback함수?? 내가 뭐라고 했더라?

이번 주의 학습 키워드 중 하나인 callback 함수에 대해 알아보자

사실 콜백 함수는 자바스크립트를 배우면서 여기저기서 자주 듣던 용어이다. 하지만 오늘 콜백 함수라는 학습 키워드를 봤을 때 정확한 개념은 모르고 있는 것 같다는 느낌을 강하게 받았다.

이번 주의 학습 키워드인 만큼 제대로 알기 위해 콜백함수에 대해 정리를 하자.

 

콜백 함수를 알아보기 이전에 콜백함수를 검색하면 일급 객체가 연관돼서 많이 나오는데 일급 객체부터 살펴보자

사실 일급 객체도 처음 듣는 개념이 아니라 자바스크립트를 처음 배울때 학습 키워드로 나왔던 개념이다.

심지어는 코딩 인터뷰시간에 일급 객체에 대해 질문받았던 게 기억이 난다... 그때 제대로 답을 했던가?? 

 

내가 뭐라고 했더라..?

 

내 기억상으로는 횡설수설한거 같은데 이제는 제대로 머릿속에 박아보자!

 

일급 객체

일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말한다.

 

일급 객체의 조건

1. 변수에 할당(assignment)할 수 있다.

const plus = function (a, b) {
  return a + b;
};

자바스크립트는 숫자를 변수에 할당하는 것처럼 위의 예시처럼 plus라는 변수에 함수를 할당할 수 있다. plus는 함수를 가리키게 된다.

 

2. 다른 함수의 결과로써 리턴될 수 있다.

const calculate = function (a, b) {
  const minus = function (a, b) {
    return a - b;
  };

  return minus(a, b);
};

calculate라는 함수는 minus라는 함수를 return 하고 있다. 이렇게 함수가 다른 함수의 리턴 값이 될 수 있다면 그 함수를 일급 객체라고 한다.

 

3. 다른 함수의 인자로 전달될 수 있다.

const multiple = function (number) {
  return number * number;
};

const calculate = function (func, number) {
  console.log(func(number));
};

calculate(multiple, 3);   // 9

여기서 multiple이라는 함수는 calculate 함수의 매개변수로 사용하고 있는 걸 볼 수 있다. calculate(multiple, 3)

이렇게 함수가 다른 함수의 입력값이 될 수 있다면 일급 객체라고 말할 수 있다. 

즉 자바스크립트에서 함수는 일급 객체이다.

 

 

callback 

그러면 콜백 함수는 뭘까?

콜백 함수를 직관적으로 해석하면 나중에 호출되는 함수이다.

특정 함수에 매개변수로 전달된 함수를 특정 이벤트에 의해 호출되는 함수를 의미하는데 간단히 말해서 내가 전달해준 함수를 나중에 네가 불러줘!라고 생각하면 편하다.

위의 코드를 예시로 다시 설명을 하면

const multiple = function (number) {
  return number * number;
};

const calculate = function (func, number) {
  console.log(func(number));
};

calculate(multiple, 3);   // 9

5번 라인의 calculate라는 함수는 func와 number를 파라미터로 받아서 함수 안에서 func라는 함수를 호출하고 있다.

맨 밑줄을 보면 calculate함수에 multiple이라는 함수가 입력값으로 들어간다.

multiple이라는 함수는 calculate 함수 내에서 func라는 이름을 갖는다.

즉 calculate 함수 안에서는 multiple == func이고 calculate 함수 안에서 multiple함수를 호출하고 있다.

결국 multiple함수는 바로 실행이 되지 않지만 다른 함수의 입력값으로 전달이 돼서 다른 함수에 의해 나중에 호출이 된다라고 해서 callback 함수라고 부른다.

 

정리하자면 콜백 함수는 단지 함수를 등록하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수를 말한다.

 

이번에 학습 키워드를 보면 동기, 비동기, promise, async-await 등등 이전에 어디선가 들었지만 어려운 것 같아 제대로 알아보지 않고 넘긴 개념들이 많은데 이번에는 어정쩡하게 알고 넘기는일 없이 제대로 정리하도록 하자.