Skip to content

Commit 222f48e

Browse files
authored
Update part of article
Article update up to line 110, mostly.
1 parent a2a1805 commit 222f48e

File tree

1 file changed

+52
-56
lines changed
  • 1-js/02-first-steps/16-function-expressions

1 file changed

+52
-56
lines changed

1-js/02-first-steps/16-function-expressions/article.md

Lines changed: 52 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,110 @@
1-
# Expressões de função e Arrow functions
1+
# Expressões de função
22

3-
Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas um tipo especial de valor.
3+
Em JavaScript, uma função não é uma "estrutura mágica da linguagem", mas um valor de um tipo especial.
44

55
A sintaxe que usámos antes é chamada de *Declaração de Função* (*Function Declaration*):
66

77
```js
8-
function sayHi() {
9-
alert( "Olá" );
10-
}
8+
function sayHi() {
9+
alert( "Olá" );
10+
}
1111
```
1212

1313
Existe outra sintaxe para criar uma função que é chamada de *Expressão de Função* (*Function Expression*).
1414

1515
É similar a:
1616

1717
```js
18-
let sayHi = function() {
19-
alert( "Olá" );
20-
};
18+
let sayHi = function() {
19+
alert( "Olá" );
20+
};
2121
```
2222

23-
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 atribuido a uma variável `sayHi`.
23+
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`.
2424

2525
O significado destas amostras de código é o mesmo: "crie uma função e a coloque na variável `sayHi`".
2626

2727
Podemos até exibir esse valor usando `alert`:
2828

2929
```js run
30-
function sayHi() {
31-
alert( "Olá" );
32-
}
30+
function sayHi() {
31+
alert( "Olá" );
32+
}
3333

34-
*!*
35-
alert( sayHi ); // mostra o código da função
36-
*/!*
34+
*!*
35+
alert( sayHi ); // mostra o código da função
36+
*/!*
3737
```
3838

3939
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.
4040

41-
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 de texto (string), que é o código fonte.
41+
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.
4242

43-
Óbviamente que é um valor especial, porque podemos invocá-lo usando `sayHi()`.
43+
Óbviamente, uma função é um valor especial, porque podemos invocá-lo usando `sayHi()`.
4444

4545
Mas ainda assim é um valor. Então, podemos manuseá-lo como com outros tipos de valores.
4646

4747
Podemos copiar uma função para outra variável:
4848

4949
```js run no-beautify
50-
function sayHi() { // (1) crie
51-
alert( "Olá" );
52-
}
50+
function sayHi() { // (1) crie
51+
alert( "Olá" );
52+
}
5353

54-
let func = sayHi; // (2) copie
54+
let func = sayHi; // (2) copie
5555

56-
func(); // Olá // (3) execute a cópia (funciona)!
57-
sayHi(); // Olá // isto também ainda funciona (porque não?)
56+
func(); // Olá // (3) execute a cópia (funciona)!
57+
sayHi(); // Olá // isto também ainda funciona (porque não?)
5858
```
5959

6060
Aqui está o que acima acontece, em detalhe:
6161

6262
1. A Declaração de Função `(1)` cria uma função e a coloca na variável chamada `sayHi`.
63-
2. Na linha em `(2)` é copiada para a variável `func`.
64-
65-
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`.
63+
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`.
6664
3. Agora, a função pode ser invocada tanto como `sayHi()` como `func()`.
6765

68-
Note que poderíamos também ter uma Expressão de Função para declarar `sayHi`, na primeira linha:
66+
Note que também poderíamos ter utilizado uma Expressão de Função para declarar `sayHi`, na primeira linha:
6967

7068
```js
71-
let sayHi = function() { ... };
69+
let sayHi = function() {
70+
alert( "Olá" );
71+
};
7272

