명명된 함수 표현식이란?
자바스크립트에서 명명된 함수 표현식(Named Function Expression)은 함수 표현식에 이름을 부여한 형태입니다. 일반적인 익명 함수 표현식과 달리, 함수 내부에서 자기 자신의 이름을 참조할 수 있기 때문에 재귀 호출에 특히 유용합니다.
또한 디버깅 시 콜 스택(call stack)에 함수 이름이 표시되어 에러 추적이 한결 쉬워진다는 장점도 있습니다.
예제 코드
다음은 객체(obj)의 메서드로 명명된 함수 표현식을 정의하고, 이를 활용해 팩토리얼(계승)을 계산하는 예제입니다.
<!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 {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>자바스크립트 명명된 함수 표현식</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 obj 객체의 fact 함수 표현식이 호출됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
let obj = {
fact: function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
},
};
BtnEle.addEventListener("click", () => {
resEle.innerHTML = obj.fact(5);
});
</script>
</body>
</html>코드 설명
- 객체
obj의fact속성에factorial이라는 이름을 가진 함수 표현식이 할당되었습니다. - 함수 내부에서는 외부 변수가 아닌 자신의 이름인 factorial을 사용해 재귀 호출을 수행합니다.
n <= 1조건이 기저 사례(base case)로 작동하여 재귀가 종료됩니다.- 버튼 클릭 시
obj.fact(5)가 실행되며, 결과값 120(5 × 4 × 3 × 2 × 1)이 화면에 출력됩니다.
실행 결과
'CLICK HERE' 버튼을 클릭하면 아래와 같이 팩토리얼 계산 결과가 표시됩니다.
정리
명명된 함수 표현식은 익명 함수와 달리 함수 이름을 통해 자기 자신을 참조할 수 있어 재귀 구현에 적합하며, 디버깅 시에도 유용합니다. 다만 함수 이름은 함수 내부에서만 유효하고 외부 스코프에는 노출되지 않는다는 점을 기억해 두면 좋습니다.