클로저 ★

클로저를 알기전 간략하게 렉시컬이란 무엇인지 알아야 이해 할 수있다

렉시컬 스코프란(Lexical Scope)란?

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.

즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다.

 정적 스코프(Static scope)라 부르기도 하다.

var x = 'global a'

function foo() {
  var x = 'local a'
  bar()
}

function bar() {
  console.log(a)
}

foo() // ①
bar() // ②

자바스크립트는 렉시컬 스코프를 따른다고 했다.  bar() 함수는 전역에서 정의되었기 때문에 전역이 지역 스코프가 된다.

자바스크립트는 하위 스코프의 변수를 참조하지 않기 때문에 foo 함수에 선언된 변수 a는 bar 함수에 영향을 주지 못한다.

그리하여 코드의 실행 결과는 모두 'global a'가 되는 것이다.

 

 

 

 

클로저 ★

함수와 렉시컬(어휘적) 환경의 조합, 함수가 생성될 당시 외부 변수에 기억되며 생성 이후에도 접근 가능하다 함수를 반환 할 때 반환 되는 함수는 자신을 둘러싼 메모리 환경을 가지고 반환한다

어떤함수 A에서 선언한 변수b를 참조하는 내부함수 c를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 b 가 사라지지 않고 남아있는 경우

 

=>데이터를 보존할 수 있고 정보의 접근 제한 (캡슐화)하며 모듈화(재사용성을 극대화 함수 하나를 독립적인 부품의 형태로 분리하는 것)에 유리하다

 

function makeFunc() {
      var name = "sorarara";
      function displayName() {
        alert(name);
      }
      return displayName;
    }

    var myFunc = makeFunc();
   =>myFunc변수에 displayName을 리턴함
   =>유효범위의 어휘적 환경을 유지
    myFunc();
 	=>리턴된 displayName 함수를 실행(name 변수에 접근)

=> displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 것

myFunc은 makeFunc이 실행 될 때 생성된 displayName 함수의 인스턴스에 대한 참조다.

displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지하며 myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "sorarara" 가 alert 에 전달된다.

 

 

function makeAdder(a) {
      var c = 2;
      return function(z) {
        b = 10;
        return a + b + c;
      };
    }

    var add5 = makeAdder(5);
    var add10 = makeAdder(10);
   =>클로저에 a와 c의 환경이 저장됨

    console.log(add5(2)); => 17 (a:5 + b:10 + c:2)
    console.log(add10(2)); =>22 (a:10 + b:10 + c:2)
   =>함수 실행 시 클로저에 저장된 a, c값에 접근하여 값을 계산

=> 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는것이 아니라는 것을 의미한다