JavaScript - 렉시컬스코프, 클로저

렉시컬스코프

스코프란? 식별자가 유효한 범위입니다. 스코프를 구분해보면 두가지가 있습니다.

• 전역 스코프 : 코드 어디에서든 참조할 수 있는 범위
• 지역 스코프 : 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있습니다.

자바스크립트의 상위 스코프를 결정하는 방식은 렉시컬 스코프를 따릅니다!
렉시컬 스코프를 이야기 하기전에 예제부터 보여드리겠습니다.
ex) 3,4번의 결과는 무엇일까요?

const x = 2; // 0

function foo() { // 1
  const x = 10;
  bar();
}

function bar() { // 2
  console.log(x);
}

foo(); // 3
bar(); // 4

순서대로 보겠습니다.

• 0번 전역변수 x = 2가 선언되었습니다.

• 1번 foo함수가 선언되었습니다.

• 2번 bar함수가 선언되었습니다.

• 3번 foo함수가 호출됐습니다. foo함수는 bar함수를 호출합니다.
  bar함수는 console.log(x)를 출력합니다.
  하지만 bar함수 내부에 x가 없어 참조할 수 없습니다.
  상위스코프에서 x를 참조해야 합니다.
  자바스크립트의 상위 스코프를 결정하는 방식은 렉시컬 스코프입니다
  렉시컬 스코프는 함수가 어디에서 선언 하였는지 결정됩니다.
  bar함수의 상위스코프는 전역스코프로 const x의 2를 참조합니다.

• 4번 bar함수를 호출합니다. bar의 상위스코프인 전역스코프에서
  const x의 2를 참조합니다.

```정답은 2가 2번 출력 됩니다.```
foo(); // 2
bar(); // 2

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라
어디에 “선언” 하였는지에 따라 결정된다.

클로저

렉시컬 스코프에서 응용할 수 있는것이 클로저가 있습니다.
클로저를 한 문장으로 정의한다면.

• 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수
• 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수

const x = 1; // 1

function outer(){ //2
	const x = 10;
	const inner = function(){ console.log(x)}; //4
	return inner
};

const innerFunc = outer(); 
innerFunc(); //3

위에서와 마찬가지로 하나하나 순서대로 보겠습니다!

• 전역변수 const x = 1 선언
• outer함수 선언
• outer함수 호출하면 inner함수를 반환하고나서 생명주기가 끝난다.
• inner함수는 x를 참조하기 위해 상위스코프에서 참조
• inner함수의 상위스코프는 렉시컬스코프에 따라 outer함수의 x를 참조
• inner함수는 outer의 생명주기가 끝났지만 outer의 지역변수를 참조
  console.log(x) = 10

생명 주기가 끝난 외부 함수의 변수를 참조하는 함수를 클로저라 한다.

외부 함수보다 내부 함수가 더 오래 유지되는 경우
내부 함수는 이미 생명주기가 끝난 외부함수의 지역변수를 참조 할수 있다.