JavaScript에서 함수는 하나의 객체로 취급됩니다. 그렇기 때문에 함수를 다른 함수의 매개변수로 전달할 수 있고, 심지어 함수 안에서 또 다른 함수를 반환하는 것도 가능합니다.
이러한 특성 덕분에 JavaScript의 함수는 일급 객체(first-class citizen)라고 불립니다. 즉, 함수를 변수, 객체, 배열에 자유롭게 저장할 수 있으며, 인자로 넘기거나 반환값으로 활용할 수도 있습니다.
여기서 고차 함수(Higher-Order Function)란 다음 중 하나 이상을 수행하는 함수를 의미합니다.
- 함수를 매개변수(인자)로 전달받는 함수
- 함수를 반환값으로 돌려주는 함수
- 두 가지를 모두 수행하는 함수
참고로 우리가 자주 사용하는 map(), filter(), reduce(), forEach() 같은 배열 메서드도 모두 대표적인 고차 함수입니다.
예제 코드
다음은 JavaScript에서 고차 함수를 활용한 예제 코드입니다. 버튼을 클릭하면 배열의 각 요소를 2배로 만들어 새로운 배열을 출력합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>Higher order functions in JavaScript</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to double each element of the above array</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function doubleNum(ele) {
return ele * 2;
}
let arr = [22, 33, 44, 55];
function doubleArray(arr, fn) {
let doubleArr = [];
arr.forEach((element) => {
doubleArr.push(doubleNum(element));
});
return doubleArr;
}
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "New array = " + doubleArray(arr, doubleNum);
});
</script>
</body>
</html>
코드 설명
위 예제의 핵심은 doubleArray(arr, fn) 함수입니다. 이 함수는 배열 arr과 함수 doubleNum을 매개변수로 전달받습니다. 여기서 doubleArray가 바로 고차 함수이며, 전달된 doubleNum은 콜백 함수(callback function) 역할을 합니다.
forEach()를 통해 배열의 각 요소에 접근한 뒤, 전달받은 함수를 실행하여 각 숫자를 2배로 만들고 새로운 배열에 담아 반환합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
'CLICK HERE' 버튼을 클릭하면 각 요소가 2배가 된 새로운 배열이 아래와 같이 표시됩니다.
