[콜백함수] 콜백함수의 개념 및 예시

주요 차이점

✅  콜백함수(callback function)란?

- 함수의 매개변수를 통해 다른 함수의 내부로 전달되어지는 함수이다.

- 중첩함수가 외부함수를 돕는 헬퍼 함수의 역할을 하는 것처럼 콜백함수도 고차함수에 전달되어 헬퍼함수의 역할을 한다.

단, 중첩함수는 고정되어있어 교체하기 곤란하지만 콜백함수는 함수 외부에서 고차함수 내부로 주입하기 때문에

자유롭게 교체할 수 있다는 장점이 있다. 즉, 고차함수는 콜백함수를 자신의 일부분으로 합성한다.

**고차함수(higer-order-function)란? 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다.

 

 

 

✅  콜백함수의 전개

- 고차함수는 매개 변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다.

- 다시 말해, 콜백함수는 고차함수에 의해 전달되며 이때 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

- 따라서 고차함수에 콜백함수를 전달할 때 콜백함수를 호출하지 않고 함수 자체를 전달해야 한다.

 

예제1) 콜백함수를 익명 함수 리터럴로 정의한 경우

- 콜백함수가 고차함수내부에만 호출된다면 콜백함수를 익명 함수 리터럴로 정의하면서 곧바로 고차함수에 전달하는 것이 일반적

function repeat(n,f){
 for(let i = 0; i < n; i++){
   f(i);
  }
}

//익명 함수 리터럴을 콜백 함수로 고차 함수에 전달
//익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성
repeate(5, function(i){
  if(i % 2) console.log(i)
})

 

이때, 콜백함수로서 전달된 함수 리터럴은 고차 함수가 호출 될 때마다 평가되어 함수 객체를 생성한다. 

따라서 1) 콜백함수를 다른 곳에서 호출할 필요가 있거나, 2) 콜백함수를 전달받는 함수가 자주 호출된다면 함수외부에서 콜백함수를

정의한 후 함수 참조를 고차 함수에 전달하는편이 효율적이다.

 

 

예제2) 함수외부에서 콜백함수를 정의한 경우

function repeat(n,f){
 for(let i = 0; i < n; i++){
   f(i);
  }
}

//logOdds 함수는 단 한 번만 생성
let logOdds = function(i){
 if(i % 2) console.log(i);
}

//고차함수에 함수 참조를 전달
repeat(5, logOdds); //1,3

 

 

위 예제의 logOdds 함수는 단 한번만 생성된다. 예제 1번의 경우는 콜백함수를 익명 리터럴 함수로 정의해 곧바로 고차 함수에 전달하면서 고차 함수가 호출될 때마다 콜백함수가 생선된다.

 

 

✅  비동기처리의 콜백함수

콜백함수는 함수형 프로그래밍 패러다임뿐만이 아니라 비동기처리(이벤트 처리, ajax 통신, 타이머 함수 등)에 활용되는 중요한 패턴이다.

 

- 콜백함수를 사용한 이벤트 처리 예제

//콜백 함수를 사용한 이벤트 처리
//myButton 버튼을 클릭하면 콜백 함수를 실행한다
document.getElementById('myButton').addEventListener('click', function(){
  console.log('button clicked!')
})

 

- 콜백함수를 사용한 비동기 처리 예제

//콜백 함수를 사용한 비동기 처리
//1초 후에 메세지를 출력
setTimeout(function(){
 console.log('1초 경과')
},1000)

 

 

✅  배열고차함수의 콜백함수

- 자바스크립트에서 배열은 사용빈도수가 매우 높은 자료구조이다.

- 배열을 다룰 때 배열 고차 함수는 매우 중요하다.

 

- 콜백함수를 활용한 배열고차함수

//콜백함수를 사용하는 고차 함수 map
var res = [1,2,3].map(function(item){
 return item * 2
})
console.log(res) //[2,4,6]

