function init() {
	var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
	function displayName() { // displayName() 은 내부 함수이며, 클로저다.
		alert(name); // 부모 함수에서 선언된 변수를 사용한다.
	}
	displayName();
}
init();

1. 환경 레코드(Environment Record): 모든 지역 변수를 프로퍼티로 저장하고 있는 객체, this 값과 같은 기타 정보도 여기에 저장됩니다.

2. 외부 렉시컬 환경에 대한 참조: 상위 스코프에 대한 환경 레코드 참조를 가지고있습니다.

1. 변수에 대한 렉시컬 환경
자바스크립트의 스크립트 코드가 실행 시작되면 스크립트 내에 선언한 변수 전체가 렉시컬 환경에 올라갑니다. (pre-populated) 이를 호이스팅이라고도 합니다. 이때 변수의 상태는 특수 내부 상태인 uninitialized 가 됩니다. 자바스크립트 엔진은 uninitialized 상태의 변수를 인지하긴 하지만, let foo 와 같은 선언문을 만나기 전까진 이 변수를 참조할 수 없습니다.

1. 함수에 대한 렉시컬 환경
함수 선언문으로 선언한 함수는 일반 변수와 달리 바로 초기화가 됩니다. 그래서 호이스팅 된 것 처럼 코드 아래에 선언 되어도 호출할 수 있습니다.

foo();

function foo() {
	console.log('foo');
}

하지만, 변수에 할당한 함수 표현식은 바로 초기화 되지 않습니다.

bar();

const bar = () => {
	console.log('bar');
}

 

2. 내부와 외부의 렉시컬 환경
코드에서 변수에 접근할 때는, 자신의 렉시컬 환경을 먼저 보고, 이후 외부 렉시컬 환경을 타고타고 올라가 검색합니다. 이는 전역 렉시컬 환경까지 다 검색 할 때까지 반복됩니다.

1. 함수를 반환하는 함수의 렉시컬 환경
함수를 반환하는 함수에선 어떻게 렉시컬 환경이 구성될까?

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

해당 코드에서 let counter = makeCounter() 문에서 makeCounter() 가 실행되면 makeCounter 함수에 대한 let count변수를 담은 렉시컬 환경 객체가 생긴다. 이후, return 문에서 함수가 실행 될 때, makeCounter의 렉시컬 환경을 외부 렉시컬 환경 객체 참조로 가지는 렉시컬 환경이 구성된다.
 



 
함수는 [[Environment]] 라는 숨김 프로퍼티를 갖는데, 이곳에 함수가 만들어진 당시의 렉시컬 환경에 대한 참조가 저장된다. return 문의 내부 함수에는 아무 지역 변수가 없으므로 렉시컬 환경은 비어있지만, 외부 렉시컬 환경들은 아래 그림과 같은 형태가 될 것이다.
 

"use strict";

let x = 1;

function func() {
  console.log(x); // ?

  let x = 2;
}

func();

정답

재선언 에러가 아닌 ReferenceError 가 나는 이유는 렉시컬 환경에서 이미 let x = 2; 구문에 대한 정보가 환경 레코드로 들어가 있어서 x 를 외부 렉시컬 환경에서 끌어오지 않기 때문이다.

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

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

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값에 접근하여 값을 계산

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

var makeCounter = function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  }
};

var counter1 = makeCounter();
var counter2 = makeCounter();
alert(counter1.value()); /* 0 */
counter1.increment();
counter1.increment();
alert(counter1.value()); /* 2 */
counter1.decrement();
alert(counter1.value()); /* 1 */
alert(counter2.value()); /* 0 */

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function setupHelp() {
  var helpText = [
      {'id': 'email', 'help': 'Your e-mail address'},
      {'id': 'name', 'help': 'Your full name'},
      {'id': 'age', 'help': 'Your age (you must be over 16)'}
    ];

  for (var i = 0; i < helpText.length; i++) {
    var item = helpText[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
}

setupHelp();

클로저 - JavaScript | MDN

이제 다음 예제를 보자: 이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 것이다. 한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

변수의 유효범위와 클로저

자바스크립트는 함수 지향 언어입니다. 이런 특징은 개발자에게 많은 자유를 줍니다. 함수를 동적으로 생성할 수 있고, 생성한 함수를 다른 함수에 인수로 넘길 수 있으며, 생성된 곳이 아닌 곳에서 함수를 호출할 수도 있기 때문입니다. 함수 내부에서 함수 외부에 있는 변수에 접근할 수 있다는 사실은 앞서 학습해서 알고 계실 겁니다.

https://ko.javascript.info/closure