Funções Certeiras em JavaScript

Neste artigo, vamos explorar as funções no JavaScript e suas versões especiais, as chamadas "arrow functions". Vamos aprender o que são, como criá-las e quando usá-las. Vamos lá!

O que é função no JavaScript

No JavaScript, uma função é um pedaço de código que faz algo específico. É como uma varinha mágica que você pode usar sempre que precisar executar uma ação. Por exemplo, você pode criar uma função que some dois números ou uma que exiba uma mensagem na tela.

As arrow functions são uma forma especial de criar funções no JavaScript. Elas são mais curtas e diretas, como usar uma varinha mágica com atalhos. Em vez de escrever a palavra-chave "function", usamos uma seta (=>). Vamos ver como criar arrow functions!

Cite exemplos com código demonstrando todas as maneiras de criar arrow functions

1.  Arrow Function Simples:

const dobrar = (numero) => numero * 2;

Vamos desvendar o código da Arrow Function Simples:

const dobrar: Aqui, estamos declarando uma constante chamada "dobrar" para armazenar nossa função. Isso significa que podemos chamar essa função sempre que quisermos usando o nome "dobrar".

(numero): Isso é um parâmetro da função. Parâmetros são como ingredientes em uma receita. Neste caso, "numero" é o ingrediente que nossa função precisa para funcionar.

=>: Esta seta é a marca registrada das arrow functions. Ela separa os parâmetros da lógica da função.

numero * 2: Esta é a parte mágica! É o que a nossa função faz. Ela pega o número que você der como ingrediente e o multiplica por 2, ou seja, "dobrar" o número.

Então, se você chamar dobrar(5), a função vai pegar o 5, multiplicá-lo por 2 e retornar 10. É como uma varinha mágica que dobra o número que você escolher!

2.  Arrow Function sem parênteses:

const saudacao = nome => `Olá, ${nome}!`;

Vamos desvendar o código da Arrow Function sem parênteses:

•         const saudacao: Aqui, estamos criando uma constante chamada "saudacao" para armazenar nossa função. Essa função será responsável por criar uma saudação especial.
•        nome: Este é o único parâmetro da função. É como o nome da pessoa a quem queremos dizer "Olá". Não precisa de parênteses quando temos apenas um parâmetro.
•         =>: Mais uma vez, temos a seta que indica que estamos criando uma arrow function. Ela separa o parâmetro da lógica da função.
•      "Olá, ${nome}!": Aqui está a mágica! Essa parte da função cria uma mensagem de saudação personalizada. Ela usa o valor do parâmetro "nome" para inserir o nome da pessoa na mensagem.
• Portanto, se você chamar saudacao("Alice"), a função irá retornar "Olá, Alice!". É como se a função estivesse saudando a pessoa pelo nome que você passou. 🌟👋

3.  Arrow Function sem argumentos:

const saudacaoPadrao = () => "Olá, mundo!";

Vamos desvendar o código da Arrow function sem argumentos.

·        const saudacaoPadrao: Aqui, estamos criando uma constante chamada "saudacaoPadrao" para armazenar nossa função. Essa função irá gerar uma saudação padrão.

·        (): Perceba que não há parâmetros dentro dos parênteses. Isso significa que essa função não precisa de nenhum ingrediente especial, ela faz a mesma coisa toda vez.

·        =>: Mais uma vez, a seta que indica que estamos usando uma arrow function. Neste caso, não temos parâmetros, então os parênteses estão vazios.

·        "Olá, mundo!": Aqui está a mágica! Essa parte da função simplesmente retorna a mensagem "Olá, mundo!". É como um truque que sempre diz a mesma coisa.

Então, quando você chamar saudacaoPadrao(), a função sempre irá retornar "Olá, mundo!". É como ter uma flecha teleguiada esperando o seu momento de disparo. 🏹🎯

4. Arrow Function com várias linhas:

const calcularMedia = (notas) => {
 const soma = notas.reduce((total, nota) => total + nota, 0);
 return soma / notas.length;
};

Vamos desvendar o código da Arrow Function com várias linhas:

•         const calcularMedia: Aqui, estamos criando uma constante chamada "calcularMedia" para armazenar nossa função. Essa função será responsável por calcular a média de um conjunto de notas.
•         (notas): Este é o parâmetro da função. Ele é como uma lista de notas que passamos para a função para fazer o cálculo da média.
•         =>: A seta que indica que estamos criando uma arrow function. Ela separa os parâmetros da lógica da função.
•         As próximas linhas realizam uma série de ações:
•         const soma = notas.reduce((total, nota) => total + nota, 0);: Esta linha usa um método chamado "reduce" para somar todas as notas na lista. Começa com um total de 0 e vai adicionando cada nota.
•         return soma / notas.length;: Esta linha calcula a média dividindo a soma das notas pelo número total de notas.

Então, quando você chama calcularMedia([8, 9, 7, 10]), a função irá somar todas as notas (34) e dividir pelo número de notas (4), resultando em uma média de 8.5. É como disparar múltiplas flechas no centro de um alvo. 🏹🏹🏹

Agora você tem quatro maneiras diferentes de criar arrow functions!

Espero que você tenha se divertido aprendendo sobre funções e arrow functions em JavaScript. Se quiser saber mais sobre programação ou tirar dúvidas, me siga nas redes sociais!

Fontes de produção

Ilustrações: geradas pela lexica.art

Conteúdo gerado por: ChatGPT e revisões humanas.

Instagram: @willandreyslv

Linkedin: https://www.linkedin.com/in/william-andrey-122431179/

GitHub: https://github.com/WillAndrey

#Javascript #JavaScriptMagico #Functions #ArrowFunctions #FrontEnd