Funções JavaScript. Parte 7 Curso de JavaScript do iniciante ao avançado em 10 postagens no blog

Funções JavaScript – índice:

1. Funções JavaScript – informações básicas
2. Funções puras

Até agora, vimos aspectos importantes do JavaScript, juntamente com algumas das práticas recomendadas de codificação mais comuns que devemos seguir. Essas chamadas práticas existem por um motivo e, à medida que as usamos, 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 "for loops" nos economizou muito tempo e código. Neste tutorial veremos outro bloco de construção importante na programação, e é chamado de “funções”.

Funções JavaScript – informações básicas

As funções são extremamente comuns na programação, e isso inclui JavaScript também. Na verdade, eles são tão comuns que alguns frameworks JavaScript, como o React, foram construídos em torno do aproveitamento das funções JavaScript como um bloco de construção fundamental para criar o front-end dos sites. E eles fizeram isso por um bom motivo. As funções JavaScript fornecem uma alta flexibilidade, ao mesmo tempo em que fornecem código altamente previsível e modular. E isso resulta em um código muito 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. Eles são chamados de “funções puras” e “funções impuras”. De um modo geral, vamos querer usar funções puras onde pudermos, tanto quanto possível. As funções puras oferecem várias vantagens que as tornam muito mais fáceis de trabalhar em comparação com as funções impuras. Vamos ver as funções JavaScript puras primeiro e depois mergulhar nas funções impuras também.

Funções puras

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

Uma função pura recebe alguma entrada e retorna e alguma saída. Ele não modifica as entradas diretamente ou não interage com o ambiente de nenhuma outra forma. Dito isso, ele não envia alertas, não fornece uma declaração enquanto faz outra coisa ou 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 está executando seu código ou quando está executando seu código, contanto que forneça as mesmas entradas, obterá as mesmas saídas. Vamos ver isso com alguns exemplos.

// double the initial number
function double(num){
    return num * 2;
}

// triple the initial number
function triple(num){
    return num * 3;
}

// add 100 to the initial number
function add100(num){
    return num + 100;
}

// add two numbers
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiply two numbers
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Todas as funções javascript acima são funções puras. Olhando 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, de preferência esse nome deve ser curto, mas descritivo o suficiente para que alguém entenda 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 apropriadamente, o próximo passo é fornecer algumas entradas. Fornecemos as entradas entre 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 nota lateral, os números são comumente chamados de “nums” para abreviar na programação, portanto, quando estamos nomeando uma função, podemos usar esse conhecimento comum para ter nomes de funções curtos, mas descritivos.)

As entradas que fornecemos para a função também são comumente chamadas de “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 chamados de “argumentos”. Portanto, quando fornecemos uma entrada para a função, esse processo também é chamado de “passar argumentos” para uma função. Vejamos alguns exemplos disso.

// first let's define the function that takes a number 
// and multiplies it by 10
function multiplyBy10(num1){
    return num1 * 10;
}

// now let's call that function
// save the result into a constant
// and display the results
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 is here is the parameter.
// we passed the value 3 as an argument to the function.
// we saved the results of the function
// to a constant called bigNum.
// we displayed the constant called bigNum to the user.

Como você viu no código acima, mesmo quando queremos mostrar algo para o usuário, mantemos a função separada da função alert. 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. Então, de um modo geral, queremos usar as funções para fornecer entrada e esperar um valor retornado. Quando obtemos esse valor retornado, podemos realmente exibi-lo ou executar outras funções javascript com ele dependendo de nossas necessidades, mas o ponto é que mantenhamos as preocupações de exibir os resultados e calcular os resultados separadamente.

Então, até agora vimos que podemos usar a palavra-chave “function” para começar a declarar a função, então nomeamos a função apropriadamente, então abrimos e fechamos parênteses e informamos à função os parâmetros que ela exigirá, então abrimos chaves e dizer à 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. todas essas etapas foram necessárias 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 fizermos isso, a função nos retornará o valor de retorno que definimos. Dependendo do que queremos realizar 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 também podemos exibir diretamente os resultados. Vejamos alguns exemplos disso.

