From f418ab35e96336c33253fa6088f006643aca491f Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Fri, 14 Jun 2019 22:15:10 +0300 Subject: [PATCH] fix --- .../07-new-function/article.md | 49 +++++++------------ 1 file changed, 17 insertions(+), 32 deletions(-) diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md index e0750e32..b36b68af 100644 --- a/1-js/06-advanced-functions/07-new-function/article.md +++ b/1-js/06-advanced-functions/07-new-function/article.md @@ -8,20 +8,20 @@ There's one more way to create a function. It's rarely used, but sometimes there The syntax for creating a function: ```js -let func = new Function ([arg1[, arg2[, ...argN]],] functionBody) +let func = new Function ([arg1, arg2, ...argN], functionBody); ``` -In other words, function parameters (or, more precisely, names for them) go first, and the body is last. All arguments are strings. +The function is created with the arguments `arg1...argN` and the given `functionBody`. It's easier to understand by looking at an example. Here's a function with two arguments: ```js run -let sum = new Function('a', 'b', 'return a + b'); +let sum = new Function('a', 'b', 'return a + b'); alert( sum(1, 2) ); // 3 ``` -If there are no arguments, then there's only a single argument, the function body: +And here there's a function without arguments, with only the function body: ```js run let sayHi = new Function('alert("Hello")'); @@ -29,7 +29,7 @@ let sayHi = new Function('alert("Hello")'); sayHi(); // Hello ``` -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. +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. All previous declarations required us, programmers, to write the function code in the script. @@ -42,7 +42,7 @@ let func = new Function(str); func(); ``` -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. +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. ## Closure @@ -50,6 +50,8 @@ Usually, a function remembers where it was born in the special property `[[Envir But when a function is created using `new Function`, its `[[Environment]]` references not the current Lexical Environment, but instead the global one. +So, such function doesn't have access to outer variables, only to the global ones. + ```js run function getFunc() { @@ -67,7 +69,7 @@ getFunc()(); // error: value is not defined Compare it with the regular behavior: -```js run +```js run function getFunc() { let value = "test"; @@ -87,48 +89,31 @@ Imagine that we must create a function from a string. The code of that function Our new function needs to interact with the main script. -Perhaps we want it to be able to access outer local variables? +What if it could access the outer variables? 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. For instance, if a function has `let userName`, minifier replaces it `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. -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. +So if `new Function` had access to outer variables, it would be unable to find renamed `userName`. -**Even if we could access outer lexical environment in `new Function`, we would have problems with minifiers.** +**If `new Function` had access to outer variables, it would have problems with minifiers.** -The "special feature" of `new Function` saves us from mistakes. - -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. - -Our "sum" function actually does that right: - -```js run -*!* -let sum = new Function('a', 'b', 'return a + b'); -*/!* - -let a = 1, b = 2; - -*!* -// outer values are passed as arguments -alert( sum(a, b) ); // 3 -*/!* -``` +To pass something to a function, created as `new Function`, we should use its arguments. ## Summary The syntax: ```js -let func = new Function(arg1, arg2, ..., body); +let func = new Function ([arg1, arg2, ...argN], functionBody); ``` -For historical reasons, arguments can also be given as a comma-separated list. +For historical reasons, arguments can also be given as a comma-separated list. -These three mean the same: +These three lines mean the same: -```js +```js new Function('a', 'b', 'return a + b'); // basic syntax new Function('a,b', 'return a + b'); // comma-separated new Function('a , b', 'return a + b'); // comma-separated with spaces