JavaScript 중급: Closure

이토니·2024년 1월 11일
0

JavaScript

목록 보기
8/33
post-thumbnail

Closure

다른 함수 내부에 정의된 함수(innerFunction)가 있는 경우 외부함수(outerFunction)가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 해당 내부함수는 외부함수의 변수 변위에 엑세스 할 수 있다.

function outerFunction(outerVariable) {
    return function innerFunction(innerVariable) {
        console.log('Outer Variable: ' + outerVariable);
        console.log('Inner Variable: ' + innerVariable);
    }
}

const newFunction = outerFunction('outside');
newFunction('inside');
  1. outerFuntion이 호출되면서 outside를 outerVariable에 전달한다.
  2. outerFunction내부에서는 innerFunction이 반환된다.
  3. innerFunction은 클로저를 형성하며 outerVariable에도 접근할 수 있다.
  4. newFunction('inside')에서는 클로저가 활용된다.
  5. newFunction은 outerFunction이 호출되면서 반환된 것은 innterFunction이기 때문에, innerFuntion을 가리킨다. 따라서 newFunction('inside')를 호출하면 innerFunction('inside')가 된다. 클로저의 영향으로 outerFunction의 변수에도 접근할 수 있다.
    ➡️ 내부함수가 있는 경우 외부함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더이상 액세스 할 수 없는 경우에도 해당 내부함수는 외부함수의 변수 및 범위에 액세스할 수 있다.
profile
cool & soft codes

0개의 댓글