73-
let func = sayHi;
74-
// ...
73+
let func = sayHi;
74+
// ...
7575
```
7676

77-
Tudo funcionaria do mesmo modo. Seria ainda mais óbvio o que se passa, não?
77+
Tudo funcionaria do mesmo modo.
7878

79-
80-
````smart header="Why is there a semicolon at the end?"
79+
````smart header="Porque há um ponto-e-vírgula no final?"
8180
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:
8281
8382
```js
84-
function sayHi() {
85-
// ...
86-
}
83+
function sayHi() {
84+
// ...
85+
}
8786
88-
let sayHi = function() {
89-
// ...
90-
}*!*;*/!*
87+
let sayHi = function() {
88+
// ...
89+
}*!*;*/!*
9190
```
9291
9392
A resposta é simples:
9493
- 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.
95-
- 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. 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.
94+
- 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.
9695
````
9796

98-
## Callback functions
97+
## Funções callback
9998

10099
Vejamos mais exemplos de passagem de funções como valores e de uso de expressões de função.
101100

102101
Escreveremos uma função `ask(question, yes, no)` com três parametros:
103102

104-
`question`
105-
: Texto da questão
103+
`question`: Texto da questão
106104

107-
`yes`
108-
: Função a executar se a resposta for "Sim"
105+
`yes`: Função a executar se a resposta for "Sim"
109106

110-
`no`
111-
: Função a executar se a resposta for "Não"
107+
`no`: Função a executar se a resposta for "Não"
112108

113109
A função deverá efetuar a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`:
114110

@@ -132,9 +128,9 @@ function showCancel() {
132128
ask("Você concorda?", showOk, showCancel);
133129
```
134130

135-
Antes de explorarmos em como poderemos escrevê-lo de uma forma mais curta, convém notar que no navegador [browser] (e em certos casos do lado do servidor [server-side]) tais funções são muito populares. A maior difereça entre uma implementação em tempo-real [real-life] e o exemplo acima, é que funções em tempo-real usam formas mais complexas de interagir com o utilizador do que um simples `confirm`. No navegador, geralmente tal função desenha uma agradável janela contendo a questão a formular. Mas isso é outra história.
131+
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.
136132

137-
**Os argumentos de `ask` são chamados de *funções de retorno de chamada* (callback functions) ou apenas *callbacks*.**
133+
**Os argumentos `showOk` e `showCancel` de `ask` são chamados de *funções de retorno de chamada* (callback functions) ou apenas *callbacks*.**
138134

139135
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".
140136

@@ -200,13 +196,13 @@ Ao passar o fluxo de execução para o lado direito da atribuição `let sum = f
200196

201197
Declarações de Função sao diferentes.
202198

203-
**Uma Declaração de Função é utilizável ao longo de todo o script/bloco de código.**
199+
**Uma Declaração de Função pode ser chamada antes de ser definida.**
204200

205-
Por outras palavras, quando JavaScript se *prepara* para correr o programa (script) ou bloco de código, primeiro procura nele por Declarações de Função e cria as funções. Podemos pensar nisto como um "estágio de inicialização".
201+
Por exemplo, uma Declaração de Função é visível em todo o programa (*script*), não importa onde estiver.
206202

207-
Após o processamento de todas as Declarações de Função, a execução prossegue.
203+
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".
208204

209-
Como resultado, a função declarada como Declaração de Função pode ser chamada antes da sua definição no programa.
205+
Após o processamento de todas as Declarações de Função, o código é executado. Desta maneira, é tem acesso a estas funções.
210206

211207
Por exemplo, isto funciona:
212208

@@ -236,13 +232,13 @@ let sayHi = function(name) { // (*) nenhuma mágica mais
236232

237233
As Expressões de Função são criadas quando a execução as alcança. O que aconteceria apenas na linha `(*)`. Tarde demais.
238234

239-
**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.**
235+
Uma outra funcionalidade especial de Declarações de Função é o seu escopo de bloco (*block scope*).
240236

241-
Por vezes, é prático declarar uma função local apenas necessária num dado bloco. Mas essa possibilidade também pode causar problemas.
237+
**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.**
242238

243239
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.
244240

245-
O código abaixo não funciona:
241+
Se empregarmos uma Declaração de Função, isto não funciona como pretendido:
246242

247243
```js run
248244
let age = prompt("Que idade tem?", 18);

0 commit comments

Comments
 (0)