JavaScript 중첩 함수란?
JavaScript 1.2부터는 함수 정의를 다른 함수 내부에 중첩(nested)하여 작성할 수 있습니다. 즉, 하나의 함수 안에 또 다른 함수를 선언하는 것이 가능하며, 이렇게 선언된 내부 함수(inner function)는 외부 함수(outer function)가 호출될 때 함께 정의됩니다.
다만 한 가지 제약 사항이 있습니다. 함수 정의는 반복문(loop)이나 조건문(conditional) 내부에는 위치할 수 없습니다. 이러한 제약은 function 문을 사용하는 함수 선언(function declaration)에만 적용되며, 함수 표현식(function expression)으로 정의된 함수에는 해당되지 않습니다.
중첩 함수의 특징
내부 함수는 외부 함수의 매개변수와 변수에 자유롭게 접근할 수 있습니다. 이러한 특성은 스코프 체인(scope chain)과 클로저(closure)의 기반이 되며, 코드의 모듈화와 캡슐화에 유용하게 활용됩니다.
중첩 함수 구현 예제
아래 예제는 빗변(hypotenuse)의 길이를 계산하는 외부 함수 안에 제곱을 계산하는 내부 함수를 정의한 것입니다. 버튼을 클릭하면 함수가 호출되어 결과가 화면에 출력됩니다.
<html>
<head>
<script>
<!--
function hypotenuse(a, b) {
// 외부 함수 내부에 정의된 중첩 함수
function square(x) { return x * x; }
return Math.sqrt(square(a) + square(b));
}
function secondFunction() {
var result;
result = hypotenuse(1, 2);
document.write(result);
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 함수가 호출됩니다</p>
<form>
<input type="button" onclick="secondFunction()" value="함수 호출">
</form>
</body>
</html>
예제 동작 원리
hypotenuse(1, 2)가 호출되면 내부 함수 square(x)가 정의되고, 각 인수의 제곱 값을 더한 뒤 Math.sqrt()로 제곱근을 구해 결과값 2.23606797749979(√5)이 반환됩니다. 이처럼 중첩 함수를 사용하면 외부에 노출할 필요가 없는 보조 로직을 함수 내부에 깔끔하게 숨길 수 있습니다.