Funções JavaScript

Índice

Uma função JavaScript é um bloco de código projetado para executar uma tarefa particular.

Uma função JavaScript é executada quando "alguma coisa" o invoca (chama).

Exemplo

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

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>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Sintaxe da função JavaScript

Uma função JavaScript é definida com a palavra-chave function, seguido por um nome, seguido por parênteses ().

Os nomes das funções podem conter letras, dígitos, sublinhados e cifrões (mesmas regras das variáveis).

Os parênteses podem incluir nomes de parâmetros separados por vírgulas:
(parâmetro1, parâmetro2, ...)

O código a ser executado pela função é colocado entre chaves: {}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

Os parâmetros da função são listados entre parênteses() em a definição da função.

Os argumentos da função são os valores recebido pela função quando ela é invocada.

Dentro da função, os argumentos (os parâmetros) comportam-se como variáveis locais.

Invocação de função

O código dentro da função será executado quando "algo" invocar (chamar) o função:

Quando ocorre um evento (quando um usuário clica em um botão)
Quando é invocado (chamado) a partir do código JavaScript
Automaticamente (auto-invocado)

Você aprenderá muito mais sobre invocação de funções posteriormente neste tutorial.

Retorno de Função

Quando o JavaScript atinge uma instrução return, a função irá parar de ser executada.

Se a função foi invocada a partir de uma instrução, o JavaScript irá "return" para executar o código após a instrução de chamada.

As funções geralmente calculam um valor de retorno. O valor de retorno é "devolvido" de volta para o "chamador":

Exemplo

Calcule o produto de dois números e retorne o resultado:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and 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>

Por que funções?

Com funções você pode reutilizar código

Você pode escrever código que pode ser usado muitas vezes.

Você pode usar o mesmo código com argumentos diferentes para produzir resultados diferentes.

O operador

O operador() invoca (chama) a função:

Exemplo

Convertendo Fahrenheit em Celsius:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Acessar uma função com parâmetros incorretos pode retornar uma resposta incorreta:

Exemplo

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Acessar uma função sem() retorna a função e não o resultado da função:

Exemplo

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Observação

Como você pode ver nos exemplos acima, toCelsius refere-se ao objeto de função e toCelsius() refere-se ao resultado da função.

Funções usadas como valores de variáveis

As funções podem ser usadas da mesma maneira que você usa variáveis, em todos os tipos de fórmulas, atribuições e cálculos.

Exemplo

Em vez de usar uma variável para armazenar o valor de retorno de uma função:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

Você pode usar a função diretamente, como um valor variável:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>

Você aprenderá muito mais sobre funções posteriormente neste tutorial.

Variáveis locais

Variáveis declaradas dentro de uma função JavaScript tornam-se LOCAL para a função.

Variáveis locais só podem ser acessadas de dentro da função.

Exemplo

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

Como as variáveis locais só são reconhecidas dentro de suas funções, variáveis com o mesmo nome podem ser utilizadas em funções diferentes.

Variáveis locais são criadas quando uma função é iniciada e excluídas quando a função é concluída.