@@ -175,7 +175,7 @@ alert( counter() ); // 2
175
175
176
176
이렇게 스크립트 전체와 관련된 렉시컬 환경은 전역 렉시컬 환경(global Lexical Environment)이라고 합니다.
177
177
178
- 위 그림에서 네모 상자는 변수가 저장되는 환경 레코드를 나타내고 붉은 화살표는 외부 렉시컬 환경에 대한 참조를 나타냅니다. 전역 렉시컬 환경은 외부 참조를 갖지 않기 때문에 화살표가 ` null ` 을 가리키는 걸 확인할 수 있습니다.
178
+ 위 그림에서 네모 상자는 변수가 저장되는 환경 레코드(1)를 나타내고 네모 상자 옆, 오른쪽을 향하는 화살표는 외부 렉시컬 환경에 대한 참조(2)를 나타냅니다. 전역 렉시컬 환경은 외부 참조를 갖지 않기 때문에 화살표가 ` null ` 을 가리키는 걸 확인할 수 있습니다.
179
179
180
180
코드가 실행되고 실행 흐름이 이어져 나가면서 렉시컬 환경은 변화합니다.
181
181
@@ -185,7 +185,7 @@ alert( counter() ); // 2
185
185
186
186
우측의 네모 상자들은 코드가 한 줄, 한 줄 실행될 때마다 전역 렉시컬 환경이 어떻게 변화하는지 보여줍니다.
187
187
188
- 1 . 스크립트가 시작되면 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라갑니다(pre-populated).
188
+ 1 . 스크립트가 시작되면(execution start) 스크립트 내에서 선언한 변수 전체가 렉시컬 환경에 올라갑니다(pre-populated).
189
189
- 이때 변수의 상태는 특수 내부 상태(special internal state)인 'uninitialized'가 됩니다. 자바스크립트 엔진은 uninitialized 상태의 변수를 인지하긴 하지만, ` let ` 을 만나기 전까진 이 변수를 참조할 수 없습니다.
190
190
2 . ` let phrase ` 가 나타났네요. 아직 값을 할당하기 전이기 때문에 프로퍼티 값은 ` undefined ` 입니다. ` phrase ` 는 이 시점 이후부터 사용할 수 있습니다.
191
191
3 . ` phrase ` 에 값이 할당되었습니다.
@@ -220,9 +220,9 @@ alert( counter() ); // 2
220
220
221
221
### 단계 3. 내부와 외부 렉시컬 환경
222
222
223
- 함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어집니다. 이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장됩니다.
223
+ 함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어집니다. 이 렉시컬 환경엔 함수 호출 시 넘겨받은 매개변수와 함수의 지역 변수가 저장됩니다.
224
224
225
- ` say("John") ` 을 호출하면 아래와 같은 내부 변화가 일어납니다(현재 실행 흐름은 붉은색 화살표로 나타낸 줄에 멈춰있는 상황입니다).
225
+ ` say("John") ` 을 호출하면 아래와 같은 내부 변화가 일어납니다(현재 실행 흐름은 함수 내부, 화살표로 표시한 줄(alert 문)에 멈춰있는 상황입니다).
226
226
227
227
<!--
228
228
```js
@@ -237,7 +237,7 @@ alert( counter() ); // 2
237
237
238
238
![ ] ( lexical-environment-simple.svg )
239
239
240
- 함수가 호출 중인 동안엔 호출 중인 함수를 위한 내부 렉시컬 환경과 내부 렉시컬 환경이 가리키는 외부 렉시컬 환경을 갖게 됩니다.
240
+ 함수 호출 중엔 호출 중인 함수를 위한 내부 렉시컬 환경과 내부 렉시컬 환경이 가리키는 외부 렉시컬 환경, 총 2개의 렉시컬 환경을 갖게 됩니다.
241
241
242
242
- 예시의 내부 렉시컬 환경은 현재 실행 중인 함수인 ` say ` 에 상응합니다. 내부 렉시컬 환경엔 함수의 인자인 ` name ` 으로부터 유래한 프로퍼티 하나만 있네요. ` say("John") ` 을 호출했기 때문에, ` name ` 의 값은 ` "John" ` 이 됩니다.
243
243
- 예시의 외부 렉시컬 환경은 전역 렉시컬 환경입니다. 전역 렉시컬 환경은 ` phrase ` 와 함수 ` say ` 를 프로퍼티로 갖습니다.
@@ -371,7 +371,7 @@ g = null; // 도달할 수 없는 상태가 되었으므로 메모리에서 삭
371
371
372
372
그러나 실제로는 자바스크립트 엔진이 이를 지속해서 최적화합니다. 자바스크립트 엔진은 변수 사용을 분석하고 외부 변수가 사용되지 않는다고 판단되면 이를 메모리에서 제거합니다.
373
373
374
- ** 디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Opera에서 쓰임)의 주요 부작용입니다.**
374
+ ** 디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Edge, Opera에서 쓰임)의 주요 부작용입니다.**
375
375
376
376
Chrome 브라우저에서 개발자 도구를 열고 아래의 코드를 실행해봅시다.
377
377
@@ -413,6 +413,6 @@ let g = f();
413
413
g ();
414
414
```
415
415
416
- 이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.
416
+ 이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Edge, Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.
417
417
418
418
이 부작용은 버그라기보다는 V8만의 특별한 기능이라고 생각하시면 될 것 같습니다. 미래에 이 기능은 변경될 수 있습니다. 최적화 과정에서 외부 변수가 어떻게 처리되었는지 확인하고 싶다면 이 페이지로 돌아오셔서 예시를 실행해 보세요.
0 commit comments