Skip to content

Arrow functions, the basics #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@

```js run
function ask(question, yes, no) {
if (confirm(question)) yes()
if (confirm(question)) yes();
else no();
}

ask(
"Do you agree?",
"Você concorda?",
*!*
() => alert("You agreed."),
() => alert("You canceled the execution.")
() => alert("Você concordou."),
() => alert("Você cancelou a execução.")
*/!*
);
```

Looks short and clean, right?
Parece mais curto e claro, não?
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@

# Rewrite with arrow functions
# Reescreva com funções seta (*arrow functions*)

Replace Function Expressions with arrow functions in the code below:
Substitua as Expressões de Função por funções seta no código abaixo:

```js run
function ask(question, yes, no) {
if (confirm(question)) yes()
if (confirm(question)) yes();
else no();
}

ask(
"Do you agree?",
function() { alert("You agreed."); },
function() { alert("You canceled the execution."); }
"Você concorda?",
function() { alert("Você concordou."); },
function() { alert("Você cancelou a execução."); }
);
```
48 changes: 24 additions & 24 deletions 1-js/02-first-steps/17-arrow-functions-basics/article.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# Funções seta, o básico
# Arrow functions, o básico

Existe outra sintaxe, muito simples e concisa, para criar funções, e que geralmente é melhor do que Expressões de Função.
outra sintaxe muito simples e abreviada para criar funções, e que frequentemente é melhor do que Expressões de Função (*Function Expressions*).

É chamada de "funções seta" (*"arrow functions"*), porque tem este aspeto:
É chamada de "*arrow functions*" (funções seta), porque é parecida com:

```js
let func = (arg1, arg2, ...argN) => expression
let func = (arg1, arg2, ..., argN) => expression;
```

...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.
...Isto cria a função `func` com os argumentos `arg1..argN`, a seguir avalia a `expression` no lado direito com eles, e retorna o resultado.

Por outras palavras, é a versão mais curta de:

```js
let func = function(arg1, arg2, ...argN) {
let func = function(arg1, arg2, ..., argN) {
return expression;
};
```
Expand All @@ -33,9 +33,9 @@ let sum = function(a, b) {
alert( sum(1, 2) ); // 3
```

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.
Como você pode ver `(a, b) => a + b` significa uma função que aceita dois argumentos, nomeadamente `a` e `b`. No momento da execução, a expressão `a + b` é avaliada e o resultado retornado.

- Se tivermos apenas um argumento, então os parênteses à sua volta podem ser omitidos, tornando ela ainda mais curta.
- Se tivermos um argumento, então os parênteses à sua volta podem ser omitidos, ficando ela ainda mais curta.

Por exemplo:

Expand All @@ -48,20 +48,20 @@ Como pode ver, `(a, b) => a + b` significa uma função que aceita dois argument
alert( double(3) ); // 6
```

- Se não houver argumentos, os parênteses irão estar vazios (mas devem estar presentes):
- Se não houver argumentos, os parênteses estarão vazios, mas devem estar presentes:

```js run
let sayHi = () => alert("Olá!");

sayHi();
```

Funções seta podem ser empregues da mesma forma que Expressões de Função.
*Arrow functions* podem ser utilizadas da mesma forma que *Function Expressions*.

Por exemplo, para criar dinamicamente uma função:

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

let welcome = (age < 18) ?
() => alert('Olá') :
Expand All @@ -70,15 +70,15 @@ let welcome = (age < 18) ?
welcome();
```

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.
*Funções seta* podem parecer estranhas e não muito legíveis a princípio, mas isso rapidamente muda à medida que os olhos se habituam à estrutura.

Elas são muito convenientes para ações simples numa única-linha, quando estamos preguiçosos demais para escrever muitas palavras.
Elas são muito convenientes para ações simples com uma única-linha, quando estamos algo ociosos para escrever muitas palavras.

## Funções seta de múltiplas linhas
## *Funções seta* com múltiplas linhas

Os exemplos acima tomaram os argumentos à esquerda de `=>` e avaliaram a expressão à direita com eles.
As funções seta vistas até agora foram muito simples. Elas tomaram os argumentos à esquerda de `=>`, e avaliaram e retornaram o resultado da expressão à direita com eles.

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.
Por vezes, precisamos de uma função um pouco mais complexa, com múltiplas expressões e instruções. Neste caso, nós as envolvemos entre chavetas. A maior diferença é que as chavetas precisam de um `return` dentro delas para retornar um valor (tal como uma função comum precisa).

Desta forma:

Expand All @@ -93,19 +93,19 @@ let sum = (a, b) => { // a chaveta abre uma função multi-linha
alert( sum(1, 2) ); // 3
```

```smart header="Mais à frente"
Aqui, enaltecemos funções seta pela sua brevidade. Mas não é !
```smart header="Mais adiante"
Aqui, enaltecemos funções seta pela sua brevidade. Mas não é tudo!

Funções seta têm outras funcionalidades interessantes.
Funções seta têm outras particularidades interessantes.

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>.
Para as estudar mais em detalhe, primeiro precisamos de saber outros aspetos de JavaScript, e desta forma iremos retornar a funções seta mais adiante no capitulo <info:arrow-functions>.

Por ora, podemos já usar funções seta para ações numa única-linha e *callbacks*.
Por ora, já podemos usar funções seta para ações com uma única-linha e *callbacks*.
```

## Resumo

Funções seta são práticas para ações numa única-linha. Elas vêm em dois sabores:
*Arrow functions* são apropriadas para ações simples, especialmente com uma única-linha. Elas vêm em dois sabores:

1. Sem chavetas: `(...args) => expression` -- o lado direito é uma expressão: a função a avalia e retorna o resultado.
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.
1. Sem chavetas: `(...args) => expression` -- o lado direito é uma expressão; a função a avalia e retorna o resultado. Parenteses podem ser omitidos, se houver só um argumento, ex `n => n*2`.
2. Com chavetas: `(...args) => { body }` -- chavetas nos possibilitam escrever múltiplas instruções dentro da função, mas precisamos de um explícito `return` para retornar alguma coisa.