자바스크립트 폐쇄 🎆

인터넷 친구들 안녕 (●'◡'●)

이제 폐쇄에 대해 이야기할 시간입니다.

폐쇄 란 무엇입니까?

클로저는 외부 함수가 반환된 후에도 외부 함수 범위에 액세스할 수 있는 함수입니다. 즉, 클로저는 함수가 완료된 후에도 외부 함수의 변수와 인수를 기억하고 액세스할 수 있습니다.

클로저에 대해 알아보기 전에 먼저 어휘 범위를 이해합시다.

어휘 범위 란 무엇입니까?

JavaScript의 어휘 범위 또는 정적 범위는 소스 코드의 물리적 위치를 기반으로 하는 변수, 함수 및 개체의 액세스 가능성을 나타냅니다. 예를 들어:

let a = 'global';
  function outer() {
    let b = 'outer';
    function inner() {
      let c = 'inner'
      console.log(c);   // prints 'inner'
      console.log(b);   // prints 'outer'
      console.log(a);   // prints 'global'
    }
    console.log(a);     // prints 'global'
    console.log(b);     // prints 'outer'
    inner();
  }
outer();
console.log(a);         // prints 'global'

여기서 inner 함수는 자체 범위, outer 함수의 범위 및 global 범위에 정의된 변수에 액세스할 수 있습니다. 그리고 outer 함수는 자체 범위와 global 범위에 정의된 변수에 접근할 수 있습니다.

따라서 위 코드의 범위 체인은 다음과 같습니다.

Global {
  outer {
    inner
  }
}

inner 함수는 lexical scope의 outer function로 둘러싸여 있으며, 이는 global scope로 둘러싸여 있습니다. That’s why the inner function can access the variables defined in outer function and the global scope.

퀴즈 — 지식 테스트

아래 코드는 무엇을 출력할까요?

var name = 'John'

function greet (name) {  
  return (function () {
    console.log('Hello ' + name)
  })
}

var sayHello = greet(name)

name = 'Sam'

sayHello()

정답은 Hello John입니다.

예, sayHello를 호출하기 전에 name 값을 'Sam'으로 변경했지만. 마치 '샘'에게 재할당되기 전에 이름값을 캡쳐한 것 같다.

예, sayHello를 호출하기 전에 name 값을 'Sam'으로 변경했지만. 마치 '샘'에게 재할당되기 전에 이름값을 캡쳐한 것 같다.

그것이 정확히 일어난 일입니다. 이것은 행동의 종결입니다.