03.ArrowFunction.md

Arrow Functions em React 🏹🔍

As Arrow Functions representam uma evolução significativa na escrita de código JavaScript foram introduzidas no JavaScript ES6 em 2015, oferecendo uma sintaxe mais enxuta e eficiente, essencial para o desenvolvimento moderno no React.

Relembrando Funções em JavaScript🤔

Funções são expressões em JavaScript que contêm instruções para executar uma tarefa específica 🚀. Elas podem receber parâmetros, que são espaços reservados na função para dados que serão adicionados no futuro, atuando como variáveis 📦.

Sintaxe da Função Tradicional 👇

function nomeDaFuncao(parametro) {
  console.log(parametro + 2);
}

nomeDaFuncao(3); // Mostrará o número 5 no console 🖥️

Arrow Function 🏹

Arrow Function é uma forma mais curta e elegante de declarar funções, mantendo as funcionalidades da expressão de função tradicional ✨. Ela utiliza uma seta(ou flecha) (=>) para separar os parâmetros das instruções da função.

Sintaxe da Arrow Function 🎯

const soma = (n1, n2) => {
  console.log(n1 + n2);
};

soma(2, 5); // Retorna 7 🧮

As arrow function também podem ser ainda mais simplificadas e inteiramente escritas em uma única linha:

const soma = (n1, n2) => console.log(n1 + n2);

soma(2, 5); // Retorna 7 🧮

Nestes exemplos, as arrow functions são armazenadas dentro de uma constante, com dois parâmetros para valores a serem somados. A invocação(chamada) da função permanece a mesma.

Uso de Arrow Functions em React

Em React, para declarar uma função de flecha, precisamos utilizar a palavra reservada const, exemplo:

function App() {

    const arrowFunction = (mensagem) => {
        alert(mensagem);
    }

    arrowFunction("Bem vindo a minha página")

    return (
        <div>
            <h1>Alert com arrow function</h1>
        </div>
    );
}

export default App;

📚 Outros exemplos de utilização

📈 Dobro de 2

const App = () => {

  const dobro = () => numero * 2;

  return <p>O dobro de 2 é {dobro()}.</p> // Mostrará o número 4 na tela🖥️
}

🎉 Mensagem de Boas-Vindas

const App = () => {
  const mensagemBoasVindas = () => "Bem-vindo ao React!";

  return <h1>{mensagemBoasVindas()}</h1>; // Mostrará a mensagem "Bem vindo ao React!" na tela🖥️
}

🧮 Cálculo Simples

const App = () => {
  const calcularSoma = (a, b) => a + b; // Mostrará o número 30 na tag <p></p>  🖥️

  return <p>A soma de 10 e 20 é {calcularSoma(10, 20)}.</p>
}

Importância da Clareza ao Usar Arrow Functions 🧐👩‍💻

Embora as arrow functions ofereçam uma maneira mais simples de escrever funções, é crucial priorizar a clareza e a legibilidade do código. Uma boa prática é garantir que o código seja facilmente compreensível para outros desenvolvedores, incluindo você mesmo no futuro.

Isso significa que, em alguns casos, a expressão de função tradicional pode ser mais apropriada, especialmente se ela tornar o código mais explícito e fácil de entender. Por exemplo, funções mais longas ou complexas podem se beneficiar da sintaxe tradicional.

Por outro lado, as arrow functions brilham em cenários onde a simplicidade é valiosa e o contexto é claro. Elas são particularmente úteis para funções curtas, funções passadas como argumentos, ou quando se declara uma função dentro de outra (funções aninhadas). Nestes casos, a sintaxe enxuta das arrow functions pode tornar o código mais elegante e menos verboso.

// Exemplo de arrow function para uma operação simples
const adicionar = (a, b) => console.log(a + b);

adicionar(2,2) // Mostrará o número 4 no console 🖥️

Agora você está mais preparado(a) para utilizar arrow functions em seus projetos, uma habilidade crucial para um desenvolvimento mais moderno e elegante em JavaScript e React.

Lembre-se, a prática leva à perfeição. Portanto, dedique-se a experimentar com arrow functions, entenda suas nuances, e não tenha medo de integrá-las de maneira criativa e eficiente no seu código!

Bons códigos e vamos para os exercícios! 📚👨‍💻

Exercícios - Clique aqui para praticar!

Próxima matéria - Clique aqui!