[JavaScript] 고차 함수와 콜백 함수

 

 

---

목차

 

1. 고차 함수

2. 콜백 함수

---

 

일급 객체란?

 

---

일급객체란 일반 객체처럼 모든 연산이 가능한 객체를 뜻한다.

 

보통 변수에 할당, 다른 함수의 전달인자로 전달, 다른 함수의 결과로 리턴 같은 연산을 지원할 때 일급 객체라고 한다. 또한 JavaScript에서 함수는 일급 객체이다.

 

일급 객체의 특성은 다음과 같다.

• 함수의 매개변수로 전달이 가능하다
• 함수의 반환 값으로 전달할 수 있다
• 할당 명령문을 통해 값을 할당할 수 있다
• 동일 비교 대상으로 사용할 수 있다

const firstClassObj1 = {
	name : 'QQ',
  	age : 20
};

// 1) 함수의 매개변수로 전달 !
function func1 (firstClassObj1) {
  	console.log(`name : ${firstClassObj1.name}`);
	console.log(`age : ${firstClassObj1.age}`);
};

// 2) 함수의 반환 값으로 전달할 수 있다
function func2 (firstClassObj1) {
	return {...firstClassObj1, height: 175};
};

// 3) 할당 명령문을 통해 값을 할당할 수 있다
const firstClassObj2 = {
	name : 'GG',
  	age : 21
};

// 4) 동일 비교 대상으로 사용할 수 있다
console.log(firstClassObj1 === firstClassObj2);

위와 같이 일반객체처럼 모든 연산이 가능한 것을 일급객체라 한다.

 

 

1. 고차 함수 (Higher-Order Function)

---

고차함수란 매개변수(parameter)를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 말한다.

 

한 마디로 1) 인자를 함수로 받을 수 있고, 2) 함수를 반환하는 함수를 일컫는 말이다.

 

고차함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다. 즉, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

 

// 함수 funcA는 콜백 함수인 funcB를 외부에서 매개변수를 통해 전달받은 '고차 함수'이다.
function funcA(callback) {
  callback()
}

// 함수 funcB는 동기적으로 실행되고 있는 함수 funcA의 '콜백 함수'이다.
function funcB() {
  console.log('내가 콜백함수다!')
}

console.log(funcA(funcB))  // '내가 콜백함수다!'

 

 

 

2. 콜백 함수

---

콜백함수란 함수의 매개변수(parameter)를 통해 다른 함수의 내부로 전달되는 함수를 말한다.

 

다시말해, 다른 함수(caller)의 전달인자(argument)로 전달되는 함수를 콜백 함수라고 한다. 콜백 함수는 비동기 처리와 배열 고차 함수에서 사용된다.

// 고차 함수
function processCallback(callback) {
    console.log("처리 중...");
    callback();
}

// 콜백 함수
function callbackFunction() {
    console.log("콜백 함수가 호출되었습니다.");
}

processCallback(callbackFunction);

 

 

아래 코드를 보면 callback 이라는 함수를 인자로 받는 process 라는 고차함수를 정의했다.

 

callback 이라는 함수가 무엇인지는 모르겠지만 process 는 data라는 인자를 받아 callback 이라는 함수를 통해 결과 값을 도출한다. 따라서 process 라는 고차함수를 통해 callback은 한 가지로 정의되지 않고 사용자가 원하는 함수를 정의할 수 있게 해준다.

function process(data, callback) {
    console.log("데이터 처리 중...");
    callback(data);
}

 

 

아래처럼 callback으로 쓰일 수 있는 두 함수를 정의했다고 했을 때, process 함수는 내부 로직의 수정 없이 인자로 정해진 함수만을 통하여 서로 다른 기능을 구현할 수 있다.

function callback1(data) {
    console.log("콜백 함수 1: " + data);
}

function callback2(data) {
    console.log("콜백 함수 2: " + data.toUpperCase());
}

 

 

이처럼 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달되어 고차함수 내에서 필요한 순간에 호출된다.

process("hello", callback1);
process("world", callback2);