어휘적 환경( Lexical Environment ) - 1

// #1 ====> 해당 위치에서의 Lexical
let one; // #2 ====> 해당 위치에서의 Lexical
one = 1; // #3 ====> 해당 위치에서의 Lexical

function addOne(num) {
	console.log(one + num);
}

addOne(5); // #4 ====> 해당 위치에서의 Lexical

• #1 위치에서의 Lexical

  [ Lexical 환경 ] : 전역

  one : 초기화x (사용불가)

  addOne : function (사용가능)

• #2 위치에서의 Lexical

  [ Lexical 환경 ] : 전역

  one : undefined

  addOne : function

• #3 위치에서의 Lexical

  [ Lexical 환경 ] : 전역

  one : 1

  addOne : function

• #4 위치에서의 Lexical

  [ Lexical 환경 ] : 내부

  num : 5

  (매게변수와 지역변수가 저장)

• 함수가 호출되는 동안 함수에서 만들어진 내부 Lexical 환경과 외부에서 받은 전역 Lexical 환경 두 개를 가지게 됩니다. 내부 Lexical 환경은 외부 Lexical 환경에 대한 참조를 갖습니다. 지금은 외부 Lexical 환경이 전역 Lexical 환경입니다.

  코드에서 변수를 찾을 때 내부에서 찾고 없으면 외부, 거기에도 없으면 전역 Lexical 환경까지 범위를 넓히면서 찾습니다.

어휘적 환경( Lexical Environment ) - 2

// #1 ====> 해당 위치에서의 Lexical
function makeAdder(x) {
	return function(y) {
		return x + y;
	}
}

const add3 = makeAdder(3); // #2 ====> 해당 위치에서의 Lexical
console.log(add3(2));      // #3 ====> 해당 위치에서의 Lexical --> Closure
//-> 5
const add10 = makeAdder(10); // #4 ====> 해당 위치에서의 Lexical
console.log(add10(5));       // #5 ====> 해당 위치에서의 Lexical --> Closure
// -> 15
console.log(add3(1));  // --> Closure
// -> 4

• #1 위치에서의 Lexical

  [ Lexical 환경 ] : 전역

  makeAdder : function (사용가능)

  add3 : 초기화x (사용불가)

• #2 위치에서의 Lexical

  [ Lexical 환경 ] : makeAdder

  x : 3

• #3 위치에서의 Lexical

  [ Lexical 환경 ] : 익명함수=add3

  y : 2

• #4 위치에서의 Lexical

  [ Lexical 환경 ] : makeAdder

  x : 10

• #5 위치에서의 Lexical

  [ Lexical 환경 ] : 익명함수=add10

  y : 5

• 익명함수 function(y) { return x + y; } 에서 y를 가지고 있고 상위함수인 makeAdder 의 x에 접근이 가능하다.

• 그리고 중요한 부분인 add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근이 가능하다. 이런 것을 Closure 하고 합니다.

  Closure란 함수와 그 함수의 렉시컬 환경의 조합, 함수가 생성될 당시의 외부 변수를 기업하고, 생성 이후에도 계속 접근이 가능이 가능한 기능이다.

  ( add3 함수와 그 함수의 렉시컬 환경의 조합 )

  ( add10 함수와 그 함수의 렉시컬 환경의 조합 )