내부함수와 외부함수

JS에는 함수 내부에 다른 함수를 선언할 수 있다 (어메이징..)

스코프와 클로저를 사용해서 전역변수를 대신할 수도 있는데, 한번 알아보자

 

외부함수

• 함수 내부에 다른 함수를 포함하는 함수
• 내부 함수를 정의하고 실행할 수 있는 스코프를 제공

내부함수

• 외부 함수 안에 선언된 함수
• 외부 함수의 변수와 함수에 접근할 수 있음 (스코프 체인에 의해 가능).

클로저

• 내부 함수는 외부 함수의 변수에 접근 가능
• 외부 함수는 내부 함수의 변수에 접근 불가
• 외부 함수가 실행을 끝내도, 내부 함수가 외부 변수에 참조를 유지하기 때문에 메모리에 남아 있음
  • 이를 통해 전역변수를 대신하는 방식으로 코드 작성이 가능하다
  • 데이터 은닉화, 정보보호
  • 내부 함수를 사용해 콜백 함수로 외부 상태를 유지하는것이 가능

// 사용 예시

function outerFunction() {
    let outerVariable = "I am from outerFunction";

    function innerFunction() {
        console.log(outerVariable); // 외부 함수의 변수에 접근 가능
    }

    innerFunction();
}

outerFunction(); // 출력: I am from outerFunction

// 스코프 체인 예

function outer() {
    let outerVar = "Outer";

    function inner() {
        let innerVar = "Inner";
        console.log(outerVar); // 외부 함수 변수 접근 가능
        console.log(innerVar); // 내부 함수 변수 접근 가능
    }

    inner();
    // console.log(innerVar); // 오류: innerVar는 outer 스코프에서 접근 불가
}

outer();

// 클로저 예

function outerFunction() {
    let count = 0; // 외부 함수의 변수

    return function innerFunction() {
        count++;
        console.log(count);
    };
}

const counter = outerFunction(); // 외부 함수 실행
counter(); // 출력: 1
counter(); // 출력: 2
counter(); // 출력: 3

// 콜백, 이벤트 핸들러 예

function setup() {
    let message = "Button clicked!";

    document.getElementById("myButton").addEventListener("click", function () {
        console.log(message); // 외부 함수의 변수 접근 가능
    });
}

setup();

 

주의사항

• 내부 함수가 외부 변수에 접근하면 클로저가 생성되는데, 메모리를 유지하기 떄문에 메모리 누수 발생 위험
• 내부 함수가 외부 함수와 동일한 변수명을 사용하면 스코프체인에 따라 가까운 스코프의 변수를 참조