Fala Vinicius! Bom dia! Para te responder, preciso de um exemplo mais épico.
Vejamos um exemplo baseado em um problema. Você quer calcular a soma entre dois números e o resultado quer exibir em um alert. Certo? Temos a seguinte função.
function somaDoisNumeros(numero1, numero2) {
var soma = numero1 + numero2;
alert(soma);
}
somaDoisNumeros();
Perfeito, conseguimos o resultado, pois a função somaDoisNumeros
realiza a soma e ainda exibe o alerta. Até ai tudo bem?
Mas, vamos dizer que você precise hora exibir um alerta e outra, por exemplo, enviar um e-mail ou quem sabe um SMS (é claro que o browser não faz isso, mas é algo comum em sistemas).
Você terá que alterar a função somaDoisNumeros
para no lugar de exibir um alerta faça outra coisa. Ou seja, você tem dentro de uma mesma função a responsabilidade de realizar a lógica do cálculo e a saída desse resultado. Isso gera problemas de manutenção e evita que sua função somaDoisNumeros
seja utilizada por outros sistemas.
Agora, se fizemos assim:
function somaDoisNumeros(numero1, numero2) {
var soma = numero1 + numero2;
return soma;
}
// resultado guarda o mesmo valor de soma aqui!
var resultado = somaDoisNumeros();
alert(resultado);
document.write(resultado);
// posso enviar o resultado via SMS, impressora, seja lá o que for
Agora, sua função somaDoisNumeros
só faz exatamente o que seu nome diz, ela soma dois números e só. Quem chamar a função usa seu retorno, ou seja, o resultado da função que foi calculado dentro dela e faz o que quiser com o retorno.
Então, o return
é importante dentro de uma função para que, depois de você executar sua lógica seja simples ou complexa ela seja acessível para quem chamou a função. Quem pegar o resultado faz o que quiser com ele. Sendo assim, somaDoisNumeros
pode ser usada em todo lugar que você quiser somarDoisNumeros.
Por fim, uma função deve ter apenas uma funcionalidade (por isso é função). Para conseguirmos funcionalidades maiores, vamos combinando essas pequenas funções entre si.
Ajudei ou só compliquei?