As funções JavaScript são definidas com o Palavra-chave função.
Você pode usar uma declaração de função ou um função expressão.
Anteriormente neste tutorial, você aprendeu que as funções são declaradas com o seguinte sintaxe:
function functionName(parameters) {
// code to be executed
}As funções declaradas não são executadas imediatamente. Eles são "salvos para uso posterior", e serão executados posteriormente, quando forem invocados (chamados).
function myFunction(a, b) {
return a * b;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Ponto e vírgula são usados para separar instruções JavaScript executáveis.
Como uma declaração de função não é uma instrução executável, ela é não é comum terminar com ponto e vírgula.
Uma função JavaScript também pode ser definida usando uma expressão.
Uma expressão de função pode ser armazenada em uma variável:
const x = function (a, b) {return a * b};Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Depois que uma expressão de função foi armazenada em uma variável, a variável pode ser usado como uma função:
const x = function (a, b) {return a * b};
let z = x(4, 3);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
A função acima é na verdade uma função anônima (uma função sem um nome).
Funções armazenadas em variáveis não precisam de nomes de função. Eles estão sempre invocado (chamado) usando o nome da variável.
A função acima termina com ponto e vírgula porque faz parte de uma instrução executável.
Como você viu nos exemplos anteriores, as funções JavaScript são definidas com a palavra-chave function.
As funções também podem ser definidas com um construtor de função JavaScript integrado chamado Função().
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Na verdade, você não precisa usar o construtor da função. O exemplo acima é o mesmo que escrever:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Na maioria das vezes, você pode evitar o uso da palavra-chave new em JavaScript.
Anteriormente neste tutorial, você aprendeu sobre "hoisting" (JavaScript Hoisting).
Hoisting é o comportamento padrão do JavaScript de mover declarações para o topo do escopo atual.
O içamento aplica-se a declarações de variáveis e a declarações de funções.
Por causa disso, funções JavaScript podem ser chamadas antes de serem declaradas:
myFunction(5);
function myFunction(y) {
return y * y;
}As funções definidas usando uma expressão não são elevadas.
Expressões de função podem ser "auto-invocadas".
Uma expressão auto-invocável é invocada (iniciada) automaticamente, sem ser chamada.
As expressões de função serão executadas automaticamente se a expressão for seguida por().
Você não pode invocar automaticamente uma declaração de função.
Você tem que adicionar parênteses ao redor da função para indicar que é uma expressão de função:
(function () {
let x = "Hello!!"; // I will invoke myself
})();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
A função acima é na verdade uma função anônima de auto-invocação (função sem nome).
Funções JavaScript podem ser usadas como valores:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Funções JavaScript podem ser usadas em expressões:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
O operador typeof em JavaScript retorna "função" para funções.
Porém, as funções JavaScript podem ser melhor descritas como objetos.
As funções JavaScript têm propriedades e métodos.
A propriedade arguments.length retorna o número de argumentos recebidos quando a função foi invocada:
function myFunction(a, b) {
return arguments.length;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
O método toString() retorna a função como uma string:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
Uma função definida como propriedade de um objeto é chamada de método para o objeto.
Uma função projetada para criar novos objetos é chamada de construtor de objetos.
As funções de seta permitem uma sintaxe curta para escrever expressões de função.
Você não precisa da palavra-chave function, da palavra-chave return e da palavra-chave colchetes.
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
As funções de seta não possuem seu próprio isto. Eles não são adequados para definir métodos de objetos.
As funções de seta não são içadas. Eles devem ser definidos antes de serem usados.
Usando const é mais seguro do que usar var, porque uma expressão de função é valor sempre constante.
Você só pode omitir a palavra-chave return e as chaves se a função for uma única instrução. Por isso, pode ser um bom hábito mantê-los sempre:
const x = (x, y) => { return x * y };
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
As funções de seta não são suportadas no IE11 ou anterior.