[JavaScript] 헷갈리는 callback함수 정리

C나 Java처럼 함수 이름을 명확히 정의하는 언어들과 달리, JavaScript에서는 화살표 함수와 익명 함수를 사용해 callback 함수를자주 작성한다.

 

초반에 공부할 때 굉장히 혼동이 오기도 해서 정리를 해본다.

 

첫 번째로 함수를 변수에 할당을 살펴보자

//변수에 함수 할당
const work = () => {
  console.log("hello world");
};

이 코드의 함수 이름은 work인 것 같지만 그렇지 않다.

화살표 함수는 이름이 없는 익명 함수이다. work는 단지 익명 함수를 담고 있는 변수명이다.

 

함수에 이름이 없더라도, 변수를 통해 저장하거나 다른 함수에 인자로 넘겨 사용할 수 있다.
특히, 코드 실행 순서를 제어하기 위해 익명 함수를 callback으로 넘겨 호출하는 구조로 자주 활용된다.

 

먼저 이해가 쉽게 코드를 추가해 보자.

//변수에 함수 할당
const work = (callback) => {
  callback();
};

work(() => {
  console.log("종료");
});

 

이렇게 코드를 봤을 때 첫 번째 3줄은 work라는 변수에 익명함수를 저장했다.

이 익명함수의 매개변수는 callback으로 함수의 호출을 기다리고 있다.

---

그럼 callback으로 받는 다른 익명함수는 어디있을까?
그 코드가 바로 아래 3줄이다.

work(() => {
  console.log("종료");
});

이 코드는 익명 함수를 생성해 work 함수의 callback에 전달하는 코드이다.

 

정확히는 익명함수를 생성해서 work 함수에 인자로 넘긴 것이다.

 

때문에 해당 코드를 실행하면, callback을 매개변수로 받는 익명함수가 실행되고,

정의된 익명함수 속 console.log("종료");가 실행되는 것이다.

 

---

 

전체 코드 관점에서는 결국 두개의 익명함수가 생성된 것이다.

// 첫 번째 익명 함수 (work 함수)
const work = (callback) => {
  callback();
};

// 두 번째 익명 함수 (callback으로 넘기는 함수)
work(() => {
  console.log("종료");
});

---

그러면 왜 함수를 한 번에 정의하지 않고, 외부에서 따로 넘겨줄까?

 

현재 코드처럼 간단한 경우에는 바로 작성하는 것이 편해 보인다.

하지만 실제 개발에서는 작업의 흐름을 분리하거나, 원하는 동작만 골라서 실행하기 위해 callback 구조를 자주 사용한다.

 

그 예시는 추후에 작성해 보도록 하겠다.