// let's start with a function that takes two arguments
// multiplies them and return the result.
// we can either directly return the result,
// or we can temporarily create a constant 
// and return that constant as well.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// two functions above will give us the exact same result
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// we can check the equality of the function results 
// with another function
function checkEquality(number1, number2){
    return number1 === number2;
// if the results of both functions are the same,
// the checkEquality function will return "true" 
// as a boolean data type
const isEqual = checkEquality(result1, result2);
// now we can use that boolean value to display a message
if (isEqual){
    alert("Both give the same result!");
} else {
   alert("They are not the same thing!");
}

A execução do código acima no Chrome Snippets nos daria o seguinte resultado:

Até agora, trabalhamos com funções puras, e geralmente é isso que pretendemos 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, as funções impuras são relativamente mais fáceis. Quando definimos uma função, ou declaramos uma função, depois de usar o nome da função, na verdade não precisamos passar nenhum parâmetro. Nesse caso, deixaremos os parênteses vazios, também não precisamos retornar algo da função.

Ainda mais, como podemos escrever qualquer código dentro dos parênteses curvos 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 instruções console.log durante o processo de desenvolvimento de código pode ser realmente útil. É por isso que não nos afastamos diretamente de funções impuras, mas como elas podem causar muitos atritos e erros no código, inclusive tornando seu código mais difícil de testar, tentaremos separar as tarefas em funções javascript puras o máximo possível. Mesmo quando usamos para tornar nossas funções impuras adicionando instruções alert ou console.log, geralmente queremos removê-las de nosso código, excluindo-as ou comentando-as.

Vejamos alguns exemplos disso.

// greet user with an impure function
// it takes no arguments and gives no return
// it also interacts with the outside world by 
// displaying an alert
function greet(){
    alert("Hello User!");
}
// note that the results will not show 
// unless we call the function
greet();
// make some calculations and console log them
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// this will show the result in the JavaScript console we have below
// The console we just used is highly used in programming
// including in JavaScript.
// console.log statements can be really helpful 
// in telling you what is happening inside your program
// this way if something unexpected happens 
// you can see exactly where and when it happens
squareNum(7);
function multiplyTwoNums(num1, num1){
    console.log("First number is " + num1);
    console.log("Second number is " + num2);
    const result = num1 * num2;
    console.log("The resulting multiplication is " + result);
}

// lets call the function above with two numbers we choose
// and check our JavaScript console for console logs
multiplyTwoNums(5, 7);

A execução do código acima resultaria no seguinte:

Como você pode ver na saída, temos a instrução alert sendo exibida dentro da primeira função que executamos. Temos o número resultante de 49 desconectados no console JavaScript. Logo em seguida, temos uma saída mais detalhada no console sobre a terceira função. Fazer instruçõ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 continua a mesma. Com instruções console.log, podemos dar uma olhada em nosso programa e entender melhor nosso código. Esta é uma ferramenta especialmente útil quando algo dá errado em seu programa e você tenta descobrir onde exatamente você 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 sejam absorvidos. Eu também recomendo digitar os exemplos em que trabalhamos e experimentá-los em primeira mão. Quando estiver pronto, continuaremos com os objetos em JavaScript no próximo tutorial.

Autor: Robert Whitney

Especialista e instrutor em JavaScript que treina departamentos de TI. Seu principal objetivo é aumentar a produtividade da equipe, ensinando outras pessoas a cooperar efetivamente durante a codificação.

Ver todas as postagens

Curso de JavaScript do iniciante ao avançado em 10 posts:

1. Como começar a codificar em JavaScript?
2. Noções básicas de JavaScript
3. Variáveis ​​e diferentes tipos de dados em JavaScript
4. Trechos e estruturas de controle
5. loops while e loops for
6. Matriz Java
7. Funções JavaScript
8. Objetos JavaScript
9. Métodos JavaScript e muito mais
10. Resumo do curso de JavaScript