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
+35-35Lines changed: 35 additions & 35 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
2
2
# 오래된 'var'
3
3
4
-
```smart header="This article is for understanding old scripts"
5
-
The information in this article is useful for understanding old scripts.
4
+
```smart header="오래된 스크립트를 읽는 데 도움을 주는 글입니다."
5
+
이번 주제에선 작성된 지 오래된 스크립트를 읽는 데 도움을 줄 만한 내용을 다룹니다.
6
6
7
-
That's not how we write a new code.
7
+
새로운 코드를 작성할 때는 이 방법을 쓰시면 안 됩니다.
8
8
```
9
9
10
10
[변수](info:variables)를 다룬 첫 번째 장에서 변수 선언 방법 세 가지를 배운 바 있습니다.
@@ -22,7 +22,7 @@ That's not how we write a new code.
22
22
23
23
```js run
24
24
functionsayHi() {
25
-
var phrase ="Hello"; //"let" 대신 "var"를 사용해 지역 변수를 선언
25
+
var phrase ="Hello"; //'let' 대신 'var'를 사용해 지역 변수를 선언
26
26
27
27
alert(phrase); // Hello
28
28
}
@@ -34,15 +34,15 @@ alert(phrase); // Error, phrase is not defined
34
34
35
35
하지만 `var`와 `let`엔 차이가 있습니다.
36
36
37
-
## "var"는 블록 스코프가 없습니다.
37
+
## 'var'는 블록 스코프가 없습니다.
38
38
39
39
`var`로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.
40
40
41
41
예시:
42
42
43
43
```js run
44
44
if (true) {
45
-
var test =true; //"let" 대신 "var"를 사용했습니다.
45
+
var test =true; //'let' 대신 'var'를 사용했습니다.
46
46
}
47
47
48
48
*!*
@@ -56,7 +56,7 @@ alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수
56
56
57
57
```js run
58
58
if (true) {
59
-
let test =true; //"let"으로 변수를 선언함
59
+
let test =true; //'let'으로 변수를 선언함
60
60
}
61
61
62
62
*!*
@@ -72,7 +72,7 @@ for (var i = 0; i < 10; i++) {
72
72
}
73
73
74
74
*!*
75
-
alert(i); // 10, 반복문이 종료되었지만 "i"는 전역 변수이므로 여전히 접근 가능합니다.
75
+
alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.
76
76
*/!*
77
77
```
78
78
@@ -93,11 +93,11 @@ alert(phrase); // Error: phrase is not defined
93
93
94
94
위에서 살펴본 바와 같이, `var`는 `if`, `for` 등의 코드 블록을 관통합니다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다. `var`는 구식 자바스크립트의 잔재이죠.
95
95
96
-
## "var" 선언은 함수 시작 시 처리됩니다.
96
+
## 함수 시작과 함께 처리되는 'var'
97
97
98
-
`var` 선언은 함수가 시작될 때 처리됩니다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리되죠.
98
+
`var` 선언은 함수가 시작될 때 처리됩니다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리되죠.
99
99
100
-
함수 본문에 있는`var`로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됩니다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됩니다).
100
+
함수 본문 내에서`var`로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됩니다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됩니다).
101
101
102
102
따라서 아래 두 예제는 동일하게 동작합니다.
103
103
@@ -146,13 +146,13 @@ function sayHi() {
146
146
sayHi();
147
147
```
148
148
149
-
이렇게 변수가 끌어올려 지는 현상을 "호이스팅(hoisting)"이라고 부릅니다. `var`로 선언한 모든 변수는 함수의 최상위로 "끌어 올려지기(hoisted)" 때문입니다(옮긴이 -- *hoist*는 끌어올리다 라는 뜻이 있습니다).
149
+
이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부릅니다. `var`로 선언한 모든 변수는 함수의 최상위로 '끌어 올려지기(hoisted)' 때문입니다(*hoist*는 끌어올리다 라는 뜻이 있습니다. -- 옮긴이).
150
150
151
-
바로 위 예제에서 `if (false)` 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않습니다. `if` 내부의 `var` 는 함수 `sayHi`의 시작 부분에서 처리되므로,`(*)`로 표시한 줄에서 `phrase`는 이미 정의가 된 상태인 것이죠.
151
+
바로 위 예제에서 `if (false)` 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않습니다. `if` 내부의 `var` 는 함수 `sayHi`의 시작 부분에서 처리되므로 `(*)`로 표시한 줄에서 `phrase`는 이미 정의가 된 상태인 것이죠.
152
152
153
153
**선언은 호이스팅 되지만 할당은 호이스팅 되지 않습니다.**
154
154
155
-
That's best demonstrated with an example:
155
+
예시를 통해 살펴봅시다.
156
156
157
157
```js run
158
158
functionsayHi() {
@@ -171,7 +171,7 @@ sayHi();
171
171
1. 변수 선언(`var`)
172
172
2. 변수에 값을 할당(`=`)
173
173
174
-
변수 선언은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 할당을 한 코드에서 처리됩니다. 따라서 위 예제는 아래 코드처럼 동작하게 됩니다.
174
+
변수 선언은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 할당 관련 코드에서 처리됩니다. 따라서 위 예제는 아래 코드처럼 동작하게 됩니다.
175
175
176
176
```js run
177
177
functionsayHi() {
@@ -189,17 +189,17 @@ function sayHi() {
189
189
sayHi();
190
190
```
191
191
192
-
이처럼 모든 `var` 선언은 함수 시작 시 처리되기 때문에, `var`로 선언한 변수는 어디서든 참조할 수 있습니다. 하지만 변수에 무언갈 할당하기 전까진 값이 undefined이죠.
192
+
이처럼 모든 `var` 선언은 함수 시작 시 처리되기 때문에, `var`로 선언한 변수는 어디서든 참조할 수 있습니다. 하지만 변수에 무언가를 할당하기 전까진 값이 undefined이죠.
193
193
194
194
바로 위의 두 예시에서 `alert`를 호출하기 전에 변수 `phrase`는 선언이 끝난 상태이기 때문에 에러 없이 얼럿 창이 뜹니다. 그러나 값이 할당되기 전이기 때문에 얼럿 창엔 `undefined`가 출력되죠.
195
195
196
-
### IIFE
196
+
### 즉시 실행 함수 표현식
197
197
198
-
As in the past 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).
198
+
과거엔 `var`만 사용할 수 있었습니다. 그런데 `var`의 스코프는 블록 레벨 수준이 아니죠. 개발자들은 `var`도 블록 레벨 스코프를 가질 수 있게 여러가지 방안을 고려하게 됩니다. 이때 만들어진 것이 '즉시 실행 함수 표현식(immediately-invoked function expressions)'입니다. 즉시 실행 함수 표현식은 `IIFE`라고 부르기도 합니다.
199
199
200
-
That's not something we should use nowadays, but you can find them in old scripts.
200
+
즉시 실행 함수 표현식을 요즘에는 자주 쓰지 않습니다. 하지만 오래된 스크립트에서 만날 수 있기 때문에 즉시 실행 함수 표현식이 무엇인지 알아 둘 필요가 있습니다.
201
201
202
-
An IIFE looks like this:
202
+
IIFE는 다음과 같이 생겼습니다.
203
203
204
204
```js run
205
205
(function() {
@@ -211,13 +211,13 @@ An IIFE looks like this:
211
211
})();
212
212
```
213
213
214
-
Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
214
+
함수 표현식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행되었습니다. 이 함수는 자신만의 변수를 갖고있네요.
215
215
216
-
The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so this kind of code will give an error:
216
+
즉시 실행 함수를 만들 땐, 함수 표현식을 괄호로 둘러쌓아 (function {...})와 같은 형태로 만듭니다. 이렇게 괄호로 둘러싸지 않으면 에러가 발생합니다. 자바스크립트는 'function'이라는 키워드를 만나면 함수 선언문이 시작될 것이라 예상합니다. 그런데 함수 선언문으로 함수를 만들 땐 반드시 함수의 이름이 있어야 합니다. 따라서 아래와 예시를 실행하면 에러가 발생합니다.
217
217
218
218
```js run
219
-
//Try to declare and immediately call a function
220
-
function() { // <-- Error: Unexpected token (
219
+
//함수를 선언과 동시에 실행하려고 함
220
+
function() { // <-- Error: Function statements require a function name
Even if we say: "okay, let's add a name", that won't work, as JavaScript does not allow Function Declarations to be called immediately:
229
+
"그럼 이름을 넣으면 되는 거 아닌가?"라고 생각해 이름을 넣어도 에러가 발생합니다. 자바스크립트는 함수 선언문으로 정의한 함수를 정의와 동시에 바로 호출하는 것을 허용하지 않기 때문입니다.
230
230
231
231
```js run
232
-
//syntax error because of parentheses below
232
+
//맨 아래의 괄호 때문에 문법 에러가 발생합니다.
233
233
functiongo() {
234
234
235
-
}(); // <-- can't call Function Declaration immediately
235
+
}(); // <-- 함수 선언문은 선언 즉시 호출할 수 없습니다.
236
236
```
237
237
238
-
So, the parentheses around the function is a trick to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression: it needs no name and can be called immediately.
238
+
함수를 괄호로 감싸면 자바스크립트가 함수를 함수 선언문이 아닌 표현식으로 인식하도록 속일 수 있습니다. 함수 표현식은 이름이 없어도 괜찮고, 즉시 호출도 가능합니다.
239
239
240
-
There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression:
240
+
괄호를 사용하는 방법 말고도, 자바스크립트가 함수 표현식이라고 인식하게 해주는 다른 방법들이 있습니다.
241
241
242
242
```js run
243
-
//Ways to create IIFE
243
+
//IIFE를 만드는 방법
244
244
245
245
(function() {
246
-
alert("Parentheses around the function");
246
+
alert("함수를 괄호로 둘러싸기");
247
247
}*!*)*/!*();
248
248
249
249
(function() {
250
-
alert("Parentheses around the whole thing");
250
+
alert("전체를 괄호로 둘러싸기");
251
251
}()*!*)*/!*;
252
252
253
253
*!*!*/!*function() {
254
-
alert("Bitwise NOT operator starts the expression");
254
+
alert("표현식 앞에 비트 NOT 연산자 붙이기");
255
255
}();
256
256
257
257
*!*+*/!*function() {
258
-
alert("Unary plus starts the expression");
258
+
alert("표현식 앞에 단항 덧셈 연산자 붙이기");
259
259
}();
260
260
```
261
261
262
-
In all the above cases we declare a Function Expression and run it immediately. Let's note again: nowadays there's no reason to write such code.
262
+
위와 같은 방법을 사용하면 함수 표현식처럼 인식되어 바로 실행이 가능합니다. 그런데 모던 자바스크립트에선 이렇게 코드를 작성할 필요가 없습니다.
0 commit comments