자바스크립트 Scope와 Closure

스코프(Scope)

---

• Scope(스코프) : 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것
• 블록 레벨 스코프 : 대부분 프로그래밍 언어, (let, const)
• 함수 레벨 스코프 : 자바스크립트, 함수 내부 전체에서 유효한 식별자
• 상위스코프 : 함수가 호출되는 시점에 결정(동적 스코프)
• 함수가 정의되는 시점에 결정(정적 스코프, 렉시컬 스코프) → 자바스크립트 함수는 태어나면서 내부슬롯에 상위 스코프 참조를 저장
• 함수 호출 → 실행 컨텍스트 생성, 실행 컨텍스트 스택 → 렉시컬 환경 생성 →실행 컨텍스트 스택에서 팝, 제거

Closure(클로저)

---

• 두 개의 함수로 만들어진 환경 으로 이루어진 특별한 객체의 한 종류
• 자바스크립트에서 클로저는 함수가 생성되는 시점에 생성 = 함수가 생성될 때 그 함수의 렉시컬 환경을 포섭(closure)하여 실행될 때 이용
• 여기서 환경 이라 함은 클로저가 생성될 때 그 범위 에 있던 여러 지역 변수들이 포함된 context를 말함
• 클로저를 통해서 자바스크립트에서 비공개(private) 속성/메소드, 공개 속성/메소드를 구현할 수 있음

• inner가 생명 주기를 마감한 outer 함수의 지역변수를 참조할 수 있으면 inner함수를 closure라고 함
• 혹은 외부 함수 호출이 종료되더라도 외부 함수의 지역 변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조
• 즉 외부 함수에 의해 반환되는 내부 함수

클로저 생성 조건

---

• 내부 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용
• 내부 함수는 외부 함수의 실행 환경(execution environment)에서 실행
• 내부 함수에서 사용되는 변수 x 는 외부 함수의 변수 스코프에 있음

var name = `Error`;
function outer() {
  var name = `Good`;
  return function inner() {
    console.log(name);
  };
}
var func = outer();
func();

• inner 혹은 func를 클로저라 부름
• console에 찍히는 값은 Error가 아니라 Good
• 즉, outer 함수의 context 에 속해있는 변수를 참조하는 것
• 여기서 outer함수의 지역변수로 존재하는 name변수를 free variable(자유변수)라고 함

• 스코프와 클로저 참고 블로그