Skip to content

Commit fb8d821

Browse files
authored
Merge pull request #271 from odsantos/update-en-new-function-syntax
Update "The new Function syntax" english version
2 parents a69dffc + 2f4c41a commit fb8d821

File tree

1 file changed

+21
-35
lines changed
  • 1-js/06-advanced-functions/07-new-function

1 file changed

+21
-35
lines changed

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

Lines changed: 21 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,28 @@ There's one more way to create a function. It's rarely used, but sometimes there
88
The syntax for creating a function:
99

1010
```js
11-
let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)
11+
let func = new Function ([arg1, arg2, ...argN], functionBody);
1212
```
1313

14-
In other words, function parameters (or, more precisely, names for them) go first, and the body is last. All arguments are strings.
14+
The function is created with the arguments `arg1...argN` and the given `functionBody`.
1515

1616
It's easier to understand by looking at an example. Here's a function with two arguments:
1717

1818
```js run
19-
let sum = new Function('a', 'b', 'return a + b');
19+
let sum = new Function('a', 'b', 'return a + b');
2020

2121
alert( sum(1, 2) ); // 3
2222
```
2323

24-
If there are no arguments, then there's only a single argument, the function body:
24+
And here there's a function without arguments, with only the function body:
2525

2626
```js run
2727
let sayHi = new Function('alert("Hello")');
2828

2929
sayHi(); // Hello
3030
```
3131

32-
The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time.
32+
The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time.
3333

3434
All previous declarations required us, programmers, to write the function code in the script.
3535

@@ -42,16 +42,17 @@ let func = new Function(str);
4242
func();
4343
```
4444

45-
It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template. The need for that usually arises at advanced stages of development.
45+
It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template, in complex web-applications.
4646

4747
## Closure
4848

49-
Usually, a function remembers where it was born in the special property `[[Environment]]`. It references the Lexical Environment from where it's created.
49+
Usually, a function remembers where it was born in the special property `[[Environment]]`. It references the Lexical Environment from where it's created (we covered that in the chapter <info:closure>).
5050

51-
But when a function is created using `new Function`, its `[[Environment]]` references not the current Lexical Environment, but instead the global one.
51+
But when a function is created using `new Function`, its `[[Environment]]` is set to reference not the current Lexical Environment, but the global one.
5252

53-
```js run
53+
So, such function doesn't have access to outer variables, only to the global ones.
5454

55+
```js run
5556
function getFunc() {
5657
let value = "test";
5758

@@ -67,7 +68,7 @@ getFunc()(); // error: value is not defined
6768

6869
Compare it with the regular behavior:
6970

70-
```js run
71+
```js run
7172
function getFunc() {
7273
let value = "test";
7374

@@ -87,51 +88,36 @@ Imagine that we must create a function from a string. The code of that function
8788

8889
Our new function needs to interact with the main script.
8990

90-
Perhaps we want it to be able to access outer local variables?
91+
What if it could access the outer variables?
9192

9293
The problem is that before JavaScript is published to production, it's compressed using a *minifier* -- a special program that shrinks code by removing extra comments, spaces and -- what's important, renames local variables into shorter ones.
9394

9495
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.
9596

96-
But, if `new Function` could access outer variables, then it would be unable to find `userName`, since this is passed in as a string *after* the code is minified.
97+
So if `new Function` had access to outer variables, it would be unable to find renamed `userName`.
9798

98-
**Even if we could access outer lexical environment in `new Function`, we would have problems with minifiers.**
99+
**If `new Function` had access to outer variables, it would have problems with minifiers.**
99100

100-
The "special feature" of `new Function` saves us from mistakes.
101+
Besides, such code would be architecturally bad and prone to errors.
101102

102-
And it enforces better code. If we need to pass something to a function created by `new Function`, we should pass it explicitly as an argument.
103-
104-
Our "sum" function actually does that right:
105-
106-
```js run
107-
*!*
108-
let sum = new Function('a', 'b', 'return a + b');
109-
*/!*
110-
111-
let a = 1, b = 2;
112-
113-
*!*
114-
// outer values are passed as arguments
115-
alert( sum(a, b) ); // 3
116-
*/!*
117-
```
103+
To pass something to a function, created as `new Function`, we should use its arguments.
118104

119105
## Summary
120106

121107
The syntax:
122108

123109
```js
124-
let func = new Function(arg1, arg2, ..., body);
110+
let func = new Function ([arg1, arg2, ...argN], functionBody);
125111
```
126112

127-
For historical reasons, arguments can also be given as a comma-separated list.
113+
For historical reasons, arguments can also be given as a comma-separated list.
128114

129-
These three mean the same:
115+
These three declarations mean the same:
130116

131-
```js
117+
```js
132118
new Function('a', 'b', 'return a + b'); // basic syntax
133119
new Function('a,b', 'return a + b'); // comma-separated
134120
new Function('a , b', 'return a + b'); // comma-separated with spaces
135121
```
136122

137-
Functions created with `new Function`, have `[[Environment]]` referencing the global Lexical Environment, not the outer one. Hence, they cannot use outer variables. But that's actually good, because it saves us from errors. Passing parameters explicitly is a much better method architecturally and causes no problems with minifiers.
123+
Functions created with `new Function`, have `[[Environment]]` referencing the global Lexical Environment, not the outer one. Hence, they cannot use outer variables. But that's actually good, because it insures us from errors. Passing parameters explicitly is a much better method architecturally and causes no problems with minifiers.

0 commit comments

Comments
 (0)