You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/06-advanced-functions/04-var/article.md
+3-54Lines changed: 3 additions & 54 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,7 @@
4
4
```smart header="오래된 스크립트를 읽는 데 도움을 주는 글입니다."
5
5
이번 주제에선 작성된 지 오래된 스크립트를 읽는 데 도움을 줄 만한 내용을 다룹니다.
6
6
7
-
<<<<<<< HEAD
8
7
새로운 코드를 작성할 때는 이 방법을 쓰시면 안 됩니다.
9
-
=======
10
-
That's not how we write new code.
11
-
>>>>>>> upstream/master
12
8
```
13
9
14
10
[변수](info:variables)를 다룬 첫 번째 장에서 변수 선언 방법 세 가지를 배운 바 있습니다.
@@ -32,11 +28,7 @@ alert(message); // 안녕하세요.
32
28
33
29
## var는 블록 스코프가 없습니다.
34
30
35
-
<<<<<<< HEAD
36
31
`var`로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.
37
-
=======
38
-
Variables, declared with `var`, are either function-scoped or global-scoped. They are visible through blocks.
39
-
>>>>>>> upstream/master
40
32
41
33
예시:
42
34
@@ -73,12 +65,8 @@ for (var i = 0; i < 10; i++) {
73
65
}
74
66
75
67
*!*
76
-
<<<<<<<HEAD
77
68
alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.
78
-
=======
79
-
alert(i); // 10, "i" is visible after loop, it's a global variable
80
-
alert(one); // 1, "one" is visible after loop, it's a global variable
81
-
>>>>>>> upstream/master
69
+
alert(one); // 1, 반복문이 종료되었지만 'one'도 전역 변수이므로 여전히 접근 가능합니다.
82
70
*/!*
83
71
```
84
72
@@ -94,17 +82,10 @@ function sayHi() {
94
82
}
95
83
96
84
sayHi();
97
-
<<<<<<<HEAD
98
-
alert(phrase); // Error: phrase is not defined
99
-
```
100
-
101
-
위에서 살펴본 바와 같이, `var`는 `if`, `for` 등의 코드 블록을 관통합니다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다. `var`는 구식 자바스크립트의 잔재이죠.
102
-
=======
103
85
alert(phrase); // ReferenceError: phrase is not defined
104
86
```
105
87
106
-
As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript, blocks had no Lexical Environments, and `var` is a remnant of that.
107
-
>>>>>>> upstream/master
88
+
위에서 살펴본 바와 같이, `var`는 `if`, `for` 등의 코드 블록을 관통합니다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다. `var`는 구식 자바스크립트의 잔재이죠.
108
89
109
90
## var는 변수의 중복 선언을 허용합니다
110
91
@@ -224,19 +205,11 @@ sayHi();
224
205
225
206
이처럼 모든 `var` 선언은 함수 시작 시 처리되기 때문에, `var`로 선언한 변수는 어디서든 참조할 수 있습니다. 하지만 변수에 무언가를 할당하기 전까진 값이 undefined이죠.
226
207
227
-
<<<<<<< HEAD
228
208
바로 위의 두 예시에서 `alert`를 호출하기 전에 변수 `phrase`는 선언이 끝난 상태이기 때문에 에러 없이 얼럿 창이 뜹니다. 그러나 값이 할당되기 전이기 때문에 얼럿 창엔 `undefined`가 출력되죠.
229
209
230
210
### 즉시 실행 함수 표현식
231
211
232
212
과거엔 `var`만 사용할 수 있었습니다. 그런데 `var`의 스코프는 블록 레벨 수준이 아니죠. 개발자들은 `var`도 블록 레벨 스코프를 가질 수 있게 여러가지 방안을 고려하게 됩니다. 이때 만들어진 것이 '즉시 실행 함수 표현식(immediately-invoked function expressions)'입니다. 즉시 실행 함수 표현식은 `IIFE`라고 부르기도 합니다.
233
-
=======
234
-
In both examples above, `alert` runs without an error, because the variable `phrase` exists. But its value is not yet assigned, so it shows `undefined`.
235
-
236
-
## IIFE
237
-
238
-
In the past, as there was only `var`, and it has no block-level visibility, programmers invented a way to emulate it. What they did was called "immediately-invoked function expressions" (abbreviated as IIFE).
239
-
>>>>>>> upstream/master
240
213
241
214
즉시 실행 함수 표현식을 요즘에는 자주 쓰지 않습니다. 하지만 오래된 스크립트에서 만날 수 있기 때문에 즉시 실행 함수 표현식이 무엇인지 알아 둘 필요가 있습니다.
242
215
@@ -252,23 +225,13 @@ IIFE는 다음과 같이 생겼습니다.
252
225
})();
253
226
```
254
227
255
-
<<<<<<< HEAD
256
228
함수 표현식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행되었습니다. 이 함수는 자신만의 변수를 갖고있네요.
257
229
258
230
즉시 실행 함수를 만들 땐, 함수 표현식을 괄호로 둘러쌓아 (function {...})와 같은 형태로 만듭니다. 이렇게 괄호로 둘러싸지 않으면 에러가 발생합니다. 자바스크립트는 'function'이라는 키워드를 만나면 함수 선언문이 시작될 것이라 예상합니다. 그런데 함수 선언문으로 함수를 만들 땐 반드시 함수의 이름이 있어야 합니다. 따라서 아래와 예시를 실행하면 에러가 발생합니다.
259
231
260
232
```js run
261
233
// 함수를 선언과 동시에 실행하려고 함
262
-
function() { // <-- Error: Function statements require a function name
263
-
=======
264
-
Here, a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
265
-
266
-
The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript engine encounters `"function"`in the main code, it understands it as the start of a FunctionDeclaration. But a Function Declaration must have a name, so this kind of code will give an error:
267
-
268
-
```js run
269
-
// Tries to declare and immediately call a function
270
234
function() { // <-- SyntaxError: Function statements require a function name
271
-
>>>>>>> upstream/master
272
235
273
236
var message ="Hello";
274
237
@@ -293,21 +256,12 @@ function go() {
293
256
```js run
294
257
// IIFE를 만드는 방법
295
258
296
-
<<<<<<< HEAD
297
259
(function() {
298
260
alert("함수를 괄호로 둘러싸기");
299
261
}*!*)*/!*();
300
262
301
263
(function() {
302
264
alert("전체를 괄호로 둘러싸기");
303
-
=======
304
-
*!*(*/!*function() {
305
-
alert("Parentheses around the function");
306
-
}*!*)*/!*();
307
-
308
-
*!*(*/!*function() {
309
-
alert("Parentheses around the whole thing");
310
-
>>>>>>> upstream/master
311
265
}()*!*)*/!*;
312
266
313
267
*!*!*/!*function() {
@@ -325,13 +279,8 @@ function go() {
325
279
326
280
`var`로 선언한 변수는 `let`이나 `const`로 선언한 변수와 다른 두 가지 주요한 특성을 보입니다.
327
281
328
-
<<<<<<<HEAD
329
-
1.`var`로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖습니다.
282
+
1.`var`로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖습니다. 함수 밖에서 선언한 경우엔 전역 스코프를 갖습니다.
330
283
2.`var` 선언은 함수가 시작되는 시점(전역 공간에선 스크립트가 시작되는 시점)에서 처리됩니다.
331
-
=======
332
-
1.`var` variables have no block scope, their visibility is scoped to current function, or global, if declared outside function.
333
-
2. `var` declarations are processed at functionstart (scriptstartforglobals).
334
-
>>>>>>> upstream/master
335
284
336
285
이 외에도 전역 객체와 관련된 특성 하나가 더 있는데, 이에 대해선 다음 챕터에서 다루도록 하겠습니다.
0 commit comments