Funções JavaScript. Parte 7 Curso de JavaScript do Iniciante ao Avançado em 10 postagens de blog

Esta é a parte 7 da série de postagens do blog sobre JavaScript que o levará do nível iniciante ao avançado. Ao final desta série, você conhecerá todos os conceitos básicos que precisa saber para começar a programar em JavaScript. Sem mais delongas, vamos começar com o sétimo tutorial.

Funções JavaScript – índice:

1. Tipos de funções JavaScript
2. Funções puras em JavaScript

Até agora, vimos aspectos bastante importantes do JavaScript, juntamente com algumas das melhores práticas de codificação mais comuns que devemos seguir. Essas chamadas práticas existem por um motivo e, à medida que as utilizamos, elas nos pouparão muitos erros e frustrações que enfrentaríamos de outra forma. Uma das melhores práticas que vimos foi seguir o princípio DRY, que basicamente dizia: Não se Repita. Uma maneira de aplicarmos esse princípio foi usar loops em nosso programa, mais especificamente “loops for” que nos economizaram muito tempo e código. Neste tutorial, veremos outro bloco de construção importante na programação, e ele é chamado de “funções”.

Tipos de funções JavaScript

Funções são extremamente comuns na programação, e isso inclui o JavaScript também. Na verdade, elas são tão comuns que alguns frameworks JavaScript, como o React, foram construídos em torno da utilização de funções JavaScript como um bloco de construção fundamental para criar a interface de sites. E eles fizeram isso por um bom motivo. Funções JavaScript oferecem alta flexibilidade, ao mesmo tempo que proporcionam um código altamente previsível e modular. E isso resulta em um código muito mais claro, com menos repetições e muito menos erros. Uma das primeiras coisas que você deve saber sobre funções é que existem dois tipos principais de funções. Elas são chamadas de “funções puras” e “funções impuras”. De modo geral, queremos usar funções puras sempre que pudermos, tanto quanto possível. Funções puras oferecem várias vantagens que as tornam muito mais fáceis de trabalhar em comparação com funções impuras. Vamos ver primeiro as funções puras em JavaScript e depois mergulhar nas funções impuras também.

Funções puras em JavaScript

Funções puras são essencialmente funções que seguem certas regras. E porque elas seguem essas regras, são altamente previsíveis, mais fáceis de depurar em um sistema maior, modulares, juntamente com algumas outras vantagens.

Uma função pura recebe alguma entrada e retorna alguma saída. Ela não modifica as entradas diretamente e não interage com o ambiente de nenhuma outra maneira. Dito isso, ela não envia alertas, não fornece uma declaração enquanto faz outra coisa, e não interage com seu ambiente de nenhuma outra maneira.

Dessa forma, quando você está trabalhando com uma função pura, sabe que não importa onde você esteja executando seu código ou quando você o estiver executando, desde que forneça as mesmas entradas, você obterá as mesmas saídas. Vamos ver isso com alguns exemplos.

// dobra o número inicial
function double(num){
    return num * 2;
}

// triplica o número inicial
function triple(num){
    return num * 3;
}

// adiciona 100 ao número inicial
function add100(num){
    return num + 100;
}

// adiciona dois números
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiplica dois números
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Todas as funções JavaScript acima são funções puras. Ao olhar mais de perto, você pode ter visto o padrão que usamos ao criar funções puras. O primeiro passo é escrever a palavra-chave “function” para dizer ao JavaScript que queremos definir uma função.

Em seguida, damos um nome à função, preferencialmente esse nome deve ser curto, mas descritivo o suficiente para que alguém que venha a entender o que a função está fazendo. Por exemplo, se estamos adicionando 100 a um número, podemos nomear a função como “add100”, se estamos dobrando um número, podemos nomear a função como “double” e assim por diante.

Uma vez que nomeamos a função de forma apropriada, o próximo passo é dar a ela algumas entradas. Fornecemos as entradas dentro de parênteses e, se tivermos várias entradas, as separamos com uma vírgula. Assim como fizemos na função “multiplyTwoNums”. (Além disso, como uma observação, números são comumente referidos como “nums” para abreviar na programação, então, ao nomear uma função, podemos usar esse conhecimento comum para ter nomes de funções curtos, mas descritivos.)

As entradas que fornecemos à função também são comumente referidas como “parâmetros”, quando criamos as funções JavaScript, decidimos quantos parâmetros a função terá. Quando decidimos usar a função, fornecemos esses parâmetros com “valores”. Esses valores que fornecemos ao usar a função também são comumente referidos como “argumentos”. Portanto, quando fornecemos uma entrada para a função, esse processo também é referido como “passar argumentos” para uma função. Vamos ver alguns exemplos disso.

// primeiro vamos definir a função que recebe um número 
// e o multiplica por 10
function multiplyBy10(num1){
    return num1 * 10;
}

// agora vamos chamar essa função
// salvar o resultado em uma constante
// e exibir os resultados
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 aqui é o parâmetro.
// passamos o valor 3 como um argumento para a função.
// salvamos os resultados da função
// em uma constante chamada bigNum.
// exibimos a constante chamada bigNum para o usuário.

Como você viu no código acima, mesmo quando queremos exibir algo para o usuário, mantemos a função separada da função de alerta. Se fôssemos exibir os resultados para o usuário dentro da função, isso exigiria que a função interagisse com outras partes do computador e tornaria nossa função impura. Portanto, de modo geral, queremos usar as funções para dar a elas entradas e esperar um valor retornado. Quando obtemos esse valor retornado, então podemos realmente exibi-lo ou realizar outras funções JavaScript com ele, dependendo de nossas necessidades, mas o ponto é manter as preocupações de exibir os resultados e calcular os resultados separadamente.

