Javascript: guia sobre funções

Neste tutorial, você aprenderá como criar e chamar uma função em JavaScript.

O que é uma função?

Uma função é um conjunto de declarações que realizam tarefas específicas e podem ser mantidas separadamente do programa principal. As funções oferecem uma maneira de criar pacotes de código reutilizáveis que são mais portáteis e fáceis de depurar. Alguns benefícios de usar funções incluem:

• Redução da repetição de código em um programa – As funções permitem que você extraia o bloco de código comumente usado em uma única componente. Agora, você pode realizar a mesma tarefa chamando essa função onde quiser no seu script sem precisar copiar e colar o mesmo bloco de código repetidamente.
• Facilitação da manutenção do código – Como uma função criada uma vez pode ser usada várias vezes, qualquer alteração feita dentro de uma função é implementada automaticamente em todos os lugares sem afetar vários arquivos.
• Facilitação da eliminação de erros – Quando o programa é dividido em funções, se ocorrer algum erro, você saberá exatamente qual função está causando o erro e onde encontrá-la, tornando a correção de erros mais fácil.

A seção a seguir mostrará como criar e chamar funções em seus scripts.

Definindo e chamando uma função

A declaração de uma função começa com a palavra-chave function, seguida pelo nome da função que você deseja criar, seguido por parênteses () e, finalmente, coloque o código da sua função entre chaves {}. Aqui está a sintaxe básica para declarar uma função:

function funcaoNome() {
    // Código a ser executado
}

Aqui está um exemplo de uma função simples que gera uma mensagem de saudação:

// Definindo função
function dizerOla() {
alert("Olá, bem-vindo ao nosso site!");
}
// Chamando função
dizerOla(); // Saída: Olá, bem-vindo ao nosso site!

Depois que uma função é definida, ela pode ser invocada (chamada) de qualquer lugar no documento digitando seu nome seguido por um conjunto de parênteses, como sayHello() no exemplo acima.

Nota: O nome da função deve começar com uma letra ou sublinhado, não um número, e você pode escolher mais letras, números ou sublinhados depois dele. Os nomes das funções diferenciam maiúsculas de minúsculas, assim como os nomes das variáveis.

Adicionar parâmetros às funções

Você pode especificar parâmetros ao definir sua função para aceitar valores de entrada em tempo de execução. Os parâmetros funcionam como variáveis reservadas em uma função; eles são substituídos em tempo de execução pelos valores (chamados de argumentos) fornecidos à função no momento da chamada.

Os parâmetros são definidos na primeira linha da função dentro do par de parênteses, assim:

function nomeDaFuncao(parametro1, parametro2, etc.) {
// Código a ser executado
}

A função displaySum() no exemplo a seguir usa dois números como argumentos e simplesmente os adiciona e exibe o resultado no navegador.

// Definindo função
function exibirSoma(num1, num2) {
var total = num1 + num2;
alert(total);
}
// Chamando função
exibirSoma(6, 20); // Saída: 26
exibirSoma(-5, 17); // Saída: 12

Você pode definir quantos parâmetros quiser. No entanto, para cada parâmetro especificado, um parâmetro correspondente precisa ser passado para a função quando a função é chamada, caso contrário, seu valor se torna indefinido. Vamos considerar o seguinte exemplo:

function exibirNomeCompleto(nome, sobrenome) {
alert(nome + " " + sobrenome);
}
// Chamando função
exibirNomeCompleto("Peter", "Park"); // Saída: Peter Park
exibirNomeCompleto("João"); // Saída: João undefined

Valores padrão para parâmetros de função ES6

Com ES6, agora você pode especificar valores padrão para parâmetros de função. Isso significa que se a função for chamada sem nenhum argumento, esses valores de argumento padrão serão usados. Este é um dos recursos mais esperados do JavaScript. Aqui está um exemplo:

function dizerOla(nome = 'Visitante') {
alert('Olá, ' + nome);
}
dizerOla(); // Saída: Olá, Visitante
dizerOla('John'); // Saída: Olá, John

Retornar valores de uma função

Uma função pode retornar um valor para o script que chamou a função como resultado usando a instrução return. O valor pode ser de qualquer tipo, incluindo arrays e objetos.

