[Javascript] 콜백함수란

naring·2024년 4월 4일

JavaScript callback function 콜백함수

Javascript

목록 보기

8/9

콜백함수가 무엇이냐! 물으신다면 대답해 드리는 게 인지상정!

콜백함수란

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수(Callback function)라고 한다.

개념은 아주 간단하다. 함수가 인자로 전달되면 그걸 콜백함수라고 부른다.
그리고 이때 콜백 함수를 인자로 받은 함수를 고차함수(HOC,Higher-Order Function)라고 한다.

예제

간단한 예제로 살펴보면 아래와 같다.

function 함수1(함수){
	return 함수
}

function 함수2(){
     console.log(`안녕하세요`); 
}

함수1(콜백함수)

위와 같이 호출 했을 때 인자로 들어가는 함수2를 콜백함수, 함수2를 인자로 받는 함수1을 고차함수라고 한다.

콜백함수라는 용어가 자바스크립트에 있는 이유

자바스크립트에서는 함수가 일급 객체이다. 따라서 함수를 매개변수로 전달할 수 있고, 이는 더 유동적인 코드 동작이 가능하게 한다.

일급객체(First Class Object)란?

일급객체란 쉽게 말하면 값처럼 자유롭게 사용 가능하다는 말이다. 어렵게 말해보면 다음 조건을 만족시키는 객체가 일급객체이다.

무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.

변수나 자료구조에 저장할 수 있다.

함수의 매개변수에 전달할 수 있다.

함수의 반환값으로 사용할 수 있다.

결국 함수를 객체와 동일하게 사용할 수 있다는 의미다.

아래 예제를 통해 이러한 자바스크립트의 특징이 어떤 코드를 구현할 수 있게 하는지 살펴보자.

예시

function 고차함수1(n){
	for(let i = 0; i < n ; i++){
    	 if(num %2 == 0 ) {
         console.log(`${num}은 짝수입니다`); 
         }else{
            console.log(`${num}은 홀수입니다`); 
  		}
    }
}

function 고차함수2(n){
	for(let i = 0; i < n ; i++){
         console.log(`현재 숫자는 ${num}입니다`); 
    }
}

만약 함수를 인자로 전달할 수 없다면(콜백함수가 존재할 수 없다면), 위와 같이 비슷한 동작을 하는 고차함수를 두 번 작성해야 한다. 하지만 콜백함수를 전달할 수 있다면 아래와 같이 코드를 수정할 수 있다.

function 고차함수(n,콜백함수){
	for(let i = 0; i < n ; i++){
    	콜백함수(i);
    }
}

function 콜백함수1(num){
  if(num %2 == 0 ) {
     console.log(`${num}은 짝수입니다`); 
  }else{
    console.log(`${num}은 홀수입니다`); 
  }
}
  

function 콜백함수2(num){
   console.log(`현재 숫자는 ${num}입니다`); 
}
  

고차함수(3,콜백함수1)
//1은 홀수입니다
//2는 짝수입니다
//3은 홀수입니다

고차함수(3,콜백함수2)
//현재 숫자는 1입니다
//현재 숫자는 2입니다
//현재 숫자는 3입니다