Javascript - Funções

DanTheLion · 21 de Setembro de 2022

O que é uma função?

Função em Javascript é um conjunto de comandos encapsulados que podem ser executados através de um único comando. Funções são extremamente úteis para realizar diversas tarefas que precisam ser realizadas diversas vezes no código.

Como utilizar função?

A sintaxe para fazer uma função é o seguinte:

Javascript:

function nome_da_funcao (param1, param2...) {
    // código da função
}

Primeiro, utiliza-se a palavra-chave function, depois o nome da sua função (deve conter apenas letras, números e sublinhados _, o nome da função não deve começar com um número), depois os parâmetros (também chamados de argumentos) da função entre parênteses - os parâmetros são valores que queremos passar à nossa função a fim de utilizá-las para a execução do código dentro do escopo da função. E, por fim, um código dentro de um escopo. Vejamos um exemplo de função:

Javascript:

function dizerAlgo (algo) {
    console.log(algo);
}

dizerAlgo("Hello world!");

// Saída: "Hello world!"

A função que foi criada no exemplo é chamada de dizerAlgo. Ela possui um parâmetro com nome algo. Em seu escopo, é chamado um console.log para exibir um valor que é passado no parâmetro algo na tela. Assim que a função é declarada, ela é declarada logo a seguir, escrevendo seu nome e depois um valor que é passado conforme definido anteriormente por parâmetro.

Quando esse código é executado, o texto "Hello world!" é exibido na tela. Isso porque o valor do parâmetro algo que foi passado pelo programador é "Hello world!". Se houvesse mais parâmetros, o programador deve passar também valores a esses parâmetros extras. Por exemplo:

Javascript:

function funcao1 (param1) {
    console.log(param1);
}

function funcao2 (param1, param2) {
    console.log(param1, param2);
}

funcao1("Opa!");
funcao2("Opa!", "Beleza?");

// Saída:
// "Opa!"
// "Opa!"
// "Beleza?"

Caso você não especifique pelo menos um dos parâmetros que lhe resta passar na função ou passar mais parâmetros do que deveria, o programa vai dar erro avisando que na tal linha de código onde foi chamada tal função esperava uma quantidade X de parâmetros mas encontrou Y.

É possível tornar esses parâmetros opcionais apenas dando a elas um valor padrão. Se tal parâmetro não for especificado na chamada de sua função, o valor padrão passado à ela será usado na execução do código da função. Veja no exemplo como isso é feito:

Javascript:

function mostrar_numero (numero = 0) {
    console.log(numero);
}

mostrar_numero();

mostrar_numero(16);

mostrar_numero(3.1415);

// Saída:
// 0
// 16
// 3.1415

Ao definir os parâmetros, você atribui ao parâmetro um valor assim como se estivesse atribuindo um valor a uma variável. Afinal, o parâmetro é como se fosse uma variável que funciona dentro daquela função.

Funções retornando valores

As funções podem nos dar resultados como as variáveis retornam seus valores conforme nós as chamamos, e podemos definir o valor que queremos com base no fluxo do código de sua função.

Para que elas "retornem" valores, utilizamos a palavra-chave return. O comando return, além de retornar valores, eles se comportam como se fosse o fim da execução da função, fazendo com que o resto do código depois dele fosse descartado. Veja um exemplo:

Javascript:

function isEven (number) {
    if (number % 2 === 0) {
        return true;
    }
   
    return false;
}

console.log(isEven(3));
console.log(isEven(4));

// Saída:
// false
// true

Primeiro vem o comando return, depois o valor que se deseja retornar. Assim que a função é chamada para ser exibida na tela, o valor retornado na primeira chamada da função cujo o valor do parâmetro é 3, com isso, a execução do código fez com que seja executado o return true dentro do escopo do if.

Veja mais alguns exemplos de aplicações de function com return:

Javascript:

function celsius_to_fahrenheit (celsius) {
    return (celsius * 9 / 5) + 32;
}

function greetings (name = "") {
    let newName = name.toUpperCase();
   
    return "Olá, " + newName + "!";
}

Diante desses exemplos, é possível fazer expressões matemáticas na linha do comando return e também é possível declarar variáveis dentro de function.

Funções Recursivas

Você sabia que funções podem chamar elas mesmas? Essas são chamadas funções recursivas onde a função é chamada no escopo de seu próprio código. Veja um exemplo a seguir:

Javascript:

function contagem_regressiva (contagem) {
    if (contagem < 0) {
        return;
    }
       
    console.log(contagem);
    contagem_regressiva(contagem - 1);
}

contagem_regressiva(5);

// Saída:
// 5
// 4
// 3
// 2
// 1
// 0

Neste exemplo, é feito uma contagem regressiva, exibindo os números na tela. Perceba que no comando if, caso o valor do parâmetro for menor que zero, é retornado um valor vazio, indicando apenas que a execução daquela função se encerra ali, do contrário, o código do if é ignorado é executado o que vem a seguir. Depois é exibido o valor atual da variável contagem e logo a seguir é chamada a própria função onde é passado o valor do parâmetro contagem subtraído em 1. Veja a seguir como o código do exemplo acima se comporta.

Chame a função contagem_regressiva passando para o parâmetro contagem o valor 5;
1. O valor da contagem que é 5 é menor que 0? Não, passe para o próximo código.
2. Exibe o valor de contagem na tela;
3. Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1.
  1. O valor da contagem que é 4 é menor que 0? Não, passe para o próximo código.
  2. Exibe o valor de contagem na tela;
  3. Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1;
    1. O valor da contagem que é 3 é menor que 0? Não, passe para o próximo código.
    2. Exibe o valor de contagem na tela;
    3. Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1;
      1. O valor da contagem que é 2 é menor que 0? Não, passe para o próximo código.
      2. Exibe o valor de contagem na tela;
      3. Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1;
        
        O valor da contagem que é 1 é menor que 0? Não, passe para o próximo código.
        
        Exibe o valor de contagem na tela;
        
        Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1;
        
        O valor da contagem que é 0 é menor que 0? Não, passe para o próximo código.
        
        Exibe o valor de contagem na tela;
        
        Chame a função contagem_regressiva passando para o parâmetro contagem o valor de contagem - 1;
        
        O valor da contagem que é -1 é menor que 0? Sim, execute o código no escopo de if:
        
        Retorne vazio.
        
        Fim do código, encerre a execução da função.
        
        Fim do código, encerre a execução da função.
      4. Fim do código, encerre a execução da função.
    4. Fim do código, encerre a execução da função.
  4. Fim do código, encerre a execução da função.
4. Fim do código, encerre a execução da função.
Fim do código, encerre a execução da função.

Perceba que, no final do código de cada função chamada, é voltada a execução da função anterior, executando o resto do código que ainda lhe sobra, o que neste exemplo não tinha e foi logo encerrado.

Mais informações:

Funções

Javascript - Funções

DanTheLion