JavaScript High-Order Function & Callback Function

안녕하세요. 오늘은 자바스크립트

 

고차 함수(High-Order Function)와 콜백 함수(Callback Function)에 알아볼게요.

 

 

 

1. 콜백 함수 (Callback Function)

 

콜백 함수는 다른 함수의 인자로 전달되어, 이 함수는 내부에서 실행되는 함수예요.

 

즉, 함수를 "값처럼 전달"해서 특정 시점이나 조건에서 실행되도록 하는 함수예요.

function greeting(name) {
  console.log(`안녕하세요, ${name}님!`);
}

// callback 함수를 매개변수로 받는 함수
function processUserInput(callback) {
  const name = '홍길동';
  callback(name); // 전달받은 함수를 실행
}

// 함수 실행
processUserInput(greeting);

// 실행 결과
안녕하세요, 홍길동님!

콜백 함수는 "나중에 실행할 함수"를 미리 전달하는 구조예요.

 

비동기 처리, 이벤트 처리, 반복 처리(map, forEach 등)에서 매우 자주 사용돼요.

 

 

 

2. 고차 함수 (High-Order Function)

 

고차 함수는 함수를 인자로 받거나 함수를 반환하는 함수예요.

 

즉, "함수를 다루는 함수"로 콜백 함수를 매개변수로 받는 함수가 곧 고차 함수예요.

function higherOrderFunc(callback) {
  console.log('고차 함수 실행 중...');
  callback();
}

function sayHello() {
  console.log('콜백 함수 실행!');
}

higherOrderFunc(sayHello);

// 실행 결과
고차 함수 실행 중...
콜백 함수 실행!

 

 

 

콜백 함수의 예제

 

1. 익명 함수 전달

 

콜백 함수를 굳이 이름을 붙이지 않아도, 익명 함수로 바로 전달 가능해요.

 

function showMessage(callback) {
  console.log('메시지 표시 전');
  callback();
  console.log('메시지 표시 후');
}

showMessage(function() {
  console.log('✅ 콜백 함수 실행 중!');
});

// 실행 결과

메시지 표시 전
✅ 콜백 함수 실행 중!
메시지 표시 후

 

 

2. 화살표 함수로 전달 

function runTask(taskName, callback) {
  console.log(`${taskName} 작업 시작`);
  callback();
  console.log(`${taskName} 작업 완료`);
}

runTask('데이터 로드', () => console.log('📡 서버에서 데이터 가져오는 중...'));

// 실행 결과

데이터 로드 작업 시작
📡 서버에서 데이터 가져오는 중...
데이터 로드 작업 완료

 

 

 

배열 고차 함수(Array High-Order Functions)

 

자바스크립트에서는 배열 메서드 중 콜백 함수를 인자로 받는 고차 함수들이 매우 많아요.

 

함수명	설명	반환값
forEach()	각 요소에 대해 콜백 실행	undefined
map()	각 요소를 변환해 새 배열 반환	새로운 배열
filter()	조건에 맞는 요소만 걸러냄	새로운 배열
reduce()	누적 계산 수행	단일 값
find()	조건에 맞는 첫 요소 반환	단일 요소
some()	조건 만족 요소 존재 여부	true / false

// 예시 1: forEach()

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(num => console.log(num * 2));
// 출력: 2, 4, 6, 8, 10


// 예시 2: map() - 배열을 변형해 새 배열을 반환

const names = ['철수', '영희', '민수'];

const greetings = names.map(name => `안녕하세요, ${name}님!`);
console.log(greetings);
// 출력: ["안녕하세요, 철수님!", "안녕하세요, 영희님!", "안녕하세요, 민수님!"]



// 예시 3: filter() - 조건을 만족하는 요소만 남김

const ages = [18, 25, 30, 15, 22];
const adults = ages.filter(age => age >= 20);

console.log(adults); // [25, 30, 22]



// 예시 4: reduce() - 누적 계산 (합계, 평균, 개수 등)

const scores = [80, 90, 100, 70];

const total = scores.reduce((acc, cur) => acc + cur, 0);
console.log(total); // 340

 

 

 

콜백 함수의 비동기 활용 예시

 

자바스크립트는 비동기 처리(Asynchronous) 언어이기 때문에,

 

콜백 함수는 시간이 걸리는 작업이 끝났을 때 실행되는 구조로 자주 사용해요.

console.log('1. 요청 시작');

setTimeout(() => {
  console.log('2. 서버 응답 도착 (콜백 실행)');
}, 2000);

console.log('3. 요청 중...');

// 실행 결과

1. 요청 시작
3. 요청 중...
2. 서버 응답 도착 (콜백 실행)

setTimeout() 자체가 고차함수이고, 내부에서 전달된 함수(콜백)기 일정 시간 후 자동으로 실행돼요.

 

 

마지막으로 요약정리표예요.

구분	설명	예시
콜백 함수	다른 함수의 인자로 전달되어 실행되는 함수	func(() => {})
고차 함수	함수를 인자로 받거나, 함수를 반환하는 함수	setTimeout, map, filter, reduce
익명 콜백 함수	이름 없이 즉시 실행용으로 전달	arr.map(item => ...)
비동기 콜백	특정 시점(지연, 이벤트)에서 실행	setTimeout, addEventListener

 

 

 

여기까지 자바스크립트 고차 함수와 콜백 함수에 대해 알아봤는데요.

 

이 개념들을 활용한다면 더 효율적인 코드가 작성될 것 같아요.