A instrução return geralmente é colocada como a última linha da função antes da chave de fechamento e termina com um ponto e vírgula, conforme mostrado no exemplo abaixo.

// Definindo função
function obterSoma(num1, num2) {
var total = num1 + num2;
return total;
}
// Exibindo valor retornado
alert(obterSoma(6, 20)); // Saída: 26
alert(obterSoma(-5, 17)); // Saída: 12

Uma função não pode retornar vários valores. No entanto, você pode obter resultados semelhantes retornando uma matriz de valores, conforme demonstrado no exemplo abaixo.

// Definindo função
function dividirNumeros(dividendo, divisor){
var quociente = dividendo / divisor;
var arr = [dividendo, divisor, quociente];
return arr;
}
// Armazenando valor retornado em uma variável
var tudo = dividirNumeros(10, 2);
// Exibindo valores individuais
alert(tudo[0]); // Saída: 10
alert(tudo[1]); // Saída: 2
alert(tudo[2]); // Saída: 5

Trabalhando com Expressões de Função

A sintaxe que usamos anteriormente para criar funções é chamada de declaração de função. Há outra sintaxe para criar uma função chamada expressão de função.

// Declaração de função
function obterSoma(num1, num2) {
var total = num1 + num2;
return total;
}
// Expressão de função
var obterSoma = function(num1, num2) {
var total = num1 + num2;
return total;
};

Depois que a expressão de função é armazenada em uma variável, a variável pode ser usada como uma função:

var obterSoma = function(num1, num2) {
var total = num1 + num2;
return total;
};
alert(obterSoma(5, 10)); // Saída: 15
var soma = obterSoma(7, 25);

A sintaxe da declaração da função e da expressão da função são muito semelhantes, mas diferem na forma como são avaliadas. Confira o exemplo a seguir:

declaration(); // Outputs: Olá, eu sou uma declaração de função!
function declaration() {
alert("Olá, eu sou uma declaração de função!");
}
expression(); // Erro: Uncaught TypeError: undefined não é uma função
var expression = function() {
alert("Olá, eu sou uma expressão de função!");
};

Como você pode ver no exemplo acima, a expressão da função lançou uma exceção quando foi invocada antes de ser definida, mas a declaração da função foi executada com sucesso.

A declaração de função é avaliada pelo JavaScript antes da execução do programa. Portanto, não importa se o programa chama a função antes de ser definida, pois o JavaScript eleva a função para o topo do escopo atual nos bastidores. A expressão de função não é avaliada até que seja atribuída a uma variável, portanto ainda é indefinida quando invocada.

O ES6 introduziu uma sintaxe ainda mais curta para escrever a expressão de função, que é chamada de função seta. Verifique o capítulo de recursos do JavaScript ES6 para saber mais sobre isso.

Entendendo o escopo da variável

No entanto, você pode declarar variáveis ​​em qualquer lugar no JavaScript. No entanto, a localização da declaração determina a extensão da disponibilidade de uma variável dentro do programa JavaScript, ou seja, onde a variável pode ser usada ou acessada. Essa acessibilidade é conhecida como escopo da variável.

Por padrão, as variáveis ​​declaradas dentro de uma função possuem escopo local, ou seja, não podem ser visualizadas ou manipuladas fora dessa função, como no exemplo abaixo:

// Definindo função
function cumprimentarMundo() {
var cumprimento = "Olá Mundo!";
alert(cumprimento);
}
cumprimentarMundo(); // Saída: Olá Mundo!
alert(cumprimento); // Erro: Uncaught ReferenceError: cumprimento is not defined

No entanto, quaisquer variáveis ​​declaradas em um programa fora de uma função têm escopo global, ou seja, estarão disponíveis para todos os scripts, seja dentro ou fora de uma função. Aqui está um exemplo:

var cumprimento = "Olá Mundo!";
// Definindo função
function cumprimentarMundo() {
alert(cumprimento);
}
cumprimentarMundo(); // Saída: Olá Mundo!
alert(cumprimento); // Saída: Olá Mundo!

Leia também: Javascript: guia sobre laços (loops)