From 74c380655b278713711accb996e6ff0bd59f116d Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Mon, 8 Jun 2020 19:28:36 +0100 Subject: [PATCH 1/7] Update function-expressions article. --- .../16-function-expressions/article.md | 59 +++++++++---------- 1 file changed, 27 insertions(+), 32 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 978a42d6f..b35263576 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -132,9 +132,9 @@ Na prática, tais funções são muito úteis. A maior difereça entre uma `ask` **Os argumentos `showOk` e `showCancel` de `ask` são chamados de *funções de retorno de chamada* (callback functions) ou apenas *callbacks*.** -A ideia é que nós passamos uma função e esperamos que ela seja "chamada" mais tarde se necessário. No nosso caso, `showOk` se torna na função de retorno de chamada (callback) para a resposta "yes", e `showCancel` para a resposta "no". +A ideia é que nós passamos uma função e esperamos que ela seja "chamada" mais tarde se necessário. No nosso caso, `showOk` se torna na função *callback* (função de retorno de chamada) para a resposta "yes", e `showCancel` para a resposta "no". -Podemos utilizar Expressões de Funções para escrever uma versão mais curta da mesma função: +Podemos utilizar Expressões de Funções para escrever essa função numa versão mais curta: ```js run no-beautify function ask(question, yes, no) { @@ -151,58 +151,57 @@ ask( */!* ``` -Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Tais funções não podem ser acedidas fora de `ask` (porque não estão atribuidas a variáveis), mas é apenas o que queremos para aqui. +Aqui, as funções são declaradas precisamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Tais funções não podem ser acedidas fora de `ask` (porque não estão atribuidas a variáveis), mas é apenas o que queremos para este caso. -Código semelhante aparece nos nossos programas (scripts) muito naturalmente, está no espírito de JavaScript. +Tal código aparece muito naturalmente nos nossos programas (*scripts*), ele está no espírito de JavaScript. - -```smart header="A function is a value representing an \"action\"" -Valores comuns como cadeias-de-caráteres (strings) ou números representam os *dados*. +```smart header="Uma função é um valor que representa uma \"ação\"" +Valores comuns como *strings* (cadeias-de-caráteres) ou números representam os *dados*. Uma função pode ser tida como uma *ação*. Podemos passá-la entre variáveis e executá-la quando pretendermos. ``` - ## Expressões de função vs Declarações de função Vamos formular diferenças chave entre Declarações de Função e Expressões. -Primeiro, a sintaxe: como verificar qual é qual no código. +Primeiro, a sintaxe: como as diferenciar no código. -- *Declaração de Função:* uma função, declarada como uma instrução em separado, no fluxo do código principal. +- *Declaração de Função:* uma função, declarada como uma instrução isolada, no fluxo principal do código . ```js - // Declaração de Função - function sum(a, b) { - return a + b; - } + // Declaração de Função + function sum(a, b) { + return a + b; + } ``` + - *Expressão de Função:* uma função, criada dentro de uma expressão ou dentro de outra construção sintática. Aqui, a função é criada no lado direito da "expressão de atribuição" `=`: - + ```js - // Expressão de Função - let sum = function(a, b) { - return a + b; - }; + // Expressão de Função + let sum = function(a, b) { + return a + b; + }; ``` A mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript [JavaScript engine]. -**Uma Expressão de Função é criada quando a execução chega até si, e é utilizável a partir daí.** +**Uma Expressão de Função é criada quando a execução a alcança, e apenas é utilizável a partir desse momento.** -Ao passar o fluxo de execução para o lado direito da atribuição `let sum = function…` -- aí é que é, a função é criada e pode ser utilizada (atribuida, chamada, etc.) a partir daí. +Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuida, chamada, etc.); daí em diante. Declarações de Função sao diferentes. -**Uma Declaração de Função pode ser chamada antes de ser definida.** +**Uma Declaração de Função pode ser invocada antes de ser definida.** -Por exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver. +Como exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver. -Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura nele por Declarações de Função globais e cria as funções. Podemos pensar nisto como um "estágio de inicialização". +Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura por Declarações de Função globais e cria as funções. Podemos pensar nisto como uma "fase de inicialização". -Após o processamento de todas as Declarações de Função, o código é executado. Desta maneira, é tem acesso a estas funções. +E após o processamento de todas as Declarações de Função, o código é executado. Desta maneira, tem acesso a estas funções. Por exemplo, isto funciona: @@ -216,7 +215,7 @@ function sayHi(name) { } ``` -A Declaração de Função `sayHi` é criada quando JavaScript se prepara para iniciar o script e é visível em todo o lugar nele. +A Declaração de Função `sayHi` é criada quando JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. ...Se fosse uma Expressão de Função, então não funcionaria: @@ -225,12 +224,12 @@ A Declaração de Função `sayHi` é criada quando JavaScript se prepara para i sayHi("John"); // erro! */!* -let sayHi = function(name) { // (*) nenhuma mágica mais +let sayHi = function(name) { // (*) não há mais mágica alert( `Olá, ${name}` ); }; ``` -As Expressões de Função são criadas quando a execução as alcança. O que aconteceria apenas na linha `(*)`. Tarde demais. +As Expressões de Função são criadas quando a execução as alcança. Isso apenas aconteceria apenas na linha `(*)`. Demasiado tarde. Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*). @@ -343,7 +342,6 @@ welcome(); // bem, agora */!* ``` - ```smart header="When should you choose Function Declaration versus Function Expression?" Como uma regra do polegar, quando precisarmos de declarar uma função, o primeiro a considerar é uma sintaxe de Declaração de Função, como utilizámos acima. Ela providencia mais liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. @@ -353,12 +351,10 @@ Também é um pouco mais fácil procurar por `function f(…) {…}` no código ...Mas se por alguma razão uma Declaração de Função não nos for útil, (vimos um exemplo acima), então uma Expressão de Função será a escolha. ``` - ## Arrow functions [#arrow-functions] Existe mais uma sintaxe muito simples e concisa para criar funções, e que frequentemente é melhor do que Expressões de Funções. É chamada de "Arrow functions", porque se assemelha a: - ```js let func = (arg1, arg2, ...argN) => expression ``` @@ -462,7 +458,6 @@ Por ora, podemos já usá-las para ações de única-linha e callbacks. - Declarações de Função são processadas antes de um bloco de código ser executado. Elas são visíveis em qualquer lugar dentro do bloco. - Expressões de função são criadas quando o fluxo de execução as alcança. - Na maior parte dos casos, quando precisarmos de declarar uma função, uma Declaração de Função é preferível, porque é visível antes da própria definição. Isso dá-nos mais flexibilidade para a organização do código, e geralmente é mais legível. Assim, deveríamos empregar uma Expressão de Função apenas quando a Declaração de Função não se adequasse à tarefa. Vimos alguns exemplos disso no capítulo, e veremos mais no futuro. From 57468430c7b44e635e172df22e794f61b16aaa4b Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Mon, 8 Jun 2020 19:29:37 +0100 Subject: [PATCH 2/7] Update function-expressions --- .../16-function-expressions/article.md | 136 +++--------------- 1 file changed, 16 insertions(+), 120 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index b35263576..d96f18e76 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,6 +1,6 @@ # Expressões de função -Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas um valor de um tipo especial. +Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas um valor de tipo especial. A sintaxe que usámos antes é chamada de *Declaração de Função* (*Function Declaration*): @@ -38,11 +38,11 @@ Podemos até exibir esse valor usando `alert`: Por favor, note que a última linha não executa a função, porque não existem parênteses depois de `sayHi`. Existem linguagens de programação onde qualquer menção ao nome de uma função provoca a sua execução, mas em JavaScript não é assim. -Em JavaScript, uma função é um valor, então podemos lidar com ela como com um valor. O código acima mostra a sua definição em formato de texto (*string*), isto é o código fonte. +Em JavaScript, uma função é um valor, então podemos lidar com ela como com um valor. O código acima mostra a sua definição em formato de texto (*string*), isto é, o código fonte. Óbviamente, uma função é um valor especial, porque podemos invocá-lo usando `sayHi()`. -Mas ainda assim é um valor. Então, podemos manuseá-lo como com outros tipos de valores. +Mas ainda assim é um valor. Então, podemos manuseá-lo como acontece com outros tipos de valores. Podemos copiar uma função para outra variável: @@ -128,11 +128,11 @@ function showCancel() { ask("Você concorda?", showOk, showCancel); ``` -Na prática, tais funções são muito úteis. A maior difereça entre uma `ask` num programa real [real-life] e o exemplo acima, é que funções num programa real usam formas mais complexas de interagir com o utilizador do que um simples `confirm`. No navegador (*browser*), geralmente tal função desenha uma bonita janela com a questão. Mas isso é outra história. +Na prática, tais funções são muito úteis. A maior difereça entre uma `ask` num programa real [real-life] e o exemplo acima, é que funções num programa real usam formas mais complexas de interação com o utilizador, do que um simples `confirm`. No navegador (*browser*), geralmente tal função desenha uma bonita janela com a questão. Mas isso é outra história. **Os argumentos `showOk` e `showCancel` de `ask` são chamados de *funções de retorno de chamada* (callback functions) ou apenas *callbacks*.** -A ideia é que nós passamos uma função e esperamos que ela seja "chamada" mais tarde se necessário. No nosso caso, `showOk` se torna na função *callback* (função de retorno de chamada) para a resposta "yes", e `showCancel` para a resposta "no". +A ideia é que nós passamos uma função e esperamos que ela seja "chamada" mais tarde se necessário. No nosso caso, `showOk` se torna na função *callback* para a resposta "yes", e `showCancel` para a resposta "no". Podemos utilizar Expressões de Funções para escrever essa função numa versão mais curta: @@ -153,7 +153,7 @@ ask( Aqui, as funções são declaradas precisamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Tais funções não podem ser acedidas fora de `ask` (porque não estão atribuidas a variáveis), mas é apenas o que queremos para este caso. -Tal código aparece muito naturalmente nos nossos programas (*scripts*), ele está no espírito de JavaScript. +Tal código aparece muito naturalmente nos nossos programas (*scripts*); ele está no espírito de JavaScript. ```smart header="Uma função é um valor que representa uma \"ação\"" Valores comuns como *strings* (cadeias-de-caráteres) ou números representam os *dados*. @@ -191,17 +191,17 @@ A mais subtil diferença é *quando* uma função é criada pelo interpretador d **Uma Expressão de Função é criada quando a execução a alcança, e apenas é utilizável a partir desse momento.** -Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuida, chamada, etc.); daí em diante. +Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuida, chamada, etc.) daí em diante. -Declarações de Função sao diferentes. +Declarações de Função são diferentes. **Uma Declaração de Função pode ser invocada antes de ser definida.** -Como exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver. +Como outro exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver. Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura por Declarações de Função globais e cria as funções. Podemos pensar nisto como uma "fase de inicialização". -E após o processamento de todas as Declarações de Função, o código é executado. Desta maneira, tem acesso a estas funções. +E após o processamento de todas as Declarações de Função, o código é executado. Assim, tem acesso a estas funções. Por exemplo, isto funciona: @@ -233,9 +233,9 @@ As Expressões de Função são criadas quando a execução as alcança. Isso ap Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*). -**Quando uma Declaração de Função é feita dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** +**No modo estrito (*strict mode*), quando uma Declaração de Função está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** -Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos durante o tempo de execução (runtime). E que planejamos utilizá-la algures mais tarde. +Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento de execução (runtime) do programa. E que planejamos utilizá-la algures mais tarde. Se empregarmos uma Declaração de Função, isto não funciona como pretendido: @@ -342,112 +342,13 @@ welcome(); // bem, agora */!* ``` -```smart header="When should you choose Function Declaration versus Function Expression?" -Como uma regra do polegar, quando precisarmos de declarar uma função, o primeiro a considerar é uma sintaxe de Declaração de Função, como utilizámos acima. Ela providencia mais liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. +```smart header="Quando escolher uma Function Declaration versus uma Expressão de Função?" +Como uma regra do polegar, quando precisarmos de declarar uma função, a primeira a considerar é uma sintaxe de Declaração de Função. Ela dá uma mior liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. -Também é um pouco mais fácil procurar por `function f(…) {…}` no código do que `let f = function(…) {…}`. Declarações de Função "sobressaem" mais à vista. +Também é melhor para legibilidade, porque é mais fácil procurar por `function f(…) {…}` no código do que por `let f = function(…) {…};`. Declarações de Função "sobressaem" mais à vista. -...Mas se por alguma razão uma Declaração de Função não nos for útil, (vimos um exemplo acima), então uma Expressão de Função será a escolha. -``` - -## Arrow functions [#arrow-functions] - -Existe mais uma sintaxe muito simples e concisa para criar funções, e que frequentemente é melhor do que Expressões de Funções. É chamada de "Arrow functions", porque se assemelha a: - -```js -let func = (arg1, arg2, ...argN) => expression -``` - -...Isto cria a função `func` com os argumentos `arg1..argN`, evalua a `expression` no lado direito utilizando os mesmos e retorna o seu resultado. - -Por outras palavras, é aproximadamente o mesmo que: - -```js -let func = function(arg1, arg2, ...argN) { - return expression; -}; -``` - -...Mas muito mais concisa. - -Vejamos um exemplo: - -```js run -let sum = (a, b) => a + b; - -/* A função seta é uma forma mais curta de: - -let sum = function(a, b) { - return a + b; -}; -*/ - -alert( sum(1, 2) ); // 3 - -``` - -Se tivermos apenas um argumento, então os parênteses podem ser omitidos, tornando-a ainda mais curta: - -```js run -// o mesmo que -// let double = function(n) { return n * 2 } -*!* -let double = n => n * 2; -*/!* - -alert( double(3) ); // 6 -``` - -Se não houver argumentos, devem existir parênteses vazios (mas devem estar presentes): - -```js run -let sayHi = () => alert("Olá!"); - -sayHi(); -``` - -Arrow functions podem ser empregues da mesma forma que Expressões de Função. - -A exemplo, aqui re-escrito está o código com `welcome()`: - -```js run -let age = prompt("Que idade tem?", 18); - -let welcome = (age < 18) ? - () => alert('Olá') : - () => alert("Saudações!"); - -welcome(); // bem, agora -``` - -Arrow functions podem parecer não familiares e não muito legíveis a princípio, mas isso rápidamente muda à medida que os olhos habituam-se à estrutura. - -Elas são muito convenientes para simples ações numa única-linha, quando estamos preguiçosos demais para escrever muitas palavras. - -```smart header="Multiline arrow functions" - -Os exemplos acima tomaram argumentos à esqerda de `=>` e evaluaram a expressão à direita com eles. - -Por vezes, precisamos de algo um pouco mais complexo, como múltiplas expressões e instruções. Também é possível, mas deveríamos envolvê-las em chavetas. Aí, usamos um `return` normal com elas. - -Desta forma: - -```js run -let sum = (a, b) => { // a chaveta abre uma função multi-linha - let result = a + b; -*!* - return result; // ao utilizarmos chavetas, usamos `return` para obter o resultado -*/!* -}; - -alert( sum(1, 2) ); // 3 -``` - -```smart header="More to come" -Aqui enaltecemos Arrow functions pela brevidade. Mas não é tudo! Arrow functions têm outras particulariedades interessantes. Voltaremos a elas mais adiante no capitulo . - -Por ora, podemos já usá-las para ações de única-linha e callbacks. +...Mas se por alguma razão uma Declaração de Função não nos for útil, ou precisarmos de uma declaração condicional (vimos um exemplo acima), então uma Expressão de Função será a escolha. ``` ## Sumário @@ -461,8 +362,3 @@ Por ora, podemos já usá-las para ações de única-linha e callbacks. Na maior parte dos casos, quando precisarmos de declarar uma função, uma Declaração de Função é preferível, porque é visível antes da própria definição. Isso dá-nos mais flexibilidade para a organização do código, e geralmente é mais legível. Assim, deveríamos empregar uma Expressão de Função apenas quando a Declaração de Função não se adequasse à tarefa. Vimos alguns exemplos disso no capítulo, e veremos mais no futuro. - -Arrow functions são apropriadas para ações única-linha. Elas vêm em dois sabores: - -1. Sem chavetas: `(...args) => expression` -- o lado direito é uma expressão: a função a evalua e retorna o resultado. -2. Com chavetas: `(...args) => { body }` -- chavetas permitem-nos escrever múltiplas instruções dentro da função, mas precisamos de um explícito `return` para retornar alguma coisa. From f56e3578a44f52d14267ca06bfc6f1959221b11c Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Thu, 10 Dec 2020 23:14:48 +0100 Subject: [PATCH 3/7] Update "Function-expressions" translation. --- .../16-function-expressions/article.md | 156 +++++++++--------- 1 file changed, 80 insertions(+), 76 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index d96f18e76..e4c3822b4 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,8 +1,8 @@ -# Expressões de função +# Function Expressions -Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas um valor de tipo especial. +Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas uma espécie de valor especial. -A sintaxe que usámos antes é chamada de *Declaração de Função* (*Function Declaration*): +A sintaxe que empregámos antes é chamada de *Function Declaration* (Declaração de Função): ```js function sayHi() { @@ -10,9 +10,9 @@ A sintaxe que usámos antes é chamada de *Declaração de Função* (*Function } ``` -Existe outra sintaxe para criar uma função que é chamada de *Expressão de Função* (*Function Expression*). +Existe outra sintaxe para criar uma função que é chamada de *Function Expression* (Expressão de Função). -É similar a: +Ela se parece com: ```js let sayHi = function() { @@ -20,11 +20,11 @@ Existe outra sintaxe para criar uma função que é chamada de *Expressão de Fu }; ``` -Aqui, a função é criada e atribuida explícitamente à variável, como qualquer outro valor. Não importa como a função é definida, é apenas um valor armazenado na variável `sayHi`. +Aqui, a função é criada e atribuída explícitamente à variável, como qualquer outro valor. Não importa como a função é definida, é apenas um valor armazenado na variável `sayHi`. O significado destas amostras de código é o mesmo: "crie uma função e a coloque na variável `sayHi`". -Podemos até exibir esse valor usando `alert`: +Nós podemos até exibir esse valor usando `alert`: ```js run function sayHi() { @@ -36,15 +36,15 @@ Podemos até exibir esse valor usando `alert`: */!* ``` -Por favor, note que a última linha não executa a função, porque não existem parênteses depois de `sayHi`. Existem linguagens de programação onde qualquer menção ao nome de uma função provoca a sua execução, mas em JavaScript não é assim. +Por favor, note que a última linha não executa a função, porque não existem parênteses depois de `sayHi`. Existem linguagens de programação onde qualquer menção ao nome de uma função provoca a sua execução, mas não é assim em JavaScript. -Em JavaScript, uma função é um valor, então podemos lidar com ela como com um valor. O código acima mostra a sua definição em formato de texto (*string*), isto é, o código fonte. +Em JavaScript, uma função é um valor, então podemos lidar com ela como com um valor. O código acima mostra a sua representação em formato *string*, isto é, o seu código fonte. -Óbviamente, uma função é um valor especial, porque podemos invocá-lo usando `sayHi()`. +É claro que uma função é um valor especial, porque o podemos invocar usando `sayHi()`. -Mas ainda assim é um valor. Então, podemos manuseá-lo como acontece com outros tipos de valores. +Mas ainda assim é um valor. Então, o podemos manusear como acontece com outros tipos de valores. -Podemos copiar uma função para outra variável: +Nós podemos copiar uma função para outra variável: ```js run no-beautify function sayHi() { // (1) crie @@ -60,10 +60,10 @@ Podemos copiar uma função para outra variável: Aqui está o que acima acontece, em detalhe: 1. A Declaração de Função `(1)` cria uma função e a coloca na variável chamada `sayHi`. -2. Na linha em `(2)` é copiada para a variável `func`. Por favor, note outra vez: não existem parênteses depois de `sayHi`. Se os houvessem, então `func = sayHi()` escreveria *o resultado da chamada* `sayHi()` em `func`, não a própria *função* `sayHi`. -3. Agora, a função pode ser invocada tanto como `sayHi()` como `func()`. +2. Na linha em `(2)` é copiada para a variável `func`. Por favor, note outra vez: não existem parênteses depois de `sayHi`. Se os houvessem, então `func = sayHi()` iria escrever *o resultado da chamada* `sayHi()` em `func`, não a própria *função* `sayHi`. +3. Agora, a função pode ser invocada tanto como `sayHi()` como igualmente `func()`. -Note que também poderíamos ter utilizado uma Expressão de Função para declarar `sayHi`, na primeira linha: +Note, que também poderíamos ter utilizado uma Expressão de Função para declarar `sayHi` na primeira linha: ```js let sayHi = function() { @@ -74,10 +74,11 @@ Note que também poderíamos ter utilizado uma Expressão de Função para decla // ... ``` -Tudo funcionaria do mesmo modo. +Tudo iria funcionar do mesmo modo. + ````smart header="Porque há um ponto-e-vírgula no final?" -Poderá perguntar-se, porque terá uma Expressão de Função um ponto-e-vírgula `;` no final, mas a Declaração de Função não: +Poderá se perguntar, porque terá uma Function Expression um ponto-e-vírgula `;` no final, mas a Function Declaration não: ```js function sayHi() { @@ -90,23 +91,26 @@ Poderá perguntar-se, porque terá uma Expressão de Função um ponto-e-vírgul ``` A resposta é simples: -- Não há necessidade para um `;` no fim de blocos de código e estruturas sintáticas que os usem como `if { ... }`, `for { }`, `function f { }` etc. -- Uma Expressão de Função é usada dentro de uma instrução: `let sayHi = ...;`, tal como o é um valor. Não é um bloco de código, mas sim uma atribuição. O ponto-e-vírgula `;` é recomendado no final de instruções, independentemente do seu valor. Assim, o ponto-e-vírgula aqui não está relacionado à Função de Expressão em si, mas simplesmente termina a instrução. +- Não há necessidade para um `;` no fim de blocos de código e estruturas sintáticas que usem tais blocos como `if { ... }`, `for { }`, `function f { }` etc. +- Uma Function Expression é utilizada dentro de uma instrução: `let sayHi = ...;`, a exemplo de um outro valor. Não se trata de um bloco de código, mas duma atribuição. O ponto-e-vírgula `;` é recomendado no final de instruções, independentemente de seu valores. Assim, o ponto-e-vírgula aqui não está relacionado à Function Expression em si, mas simplesmente termina a instrução. ```` ## Funções callback -Vejamos mais exemplos de passagem de funções como valores e de uso de expressões de função. +Vejamos mais exemplos de passagem de funções como valores e do uso de Function Expressions. -Escreveremos uma função `ask(question, yes, no)` com três parametros: +Vamos escrever uma função `ask(question, yes, no)` com três parâmetros: -`question`: Texto da questão +`question` +: Texto da questão -`yes`: Função a executar se a resposta for "Sim" +`yes` +: Função a executar se a resposta for "Sim" -`no`: Função a executar se a resposta for "Não" +`no` +: Função a executar se a resposta for "Não" -A função deverá efetuar a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`: +A função deverá perguntar a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`: ```js run *!* @@ -124,17 +128,17 @@ function showCancel() { alert( "Você cancelou a execução." ); } -// uso: as funções showOk, showCancel são passadas como argumentos a ask +// uso: as funções showOk, showCancel são passadas como argumentos a 'ask' ask("Você concorda?", showOk, showCancel); ``` -Na prática, tais funções são muito úteis. A maior difereça entre uma `ask` num programa real [real-life] e o exemplo acima, é que funções num programa real usam formas mais complexas de interação com o utilizador, do que um simples `confirm`. No navegador (*browser*), geralmente tal função desenha uma bonita janela com a questão. Mas isso é outra história. +Na prática, tais funções são muito úteis. A maior diferença entre `ask` num programa real e no exemplo acima, é que funções num programa real usam formas de interação com o utilizador mais complexas do que um simples `confirm`. No navegador (*browser*), geralmente uma dessas funções desenha uma bonita janela com a questão. Mas isso é outra história. -**Os argumentos `showOk` e `showCancel` de `ask` são chamados de *funções de retorno de chamada* (callback functions) ou apenas *callbacks*.** +**Os argumentos `showOk` e `showCancel` de `ask` são chamados de *callback functions* (funções de retorno de chamada) ou simplesmente *callbacks*.** -A ideia é que nós passamos uma função e esperamos que ela seja "chamada" mais tarde se necessário. No nosso caso, `showOk` se torna na função *callback* para a resposta "yes", e `showCancel` para a resposta "no". +A ideia é que nós passamos uma função e esperamos que ela seja "chamada mais tarde" se necessário. No nosso caso, `showOk` se torna na função *callback* para a resposta "yes", e `showCancel` para a resposta "no". -Podemos utilizar Expressões de Funções para escrever essa função numa versão mais curta: +Podemos utilizar Function Expressions para escrever essa função numa versão mais curta: ```js run no-beautify function ask(question, yes, no) { @@ -151,57 +155,57 @@ ask( */!* ``` -Aqui, as funções são declaradas precisamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Tais funções não podem ser acedidas fora de `ask` (porque não estão atribuidas a variáveis), mas é apenas o que queremos para este caso. +Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos aqui neste caso. -Tal código aparece muito naturalmente nos nossos programas (*scripts*); ele está no espírito de JavaScript. +Tal código ocorre muito naturalmente nos nossos programas (*scripts*); ele está no espírito do JavaScript. ```smart header="Uma função é um valor que representa uma \"ação\"" -Valores comuns como *strings* (cadeias-de-caráteres) ou números representam os *dados*. +Valores comuns como strings ou números representam os *dados*. Uma função pode ser tida como uma *ação*. -Podemos passá-la entre variáveis e executá-la quando pretendermos. +Podemos passá-la entre variáveis e a executar quando pretendemos. ``` -## Expressões de função vs Declarações de função -Vamos formular diferenças chave entre Declarações de Função e Expressões. +## Function Expressions vs Function Declarations + +Vamos formular diferenças chave entre Function Declarations e Function Expressions. -Primeiro, a sintaxe: como as diferenciar no código. +Primeiro, a sintaxe: como ver a diferença no código. -- *Declaração de Função:* uma função, declarada como uma instrução isolada, no fluxo principal do código . +- *Function Declaration:* uma função, declarada como uma instrução em separado, no fluxo principal do código. ```js - // Declaração de Função + // Function Declaration function sum(a, b) { return a + b; } ``` - -- *Expressão de Função:* uma função, criada dentro de uma expressão ou dentro de outra construção sintática. Aqui, a função é criada no lado direito da "expressão de atribuição" `=`: +- *Function Expression:* uma função, criada dentro de uma expressão ou dentro de outra construção sintática. Aqui, a função é criada no lado direito da "expressão de atribuição" `=`: ```js - // Expressão de Função + // Function Expression let sum = function(a, b) { return a + b; }; ``` -A mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript [JavaScript engine]. +A mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript (*JavaScript engine*). -**Uma Expressão de Função é criada quando a execução a alcança, e apenas é utilizável a partir desse momento.** +**Uma Function Expression é criada quando a execução a alcança, e só é utilizável a partir desse momento.** -Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuida, chamada, etc.) daí em diante. +Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuída, chamada, etc.) daí para frente. -Declarações de Função são diferentes. +Function Declarations são diferentes. -**Uma Declaração de Função pode ser invocada antes de ser definida.** +**Uma Function Declaration pode ser invocada antes de ser definida.** -Como outro exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver. +Por exemplo, uma Function Declaration é visível em todo o *script*, não importa onde estiver. -Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura por Declarações de Função globais e cria as funções. Podemos pensar nisto como uma "fase de inicialização". +Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura nele por Function Declarations globais e cria as funções. Nós podemos pensar nisto como uma "fase de inicialização". -E após o processamento de todas as Declarações de Função, o código é executado. Assim, tem acesso a estas funções. +E após o processamento de todas as Function Declarations, o código é executado. Assim, ele tem acesso a essas funções. Por exemplo, isto funciona: @@ -215,9 +219,9 @@ function sayHi(name) { } ``` -A Declaração de Função `sayHi` é criada quando JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. +A Function Declaration `sayHi` é criada quando o JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. -...Se fosse uma Expressão de Função, então não funcionaria: +...Se fosse uma Function Expression, então não iria funcionar: ```js run refresh untrusted *!* @@ -229,15 +233,15 @@ let sayHi = function(name) { // (*) não há mais mágica }; ``` -As Expressões de Função são criadas quando a execução as alcança. Isso apenas aconteceria apenas na linha `(*)`. Demasiado tarde. +As Function Expressions são criadas quando a execução as alcança. Isso só iria acontecer na linha `(*)`. Demasiado tarde. -Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*). +Uma outra funcionalidade especial de Function Declarations é o seu escopo de bloco (*block scope*). -**No modo estrito (*strict mode*), quando uma Declaração de Função está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** +**No modo estrito (*strict mode*), quando uma Function Declaration está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** -Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento de execução (runtime) do programa. E que planejamos utilizá-la algures mais tarde. +Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento da execução (runtime) do programa. Depois, planejamos usá-la em algum instante mais tarde. -Se empregarmos uma Declaração de Função, isto não funciona como pretendido: +Se empregamos uma Function Declaration, isto não funciona como pretendido: ```js run let age = prompt("Que idade tem?", 18); @@ -263,12 +267,12 @@ welcome(); // Erro: welcome não está definida */!* ``` -Isto porque uma Declaração de Função apenas é visível dentro do bloco de código onde reside. +Isto porque uma Function Declaration só é visível dentro do bloco de código onde reside. Aqui está outro exemplo: ```js run -let age = 16; // tenha 16 como um exemplo +let age = 16; // tome 16 como um exemplo if (age < 18) { *!* @@ -276,7 +280,7 @@ if (age < 18) { */!* // | function welcome() { // | - alert("Olá!"); // | Declaração de Função está disponível + alert("Olá!"); // | A Function Declaration está disponível } // | em todo o lugar no bloco onde é feita // | *!* @@ -285,22 +289,22 @@ if (age < 18) { } else { - function welcome() { // para age = 16, esta "welcome" nunca é criada + function welcome() { alert("Saudações!"); } } // Aqui estamos fora das chavetas, portanto não é -// possível ver-se uma Declaração de Função feita dentro delas. +// possível ver-se uma Function Declaration feita dentro delas. *!* welcome(); // Erro: welcome não está definida */!* ``` -O que poderemos fazer para tonar `welcome` visível fora do `if`? +O que poderíamos fazer para tonar `welcome` visível fora do `if`? -O correto seria empregar uma Função de Expressão e atribuir `welcome` a uma variável declarada fora do `if` e que tenha uma visibilidade adequada. +O correto seria empregar uma Function Expression e atribuir `welcome` a uma variável declarada fora do `if` e que tenha uma visibilidade adequada. Agora funciona como pretendido: @@ -328,7 +332,7 @@ welcome(); // bem, agora */!* ``` -Ou poderíamos simplificar mais ainda utilizando o operador ponto-de-interrogação `?`: +Ou podemos simplificar mais ainda utilizando o operador ponto-de-interrogação `?`: ```js run let age = prompt("Que idade tem?", 18); @@ -342,23 +346,23 @@ welcome(); // bem, agora */!* ``` -```smart header="Quando escolher uma Function Declaration versus uma Expressão de Função?" -Como uma regra do polegar, quando precisarmos de declarar uma função, a primeira a considerar é uma sintaxe de Declaração de Função. Ela dá uma mior liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. +```smart header="Quando escolher uma Function Declaration versus uma Function Expression?" +Como uma regra do polegar, quando precisarmos de declarar uma função, a primeira a considerar é uma sintaxe de Function Declaration. Ela dá uma maior liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. -Também é melhor para legibilidade, porque é mais fácil procurar por `function f(…) {…}` no código do que por `let f = function(…) {…};`. Declarações de Função "sobressaem" mais à vista. +Também é melhor para a legibilidade, porque é mais fácil procurar por `function f(…) {…}` no código do que por `let f = function(…) {…};`. Function Declarations "sobressaem" mais à vista. -...Mas se por alguma razão uma Declaração de Função não nos for útil, ou precisarmos de uma declaração condicional (vimos um exemplo acima), então uma Expressão de Função será a escolha. +...Mas se por alguma razão uma Function Declaration não nos for útil, ou se precisarmos de uma declaração condicional (vimos um exemplo acima), então uma Function Expression será a escolha. ``` ## Sumário -- Funções são valores. Elas podem ser atribuidas, copiadas ou declaradas em qualquer parte do código. -- Se a função for declarada como uma instrução separada no fluxo do código principal, é chamada de "Declaração de Função". -- Se a função for criada como parte de uma expressão, é chamada de "Expressão de função". -- Declarações de Função são processadas antes de um bloco de código ser executado. Elas são visíveis em qualquer lugar dentro do bloco. -- Expressões de função são criadas quando o fluxo de execução as alcança. +- Funções são valores. Elas podem ser atribuídas, copiadas ou declaradas em qualquer parte do código. +- Se a função for declarada como uma instrução em separado no fluxo principal do código , é chamada de "Function Declaration". +- Se a função for criada como parte de uma expressão, é chamada de "Function Expression". +- Function Declarations são processadas antes de um bloco de código ser executado. Elas são visíveis em qualquer lugar dentro do bloco. +- Function Expressions são criadas quando o fluxo de execução as alcança. -Na maior parte dos casos, quando precisarmos de declarar uma função, uma Declaração de Função é preferível, porque é visível antes da própria definição. Isso dá-nos mais flexibilidade para a organização do código, e geralmente é mais legível. +Na maior parte dos casos, quando precisarmos de declarar uma função, uma Function Declaration é preferível, porque é visível antes da própria definição. Isso nos dá mais flexibilidade para a organização do código, e geralmente é mais legível. -Assim, deveríamos empregar uma Expressão de Função apenas quando a Declaração de Função não se adequasse à tarefa. Vimos alguns exemplos disso no capítulo, e veremos mais no futuro. +Assim, deveríamos empregar uma Function Expression apenas quando a Function Declaration não fosse adequada à tarefa. Vimos alguns exemplos disso no capítulo, e veremos mais no futuro. From 98e3b2121e2c1cbff05fd426f1e75473c18bdb89 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Fri, 28 May 2021 14:21:56 +0100 Subject: [PATCH 4/7] Update translation. --- 1-js/02-first-steps/16-function-expressions/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index e4c3822b4..902925af7 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -2,7 +2,7 @@ Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas uma espécie de valor especial. -A sintaxe que empregámos antes é chamada de *Function Declaration* (Declaração de Função): +A sintaxe que empregámos antes é chamada de Declaração de Função (*Function Declaration*): ```js function sayHi() { @@ -10,7 +10,7 @@ A sintaxe que empregámos antes é chamada de *Function Declaration* (Declaraç } ``` -Existe outra sintaxe para criar uma função que é chamada de *Function Expression* (Expressão de Função). +Existe outra sintaxe para criar uma função que é chamada de Expressão de Função (*Function Expression*). Ela se parece com: @@ -157,7 +157,7 @@ ask( Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos aqui neste caso. -Tal código ocorre muito naturalmente nos nossos programas (*scripts*); ele está no espírito do JavaScript. +Tal código ocorre muito naturalmente nos nossos programas (*scripts*), ele está no espírito do JavaScript. ```smart header="Uma função é um valor que representa uma \"ação\"" Valores comuns como strings ou números representam os *dados*. From 3daf4ae24bcc3d229066af048526af19888fd49d Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Tue, 17 Jan 2023 22:20:30 +0100 Subject: [PATCH 5/7] Update "Function expressions" (1) --- .../16-function-expressions/article.md | 44 +++++++++---------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 0d72075d5..113fc4051 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -22,15 +22,15 @@ Por exemplo: }; ``` -Aqui, vemos um valor atribuido à variavel `sayHi`, a nova função, criada como `function() { alert("Hello"); }`. +Aqui, vemos um valor atribuído à variável `sayHi`, que é a função criada como `function() { alert("Hello"); }`. Como a criação da função é feita no contexto de uma expressão de atribuição (no lado direito de `=`), isto é uma *Expressão de Função* (Function Expression). Por favor, note que não há nenhum nome depois da palavra-chave `function`. A omissão do nome é permitida para Expressões de Funções. -Aqui, nós imediatamente a atribuimos à variável, assim o significado destas amostras de código é o mesmo que: "crie uma função e a coloque na variável `sayHi`". +Aqui, nós imediatamente atribuímos a função à variável, assim o significado destas amostras de código é o mesmo que: "crie uma função e a coloque na variável `sayHi`". -Em situaões mais avançadas, que nós veremos mais adiante, uma função pode ser criada e imediatemente invocada ou agendada para uma execução mais tarde, mas não guardada en nenhum lugar, assim permanecendo anónima. +Em situações mais avançadas, que nós veremos mais adiante, uma função pode ser criada e imediatamente invocada ou agendada para uma execução mais tarde, mas não guardada en nenhum lugar, assim permanecendo anónima. ## Uma função é um valor @@ -72,8 +72,8 @@ Nós podemos copiar uma função para outra variável: Aqui está o que acima acontece, em detalhe: 1. A Declaração de Função `(1)` cria uma função e a coloca na variável chamada `sayHi`. -2. Na linha em `(2)` é copiada para a variável `func`. Por favor, note outra vez: não existem parênteses depois de `sayHi`. Se os houvessem, então `func = sayHi()` iria escrever *o resultado da chamada* `sayHi()` em `func`, não a própria *função* `sayHi`. -3. Agora, a função pode ser invocada tanto como `sayHi()` como igualmente `func()`. +2. Na linha em `(2)` é copiada para a variável `func`. Por favor, note outra vez: não existem parênteses depois de `sayHi`. Se houvesse, então `func = sayHi()` iria escrever *o resultado da chamada* `sayHi()` em `func`, não a própria *função* `sayHi`. +3. Agora, a função pode ser invocada tanto como `sayHi()` como também `func()`. Também poderíamos ter usado uma Expressão de Função para declarar `sayHi` na primeira linha: @@ -89,8 +89,8 @@ Também poderíamos ter usado uma Expressão de Função para declarar `sayHi` n Tudo iria funcionar do mesmo modo. -````smart header="Porque há um ponto-e-vírgula no final?" -Poderá se perguntar, porque terá uma Function Expression um ponto-e-vírgula `;` no final, mas a Function Declaration não: +````smart header="Porque há um ponto e vírgula no final?" +Poderá se perguntar, porque terá uma Expressão de Função um ponto e vírgula `;` no final, mas a Declaração de Função não: ```js function sayHi() { @@ -102,14 +102,14 @@ Poderá se perguntar, porque terá uma Function Expression um ponto-e-vírgula ` }*!*;*/!* ``` -A resposta é simples: uma Expressão de Função é criada aqui, dentro da instrução de atribuição `let sayHi = …;`, como `function(…) {…}`. O ponto e vírgula `;`, é recomendado no final de uma instrução, assim não faz parte da sintaxe da função. +A resposta é simples: uma Expressão de Função é criada aqui, como `function(…) {…}`, dentro da instrução de atribuição `let sayHi = …;`. O ponto e vírgula `;`, é recomendado no final de qualquer instrução, assim não faz parte da sintaxe da função. O ponto e vírgula estaria lá numa atribuição mais simples, como por exemplo `let sayHi = 5;`, então também lá está numa atribuição de função. ```` ## Funções callback -Vejamos mais exemplos de passagem de funções como valores e do uso de Function Expressions. +Vejamos mais exemplos de passagem de funções como valores e do uso de Expressões de Função. Vamos escrever uma função `ask(question, yes, no)` com três parâmetros: @@ -150,7 +150,7 @@ Na prática, tais funções são muito úteis. A maior diferença entre `ask` nu A ideia é que nós passamos uma função e esperamos que ela seja "chamada mais tarde" se necessário. No nosso caso, `showOk` se torna na função *callback* para a resposta "yes", e `showCancel` para a resposta "no". -Podemos utilizar Function Expressions para escrever essa função numa versão mais curta: +Podemos utilizar Expressões de Função para escrever essa função numa versão mais curta: ```js run no-beautify function ask(question, yes, no) { @@ -167,26 +167,26 @@ ask( */!* ``` -Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos aqui neste caso. +Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos aqui neste exemplo. Tal código ocorre muito naturalmente nos nossos programas (*scripts*), ele está no espírito do JavaScript. ```smart header="Uma função é um valor que representa uma \"ação\"" Valores comuns como strings ou números representam os *dados*. -Uma função pode ser tida como uma *ação*. +Uma função pode ser vista como uma *ação*. -Podemos passá-la entre variáveis e a executar quando pretendemos. +Podemos passá-la entre variáveis e executá-la quando pretendemos. ``` -## Function Expressions vs Function Declarations +## Expressões de Função vs Declarações de Função -Vamos formular diferenças chave entre Function Declarations e Function Expressions. +Vamos formular diferenças chave entre Declarações de Função e Expressões de Função. -Primeiro, a sintaxe: como ver a diferença no código. +Primeiro, a sintaxe: como as diferenciar no código. -- *Function Declaration:* uma função, declarada como uma instrução em separado, no fluxo principal do código. +- *Declaração de Função:* uma função, declarada como uma instrução em separado, no fluxo principal do código. ```js // Function Declaration @@ -194,7 +194,7 @@ Primeiro, a sintaxe: como ver a diferença no código. return a + b; } ``` -- *Function Expression:* uma função, criada dentro de uma expressão ou dentro de outra construção sintática. Aqui, a função é criada no lado direito da "expressão de atribuição" `=`: +- *Expressão de Função:* uma função, criada dentro de uma expressão ou dentro de outra construção sintática. Aqui, a função é criada no lado direito da "expressão de atribuição" `=`: ```js // Function Expression @@ -203,15 +203,15 @@ Primeiro, a sintaxe: como ver a diferença no código. }; ``` -A mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript (*JavaScript engine*). +Contudo, a mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript (*JavaScript engine*). -**Uma Function Expression é criada quando a execução a alcança, e só é utilizável a partir desse momento.** +**Uma Expressão de Função é criada quando a execução a alcança, e só é utilizável a partir desse momento.** Quando o fluxo de execução passa para o lado direito da atribuição `let sum = function…` -- aí sim, a função é criada e pode ser utilizada (atribuída, chamada, etc.) daí para frente. -Function Declarations são diferentes. +Declarações de Função são diferentes. -**Uma Function Declaration pode ser invocada antes de ser definida.** +**Uma Declaração de Função pode ser invocada antes de ser definida.** Por exemplo, uma Function Declaration é visível em todo o *script*, não importa onde estiver. From 0ed40921084debb9e77f62aa6be1bf422b1b95b3 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Wed, 18 Jan 2023 22:09:49 +0100 Subject: [PATCH 6/7] Update "Function Expressions" (2) --- .../16-function-expressions/article.md | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 113fc4051..3679410d8 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -1,6 +1,6 @@ # Function Expressions -Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas uma espécie de valor especial. +Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas sim uma espécie de valor especial. A sintaxe que empregámos antes é chamada de Declaração de Função (*Function Declaration*): @@ -22,15 +22,15 @@ Por exemplo: }; ``` -Aqui, vemos um valor atribuído à variável `sayHi`, que é a função criada como `function() { alert("Hello"); }`. +Aqui, vemos um valor atribuído à variável `sayHi`, que se trata da função criada como `function() { alert("Hello"); }`. Como a criação da função é feita no contexto de uma expressão de atribuição (no lado direito de `=`), isto é uma *Expressão de Função* (Function Expression). -Por favor, note que não há nenhum nome depois da palavra-chave `function`. A omissão do nome é permitida para Expressões de Funções. +Por favor, note que não há nenhum nome depois da palavra-chave `function`. A omissão do nome é permitida em Expressões de Funções. Aqui, nós imediatamente atribuímos a função à variável, assim o significado destas amostras de código é o mesmo que: "crie uma função e a coloque na variável `sayHi`". -Em situações mais avançadas, que nós veremos mais adiante, uma função pode ser criada e imediatamente invocada ou agendada para uma execução mais tarde, mas não guardada en nenhum lugar, assim permanecendo anónima. +Em situações mais avançadas, que veremos mais adiante, uma função pode ser criada e imediatamente executada ou agendada para execução mais tarde, sem contudo ser guardada em nenhum lugar, permanecendo assim anónima. ## Uma função é um valor @@ -54,7 +54,7 @@ Em JavaScript, uma função é um valor, então podemos lidar com ela como com u É claro que uma função é um valor especial, porque o podemos invocar usando `sayHi()`. -Mas ainda assim é um valor. Então, o podemos manusear como acontece com outros tipos de valores. +Mas, ainda se trata de um valor. Então, o podemos manusear como acontece com outros tipos de valores. Nós podemos copiar uma função para outra variável: @@ -122,7 +122,7 @@ Vamos escrever uma função `ask(question, yes, no)` com três parâmetros: `no` : Função a executar se a resposta for "Não" -A função deverá perguntar a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`: +A função deverá fazer a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`: ```js run *!* @@ -167,7 +167,7 @@ ask( */!* ``` -Aqui, as funções são declaradas justamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos aqui neste exemplo. +Aqui, as funções são declaradas precisamente dentro da chamada a `ask(...)`. Elas não têm nome, e por isso são chamadas de *anónimas*. Não é possível o acesso a tais funções fora de `ask` (porque elas não estão atribuídas a variáveis), mas é só o que queremos neste exemplo. Tal código ocorre muito naturalmente nos nossos programas (*scripts*), ele está no espírito do JavaScript. @@ -176,7 +176,7 @@ Valores comuns como strings ou números representam os *dados*. Uma função pode ser vista como uma *ação*. -Podemos passá-la entre variáveis e executá-la quando pretendemos. +Podemos passá-la de variável para variável, e executá-la quando pretendermos. ``` @@ -213,11 +213,11 @@ Declarações de Função são diferentes. **Uma Declaração de Função pode ser invocada antes de ser definida.** -Por exemplo, uma Function Declaration é visível em todo o *script*, não importa onde estiver. +Por exemplo, uma Declaração de Função é visível em todo o *script*, não importa onde estiver. -Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura nele por Function Declarations globais e cria as funções. Nós podemos pensar nisto como uma "fase de inicialização". +Isto se deve a algoritmos internos. Quando o JavaScript se prepara para correr o programa, ele primeiro procura nele por Declarações de Função globais e cria as funções. Nós podemos pensar nisto como uma "fase de inicialização". -E após o processamento de todas as Function Declarations, o código é executado. Assim, ele tem acesso a essas funções. +E após o processamento de todas as Declarações de Função, o código é executado. Assim, ele tem acesso a essas funções. Por exemplo, isto funciona: @@ -231,9 +231,9 @@ function sayHi(name) { } ``` -A Function Declaration `sayHi` é criada quando o JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. +A Declaração de Função `sayHi` é criada quando o JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. -...Se fosse uma Function Expression, então não iria funcionar: +...Se fosse uma Expressão de Função, então não iria funcionar: ```js run refresh untrusted *!* @@ -245,18 +245,18 @@ let sayHi = function(name) { // (*) não há mais mágica }; ``` -As Function Expressions são criadas quando a execução as alcança. Isso só iria acontecer na linha `(*)`. Demasiado tarde. +As Expressões de Função são criadas quando a execução as alcança. Isso só iria acontecer na linha `(*)`. Demasiado tarde. -Uma outra funcionalidade especial de Function Declarations é o seu escopo de bloco (*block scope*). +Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*). -**No modo estrito (*strict mode*), quando uma Function Declaration está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** +**No modo estrito (*strict mode*), quando uma Declarações de Função está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** -Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento da execução (runtime) do programa. Depois, planejamos usá-la em algum instante mais tarde. +Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento da execução (runtime) do programa. E que depois planejamos usá-la mais tarde. -Se empregamos uma Function Declaration, isto não funciona como pretendido: +Se empregarmos uma Declaração de Função, isto não funciona como pretendido: ```js run -let age = prompt("Que idade tem?", 18); +let age = prompt("Que idade você tem?", 18); // condicionalmente declare uma função if (age < 18) { @@ -279,12 +279,12 @@ welcome(); // Erro: welcome não está definida */!* ``` -Isto porque uma Function Declaration só é visível dentro do bloco de código onde reside. +Isto porque uma Declaração de Função só é visível dentro do bloco de código onde reside. Aqui está outro exemplo: ```js run -let age = 16; // tome 16 como um exemplo +let age = 16; // escolha 16 como um exemplo if (age < 18) { *!* @@ -292,8 +292,8 @@ if (age < 18) { */!* // | function welcome() { // | - alert("Olá!"); // | A Function Declaration está disponível - } // | em todo o lugar no bloco onde é feita + alert("Olá!"); // | A Declaração de Função está disponível + } // | em todo o lugar no bloco onde é criada // | *!* welcome(); // / (executa) @@ -307,21 +307,21 @@ if (age < 18) { } // Aqui estamos fora das chavetas, portanto não é -// possível ver-se uma Function Declaration feita dentro delas. +// possível ver Declarações de Função criadas dentro delas. *!* welcome(); // Erro: welcome não está definida */!* ``` -O que poderíamos fazer para tonar `welcome` visível fora do `if`? +O que poderíamos fazer para tornar `welcome` visível fora do `if`? -O correto seria empregar uma Function Expression e atribuir `welcome` a uma variável declarada fora do `if` e que tenha uma visibilidade adequada. +O correto seria empregar uma Expressão de Função, e atribuir `welcome` a uma variável declarada fora do `if` e que tenha uma visibilidade adequada. Agora funciona como pretendido: ```js run -let age = prompt("Que idade tem?", 18); +let age = prompt("Que idade você tem?", 18); let welcome; @@ -347,7 +347,7 @@ welcome(); // bem, agora Ou podemos simplificar mais ainda utilizando o operador ponto-de-interrogação `?`: ```js run -let age = prompt("Que idade tem?", 18); +let age = prompt("Que idade você tem?", 18); let welcome = (age < 18) ? function() { alert("Olá!"); } : @@ -359,22 +359,22 @@ welcome(); // bem, agora ``` -```smart header="Quando escolher uma Function Declaration versus uma Function Expression?" -Como uma regra do polegar, quando precisarmos de declarar uma função, a primeira a considerar é uma sintaxe de Function Declaration. Ela dá uma maior liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. +```smart header="Quando escolher uma Declaração de Função versus uma Expressão de Função?" +Como regra do polegar, ao precisarmos de declarar uma função, a primeira a considerar é uma sintaxe de Declaração de Função. Ela dá uma maior liberdade para organizar o código, porque podemos chamar tais funções antes de serem declaradas. -Também é melhor para a legibilidade, porque é mais fácil procurar por `function f(…) {…}` no código do que por `let f = function(…) {…};`. Function Declarations "sobressaem" mais à vista. +Também é melhor para a legibilidade, porque é mais fácil procurar por `function f(…) {…}` no código do que por `let f = function(…) {…};`. Declarações de Função "sobressaem" mais à vista. -...Mas se por alguma razão uma Function Declaration não nos for útil, ou se precisarmos de uma declaração condicional (vimos um exemplo acima), então uma Function Expression será a escolha. +...Mas se por alguma razão uma Declaração de Função não nos for útil, ou se precisarmos de uma declaração condicional (vimos um exemplo acima), então uma Expressão de Função será a escolha. ``` -## Sumário +## Resumo - Funções são valores. Elas podem ser atribuídas, copiadas ou declaradas em qualquer parte do código. -- Se a função for declarada como uma instrução em separado no fluxo principal do código , é chamada de "Function Declaration". +- Se a função for declarada como uma instrução em separado no fluxo principal do código, é chamada de "Function Declaration". - Se a função for criada como parte de uma expressão, é chamada de "Function Expression". - Function Declarations são processadas antes de um bloco de código ser executado. Elas são visíveis em qualquer lugar dentro do bloco. - Function Expressions são criadas quando o fluxo de execução as alcança. -Na maior parte dos casos, quando precisarmos de declarar uma função, uma Function Declaration é preferível, porque é visível antes da própria definição. Isso nos dá mais flexibilidade para a organização do código, e geralmente é mais legível. +Na maior parte dos casos, quando precisarmos de declarar uma função, uma Function Declaration é preferível, porque é visível antes da própria definição. Isso nos dá mais flexibilidade na organização do código, e geralmente é mais legível. -Assim, deveríamos empregar uma Function Expression apenas quando a Function Declaration não fosse adequada à tarefa. Vimos alguns exemplos disso no capítulo, e veremos mais no futuro. +Assim, deveríamos apenas empregar uma Function Expression quando a Function Declaration não fosse adequada à tarefa. Vimos alguns exemplos disto neste capítulo, e veremos mais no futuro. From 3751f9c78fcce8b8debf48ab647f404764577752 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Thu, 19 Jan 2023 23:12:40 +0100 Subject: [PATCH 7/7] Update "Function Expressions" (3) --- .../16-function-expressions/article.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 3679410d8..a305a8909 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -54,7 +54,7 @@ Em JavaScript, uma função é um valor, então podemos lidar com ela como com u É claro que uma função é um valor especial, porque o podemos invocar usando `sayHi()`. -Mas, ainda se trata de um valor. Então, o podemos manusear como acontece com outros tipos de valores. +Mas, ainda assim trata-se de um valor. Então, o podemos manusear como acontece com outros tipos de valores. Nós podemos copiar uma função para outra variável: @@ -73,7 +73,7 @@ Aqui está o que acima acontece, em detalhe: 1. A Declaração de Função `(1)` cria uma função e a coloca na variável chamada `sayHi`. 2. Na linha em `(2)` é copiada para a variável `func`. Por favor, note outra vez: não existem parênteses depois de `sayHi`. Se houvesse, então `func = sayHi()` iria escrever *o resultado da chamada* `sayHi()` em `func`, não a própria *função* `sayHi`. -3. Agora, a função pode ser invocada tanto como `sayHi()` como também `func()`. +3. Agora, a função pode ser invocada como `sayHi()` e também como `func()`. Também poderíamos ter usado uma Expressão de Função para declarar `sayHi` na primeira linha: @@ -203,7 +203,7 @@ Primeiro, a sintaxe: como as diferenciar no código. }; ``` -Contudo, a mais subtil diferença é *quando* uma função é criada pelo interpretador de JavaScript (*JavaScript engine*). +Contudo, a mais subtil diferença é *quando* a função é criada pelo interpretador de JavaScript (*JavaScript engine*). **Uma Expressão de Função é criada quando a execução a alcança, e só é utilizável a partir desse momento.** @@ -233,7 +233,7 @@ function sayHi(name) { A Declaração de Função `sayHi` é criada quando o JavaScript se prepara para iniciar o script, e é visível em todo o lugar nele. -...Se fosse uma Expressão de Função, então não iria funcionar: +...Se fosse uma Expressão de Função, não iria funcionar: ```js run refresh untrusted *!* @@ -245,13 +245,13 @@ let sayHi = function(name) { // (*) não há mais mágica }; ``` -As Expressões de Função são criadas quando a execução as alcança. Isso só iria acontecer na linha `(*)`. Demasiado tarde. +As Expressões de Função são criadas quando a execução as alcança. Isto só iria acontecer na linha `(*)`. Demasiado tarde. Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*). **No modo estrito (*strict mode*), quando uma Declarações de Função está dentro de um bloco de código, ela é visível em todo o lugar dentro desse bloco. Mas não fora dele.** -Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento da execução (runtime) do programa. E que depois planejamos usá-la mais tarde. +Por exemplo, imaginemos que precisamos de declarar uma função `welcome()` que dependa da variável `age` que obtemos no momento da execução (runtime) do programa. E que planejamos usá-la mais tarde. Se empregarmos uma Declaração de Função, isto não funciona como pretendido: