자바스크립트에서 함수는 객체로 취급됩니다. 그렇기 때문에 함수를 다른 함수의 매개변수(인자)로 전달할 수 있고, 심지어 함수에서 또 다른 함수를 반환하는 것도 가능합니다.
이처럼 자바스크립트의 함수는 일급 함수(First-Class Function)라고 불리며, 변수·객체·배열 등에 저장할 수 있습니다. 또한 함수를 인자로 받거나 함수를 반환하거나 두 가지 모두 수행하는 함수를 고차 함수(Higher-Order Function)라고 합니다.
일급 함수란?
일급 함수는 프로그래밍 언어가 함수를 일반적인 값처럼 다룰 수 있음을 의미합니다. 구체적으로는 다음과 같은 특징을 가집니다.
- 함수를 변수에 할당할 수 있습니다.
- 함수를 객체의 속성이나 배열의 요소로 저장할 수 있습니다.
- 함수를 다른 함수의 인자로 전달할 수 있습니다.
- 함수를 반환값으로 사용할 수 있습니다.
아래는 자바스크립트에서 일급 함수를 구현한 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<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>자바스크립트의 일급 함수</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 배열의 각 요소가 2배가 됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let 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 = "새 배열 = " + doubleArray(arr, doubleNum);
});
</script>
</body>
</html>코드 설명
위 예제의 핵심을 살펴보면 다음과 같습니다.
1. 함수를 변수에 저장
doubleNum은 화살표 함수로 정의되어 변수에 할당되었습니다. 이것이 일급 함수의 첫 번째 특징입니다.
2. 함수를 매개변수로 전달
doubleArray(arr, fn) 함수는 배열과 함께 함수(fn)를 인자로 받습니다. 여기서 doubleNum이라는 함수 자체가 값으로 전달됩니다.
3. 콜백 패턴 활용
forEach 메서드에 익명 화살표 함수를 콜백으로 넘기는 부분 역시 고차 함수 활용의 대표적인 예입니다.
실행 결과
'CLICK HERE' 버튼을 클릭하면 아래와 같이 각 요소가 2배가 된 새로운 배열이 표시됩니다.
정리
자바스크립트는 함수를 값으로 취급하는 일급 함수 개념을 지원합니다. 덕분에 콜백, 고차 함수, 클로저, 커링 등 강력한 함수형 프로그래밍 기법을 활용할 수 있으며, 이는 자바스크립트 코드의 유연성과 재사용성을 크게 높여줍니다.