Até agora, vimos que podemos usar a palavra-chave “function” para começar a declarar a função, então nomeamos a função de forma apropriada, depois abrimos e fechamos parênteses e dizemos à função quais parâmetros ela precisará, em seguida, abrimos chaves e dizemos à função o que queremos que ela faça, uma vez que chegamos a um resultado, retornamos esse resultado com a palavra-chave “return”. E então fechamos as chaves. Todos esses passos foram necessários para definir uma função pura. Agora que temos uma função, podemos usar uma função em outras partes do nosso programa. Usar uma função é comumente referido como “chamar uma função”.

Chamar uma função é muito mais simples do que declarar a função. Para chamar uma função, podemos usar seu nome, abrir parênteses, passar alguns argumentos e fechar os parênteses. Quando fazemos isso, a função nos retornará o valor de retorno que definimos. Dependendo do que queremos fazer com esse valor retornado, podemos atribuí-lo a uma variável ou constante, podemos realizar ainda mais cálculos com ele, podemos enviá-lo para outros computadores ou podemos exibir os resultados diretamente também. Vamos ver alguns exemplos disso.

// vamos começar com uma função que recebe dois argumentos
// multiplica-os e retorna o resultado.
// podemos ou retornar diretamente o resultado,
// ou podemos criar temporariamente uma constante 
// e retornar essa constante também.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// as duas funções acima nos darão o mesmo resultado
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// podemos verificar a igualdade dos resultados das funções 
// com outra função
function checkEquality(number1, number2){
    return number1 === number2;
// se os resultados de ambas as funções forem os mesmos,
// a função checkEquality retornará "true" 
// como um tipo de dado booleano
const isEqual = checkEquality(result1, result2);
// agora podemos usar esse valor booleano para exibir uma mensagem
if (isEqual){
    alert("Ambos dão o mesmo resultado!");
} else {
   alert("Eles não são a mesma coisa!");
}

Executar o código acima no Chrome Snippets nos daria o seguinte resultado:

Até agora, trabalhamos com funções puras, e isso é geralmente o que buscamos codificar na maior parte do tempo. Mas isso não significa que você trabalhará apenas com funções puras. Uma vez que você tenha uma compreensão das funções puras, funções impuras são relativamente mais fáceis. Quando definimos uma função, ou declaramos uma função, após usar o nome da função, na verdade não precisamos passar nenhum parâmetro para ela. Nesse caso, deixaremos os parênteses vazios, também não precisamos retornar algo da função.

Ainda mais, uma vez que podemos escrever qualquer código dentro das chaves de uma função, podemos interagir com o mundo exterior, enviar e receber dados, modificar dados existentes, exibir alertas e assim por diante. Fazer tudo isso não é proibido, e adicionar declarações console.log durante o processo de desenvolvimento do código pode ser realmente útil. É por isso que não nos afastamos diretamente de funções impuras, mas como elas podem causar muita fricção e erros no código, incluindo tornar seu código mais difícil de testar, buscaremos separar tarefas em funções JavaScript puras tanto quanto possível. Mesmo quando usamos para tornar nossas funções impuras, adicionando alertas ou declarações console.log, geralmente queremos removê-las do nosso código, seja deletando-as ou comentando-as.

Vamos ver alguns exemplos disso.

// cumprimentar o usuário com uma função impura
// não recebe argumentos e não retorna nada
// também interage com o mundo exterior ao 
// exibir um alerta
function greet(){
    alert("Olá Usuário!");
}
// note que os resultados não serão exibidos 
// a menos que chamemos a função
greet();
// fazer alguns cálculos e registrar no console
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// isso mostrará o resultado no console JavaScript que temos abaixo
// O console que acabamos de usar é amplamente utilizado na programação
// incluindo no JavaScript.
// declarações console.log podem ser realmente úteis 
// para dizer o que está acontecendo dentro do seu programa
// dessa forma, se algo inesperado acontecer 
// você pode ver exatamente onde e quando isso acontece
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("O primeiro número é " + num1);
    console.log("O segundo número é " + num2);
    const result = num1 * num2;
    console.log("A multiplicação resultante é " + result);
}

// vamos chamar a função acima com dois números que escolhemos
// e verificar nosso console JavaScript para os logs
multiplyTwoNums(5, 7);

Executar o código acima resultaria no seguinte:

Como você pode ver na saída, temos a declaração de alerta exibida de dentro da primeira função que executamos. Temos o número resultante de 49 registrado no console JavaScript. Logo depois, temos uma saída mais detalhada no console sobre a terceira função. Fazer declarações console.log é bastante comum na programação, dependendo da linguagem de programação que você usa, o nome exato pode mudar, mas a ideia permanece a mesma. Com declarações console.log, podemos dar uma olhada interna em nosso programa e entender nosso código melhor. Esta é uma ferramenta especialmente útil quando algo dá errado em seu programa e você tenta descobrir onde exatamente cometeu um erro.

No próximo tutorial, veremos outro tópico importante em JavaScript chamado objetos. Antes de passar para o próximo tutorial, é uma boa ideia revisar esta parte mais uma vez para que os conceitos se fixem. Eu também recomendo fortemente digitar os exemplos que trabalhamos e experimentá-los em primeira mão. Quando você estiver pronto, continuaremos com os objetos em JavaScript no próximo tutorial.