You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/02-first-steps/16-function-expressions/article.md
+52-56Lines changed: 52 additions & 56 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,114 +1,110 @@
1
-
# Expressões de função e Arrow functions
1
+
# Expressões de função
2
2
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.
4
4
5
5
A sintaxe que usámos antes é chamada de *Declaração de Função* (*Function Declaration*):
6
6
7
7
```js
8
-
functionsayHi() {
9
-
alert( "Olá" );
10
-
}
8
+
functionsayHi() {
9
+
alert( "Olá" );
10
+
}
11
11
```
12
12
13
13
Existe outra sintaxe para criar uma função que é chamada de *Expressão de Função* (*Function Expression*).
14
14
15
15
É similar a:
16
16
17
17
```js
18
-
letsayHi=function() {
19
-
alert( "Olá" );
20
-
};
18
+
letsayHi=function() {
19
+
alert( "Olá" );
20
+
};
21
21
```
22
22
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`.
24
24
25
25
O significado destas amostras de código é o mesmo: "crie uma função e a coloque na variável `sayHi`".
26
26
27
27
Podemos até exibir esse valor usando `alert`:
28
28
29
29
```js run
30
-
functionsayHi() {
31
-
alert( "Olá" );
32
-
}
30
+
functionsayHi() {
31
+
alert( "Olá" );
32
+
}
33
33
34
-
*!*
35
-
alert( sayHi ); // mostra o código da função
36
-
*/!*
34
+
*!*
35
+
alert( sayHi ); // mostra o código da função
36
+
*/!*
37
37
```
38
38
39
39
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.
40
40
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.
42
42
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()`.
44
44
45
45
Mas ainda assim é um valor. Então, podemos manuseá-lo como com outros tipos de valores.
46
46
47
47
Podemos copiar uma função para outra variável:
48
48
49
49
```js run no-beautify
50
-
functionsayHi() { // (1) crie
51
-
alert( "Olá" );
52
-
}
50
+
functionsayHi() { // (1) crie
51
+
alert( "Olá" );
52
+
}
53
53
54
-
let func = sayHi; // (2) copie
54
+
let func = sayHi; // (2) copie
55
55
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?)
58
58
```
59
59
60
60
Aqui está o que acima acontece, em detalhe:
61
61
62
62
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`.
66
64
3. Agora, a função pode ser invocada tanto como `sayHi()` como `func()`.
67
65
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:
69
67
70
68
```js
71
-
letsayHi=function() { ... };
69
+
letsayHi=function() {
70
+
alert( "Olá" );
71
+
};
72
72
73
-
let func = sayHi;
74
-
// ...
73
+
let func = sayHi;
74
+
// ...
75
75
```
76
76
77
-
Tudo funcionaria do mesmo modo. Seria ainda mais óbvio o que se passa, não?
77
+
Tudo funcionaria do mesmo modo.
78
78
79
-
80
-
````smart header="Why is there a semicolon at the end?"
79
+
````smart header="Porque há um ponto-e-vírgula no final?"
81
80
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:
82
81
83
82
```js
84
-
function sayHi() {
85
-
// ...
86
-
}
83
+
function sayHi() {
84
+
// ...
85
+
}
87
86
88
-
let sayHi = function() {
89
-
// ...
90
-
}*!*;*/!*
87
+
let sayHi = function() {
88
+
// ...
89
+
}*!*;*/!*
91
90
```
92
91
93
92
A resposta é simples:
94
93
- 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.
96
95
````
97
96
98
-
## Callback functions
97
+
## Funções callback
99
98
100
99
Vejamos mais exemplos de passagem de funções como valores e de uso de expressões de função.
101
100
102
101
Escreveremos uma função `ask(question, yes, no)` com três parametros:
103
102
104
-
`question`
105
-
: Texto da questão
103
+
`question`: Texto da questão
106
104
107
-
`yes`
108
-
: Função a executar se a resposta for "Sim"
105
+
`yes`: Função a executar se a resposta for "Sim"
109
106
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"
112
108
113
109
A função deverá efetuar a `question` e, dependendo da resposta do utilizador, chamar `yes()` ou `no()`:
114
110
@@ -132,9 +128,9 @@ function showCancel() {
132
128
ask("Você concorda?", showOk, showCancel);
133
129
```
134
130
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.
136
132
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*.**
138
134
139
135
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".
140
136
@@ -200,13 +196,13 @@ Ao passar o fluxo de execução para o lado direito da atribuição `let sum = f
200
196
201
197
Declarações de Função sao diferentes.
202
198
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.**
204
200
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.
206
202
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".
208
204
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.
210
206
211
207
Por exemplo, isto funciona:
212
208
@@ -236,13 +232,13 @@ let sayHi = function(name) { // (*) nenhuma mágica mais
236
232
237
233
As Expressões de Função são criadas quando a execução as alcança. O que aconteceria apenas na linha `(*)`. Tarde demais.
238
234
239
-
**Quando uma Declaração de Função é feita dentro de um bloco de código, ela é visível em todo o lugar dentro dessebloco. Mas não fora dele.**
235
+
Uma outra funcionalidade especial de Declarações de Função é o seu escopo debloco (*block scope*).
240
236
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.**
242
238
243
239
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.
244
240
245
-
O código abaixo não funciona:
241
+
Se empregarmos uma Declaração de Função, isto não funciona como pretendido:
0 commit comments