Diferença entre Function Convencional e Arrow Function
Em JavaScript, a finalidade da arrow function é criar funções de forma menor e mais simples para o programador, apesar
que possa gerar dúvidas no início da sua utilização. Outra utilização das Arrow Funcitoons é sobre o escopo que uma variável
this possui e isso será explicado ao final do artigo.
Um compartivo de como Arrow Functions atua, está no código abaixo vs uma declaração de função convencional:
Na linha 2 é declarado uma função em que recebe dois valores por parâmetros a e b.
O retorno da função ocorre após uma soma entre os dois valores recebidos.
No caso da Arrow Function ela é declarada na linha 6 e o conteúdo dessa função
é armazenada numa constante chamada, nesse caso, de soma.
Observe que o operador => indica que se trata de uma Arrow Function
e o retorno da função ocorrerá depois desse comando.
Se a função não tivesse parâmetros os sinais dos parênteses seriam vazios ().
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Apresentar Nome com Arrow Function</title>
</head>
<body>
<label>Digite o seu nome:</label><br>
<input type="text" id="nome"><br><br>
<button onclick="apresentarNome()">Mostrar nome</button>
<script>
const apresentarNome = () => {
const nomeUsuario = document.getElementById("nome").value;
alert("O nome digitado foi: " + nomeUsuario);
};
</script>
</body>
</html>