Skip to content

Commit c243163

Browse files
[오래된 'var'] 원문 변경 내용 반영
1 parent e60a6c9 commit c243163

File tree

1 file changed

+35
-35
lines changed

1 file changed

+35
-35
lines changed

1-js/06-advanced-functions/04-var/article.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11

22
# 오래된 'var'
33

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+
이번 주제에선 작성된 지 오래된 스크립트를 읽는 데 도움을 줄 만한 내용을 다룹니다.
66
7-
That's not how we write a new code.
7+
새로운 코드를 작성할 때는 이 방법을 쓰시면 안 됩니다.
88
```
99

1010
[변수](info:variables)를 다룬 첫 번째 장에서 변수 선언 방법 세 가지를 배운 바 있습니다.
@@ -22,7 +22,7 @@ That's not how we write a new code.
2222

2323
```js run
2424
function sayHi() {
25-
var phrase = "Hello"; // "let" 대신 "var"를 사용해 지역 변수를 선언
25+
var phrase = "Hello"; // 'let' 대신 'var'를 사용해 지역 변수를 선언
2626

2727
alert(phrase); // Hello
2828
}
@@ -34,15 +34,15 @@ alert(phrase); // Error, phrase is not defined
3434

3535
하지만 `var``let`엔 차이가 있습니다.
3636

37-
## "var"는 블록 스코프가 없습니다.
37+
## 'var'는 블록 스코프가 없습니다.
3838

3939
`var`로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.
4040

4141
예시:
4242

4343
```js run
4444
if (true) {
45-
var test = true; // "let" 대신 "var"를 사용했습니다.
45+
var test = true; // 'let' 대신 'var'를 사용했습니다.
4646
}
4747

4848
*!*
@@ -56,7 +56,7 @@ alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수
5656

5757
```js run
5858
if (true) {
59-
let test = true; // "let"으로 변수를 선언함
59+
let test = true; // 'let'으로 변수를 선언함
6060
}
6161

6262
*!*
@@ -72,7 +72,7 @@ for (var i = 0; i < 10; i++) {
7272
}
7373

7474
*!*
75-
alert(i); // 10, 반복문이 종료되었지만 "i"는 전역 변수이므로 여전히 접근 가능합니다.
75+
alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.
7676
*/!*
7777
```
7878

@@ -93,11 +93,11 @@ alert(phrase); // Error: phrase is not defined
9393

9494
위에서 살펴본 바와 같이, `var``if`, `for` 등의 코드 블록을 관통합니다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다. `var`는 구식 자바스크립트의 잔재이죠.
9595

96-
## "var" 선언은 함수 시작 시 처리됩니다.
96+
## 함수 시작과 함께 처리되는 'var'
9797

98-
`var` 선언은 함수가 시작될 때 처리됩니다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리되죠.
98+
`var` 선언은 함수가 시작될 때 처리됩니다. 전역에서 선언한 변수라면 스크립트가 시작될 때 처리되죠.
9999

100-
함수 본문에 있는 `var`로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됩니다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됩니다).
100+
함수 본문 내에서 `var`로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됩니다(단, 변수가 중첩 함수 내에서 정의되지 않아야 이 규칙이 적용됩니다).
101101

102102
따라서 아래 두 예제는 동일하게 동작합니다.
103103

@@ -146,13 +146,13 @@ function sayHi() {
146146
sayHi();
147147
```
148148

149-
이렇게 변수가 끌어올려 지는 현상을 "호이스팅(hoisting)"이라고 부릅니다. `var`로 선언한 모든 변수는 함수의 최상위로 "끌어 올려지기(hoisted)" 때문입니다(옮긴이 -- *hoist*는 끌어올리다 라는 뜻이 있습니다).
149+
이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부릅니다. `var`로 선언한 모든 변수는 함수의 최상위로 '끌어 올려지기(hoisted)' 때문입니다(*hoist*는 끌어올리다 라는 뜻이 있습니다. -- 옮긴이).
150150

151-
바로 위 예제에서 `if (false)` 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않습니다. `if` 내부의 `var` 는 함수 `sayHi`의 시작 부분에서 처리되므로, `(*)`로 표시한 줄에서 `phrase`는 이미 정의가 된 상태인 것이죠.
151+
바로 위 예제에서 `if (false)` 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않습니다. `if` 내부의 `var` 는 함수 `sayHi`의 시작 부분에서 처리되므로 `(*)`로 표시한 줄에서 `phrase`는 이미 정의가 된 상태인 것이죠.
152152

153153
**선언은 호이스팅 되지만 할당은 호이스팅 되지 않습니다.**
154154

155-
That's best demonstrated with an example:
155+
예시를 통해 살펴봅시다.
156156

