자바스크립트에서 함수 본문 내부에 함수를 정의하고 호출하는 방법

원하는 기능을 구현하려면 자바스크립트 클로저(Closure)를 활용하면 됩니다. 클로저란 함수가 호출될 때 호출된 위치의 스코프가 아니라, 함수가 선언된 시점의 스코프를 기준으로 동작하는 함수를 의미합니다.

클로저란 무엇인가?

자바스크립트에서 내부 함수는 자신을 감싸고 있는 외부 함수의 변수와 스코프에 접근할 수 있습니다. 외부 함수의 실행이 끝난 후에도 내부 함수는 외부 함수의 변수를 계속 참조할 수 있는데, 이러한 특성이 바로 클로저입니다. 클로저는 데이터 은닉, 상태 유지 등 다양한 용도로 활용되며, 함수 내부에 또 다른 함수를 정의할 때 핵심적인 역할을 합니다.

예제

다음은 질문하신 상황을 클로저로 해결한 예제입니다. 여기서 innerDisplay()가 바로 자바스크립트 클로저이며, 동일한 스코프 안에 정의된 display() 함수를 자유롭게 호출할 수 있습니다.

var myFunction = (function () {
    function display() {
        // 5
    };
    function innerDisplay(a) {
        if (/* some condition */) {
            // 1
            // 2
            display();
        } else {
            // 3
            // 4
            display();
        }
    }
    return innerDisplay;
})();

동작 방식 설명

위 코드에서 즉시 실행 함수(IIFE)가 실행되면 내부에 정의된 display()와 innerDisplay() 함수가 생성되고, 그중 innerDisplay 함수가 반환되어 myFunction에 할당됩니다. 이후 myFunction을 호출하면 조건문의 분기에 따라 서로 다른 코드 경로를 거쳐 display()가 실행됩니다. 두 함수는 같은 스코프 체인 안에 존재하기 때문에 별도의 매개변수 전달 없이도 서로를 참조할 수 있으며, 이것이 클로저를 활용한 대표적인 패턴입니다.