Skip to content

Commit 493e95b

Browse files
committed
1-06-04 var 충돌해결 및 번역
1 parent 58ca724 commit 493e95b

1 file changed

Lines changed: 3 additions & 54 deletions

File tree

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

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,7 @@
44
```smart header="오래된 스크립트를 읽는 데 도움을 주는 글입니다."
55
이번 주제에선 작성된 지 오래된 스크립트를 읽는 데 도움을 줄 만한 내용을 다룹니다.
66
7-
<<<<<<< HEAD
87
새로운 코드를 작성할 때는 이 방법을 쓰시면 안 됩니다.
9-
=======
10-
That's not how we write new code.
11-
>>>>>>> upstream/master
128
```
139

1410
[변수](info:variables)를 다룬 첫 번째 장에서 변수 선언 방법 세 가지를 배운 바 있습니다.
@@ -32,11 +28,7 @@ alert(message); // 안녕하세요.
3228

3329
## var는 블록 스코프가 없습니다.
3430

35-
<<<<<<< HEAD
3631
`var`로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.
37-
=======
38-
Variables, declared with `var`, are either function-scoped or global-scoped. They are visible through blocks.
39-
>>>>>>> upstream/master
4032

4133
예시:
4234

@@ -73,12 +65,8 @@ for (var i = 0; i < 10; i++) {
7365
}
7466

7567
*!*
76-
<<<<<<< HEAD
7768
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'도 전역 변수이므로 여전히 접근 가능합니다.
8270
*/!*
8371
```
8472

@@ -94,17 +82,10 @@ function sayHi() {
9482
}
9583

9684
sayHi();
97-
<<<<<<< HEAD
98-
alert(phrase); // Error: phrase is not defined
99-
```
100-
101-
위에서 살펴본 바와 같이, `var``if`, `for` 등의 코드 블록을 관통합니다. 아주 오래전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어 지지 않았기 때문입니다. `var`는 구식 자바스크립트의 잔재이죠.
102-
=======
10385
alert(phrase); // ReferenceError: phrase is not defined
10486
```
10587

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`는 구식 자바스크립트의 잔재이죠.
10889

10990
## var는 변수의 중복 선언을 허용합니다
11091

@@ -224,19 +205,11 @@ sayHi();
224205

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

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

230210
### 즉시 실행 함수 표현식
231211

232212
과거엔 `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
240213

241214
즉시 실행 함수 표현식을 요즘에는 자주 쓰지 않습니다. 하지만 오래된 스크립트에서 만날 수 있기 때문에 즉시 실행 함수 표현식이 무엇인지 알아 둘 필요가 있습니다.
242215

@@ -252,23 +225,13 @@ IIFE는 다음과 같이 생겼습니다.
252225
})();
253226
```
254227

255-
<<<<<<< HEAD
256228
함수 표현식이 만들어지고 바로 호출되면서, 해당 함수가 바로 실행되었습니다. 이 함수는 자신만의 변수를 갖고있네요.
257229

258230
즉시 실행 함수를 만들 땐, 함수 표현식을 괄호로 둘러쌓아 (function {...})와 같은 형태로 만듭니다. 이렇게 괄호로 둘러싸지 않으면 에러가 발생합니다. 자바스크립트는 'function'이라는 키워드를 만나면 함수 선언문이 시작될 것이라 예상합니다. 그런데 함수 선언문으로 함수를 만들 땐 반드시 함수의 이름이 있어야 합니다. 따라서 아래와 예시를 실행하면 에러가 발생합니다.
259231

260232
```js run
261233
// 함수를 선언과 동시에 실행하려고 함
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 Function Declaration. 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
270234
function() { // <-- SyntaxError: Function statements require a function name
271-
>>>>>>> upstream/master
272235

273236
var message = "Hello";
274237

@@ -293,21 +256,12 @@ function go() {
293256
```js run
294257
// IIFE를 만드는 방법
295258

296-
<<<<<<< HEAD
297259
(function() {
298260
alert("함수를 괄호로 둘러싸기");
299261
}*!*)*/!*();
300262

301263
(function() {
302264
alert("전체를 괄호로 둘러싸기");
303-
=======
304-
*!*(*/!*function() {
305-
alert("Parentheses around the function");
306-
}*!*)*/!*();
307-
308-
*!*(*/!*function() {
309-
alert("Parentheses around the whole thing");
310-
>>>>>>> upstream/master
311265
}()*!*)*/!*;
312266

313267
*!*!*/!*function() {
@@ -325,13 +279,8 @@ function go() {
325279

326280
`var`로 선언한 변수는 `let`이나 `const`로 선언한 변수와 다른 두 가지 주요한 특성을 보입니다.
327281

328-
<<<<<<< HEAD
329-
1. `var`로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖습니다.
282+
1. `var`로 선언한 변수는 블록 스코프가 아닌 함수 수준 스코프를 갖습니다. 함수 밖에서 선언한 경우엔 전역 스코프를 갖습니다.
330283
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 function start (script start for globals).
334-
>>>>>>> upstream/master
335284

336285
이 외에도 전역 객체와 관련된 특성 하나가 더 있는데, 이에 대해선 다음 챕터에서 다루도록 하겠습니다.
337286

0 commit comments

Comments
 (0)