51 lines
2.9 KiB
Plaintext
51 lines
2.9 KiB
Plaintext
---
|
|
title: Você pode oferecer um caso de uso para a nova sintaxe de arrow function =>?
|
|
subtitle: Como essa nova sintaxe difere de outras funções?
|
|
---
|
|
|
|
A sintaxe de função `=>`, também conhecida como "funções de seta", é um recurso introduzido no ECMAScript 6 (ES6) para o JavaScript. Ela fornece uma maneira mais concisa de escrever funções e também apresenta algumas diferenças em relação ao comportamento do `this` em comparação com expressões de função tradicionais. Aqui está um caso de uso simples para ilustrar sua utilidade:
|
|
|
|
## Caso de Uso: filtrando um array
|
|
|
|
Imagine que você tenha um array de números e queira filtrar todos os números menores que 10. Usando a sintaxe de função tradicional e a nova sintaxe de função de seta, você pode realizar isso das seguintes maneiras:
|
|
|
|
### Sintaxe de função tradicional
|
|
|
|
```javascript
|
|
const numbers = [1, 5, 10, 15, 20];
|
|
const numbersFiltrados = numbers.filter(function (number) {
|
|
return number >= 10;
|
|
});
|
|
|
|
console.log(numbersFiltrados); // Saída: [10, 15, 20]
|
|
```
|
|
|
|
### Sintaxe de função de seta
|
|
|
|
```javascript
|
|
const numbers = [1, 5, 10, 15, 20];
|
|
const numbersFiltrados = numbers.filter((number) => number >= 10);
|
|
|
|
console.log(numbersFiltrados); // Saída: [10, 15, 20]
|
|
```
|
|
|
|
## Vantagens das funções de seta
|
|
|
|
1. **Concisão**: As funções de seta são mais concisas, tornando seu código mais curto e mais fácil de ler.
|
|
1. **Comportamento do `this`**: As funções de seta não possuem seu próprio `this`. Em vez disso, elas herdam o `this` do escopo pai no momento em que são definidas. Isso é particularmente útil em cenários em que você está lidando com callbacks e deseja manter o contexto do `this`.
|
|
1. **Retorno Implícito**: Se o corpo da função consistir em uma única expressão, as funções de seta permitem omitir a palavra-chave `return` e as chaves.
|
|
|
|
## Quando usar funções de seta
|
|
|
|
- Quando você precisa de uma função rápida de uma única linha.
|
|
- Em funções de retorno de chamada (callbacks) onde você deseja preservar o escopo léxico do `this`.
|
|
- Ao trabalhar com funções de ordem superior como `map`, `filter`, `reduce`, etc.
|
|
|
|
## Quando não usar funções de seta
|
|
|
|
- **Métodos em objetos**: As funções de seta não têm seu próprio contexto `this`, o que pode levar a comportamentos inesperados em métodos de objetos.
|
|
- **Como construtores**: As funções de seta não podem ser usadas como construtores e gerarão um erro se usadas com a palavra-chave `new`.
|
|
- **Quando você precisa de hoisting de função**: As funções de seta não são içadas (hoisted), ao contrário das declarações de função tradicionais.
|
|
|
|
As funções de seta são uma adição poderosa ao JavaScript, simplificando a sintaxe das funções e abordando algumas armadilhas comuns associadas à palavra-chave `this` em funções tradicionais. Elas são especialmente úteis nos padrões de desenvolvimento JavaScript modernos.
|