Categorias do Site

Quando usar funções arrow em JavaScript

Descubra como e quando usar funções arrow em JavaScript para otimizar seu código.

Círculo amarelo com as letras

O padrão ES2015 introduziu as funções arrow no JavaScript, simplificando a sintaxe das funções padrão. No entanto, elas apresentam diferenças importantes de comportamento. As funções arrow podem ser usadas em quase todos os contextos onde uma expressão de função padrão é aplicada, exceto em casos que exigem uma nova ligação this, já que elas herdam this do escopo externo.

O que são funções arrow no JavaScript?

como e quando usar funções arrow em JavaScript

As funções arrow possuem uma sintaxe compacta e não podem ser usadas como construtores ou funções geradoras. Elas são ideais para callbacks, especialmente em métodos de array como forEach, map e filter.

Sintaxe básica de uma função arrow

Uma função arrow é composta por uma lista de argumentos seguida por uma seta (feita com um sinal de igual e um sinal de maior que =>), seguida pelo corpo da função. Um exemplo simples é:

const saudacao = nome => console.log(`Olá, ${nome}!`);

Se o corpo da função contiver apenas uma expressão, as chaves podem ser omitidas, resultando em um retorno implícito. Para retornar um objeto, é necessário envolvê-lo com parênteses.

Diferenças das funções padrão

Ao contrário das funções padrão, as funções arrow não criam seu próprio this e não possuem o objeto arguments. Elas também não têm uma propriedade prototype, impossibilitando seu uso como construtores.

Quando usar funções arrow

Elas são ideais para funções de callback devido à sua sintaxe abreviada. Não devem ser usadas como métodos de objeto quando é necessário acessar o objeto através de this.

Conclusão

As funções arrow são úteis em muitos cenários, especialmente para melhorar a legibilidade do código e preservar a ligação this do escopo externo. Contudo, é importante entender suas limitações para evitar erros no código.

  • Aplicando o favo de UX em sites modernos

    Descubra como o favo de UX pode otimizar o design de sites, garantindo experiências significativas e centradas no usuário.

    Descubra como o favo de UX pode otimizar o design de sites, garantindo experiências significativas e centradas no usuário.

    Ler notícia completa
    Ícone estilizado de uma abelha com favos de mel sobre um fundo circular lilás e desfocado.
  • Melhores Ações de Glitch no Photoshop 2025

    Descubra as melhores ações de glitch para Photoshop em 2025 e transforme suas fotos com efeitos digitais únicos e inovadores.

    Descubra as melhores ações de glitch para Photoshop em 2025 e transforme suas fotos com efeitos digitais únicos e inovadores.

    Ler notícia completa
    Arte digital de um astronauta com traje espacial flutuando num fundo abstrato colorido, representando o espaço com detalhes de glitch e o logo do Photoshop no canto.
  • Gestão eficaz de equipes de design: dicas práticas

    Aprenda a gerenciar equipes de design com eficácia, equilibrando comunicação, inspiração e autonomia para resultados excepcionais.

    Aprenda a gerenciar equipes de design com eficácia, equilibrando comunicação, inspiração e autonomia para resultados excepcionais.

    Ler notícia completa
    Ilustração de três figuras humanas estilizadas, dispostas em forma de pirâmide sobre um fundo abstrato em tons de cinza.
  • O que é Vibe Coding? Descubra essa tendência

    Com a IA se integrando cada vez mais em nossas ferramentas e fluxos de trabalho, o design de experiência está entrando em uma nova era—menos sobre wireframes e mais sobre sensações. Neste episódio de Invisible Machines, o especialista em design Tim Wood (Meta, Amazon Q Developer) retorna ao podcast para explorar a ascensão do design […]

    Design com IA evolui para além dos wireframes, focando em 'vibe coding'. Entenda essa nova era do design digital.

    Ler notícia completa
    Banner de podcast com título
  • 20 Fontes Futuristas Gratuitas para Design Moderno

    As fontes futuristas são caracterizadas por suas formas geométricas e linhas limpas, o que contribui para uma estética moderna e elegante. Elas transformam tipografias básicas em algo mais inovador. Essas fontes adicionam um toque estiloso e contemporâneo aos trabalhos, sendo ideais para projetos que lidam com ideias futuristas ou que buscam apresentar uma imagem ultra-moderna. […]

    Descubra 20 fontes futuristas gratuitas para dar um toque moderno e inovador aos seus projetos de design.

    Ler notícia completa
    Imagem de fundo cósmico com tonalidades de azul e rosa representando o espaço, contendo a palavra
  • 6 Melhores Plugins de Blocos Gutenberg para WordPress

    Uma das características mais promissoras do editor de blocos Gutenberg é a capacidade de adicionar blocos personalizados. Eles podem incluir praticamente qualquer tipo de conteúdo ou funcionalidade que você imaginar. Embora você possa criar seus próprios blocos personalizados, às vezes isso é como reinventar a roda, especialmente quando deseja adicionar elementos comuns, como testemunhos ou […]

    Descubra os 6 melhores plugins de blocos Gutenberg para criar páginas incríveis no WordPress.

    Ler notícia completa
    Interface de usuário de um software com um campo de pesquisa e ícones de recursos como
  • Navegação na Internet para Pessoas Cegas

    Sylvie Duchateau é consultora de acessibilidade digital há mais de 20 anos. Após trabalhar em associações como BrailleNet e na cooperativa Access42, ela decidiu se tornar freelancer. Sylvie é especialista em leitores de tela, oferece treinamentos e testes de acessibilidade, e é voluntária na conferência Paris Web desde 2021. Nos conhecemos na edição de 2024 […]

    Sylvie Duchateau fala sobre desafios e soluções para acessibilidade digital de pessoas cegas na web.

    Ler notícia completa
    Mulher sorridente abraça labrador bege em ambiente interno com plantas ao fundo.
  • Guia de Estilo vs. Sistema de Design: Diferenças

    Embora muitos designers usem guias de estilo e sistemas de design de forma intercambiável, eles são ferramentas distintas com suas próprias forças e fraquezas. Compreender suas diferenças é crucial para evitar impactos negativos no processo de design e desenvolvimento de produtos. Um guia de estilo é um documento que apresenta diretrizes para manter a consistência […]

    Entenda as diferenças entre guias de estilo e sistemas de design e como usá-los no design de produtos.

    Ler notícia completa
    Ícone estilizado de um computador exibindo uma imagem de documento com texto e caixas de marcação, acompanhado de um lápis, sobre fundo texturizado azul.
  • Novas Ferramentas para Designers em Abril 2025

    A temporada de projetos está em alta, e novas ferramentas estão surgindo para ajudar designers a gerenciar fluxos de trabalho com eficiência. Esta seleção inclui algumas novidades que prometem manter sua motivação em alta. Confira as novidades para designers: Smart Keys Smart Keys é uma ferramenta para Mac que melhora a escrita com atalhos de […]

    Descubra as ferramentas inovadoras para designers, como Smart Keys e UX Audit Now, para otimizar seu fluxo de trabalho.

    Ler notícia completa
    Homem jovem com óculos escuros se funde com o texto