//콜백함수를 사용하는 고차함수 filter
res = [1,2,3].filter(function(item){
 return item * 2;
})
console.log(res)//[1,3]

//콜백함수를 사용하는 고차함수 reduce
res = [1,2,3].reduce(function(acc, cur){
 return acc + cur
},0)
console.log(res) //6

 

 

 

✅  그렇다면,  콜백함수의 경우 function() 과 화살표 함수의 차이는 무엇일까

- function과 화살표 함수(arrow function)는 문법적으로는 비슷하게 동작할 수 있지만, 동작 방식에서 중요한 차이점이 있다.

   특히 this 바인딩, arguments 객체, 생성자 사용 가능 여부에서 다르다.

var res1 = [1,2,3].map(function(item){ return item * 2 });
var res2 = [1,2,3].map((item) => { return item * 2 });

console.log(res1); // [2, 4, 6]
console.log(res2); // [2, 4, 6]

 

 

 

🔍 주요 차이점

항목	function 키워드	화살표 함수 (=>)
this 바인딩	자신이 호출된 문맥(this)을 따름	상위 스코프의 this를 그대로 사용
arguments 객체	사용 가능	사용 불가
new 생성자 사용	가능	불가
메서드로 사용	일반적으로 적합	this 때문에 메서드로는 주의 필요
코드 길이	다소 길어질 수 있음	간결함

 

 

🔍  this 차이

- function() 예시

function Counter() {
  this.count = 0;
  setInterval(function () {
    this.count++; // ❌ NaN or error - function은 다른 this를 바인딩
    console.log(this.count);
  }, 1000);
}

new Counter();

 

위 예제는 this가 setInterval 내부에서 전역객체를 참조해서 예상대로 동작하지 않는다. 반면 아래는 잘 작동한다.

 

- 화살표함수 ( =>) 예시

function Counter() {
  this.count = 0;
  setInterval(() => {
    this.count++; // ✅ 화살표 함수는 상위 스코프(this)를 유지
    console.log(this.count);
  }, 1000);
}

new Counter();

 

 

- map, filter, forEach 같은 간단한 콜백에는 화살표 함수가 더 간결하고 의도도 분명해서 적합하다.

- 하지만 this를 활용한 객체 메서드나 생성자에서는 function 키워드를 선택적으로 사용해야 할 수 있다.

 

 

 

🔍  arguments 객체차이 

- arguments 객체는 함수 내부에서 전달된 인자들을 담고 있는 유사 배열 객체이다.

   자바스크립트의 일반 함수(function)에서만 자동으로 사용할 수 있다.

 

- function() 예시

function showArguments(a, b) {
  console.log(arguments);
}

showArguments(1, 2, 3);
// 출력: [Arguments] { '0': 1, '1': 2, '2': 3 }

 

 

arguments는 함수에 실제로 전달된 값들을 담고 있다. 함수 매개변수보다 더 많은 인자를 받았을 때도 다 볼 수 있으며  유사 배열이기 때문에 length는 있지만, 배열 메서드(map, forEach 등)는 없다.

 

 

- 화살표함수(=>) 예시

const showArguments = () => {
  console.log(arguments); // ReferenceError: arguments is not defined
};

showArguments(1, 2, 3);

 

 

화살표 함수에서는 arguments가 없다. 화살표 함수는 arguments 객체를 자체적으로 생성하지 않는다.
대신, 외부 함수(상위 스코프)의 arguments를 참조하게 된다.

 

 

✅  대안: 나머지 매개변수 ...args

현대 자바스크립트(ES6+)에서는 arguments 대신 아래처럼 ...args를 사용하는 게 일반적이다

...args는 진짜 배열이기 때문에 map, forEach 등도 사용이 가능하며 화살표 함수에서도 사용이 가능하다.

function showArguments(...args) {
  console.log(args); // [1, 2, 3]
}

showArguments(1, 2, 3);