Skip to content

Commit 58ca724

Browse files
committed
1-06-03 closure 충돌해결 및 번역
1 parent 71ab899 commit 58ca724

4 files changed

Lines changed: 7 additions & 60 deletions

File tree

1-js/06-advanced-functions/03-closure/10-make-army/task.md

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,42 +14,26 @@ function makeArmy() {
1414

1515
let i = 0;
1616
while (i < 10) {
17-
<<<<<<< HEAD
1817
let shooter = function() { // shooter 함수
1918
alert( i ); // 몇 번째 shooter인지 출력해줘야 함
20-
=======
21-
let shooter = function() { // create a shooter function,
22-
alert( i ); // that should show its number
23-
>>>>>>> upstream/master
2419
};
25-
shooters.push(shooter); // and add it to the array
20+
shooters.push(shooter); // shooters 배열에 shooter 함수 추가
2621
i++;
2722
}
2823

29-
// ...and return the array of shooters
24+
// shooters 반환
3025
return shooters;
3126
}
3227

3328
let army = makeArmy();
3429

35-
<<<<<<< HEAD
3630
army[0](); // 0번째 shooter가 10을 출력함
37-
army[5](); // 5번째 shooter 역시 10을 출력함
31+
army[1](); // 1번째 shooter가 10을 출력함
32+
army[2](); // 2번째 shooter 역시 10을 출력함
3833
// 모든 shooter가 자신의 번호 대신 10을 출력하고 있음
3934
```
4035

41-
왜 모든 shooter가 동일한 숫자를 출력하는 걸까요? 제대로 된 번호가 출력될 수 있게 코드를 수정해 보세요.
42-
=======
43-
*!*
44-
// all shooters show 10 instead of their numbers 0, 1, 2, 3...
45-
army[0](); // 10 from the shooter number 0
46-
army[1](); // 10 from the shooter number 1
47-
army[2](); // 10 ...and so on.
48-
*/!*
49-
```
50-
51-
Why do all of the shooters show the same value?
36+
왜 모든 shooter가 동일한 숫자를 출력하는 걸까요?
5237

53-
Fix the code so that they work as intended.
54-
>>>>>>> upstream/master
38+
제대로 된 번호가 출력될 수 있게 코드를 수정해 보세요.
5539

1-js/06-advanced-functions/03-closure/5-function-in-if/task.md

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
importance: 5
22

3-
<<<<<<< HEAD
43
# if 문 안의 함수
5-
=======
6-
---
7-
# Function in if
8-
>>>>>>> upstream/master
94

105
아래 예시의 실행 결과를 예측해보세요.
116

1-js/06-advanced-functions/03-closure/7-let-scope/solution.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,9 @@ func();
2626
```js
2727
function func() {
2828
*!*
29-
<<<<<<< HEAD
3029
// 엔진은 함수가 시작될 때 로컬 변수 x의 존재를 알고 있지만
3130
// let 문이 실행될 때까지 x는 '초기화되지 않은' 상태(dead zone)이기 때문에
3231
// 에러가 발생합니다.
33-
=======
34-
// the local variable x is known to the engine from the beginning of the function,
35-
// but "uninitialized" (unusable) until let ("dead zone")
36-
// hence the error
37-
>>>>>>> upstream/master
3832
*/!*
3933

4034
console.log(x); // ReferenceError: Cannot access 'x' before initialization

1-js/06-advanced-functions/03-closure/article.md

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,7 @@
77

88
그런데 함수가 생성된 이후에 외부 변수가 변경되면 어떤 일이 발생할까요? 함수는 새로운 값을 가져올까요? 아니면 생성 시점 이전의 값을 가져올까요?
99

10-
<<<<<<< HEAD
1110
매개변수를 통해 함수를 넘기고 이 함수를 저 멀리 떨어진 코드에서 호출할 땐 어떤 일이 발생할까요? 함수는 호출되는 곳을 기준으로 외부 변수에 접근할까요?
12-
=======
13-
And what if a function is passed along as an argument and called from another place of code, will it get access to outer variables at the new place?
14-
>>>>>>> upstream/master
1511

1612
이젠 이런 간단한 시나리오부터 시작해 좀 더 복잡한 시나리오를 다룰 수 있도록 지식을 확장해 봅시다.
1713

@@ -150,11 +146,7 @@ alert( counter() ); // 2
150146

151147
그런데 `makeCounter`를 살펴보다 보면 "`counter`를 여러 개 만들었을 때, 이 함수들은 서로 독립적일까? 함수와 중첩 함수 내 `count` 변수엔 어떤 값이 할당될까?" 같은 의문이 들기 마련입니다.
152148

153-
<<<<<<< HEAD
154149
이런 의문을 해결할 수 있게 되면 자바스크립트 숙련도가 크게 올라갑니다. 좀 더 복잡한 시나리오도 다룰 수 있게 되죠. 자, 긴말할 필요 없이 바로 시작해봅시다.
155-
=======
156-
Understanding such things is great for the overall knowledge of JavaScript and beneficial for more complex scenarios. So let's go a bit in-depth.
157-
>>>>>>> upstream/master
158150

159151
## 렉시컬 환경
160152

@@ -322,11 +314,7 @@ let counter = makeCounter();
322314

323315
함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거됩니다. 함수와 관련된 변수들은 이때 모두 사라지죠. 함수 호출이 끝나면 관련 변수를 참조할 수 없는 이유가 바로 여기에 있습니다. 자바스크립트에서 모든 객체는 도달 가능한 상태일 때만 메모리에 유지됩니다.
324316

325-
<<<<<<< HEAD
326317
그런데 호출이 끝난 후에도 여전히 도달 가능한 중첩 함수가 있을 수 있습니다. 이때는 이 중첩함수의 `[[Environment]]` 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장됩니다. 도달 가능한 상태가 되는 것이죠.
327-
=======
328-
However, if there's a nested function that is still reachable after the end of a function, then it has `[[Environment]]` property that references the lexical environment.
329-
>>>>>>> upstream/master
330318

331319
함수 호출은 끝났지만 렉시컬 환경이 메모리에 유지되는 이유는 바로 이 때문입니다.
332320

@@ -345,11 +333,7 @@ let g = f(); // g.[[Environment]]에 f() 호출 시 만들어지는
345333
// 렉시컬 환경 정보가 저장됩니다.
346334
```
347335

348-
<<<<<<< HEAD
349-
그런데 이렇게 중첩함수를 사용할 때는 주의할 점이 있습니다. `f()`를 여러 번 호출하고 그 결과를 어딘가에 저장하는 경우, 호출 시 만들어지는 각 렉시컬 환경 모두가 메모리에 유지된다는 점입니다. 아래 예시를 실행하면 3개의 렉시컬 환경이 만들어지는데, 각 렉시컬 환경은 메모리에서 삭제되지 않습니다.
350-
=======
351-
Please note that if `f()` is called many times, and resulting functions are saved, then all corresponding Lexical Environment objects will also be retained in memory. In the code below, all 3 of them:
352-
>>>>>>> upstream/master
336+
그런데 이렇게 중첩 함수를 사용할 때는 주의할 점이 있습니다. `f()`를 여러 번 호출하고 그 결과를 어딘가에 저장하는 경우, 호출 시 만들어지는 각 렉시컬 환경 모두가 메모리에 유지된다는 점입니다. 아래 예시를 실행하면 3개의 렉시컬 환경이 만들어지는데, 각 렉시컬 환경은 메모리에서 삭제되지 않습니다.
353337

354338
```js
355339
function f() {
@@ -387,11 +371,7 @@ g = null; // 도달할 수 없는 상태가 되었으므로 메모리에서 삭
387371

388372
그러나 실제로는 자바스크립트 엔진이 이를 지속해서 최적화합니다. 자바스크립트 엔진은 변수 사용을 분석하고 외부 변수가 사용되지 않는다고 판단되면 이를 메모리에서 제거합니다.
389373

390-
<<<<<<< HEAD
391374
**디버깅 시, 최적화 과정에서 제거된 변수를 사용할 수 없다는 점은 V8 엔진(Chrome, Edge, Opera에서 쓰임)의 주요 부작용입니다.**
392-
=======
393-
**An important side effect in V8 (Chrome, Edge, Opera) is that such variable will become unavailable in debugging.**
394-
>>>>>>> upstream/master
395375

396376
Chrome 브라우저에서 개발자 도구를 열고 아래의 코드를 실행해봅시다.
397377

@@ -433,12 +413,6 @@ let g = f();
433413
g();
434414
```
435415

436-
<<<<<<< HEAD
437416
이런 V8만의 부작용을 미리 알아 놓는 것이 좋습니다. Chrome이나 Edge, Opera에서 디버깅하는 경우라면 언젠간 이 이슈를 만나게 될 테니까요.
438417

439418
이 부작용은 버그라기보다는 V8만의 특별한 기능이라고 생각하시면 될 것 같습니다. 미래에 이 기능은 변경될 수 있습니다. 최적화 과정에서 외부 변수가 어떻게 처리되었는지 확인하고 싶다면 이 페이지로 돌아오셔서 예시를 실행해 보세요.
440-
=======
441-
This feature of V8 is good to know. If you are debugging with Chrome/Edge/Opera, sooner or later you will meet it.
442-
443-
That is not a bug in the debugger, but rather a special feature of V8. Perhaps it will be changed sometime. You can always check for it by running the examples on this page.
444-
>>>>>>> upstream/master

0 commit comments

Comments
 (0)