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

Uma função JavaScript é executada quando uma instrução a invoca.

function multiplicar(p1, p2) {
  return p1 * p2;   // A função multiplicar retorna o produto de p1 e p2
}

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

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

Os parênteses podem incluir nomes de parâmetros separados por vírgulas:

(parametro1, parametro2,... )

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

function nome(parametro1, parametro2, parametro3) {
  // código a ser executado
}

Os parâmetros da função estão listados entre parênteses () na definição da função.

Os argumentos da função são os valores recebidos como parâmetros pela função quando ela é chamada.

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

Uma função é similar a procedimentos e subrotinas em outras linguagens de programação.

Invocação de Função

O código dentro da função será executada quando uma instrução invocar (chamar) a função, em diferentes situações:

Quando a função é invocada (chamada) pelo diretamente pela instrução de código sendo interpretada.
Quando um evento ocorre (ex: um usuário clica em um botão).
Automaticamente (auto-invocada).

Você aprenderá mais sobre a chamada de funções posteriormente neste tutorial.

Retorno da Função (Return)

Quando o JavaScript atinge uma instrução return a execução da função é finalizada, e a execução retorna ao ponto seguinte ao comando com a instrução de chamada da função.

As funções podem retornar um valor, que será repassado ao "chamador".

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

// A função minhaFuncao é declarada com dois parâmetros a e b.

function minhaFuncao(a, b) {  // A função retorna o produto de a e b
  return a * b;               
}

// A função minhaFuncao é invocada com os argumentos 4 e 3 e o valor de retorno é atribuido em x

var x = minhaFuncao(4, 3);    // x ==  12

Porque Funções?

Funções permitem uma melhor organização do código, com a sua reutilização por diversas vezes utilizando diferentes argumentos nos parâmetros.

Você pode usar o mesmo código várias vezes com argumentos diferentes, para produzir resultados diferentes.

Converter Fahrenheit em Celsius:

function paraCelcius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = paraCelcius(77);

O Operador () Chama a Função do Identificador

Usando o exemplo anterior, o identificador paraCelcius refere-se ao objeto de função e paraCelcius() refere-se ao resultado da função.

Acessar uma função sem () retornará a definição da função em vez do resultado da função:

function paraCelcius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = paraCelcius;

Funções Usadas como Valores 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.

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

var x = paraCelcius(77);
var text = "A temperatura é " + x + " Celsius";

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

var text = "A temperatura é " + paraCelcius(77) + " Celsius";

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

Variáveis Locais

As variáveis declaradas em uma função são locais e sua visibilidade é restrita ao corpo da função.

Variáveis ‘locais podem ser referidas apenas de dentro da função.

// código aqui NÃO pode usar a variável nomeCarro
function minhaFuncao() {
  var nomeCarro = "Volvo";
  // código aqui pode usar a variável nomeCarro
}
// código aqui NÃO pode usar nomeCarro

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

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

Teste-se com exercícios

Execute a função nomeada minhaFuncao.

função minhaFuncao() {
  alert ("Olá, mundo!");
}

Funções