English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico do JavaScript

Objeto JavaScript

Função JavaScript

DOM HTML JS

BOM do navegador JS

Tutorial básico de AJAX

Manual de referência do JavaScript

Definição de Função do JavaScript

As funções permitem que você defina um bloco de código, dê a ele um nome e execute-o repetidamente conforme necessário.

Você pode definir uma função usando a palavra-chave function ou executar uma função usando o operador ()

Declaração de função

No início deste tutorial, você aprendeu a usar a seguinte sintaxeDeclaraçãoFunção:

function nameOfFunction(parameters) {
  // Instruções a serem executadas
}

As funções declaradas não são executadas imediatamente. As funções declaradas são apenas nomes de função e especificam as operações a serem executadas quando a função for chamada.

function greet() {}}
   document.write("Hello, World!");
}
Teste e veja‹/›

No exemplo acima, já declaramos (definimos) uma função chamada greet que imprime uma mensagem 'Hello, World!'. Pode ser chamada usando o operador () como greet().

Expressão de Função

O JavaScript permite que atribuamos funções a variáveis e, em seguida, usemos essas variáveis como funções. Isso é conhecido comoExpressão de Função

//Expressões de função podem ser armazenadas em variáveis
var sum = function(a, b) {
return a + b;
);
// Essa variável pode ser usada como função
var x = sum(100, 8);
Teste e veja‹/›

A função acima é na verdade umaFunção anônima(Função sem nome).

As funções armazenadas em variáveis não precisam de nome. Sempre use o nome da variável para chamá-las.

A função acima termina com um ponto e vírgula porque é parte de uma instrução executável.

Lifting de função

No início deste tutorial, você aprendeuLifting do JavaScript

O lifting é o comportamento padrão do JavaScript de mover a declaração para o topo do escopo atual.

Portanto, é possível chamar a função antes da declaração do JavaScript:

// Chamada de função antes da declaração
greet();
function greet() {}}
  document.getElementById("output").innerHTML = "Olá Mundo";
}
Teste e veja‹/›

As funções definidas por expressões não são promovidas.

Função anônima auto-executável

Pode-se fazer uma expressão de função "auto-executar".

Auto-execução é uma função JavaScript que é executada imediatamente após sua definição.

Chamada automática (inicialização) de expressões auto-executáveis, sem a necessidade de chamá-las. Também conhecido como IIFE (expressão de função imediatamente invocada).

Se uma expressão de função for seguida por (), a expressão de função será executada automaticamente.

(function () {
  // Instruções a serem executadas
})();
Teste e veja‹/›

Atribuir uma IIFE a uma variável armazenará o valor de retorno da função, não a definição da função em si:

let result = (function () {
let name = "Seagull"; 
return name; 
})(); 
//Criação imediata de saída
result;   // "Seagull"
Teste e veja‹/›

O seguinte exemplo demonstra como passar parâmetros para uma IIFE (expressão de função imediatamente invocada):

(function (x, y) {
  document.getElementById("output").innerHTML = x + y;
})(5, 10);
Teste e veja‹/›

Função de callback

Uma função de callback é uma função passada como parâmetro para outra função, que é chamada dentro da função externa para completar algum procedimento ou operação.

function greet(name) {
  alert("Olá " + name);
}
function processInput(callback) {
  let name = prompt("Por favor, insira seu nome:");
  callback(name);
}
// Passando a função greet para a função processInput como um argumento
processInput(greet);
Teste e veja‹/›

O exemplo acima é um callback síncrono, pois ele será executado imediatamente.

No entanto, callbacks são geralmente usados para continuar a execução do código após a conclusão de operações assíncronas.

Recursão

Recursão é uma técnica de operação iterativa, que consiste em chamar a função repetidamente até obter o resultado.

A seguinte exemplo usa recursão para obter o fatorial de um número:

var fatorial = function(number) {
  if (number <= 0) {
 return 1;
  } else {
 return (number * fatorial(number - 1));
  }
);
document.getElementById("output").innerHTML = factorial(5);
Teste e veja‹/›

Função de Seta

Até agora, já introduzimos como usar a palavra-chave function para definir uma função.

Mas, desde ECMAScript 6A partir de agora, há uma maneira mais atualizada e mais concisa de definir uma chamadaFunção de SetaExpressãoFunção

Conhecido por todos,Função de SetaUsar um sinal de igualdade seguido de um sinal de maior para representar: =>.

//Expressão de Função
var sum = function(x, y) {
   return x + y;
}
// Função de Seta
const sum = (x, y) => x + y;
Teste e veja‹/›

As funções de seta não têm seu próprio this. Elas não são adequadas para definirMétodo do Objeto

As funções de seta não são promovidas. Elas devem ser definidas primeiro,E então useElas.

Usar const é mais seguro do que usar var, porque a expressão de função sempre é constante.

Se a função for uma única sentença, o palavra-chave return e os chavetas podem ser omitidos. Portanto, é uma boa prática mantê-los sempre.

Somente quando a função é uma única sentença, o palavra-chave return e os chavetas podem ser omitidos. Portanto, é uma boa prática mantê-los sempre.

const sum = (x, y) => { return x + y };
Teste e veja‹/›