157157
```js run
158158
function sayHi() {
@@ -171,7 +171,7 @@ sayHi();
171171
1. 변수 선언(`var`)
172172
2. 변수에 값을 할당(`=`)
173173

174-
변수 선언은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 할당을 한 코드에서 처리됩니다. 따라서 위 예제는 아래 코드처럼 동작하게 됩니다.
174+
변수 선언은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 할당 관련 코드에서 처리됩니다. 따라서 위 예제는 아래 코드처럼 동작하게 됩니다.
175175

176176
```js run
177177
function sayHi() {
@@ -189,17 +189,17 @@ function sayHi() {
189189
sayHi();
190190
```
191191

192-
이처럼 모든 `var` 선언은 함수 시작 시 처리되기 때문에, `var`로 선언한 변수는 어디서든 참조할 수 있습니다. 하지만 변수에 무언갈 할당하기 전까진 값이 undefined이죠.
192+
이처럼 모든 `var` 선언은 함수 시작 시 처리되기 때문에, `var`로 선언한 변수는 어디서든 참조할 수 있습니다. 하지만 변수에 무언가를 할당하기 전까진 값이 undefined이죠.
193193

194194
바로 위의 두 예시에서 `alert`를 호출하기 전에 변수 `phrase`는 선언이 끝난 상태이기 때문에 에러 없이 얼럿 창이 뜹니다. 그러나 값이 할당되기 전이기 때문에 얼럿 창엔 `undefined`가 출력되죠.
195195

196-
### IIFE
196+
### 즉시 실행 함수 표현식
197197

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`라고 부르기도 합니다.
199199

200-
That's not something we should use nowadays, but you can find them in old scripts.
200+
즉시 실행 함수 표현식을 요즘에는 자주 쓰지 않습니다. 하지만 오래된 스크립트에서 만날 수 있기 때문에 즉시 실행 함수 표현식이 무엇인지 알아 둘 필요가 있습니다.
201201

202-
An IIFE looks like this:
202+
IIFE는 다음과 같이 생겼습니다.
203203

204204
```js run
205205
(function() {
@@ -211,13 +211,13 @@ An IIFE looks like this:
211211
})();
212212
```
213213

214-
Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
214+
함수 표현식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행되었습니다. 이 함수는 자신만의 변수를 갖고있네요.
215215

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'이라는 키워드를 만나면 함수 선언문이 시작될 것이라 예상합니다. 그런데 함수 선언문으로 함수를 만들 땐 반드시 함수의 이름이 있어야 합니다. 따라서 아래와 예시를 실행하면 에러가 발생합니다.
217217

218218
```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
221221

222222
let message = "Hello";
223223

@@ -226,40 +226,40 @@ function() { // <-- Error: Unexpected token (
226226
}();
227227
```
228228

229-
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+
"그럼 이름을 넣으면 되는 거 아닌가?"라고 생각해 이름을 넣어도 에러가 발생합니다. 자바스크립트는 함수 선언문으로 정의한 함수를 정의와 동시에 바로 호출하는 것을 허용하지 않기 때문입니다.
230230

231231
```js run
232-
// syntax error because of parentheses below
232+
// 맨 아래의 괄호 때문에 문법 에러가 발생합니다.
233233
function go() {
234234

235-
}(); // <-- can't call Function Declaration immediately
235+
}(); // <-- 함수 선언문은 선언 즉시 호출할 수 없습니다.
236236
```
237237

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+
함수를 괄호로 감싸면 자바스크립트가 함수를 함수 선언문이 아닌 표현식으로 인식하도록 속일 수 있습니다. 함수 표현식은 이름이 없어도 괜찮고, 즉시 호출도 가능합니다.
239239

240-
There exist other ways besides parentheses to tell JavaScript that we mean a Function Expression:
240+
괄호를 사용하는 방법 말고도, 자바스크립트가 함수 표현식이라고 인식하게 해주는 다른 방법들이 있습니다.
241241

242242
```js run
243-
// Ways to create IIFE
243+
// IIFE를 만드는 방법
244244

245245
(function() {
246-
alert("Parentheses around the function");
246+
alert("함수를 괄호로 둘러싸기");
247247
}*!*)*/!*();
248248

249249
(function() {
250-
alert("Parentheses around the whole thing");
250+
alert("전체를 괄호로 둘러싸기");
251251
}()*!*)*/!*;
252252

253253
*!*!*/!*function() {
254-
alert("Bitwise NOT operator starts the expression");
254+
alert("표현식 앞에 비트 NOT 연산자 붙이기");
255255
}();
256256

257257
*!*+*/!*function() {
258-
alert("Unary plus starts the expression");
258+
alert("표현식 앞에 단항 덧셈 연산자 붙이기");
259259
}();
260260
```
261261

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+
위와 같은 방법을 사용하면 함수 표현식처럼 인식되어 바로 실행이 가능합니다. 그런데 모던 자바스크립트에선 이렇게 코드를 작성할 필요가 없습니다.
263263

264264
## 요약
265265

0 commit comments

Comments
 (0)