클로저, 렉시컬 스코프 (정리중)

1. 스코프

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 따라 접근 가능한 범위가 결정되는 것을 말함.

 

 

var, 함수 스코프

var는 함수를 기준으로 유효 범위가 결정된다. 다른 함수 안의 변수는 접근 불가.

 

function displayNum() {
  var num = 100
  console.log(num) // 100
}

displayNum() // 100

console.log(num) // num is not defined

 

그런데 조건문은 함수가 아니라 문(statement)이기 때문에 안으로 접근 가능하다.

if (true) {
  var age = 10
} else {
  var age = 20
}

console.log(age) //20

 

 

let, const

직관적으로 중괄호 단위로 접근 권한이 결정된다고 보면 된다.

if (true) {
  let age = 10
}

console.log(age) //reference error

 

 

렉시컬 스코프

중첩된 함수 속에서 내부 함수가 외부 함수의 변수 및 기타 리소스에 접근 가능하다는걸 의미. 즉 함수를 어디다 선언했는지에 따라 접근 가능한 영역이 달라진다. 상위 스코프에 따라 접근 가능한 영역이 달라진다고 말할 수 있다.

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

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함

 

 

그래서 클로저란?

function makeAdder(x) {
  var y = 1;
  return function (z) {
    y = 100;
    return x + y + z;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨

console.log(add5(2)); // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산

내부 함수를 return하는 함수를 쓸 때, 내부 함수가 상위 함수의 자원을 참조하고 있다면, return 후에는 접근하지 못했던 자원에 접근할 수 있게 되는 것을 말한다.