Resumo : neste tutorial, você aprenderá sobre funções JavaScript e como usá-las para estruturar o código em unidades menores e mais reutilizáveis.
Introdução às funções JavaScript
Ao desenvolver um aplicativo, muitas vezes você precisa executar a mesma ação em vários lugares. Por exemplo, você pode querer mostrar uma mensagem sempre que ocorrer um erro.
Para evitar repetir o mesmo código em todos os lugares, você pode usar uma função para agrupar esse código e reutilizá-lo.
JavaScript fornece muitas funções integradas, como parseInt()e parseFloat(). Neste tutorial, você aprenderá como desenvolver funções personalizadas.
Declarar uma função
Para declarar uma função, você usa a functionpalavra-chave, seguida pelo nome da função, uma lista de parâmetros e o corpo da função da seguinte forma:
function functionName(parameters) {
// function body
// ...
}Linguagem de código: JavaScript ( javascript )O nome da função deve ser um identificador JavaScript válido. Por convenção, os nomes das funções estão em camelCase e começam com verbos como getData(), fetchContents()e isValid().
Uma função pode aceitar zero, um ou vários parâmetros. No caso de vários parâmetros, é necessário usar uma vírgula para separar dois parâmetros.
O seguinte declara uma função say()que não aceita nenhum parâmetro:
function say() {
}Linguagem de código: JavaScript ( javascript )O seguinte declara uma função chamada square()que aceita um parâmetro:
function square(a) {
}Linguagem de código: JavaScript ( javascript )O seguinte declara uma função chamada add()que aceita dois parâmetros:
function add(a, b) {
}Linguagem de código: JavaScript ( javascript )Dentro do corpo da função, você pode escrever o código para implementar uma ação. Por exemplo, a say()função a seguir simplesmente mostra uma mensagem ao console:
function say(message) {
console.log(message);
}Linguagem de código: JavaScript ( javascript )No corpo da say()função, chamamos a console.log()função para enviar uma mensagem ao console.
Chamando uma função
Para usar uma função, você precisa chamá-la. Chamar uma função também é conhecido como invocar uma função. Para chamar uma função, você usa seu nome seguido de argumentos entre parênteses como este:
functionName(arguments);Linguagem de código: JavaScript ( javascript )Ao chamar uma função, o JavaScript executa o código dentro do corpo da função. Por exemplo, o seguinte mostra como chamar a say()função:
say('Hello');Linguagem de código: JavaScript ( javascript )Neste exemplo, chamamos a say()função e passamos uma string literal 'Hello'para ela.
Parâmetros vs. Argumentos
Os termos parâmetros e argumentos são frequentemente usados de forma intercambiável. No entanto, eles são essencialmente diferentes.
Ao declarar uma função, você especifica os parâmetros. Porém, ao chamar uma função, você passa os argumentos que correspondem aos parâmetros.
Por exemplo, na say()função, the messageé o parâmetro e a 'Hello'string é um argumento que corresponde ao messageparâmetro.
Retornando um valor
Toda função em JavaScript retorna implicitamente, undefineda menos que você especifique explicitamente um valor de retorno. Por exemplo:
function say(message) {
console.log(message);
}
let result = say('Hello');
console.log('Result:', result);Linguagem de código: JavaScript ( javascript )Saída:
Hello
Result: undefinedLinguagem de código: JavaScript ( javascript )Para especificar um valor de retorno para uma função, você usa a returninstrução seguida por uma expressão ou valor, como este:
return expression;Linguagem de código: JavaScript ( javascript )Por exemplo, a add()função a seguir retorna a soma dos dois argumentos:
function add(a, b) {
return a + b;
}Linguagem de código: JavaScript ( javascript )O seguinte mostra como chamar a add()função:
let sum = add(10, 20);
console.log('Sum:', sum);Linguagem de código: JavaScript ( javascript )Saída:
Sum: 30Linguagem de código: HTTP ( http )O exemplo a seguir usa diversas returninstruções em uma função para retornar valores diferentes com base em condições:
function compare(a, b) {
if (a > b) {
return -1;
} else if (a < b) {
return 1;
}
return 0;
}Linguagem de código: JavaScript ( javascript )A compare()função compara dois valores. Ele retorna:
- -1 se o primeiro argumento for maior que o segundo.
- 1 se o primeiro argumento for menor que o segundo.
- 0 se o primeiro argumento for igual ao segundo.
A função para de ser executada imediatamente quando atinge a returninstrução. Portanto, você pode usar a returninstrução sem valor para sair prematuramente da função, assim:
function say(message) {
// show nothing if the message is empty
if (! message ) {
return;
}
console.log(message);
}Linguagem de código: JavaScript ( javascript )Neste exemplo, se messageestiver em branco (ou undefined), a say()função não mostrará nada.
A função pode retornar um único valor. Se você deseja retornar vários valores de uma função , você precisa compactar esses valores em um array ou objeto.
O objeto de argumentos
Dentro de uma função, você pode acessar um objeto chamado argumentsque representa os argumentos nomeados da função.
O argumentsobjeto se comporta como um array , embora não seja uma instância do tipo Array .
Por exemplo, você pode usar colchetes []para acessar os argumentos: arguments[0]retorna o primeiro argumento, arguments[1]retorna o segundo e assim por diante.
Além disso, você pode usar a lengthpropriedade do argumentsobjeto para determinar o número de argumentos.
O exemplo a seguir implementa uma função genérica add()que calcula a soma de qualquer número de argumentos.
function add() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}Linguagem de código: JavaScript ( javascript )Portanto, você pode passar qualquer número de argumentos para a add()função, assim:
console.log(add(1, 2)); // 3
console.log(add(1, 2, 3, 4, 5)); // 15Linguagem de código: JavaScript ( javascript )Função de içamento
Em JavaScript, você pode usar uma função antes de declará-la. Por exemplo:
showMe(); // a hoisting example
function showMe(){
console.log('an hoisting example');
}Linguagem de código: JavaScript ( javascript )Esse recurso é chamado de içamento .
O içamento de função é um mecanismo pelo qual o mecanismo JavaScript move fisicamente as declarações de função para o topo do código antes de executá-las.
O seguinte mostra a versão do código antes de o mecanismo JavaScript executá-lo:
function showMe(){
console.log('a hoisting example');
}
showMe(); // a hoisting exampleLinguagem de código: JavaScript ( javascript )Resumo
- Use a
functionpalavra-chave para declarar uma função. - Use o
functionName()para chamar uma função. - Todas as funções retornam implicitamente indefinido se não retornarem explicitamente um valor.
- Use a
returninstrução para retornar explicitamente um valor de uma função. - A
argumentsvariável é um objeto semelhante a um array dentro de uma função, representando argumentos de função. - A função hoisting permite chamar uma função antes de declará-la.
