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/15-function-basics/article.md
+4-4Lines changed: 4 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -105,7 +105,7 @@ showMessage();
105
105
alert( userName ); // *!*Bob*/!*, the value was modified by the function
106
106
```
107
107
108
-
The outer variable is only used if there's no local one. So an occasional modification may happen if we forget `let`.
108
+
The outer variable is only used if there's no local one.
109
109
110
110
If a same-named variable is declared inside the function then it *shadows* the outer one. For instance, in the code below the function uses the local `userName`. The outer one is ignored:
111
111
@@ -185,7 +185,7 @@ For instance, the aforementioned function `showMessage(from, text)` can be calle
185
185
showMessage("Ann");
186
186
```
187
187
188
-
That's not an error. Such a call would output `"*Ann*: undefined"`. There's no `text`, so it's assumed that `text===undefined`.
188
+
That's not an error. Such a call would output `"Ann: undefined"`. There's no `text`, so it's assumed that `text===undefined`.
189
189
190
190
If we want to use a "default" `text` in this case, then we can specify it after `=`:
191
191
@@ -350,8 +350,8 @@ That doesn't work, because JavaScript assumes a semicolon after `return`. That'l
350
350
return*!*;*/!*
351
351
(some + long + expression + or + whatever *f(a) +f(b))
352
352
```
353
+
353
354
So, it effectively becomes an empty return.
354
-
````
355
355
356
356
If we want the returned expression to wrap across multiple lines, we should start it at the same line as `return`. Or at least put the opening parentheses there as follows:
357
357
@@ -403,7 +403,7 @@ A few examples of breaking this rule:
403
403
- `createForm` -- would be bad if it modifies the document, adding a form to it (should only create it and return).
404
404
- `checkPermission` -- would be bad if it displays the `access granted/denied` message (should only perform the check and return the result).
405
405
406
-
These examples assume common meanings of prefixes. What they mean for you is determined by you and your team. Maybe it's pretty normal for your code to behave differently. But you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
406
+
These examples assume common meanings of prefixes. You and your team are free to agree on other meanings, but usually they're not much different. In any case, you should have a firm understanding of what a prefix means, what a prefixed function can and cannot do. All same-prefixed functions should obey the rules. And the team should share the knowledge.
Existe outra sintaxe, muito simples e concisa, para criar funções, e que frequentemente é melhor do que Expressões de Funções.
3
+
Existe outra sintaxe, muito simples e concisa, para criar funções, e que geralmente é melhor do que Expressões de Função.
5
4
6
-
É chamada de "funções seta" (*"arrow functions"*), porque se assemelha a:
7
-
=======
8
-
# Arrow functions, the basics
9
-
10
-
There's another very simple and concise syntax for creating functions, that's often better than Function Expressions.
11
-
12
-
It's called "arrow functions", because it looks like this:
13
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
5
+
É chamada de "funções seta" (*"arrow functions"*), porque tem este aspeto:
14
6
15
7
```js
16
8
letfunc= (arg1, arg2, ...argN) => expression
17
9
```
18
10
19
-
<<<<<<< HEAD
20
-
...Isto, cria a função `func` com os argumentos `arg1..argN`, depois avalia a `expression` no lado direito utilizando os mesmos, e retorna o seu resultado.
11
+
...Isto, cria a função `func` com os argumentos `arg1..argN`, depois avalia a `expression` no lado direito usando os mesmos, e retorna o seu resultado.
21
12
22
13
Por outras palavras, é a versão mais curta de:
23
-
=======
24
-
...This creates a function `func` that accepts arguments `arg1..argN`, then evaluates the `expression` on the right side with their use and returns its result.
25
-
26
-
In other words, it's the shorter version of:
27
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
28
14
29
15
```js
30
16
letfunc=function(arg1, arg2, ...argN) {
31
17
return expression;
32
18
};
33
19
```
34
20
35
-
<<<<<<< HEAD
36
21
Vejamos um exemplo concreto:
37
-
=======
38
-
Let's see a concrete example:
39
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
40
22
41
23
```js run
42
24
letsum= (a, b) => a + b;
43
25
44
-
<<<<<<<HEAD
45
26
/* Esta função seta é uma forma mais curta de:
46
-
=======
47
-
/* This arrow function is a shorter form of:
48
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
49
27
50
28
let sum = function(a, b) {
51
29
return a + b;
@@ -55,49 +33,29 @@ let sum = function(a, b) {
55
33
alert( sum(1, 2) ); // 3
56
34
```
57
35
58
-
<<<<<<< HEAD
59
36
Como pode ver, `(a, b) => a + b` significa uma função que aceita dois argumentos, nomeadamente `a` e `b`. No momento da execução, esta avalia a expressão `a + b` e retorna o resultado.
60
37
61
-
- Se tivermos apenas um argumento, então os parênteses à sua volta podem ser omitidos, tornando-a ainda mais curta.
62
-
63
-
Por examplo:
64
-
=======
65
-
As you can, see `(a, b) => a + b` means a function that accepts two arguments named `a` and `b`. Upon the execution, it evaluates the expression `a + b` and returns the result.
38
+
- Se tivermos apenas um argumento, então os parênteses à sua volta podem ser omitidos, tornando ela ainda mais curta.
66
39
67
-
- If we have only one argument, then parentheses around parameters can be omitted, making that even shorter.
68
-
69
-
For example:
70
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
40
+
Por exemplo:
71
41
72
42
```js run
73
43
*!*
74
44
letdouble=n=> n *2;
75
-
<<<<<<< HEAD
76
45
// aproximadamente o mesmo que: let double = function(n) { return n * 2 }
77
-
=======
78
-
// roughly the same as: let double = function(n) { return n * 2 }
79
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
80
46
*/!*
81
47
82
48
alert( double(3) ); // 6
83
49
```
84
50
85
-
<<<<<<< HEAD
86
-
- Se não houver argumentos, os parênteses estarão vazios (mas devem estar presentes):
51
+
- Se não houver argumentos, os parênteses irão estar vazios (mas devem estar presentes):
87
52
88
53
```js run
89
54
let sayHi = () => alert("Olá!");
90
-
=======
91
-
- If there are no arguments, parentheses will be empty (but they should be present):
92
-
93
-
```js run
94
-
let sayHi = () => alert("Hello!");
95
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
96
55
97
56
sayHi();
98
57
```
99
58
100
-
<<<<<<<HEAD
101
59
Funções seta podem ser empregues da mesma forma que Expressões de Função.
102
60
103
61
Por exemplo, para criar dinamicamente uma função:
@@ -108,32 +66,19 @@ let age = prompt("Que idade tem?", 18);
108
66
let welcome = (age < 18) ?
109
67
() => alert('Olá') :
110
68
() => alert("Saudações!");
111
-
=======
112
-
Arrow functions can be used in the same way as Function Expressions.
113
-
114
-
For instance, to dynamically create a function:
115
-
116
-
```js run
117
-
let age =prompt("What is your age?", 18);
118
-
119
-
let welcome = (age <18) ?
120
-
() =>alert('Hello') :
121
-
() =>alert("Greetings!");
122
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
123
69
124
70
welcome();
125
71
```
126
72
127
-
<<<<<<< HEAD
128
73
Funções seta podem parecer não familiares e não muito legíveis a princípio, mas isso rápidamente muda à medida que os olhos se habituam à estrutura.
129
74
130
75
Elas são muito convenientes para ações simples numa única-linha, quando estamos preguiçosos demais para escrever muitas palavras.
131
76
132
77
## Funções seta de múltiplas linhas
133
78
134
-
Os exemplos acima tomaram os argumentos à esqerda de `=>` e avaliaram a expressão à direita com eles.
79
+
Os exemplos acima tomaram os argumentos à esquerda de `=>` e avaliaram a expressão à direita com eles.
135
80
136
-
Por vezes, precisamos de algo um pouco mais complexo, como múltiplas expressões ou instruções. Isso também é possível, mas deveríamos envolvê-las em chavetas. A seguir, usamos um `return` normal com elas.
81
+
Por vezes, precisamos de algo um pouco mais complexo, como de múltiplas expressões ou instruções. Isso também é possível, mas devemos colocar elas dentro de chavetas. Depois, usamos um `return` normal com elas.
137
82
138
83
Desta forma:
139
84
@@ -142,61 +87,25 @@ let sum = (a, b) => { // a chaveta abre uma função multi-linha
142
87
let result = a + b;
143
88
*!*
144
89
return result; // se usarmos chavetas, então precisamos de um "return" explícito
145
-
=======
146
-
Arrow functions may appear unfamiliar and not very readable at first, but that quickly changes as the eyes get used to the structure.
147
-
148
-
They are very convenient for simple one-line actions, when we're just too lazy to write many words.
149
-
150
-
## Multiline arrow functions
151
-
152
-
The examples above took arguments from the left of `=>` and evaluated the right-side expression with them.
153
-
154
-
Sometimes we need something a little bit more complex, like multiple expressions or statements. It is also possible, but we should enclose them in curly braces. Then use a normal `return` within them.
155
-
156
-
Like this:
157
-
158
-
```js run
159
-
let sum = (a, b) => { // the curly brace opens a multiline function
160
-
let result = a + b;
161
-
*!*
162
-
return result; // if we use curly braces, then we need an explicit "return"
163
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
164
90
*/!*
165
91
};
166
92
167
93
alert( sum(1, 2) ); // 3
168
94
```
169
95
170
-
<<<<<<< HEAD
171
-
```smart header="Mais adiante"
172
-
Aqui, enaltecemos funções seta pela sua brevidade. Mas não é tudo!
96
+
```smart header="Mais à frente"
97
+
Aqui, enaltecemos funções seta pela sua brevidade. Mas não é só!
98
+
99
+
Funções seta têm outras funcionalidades interessantes.
173
100
174
-
Para as estudar mais detalhadamente, primeiro precisamos de saber alguns outros aspetos de JavaScript, e desta forma retornaremos a funções seta mais adiante no capitulo <info:arrow-functions>.
101
+
Para as estudar com mais detalhe, primeiro precisamos de saber alguns outros aspetos de JavaScript, e desta forma vamos retornar a funções seta mais adiante no capitulo <info:arrow-functions>.
175
102
176
103
Por ora, podemos já usar funções seta para ações numa única-linha e *callbacks*.
177
104
```
178
105
179
106
## Resumo
180
107
181
-
Funções seta são apropriadas para ações única-linha. Elas vêm em dois sabores:
182
-
183
-
1. Sem chavetas: `(...args) => expression` -- o lado direito é uma expressão; a função a avalia e retorna o resultado.
184
-
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.
185
-
=======
186
-
```smart header="More to come"
187
-
Here we praised arrow functions for brevity. But that's not all!
188
-
189
-
Arrow functions have other interesting features.
190
-
191
-
To study them in-depth, we first need to get to know some other aspects of JavaScript, so we'll return to arrow functions later in the chapter <info:arrow-functions>.
192
-
193
-
For now, we can already use arrow functions for one-line actions and callbacks.
194
-
```
195
-
196
-
## Summary
197
-
198
-
Arrow functions are handy for one-liners. They come in two flavors:
108
+
Funções seta são práticas para ações numa única-linha. Elas vêm em dois sabores:
199
109
200
-
1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result.
201
-
2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
202
-
>>>>>>> e074a5f825a3d10b0c1e5e82561162f75516d7e3
110
+
1. Sem chavetas:`(...args) => expression`-- o lado direito é uma expressão: a função a avalia e retorna o resultado.
111
+
2. Com chavetas:`(...args) => { body }`-- chavetas nos permitem escrever múltiplas instruções dentro da função, mas precisamos de um explícito `return` para retornar alguma coisa.
0 commit comments