Skip to content

Commit

Permalink
docs: translate the new function syntax article
Browse files Browse the repository at this point in the history
The "new Function" syntax
  • Loading branch information
nazarepiedady authored May 5, 2024
2 parents 7b8bd10 + 8c915f8 commit d936142
Showing 1 changed file with 40 additions and 40 deletions.
80 changes: 40 additions & 40 deletions 1-js/06-advanced-functions/07-new-function/article.md
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@

# The "new Function" syntax
# A sintaxe de "new Function"

There's one more way to create a function. It's rarely used, but sometimes there's no alternative.
Existe mais uma maneira de criar uma função. Ela é raramente usada, mas às vezes não existem alternativas.

## Syntax
## Sintaxe

The syntax for creating a function:
A sintaxe para criar uma função:

```js
let func = new Function ([arg1, arg2, ...argN], functionBody);
```

The function is created with the arguments `arg1...argN` and the given `functionBody`.
A função é criada com os argumentos `arg1...argN` e entregue para `functionBody`.

It's easier to understand by looking at an example. Here's a function with two arguments:
É mais fácil de compreender olhando um exemplo. Aqui está uma função com dois argumentos:

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

alert( sum(1, 2) ); // 3
```

And here there's a function without arguments, with only the function body:
E aqui está uma função sem argumentos, apenas com o corpo da função:

```js run
let sayHi = new Function('alert("Hello")');
let sayHi = new Function('alert("Olá")');

sayHi(); // Hello
sayHi(); // Olá
```

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.
A principal diferença de outras formas que vimos é a função ser criada literalmente a partir de uma string, e passada em tempo de execução.

All previous declarations required us, programmers, to write the function code in the script.
Todas as declarações anteriores requeriam de nós, programadores, escrever o código da função dentro do *script*.

But `new Function` allows to turn any string into a function. For example, we can receive a new function from a server and then execute it:
Mas `new Function` permite transformar qualquer `string` em uma função. Por exemplo, nós podemos receber uma nova função de um servidor e executa-la:

```js
let str = ... receive the code from a server dynamically ...
let str = ... recebe o código de um servidor dinamicamente ...

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, in complex web-applications.
É usado em casos muito específicos, como quando recebemos código de um servidor, ou para compilar dinamicamente uma função a partir de um template, em aplicações web complexas.

## Closure

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>).
Normalmente, uma função lembra onde nasceu na propriedade especial `[[Environment]]`. Ela faz referência ao Ambiente Lexical de onde foi criado (abordaremos isso no capítulo <info:closure>).

But when a function is created using `new Function`, its `[[Environment]]` is set to reference not the current Lexical Environment, but the global one.
Mas quando uma função é criada usando `new Function`, seu `[[Environment]]` é definido para fazer referência não ao Ambiente Lexical atual, mas ao ambiente global.

So, such function doesn't have access to outer variables, only to the global ones.
Portanto, tal função não tem acesso a variáveis ​​externas, apenas a variáveis globais.

```js run
function getFunc() {
let value = "test";
let value = "teste";

*!*
let func = new Function('alert(value)');
Expand All @@ -63,14 +63,14 @@ function getFunc() {
return func;
}

getFunc()(); // error: value is not defined
getFunc()(); // erro: value não foi definido
```

Compare it with the regular behavior:
Compare-a com o comportamento padrão:

```js run
function getFunc() {
let value = "test";
let value = "teste";

*!*
let func = function() { alert(value); };
Expand All @@ -79,45 +79,45 @@ function getFunc() {
return func;
}

getFunc()(); // *!*"test"*/!*, from the Lexical Environment of getFunc
getFunc()(); // *!*"teste"*/!*, do escopo léxico de getFunc
```

This special feature of `new Function` looks strange, but appears very useful in practice.
Essa característica especial de `new Function` parece estranha, mas se apresenta muito útil, na prática.

Imagine that we must create a function from a string. The code of that function is not known at the time of writing the script (that's why we don't use regular functions), but will be known in the process of execution. We may receive it from the server or from another source.
Imagine que nós precisamos criar uma função a partir de uma `string`. O código dessa função é desconhecido durante a escrita do *script* (por esse motivo, nós não usamos funções regulares), mas vai ser conhecido durante o processo de execução. Nós podemos receber do servidor ou de outra fonte.

Our new function needs to interact with the main script.
Nossa nova função precisa interagir com o *script* principal.

What if it could access the outer variables?
E se você pudesse acessar as variáveis ​​externas?

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.
O problema é que antes de o JavaScript ser publicado para produção, ele é comprimido usando um "minificador" -- um programa especial que encolhe código removendo comentários, espaços e -- o mais importante, renomeia variáveis locais em variáveis mais curtas.

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.
Por exemplo, se uma função tem uma variável `let userName`, o minificador a troca por `let a` (ou outra letra se esta estiver ocupada), e ele faz isso em toda parte. Isso usualmente é uma coisa segura de se fazer, por a variável ser local, nada fora da função pode acessar ela. E dentro da função, o minificador troca todas as suas menções. Minificadores são inteligentes, eles analisam a estrutura do código, para que eles não quebrem nada. Eles não são um simples não-inteligente "encontra-e-substitui".

So if `new Function` had access to outer variables, it would be unable to find renamed `userName`.
Portanto, se `new Function` tivesse acesso a variáveis ​​externas, não seria possível encontrar `userName` renomeado.

**If `new Function` had access to outer variables, it would have problems with minifiers.**
**Se a `new Function` tivesse acesso a variáveis ​​externas, haveria problemas com minificadores.**

Besides, such code would be architecturally bad and prone to errors.
Além disso, esse código seria arquitetonicamente ruim e sujeito a erros.

To pass something to a function, created as `new Function`, we should use its arguments.
Para passar algo para uma função, criada como `new Function`, devemos usar seus argumentos.

## Summary
## Resumo

The syntax:
A sintaxe:

```js
let func = new Function ([arg1, arg2, ...argN], functionBody);
```

For historical reasons, arguments can also be given as a comma-separated list.
Por razões históricas, os argumentos também podem ser apresentados como uma lista separada por vírgulas.

These three declarations mean the same:
Estas três declarações significam o mesmo:

```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
new Function('a', 'b', 'return a + b'); // sintaxe básica
new Function('a,b', 'return a + b'); // separados por vírgula
new Function('a , b', 'return a + b'); // separados por vírgula com espaços
```

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.
Funções criadas com `new Function` têm `[[Environment]]` referenciando o ambiente lexical global, não o externo. Portanto, eles não podem usar variáveis ​​externas. Mas isso é realmente bom, porque nos protege contra erros. Passar parâmetros explicitamente é um método muito melhor do ponto de vista arquitetônico e não causa problemas com minificadores.

0 comments on commit d936142

Please sign in to comment.