Skip to content

Commit 438415b

Browse files
committed
[충돌해결 및 번역] Part1 6.7 new Function 문법
1 parent 71ab899 commit 438415b

1 file changed

Lines changed: 11 additions & 16 deletions

File tree

  • 1-js/06-advanced-functions/07-new-function

1-js/06-advanced-functions/07-new-function/article.md

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
# new Function 문법
32

43
함수 표현식과 함수 선언문 이외에 함수를 만들 수도 있는 방법이 하나 더 있습니다. 잘 사용하는 방법은 아니지만, 이 방법 외에는 대안이 없을 때 사용합니다.
@@ -8,17 +7,17 @@
87
`new Function` 문법을 사용하면 함수를 만들 수 있습니다.
98

109
```js
11-
let func = new Function ([arg1, arg2, ...argN], functionBody);
10+
let func = new Function([arg1, arg2, ...argN], functionBody);
1211
```
1312

1413
새로 만들어지는 함수는 인수 `arg1...argN`과 함수 본문 `functionBody`로 구성됩니다.
1514

1615
인수 두 개가 있는 함수를 직접 만들어 보면서 `new Function` 문법에 대해 이해해보도록 합시다.
1716

1817
```js run
19-
let sum = new Function('a', 'b', 'return a + b');
18+
let sum = new Function("a", "b", "return a + b");
2019

21-
alert( sum(1, 2) ); // 3
20+
alert(sum(1, 2)); // 3
2221
```
2322

2423
인수가 없고 함수 본문만 있는 함수를 만들어보겠습니다.
@@ -46,11 +45,11 @@ func();
4645

4746
## 클로저
4847

49-
함수는 특별한 프로퍼티 `[[Environment]]`에 저장된 정보를 이용해 자기 자신이 태어난 곳을 기억합니다. `[[Environment]]`는 함수가 만들어진 렉시컬 환경을 참조합니다(자세한 내용은 <info:closure>에서 다루었습니다).
48+
함수는 특별한 프로퍼티 `[[Environment]]`에 저장된 정보를 이용해 자기 자신이 태어난 곳을 기억합니다. `[[Environment]]`는 함수가 만들어진 렉시컬 환경을 참조합니다(자세한 내용은 <info:closure>에서 다루었습니다).
5049

5150
그런데 `new Function`을 이용해 함수를 만들면 함수의 `[[Environment]]` 프로퍼티가 현재 렉시컬 환경이 아닌 전역 렉시컬 환경을 참조하게 됩니다.
5251

53-
따라서 `new Function`을 이용해 만든 함수는 외부 변수에 접근할 수 없고, 오직 전역 변수에만 접근할 수 있습니다.
52+
따라서 `new Function`을 이용해 만든 함수는 외부 변수에 접근할 수 없고, 오직 전역 변수에만 접근할 수 있습니다.
5453

5554
```js run
5655
function getFunc() {
@@ -90,13 +89,9 @@ getFunc()(); // getFunc의 렉시컬 환경에 있는 값 *!*"test"*/!*가 출
9089

9190
`new Function`으로 만든 새로운 함수 내부에서 외부 변수에 접근하려 할 때, 기존 함수 선언 방식으로 작성한 함수와 동일한 동작이 보장되어야 하죠.
9291

93-
그런데 스크립트가 프로덕션 서버에 반영되기 전, *압축기(minifier)* 에 의해 압축될 때 문제가 발생합니다. 압축기는 스크립트에서 주석이나 여분의 공백 등을 없애 코드 크기를 줄여주는 특수한 프로그램인데 압축기가 지역 변수 이름을 짧게 바꾸면서 문제가 발생하죠.
92+
그런데 스크립트가 프로덕션 서버에 반영되기 전, _압축기(minifier)_ 에 의해 압축될 때 문제가 발생합니다. 압축기는 스크립트에서 주석이나 여분의 공백 등을 없애 코드 크기를 줄여주는 특수한 프로그램인데 압축기가 지역 변수 이름을 짧게 바꾸면서 문제가 발생하죠.
9493

95-
<<<<<<< HEAD
96-
구체적으로 어떤 부분이 문제가 되는지 예시를 통해 알아봅시다. 함수 내부에 `let userName`라는 변수가 있으면 이 지역변수는 압축기에 의해 `let a` 등(짧은 이름)으로 대체되는데, 이때 `userName` 모두가 `a`로 교체됩니다. `userName`은 지역변수이고, 함수 외부에선 함수 내부에 있는 변수에 접근할 수 없기 때문에 이렇게 해도 전혀 문제가 없죠. 압축기는 단순히 변수를 찾아서 바꾸지 않고 코드 구조를 분석해 기존에 작성한 코드의 기능을 망가뜨리지 않으면서 영리하게 제 역할을 수행합니다.
97-
=======
98-
For instance, if a function has `let userName`, minifier replaces it with `let a` (or another letter if this one is occupied), and does it everywhere. That's usually a safe thing to do, because the variable is local, nothing outside the function can access it. And inside the function, minifier replaces every mention of it. Minifiers are smart, they analyze the code structure, so they don't break anything. They're not just a dumb find-and-replace.
99-
>>>>>>> upstream/master
94+
구체적으로 어떤 부분이 문제가 되는지 예시를 통해 알아봅시다. 함수 내부에 `let userName`라는 변수가 있으면 이 지역변수는 압축기에 의해 `let a` 등(해당 글자가 이미 사용 중이라면 다른 짧은 이름)으로 대체되는데, 이때 `userName` 모두가 `a`로 교체됩니다. `userName`은 지역변수이고, 함수 외부에선 함수 내부에 있는 변수에 접근할 수 없기 때문에 이렇게 해도 전혀 문제가 없죠. 압축기는 단순히 찾아바꾸기가 아니라 코드 구조를 분석해 기존 코드의 기능을 망가뜨리지 않으면서 영리하게 제 역할을 수행합니다.
10095

10196
이런 동작 방식 때문에 `new Function` 문법으로 만든 함수 내부에서 외부 변수에 접근하려고 하면 `userName`은 이미 이름이 변경되었기 때문에 찾을 수 없게 됩니다.
10297

@@ -111,17 +106,17 @@ For instance, if a function has `let userName`, minifier replaces it with `let a
111106
문법:
112107

113108
```js
114-
let func = new Function ([arg1, arg2, ...argN], functionBody);
109+
let func = new Function([arg1, arg2, ...argN], functionBody);
115110
```
116111

117112
인수를 한꺼번에 모아(쉼표로 구분) 전달할 수도 있습니다.
118113

119114
아래 세 선언 방식은 동일하게 동작하죠.
120115

121116
```js
122-
new Function('a', 'b', 'return a + b'); // 기본 문법
123-
new Function('a,b', 'return a + b'); // 쉼표로 구분
124-
new Function('a , b', 'return a + b'); // 쉼표와 공백으로 구분
117+
new Function("a", "b", "return a + b"); // 기본 문법
118+
new Function("a,b", "return a + b"); // 쉼표로 구분
119+
new Function("a , b", "return a + b"); // 쉼표와 공백으로 구분
125120
```
126121

127122
`new Function`을 이용해 만든 함수의 `[[Environment]]`는 외부 렉시컬 환경이 아닌 전역 렉시컬 환경을 참조하므로 외부 변수를 사용할 수 없습니다. 단점 같아 보이는 특징이긴 하지만 에러를 예방해 준다는 관점에선 장점이 되기도 합니다. 구조상으론 매개변수를 사용해 값을 받는 게 더 낫습니다. 압축기에 의한 에러도 방지할 수 있죠.

0 commit comments

Comments
 (0)