📝 오늘 한 것

1. 클로저

2. 재귀 / 고차 함수 / Underdash JS

📚 배운 것

1. 클로저

1) 헷갈리는 개념 정리

(1) 스코프 / 실행 컨텍스트 / outerEnvironmentReference

스코프

식별자에 대한 유효범위를 말한다.
ES5까지의 자바스크립트는 전역 공간을 제외하면 오직 함수에 의해서만 스코프가 생성된다.
(ES6에서는 블록에 의해서도 스코프 경계가 발생한다.)

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말한다.
하나의 실행 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval() 함수, 함수 실행 등이 있다.
이는 VariableEnvironment, LexicalEnvironment, ThisBinding으로 구성된다.
블록 스코프가 생길 때마다 컨텍스트가 생기고, 이 컨텍스트는 블록이 끝나면 사라진다.

outerEnvironmentReference

현재 호출된 함수가 선언될 당시의 LexicalEnvironment(즉, 바로 직전 컨텍스트의 LexicalEnvironment)를 참조한다.

(2) 클로저

외부 함수의 지역 변수를 참조하는 내부 함수가 외부로 전달됐을 때, 외부 함수의 실행 컨텍스트가 종료된 이후에도 외부 함수의 지역 변수가 사라지지 않는 현상

cf. '외부로 전달'의 의미 : 내부 함수를 리턴(return) or 내부 함수를 콜백 함수로 전달

2) 예제

1초 간격으로 0부터 3까지 순서대로 출력할 것

(1) 오답

클로저를 사용하지 않았다.

for (var i = 0; i < 4; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

• var에 의해 선언된 변수 i는 전역 변수로 호이스팅 된다.
  for 반복문을 돌 때마다 변수 i의 값은 for 컨텍스트에 저장되지 않고 전역 컨텍스트에 업데이트된다.

• for 반복문의 조건에 만족하면 setTimeout 함수가 실행된다.
  for 반복문은 속도가 매우 빠르기 때문에 setTimeout의 콜백 함수가 실행되기까지 기다려야 하는 1초 동안 전역 변수 i의 초기값인 0은 따로 저장되지 않고 계속 업데이트된다.
  결국 for 반복문이 끝났을 때 전역 컨텍스트의 environmentRecord에는 4의 값을 가지는 전역 변수 i가 저장된다.
  1초가 지난 후 setTimeout의 콜백 함수가 실행되어 4가 거의 동시에 4번 반복하여 출력된다.

(2) let 키워드 사용

클로저를 사용했다.

for (let i = 0; i < 4; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

• 전역 변수로 호이스팅시키는 var 키워드 대신 let 키워드를 사용했다.

• 마찬가지로 for 반복문의 조건에 만족하여 setTimeout 함수가 실행된다.
  for 반복문을 한 번 돌 때마다 for 컨텍스트가 하나씩 생성된다.
  for 컨텍스트의 LexicalEnvironment의 environmentRecord에 지역 변수(변수명) i의 값이 저장된다.
  for 컨텍스트 안에서 다시 setTimeout 컨텍스트가 생성된다.
  setTimeout 함수의 콜백 함수에서 변수 i는 그 outerEnvironmentReference를 거슬러 올라가 for 컨텍스트에 저장되어 있는 지역 변수 i의 값을 참조한다.
  (for 컨텍스트가 종료되어도 지역 변수 i의 값은 사라지지 않는다.)

(3) 즉시 실행 함수 사용

클로저를 사용했다.

for (var i = 0; i < 4; i++) {
  (function (x) {
    setTimeout(function () {
      console.log(x);
    }, 1000 * x);
  })(i);
}

• let 키워드 대신 즉시 실행 함수를 이용해 변수 i를 지역 변수로 만들어 저장했다.

• for 반복문의 조건에 만족하여 즉시 실행 함수가 실행된다.
  for 반복문을 한 번 돌 때마다 for 컨텍스트가 하나씩 생성된다.
  즉시 실행 함수 컨텍스트의 LexicalEnvironment의 environmentRecord에 지역 변수(매개변수) i의 값이 저장된다.
  for 컨텍스트 안에 즉시 실행 함수 컨텍스트가, 그 안에는 setTimeout 컨텍스트가 생성된다.
  setTimeout 함수의 콜백 함수에서 변수 i는 그 outerEnvironmentReference를 거슬러 올라가 즉시 실행 함수 컨텍스트에 저장되어 있는 지역 변수 i의 값을 참조한다.
  (즉시 실행 함수 컨텍스트가 종료되어도 지역 변수 i의 값은 사라지지 않는다.)

✨ 내일 할 것

1. Underdash JS 마무리