O que são funções JavaScript e Quando usar?
Quando programamos somos levados a pensar de forma algorítmica, formulando passos bem ordenados e finitos para resolver problemas específicos. Isso nos faz codar linha após linha, de tal forma, que se a ordem das linhas mudarem somos levados a obter erros. E essa é uma forma leve de explicar que pode ser chamado de paradigma de programação imperativa.
Esse paradigma atende muitas das necessidades na hora de programar programas simples, mas quando nos deparamos com problemas mais complexos nos deparamos com dificuldades inesperadas.
Podemos adotar o seguinte cenário, um professor precisa calcular a média de seus alunos com base em duas notas. Ao realizar isso para um aluno observamos um cenário simples:
let nome = 'Inglá';
let nota1 = 8.5;
let nota2 = 7.5;
let media = (nota1 + nota2)/2;
console.log(`A média do aluno ${nome} é ${media}`);
// saída: "A média do aluno Inglá é 8"
Entretanto pense em como seria se tivéssemos outro aluno.
let nome = 'Inglá';
let nota1 = 8.5;
let nota2 = 7.5;
let media = (nota1 + nota2)/2;
console.log(`A média do aluno ${nome} é ${media}`);
// saída: "A média do aluno Inglá é 8"
nome = 'Haruo';
nota1 = 8.2;
nota2 = 8.0;
media = (nota1 + nota2)/2;
console.log(`A média do aluno ${nome} é ${media}`);
// saída: "A média do aluno Haruo é 8.1"
Agora imagine uma classe inteira. Apenas imagine, não vou encher a página repetindo o mesmo código dezenas de vezes. Por esse mesmo motivo foi observado que há partes que se repetem e, não por coincidência, a parte dinâmica é o valor das variáveis. A forma de "resolver esse problema" partiu dessa observação e definiu padrões para armazenar um trecho de código e usá-lo com diferentes valores para as variáveis.
Tomando nosso exemplo para explicar isso temos que tudo se mantém, exceto os valores para o nome e para as notas, tornando desnecessário repetir os mesmos comandos várias vezes.
Agora temos conhecimento dos elementos que formam o que chamaremos de função:
- O trecho de código que se repete;
- Valores que irão mudar a cada execução;
- Valor que se pretende obter com a execução.
Para o primeiro temos o corpo da função, para o segundo temos os parâmetros e por fim temos o retorno. O único elemento que não está aqui é o nome da função, afinal, temos que saber como acessar esse trecho de código.
Mas como isso fica no JavaScript?
function nomeDaFuncao(parametro, outroParametro) {
// corpo da função
return retornoDaFuncao
}
Acima podemos observar que ao inicio temos uma palavra reservada do JS 'function', que é necessária para deixar claro que estamos criando uma função.
Agora vamos definir a função para nosso exemplo:
function calcularMedia(nota1, nota2) {
let media = (nota1 + nota2)/2;
return media;
}
let nome = 'Felipão';
let media = calcularMedia(8.2, 8.0);
console.log(`A média do aluno ${nome} é ${media}`);
// saída: "A média do aluno Felipão é 8.1"
Calma, calma. Eu sei que parece que agora parece mais complexo, mas voltemos ao nosso problema anterior e adicionemos outro aluno:
function calcularMedia(nota1, nota2) {
let media = (nota1 + nota2)/2;
return media;
}
let nome = 'Felipão';
let media = calcularMedia(8.2, 8.0);
console.log(`A média do aluno ${nome} é ${media}`);
let nome = 'Juliana';
let media = calcularMedia(8.5, 9.5);
console.log(`A média do aluno ${nome} é ${media}`);
// saída: "A média do aluno Felipão é 8.1"
// saída: "A média da aluna Juliana é 9.0"
Ao adicionar outro aluno temos uma quantidade menor de linhas adicionadas e isso se mostra realmente útil quando usamos loops em grandes quantidades de dados, como a no caso de aplicar à uma classe inteira, ou em uma escola. Com isso temos claro o uso das funções em JavaScript.
Para concluir, deixo a dica de que a melhor escolha para usar funções é em tarefas que se repetem no código e que geralmente podem ser descritas por um verbo, é ainda recomendado que funções não ultrapassem mais que 20 linhas, caso contrário é provável que esta se divida ainda em outra função. Mas vale ressaltar que cada caso é um caso e cabe ao programador (você) decidir quando usar a função. Boa sorte! e deixo aqui uma versão levemente otimizada do nosso código, afinal: "Falar é fácil, mostre-me o código" by Linus Torvalds.
function calcularMedia(nota1, nota2) {
let media = (nota1 + nota2)/2;
return media;
}
function exibirMedia(nome, nota1, nota2) {
let media = calcularMedia(nota1, nota2); // Sim, podemos chamar uma função dentro de outra função
console.log(`A média do aluno ${nome} é ${media}`);
}
// Agora precisamos adicionar apenas uma linha para cada novo aluno
exibirMedia('Juliana', 8.5, 9.5);
exibirMedia('Felipão', 8.0, 7.5);
exibirMedia('Haruo', 8.0, 8.5);
exibirMedia('Inglá', 9.5, 10.0);
/* Saída:
"A média do aluno Juliana é 9"
"A média do aluno Felipão é 7.75"
"A média do aluno Haruo é 8.25"
"A média do aluno Inglá é 9.75"
*/
