« Anterior: BÁSICO > COMANDOS >ESCOLHA
Próximo: BÁSICO > FUNÇÃO ARROW »

Objetivos

Clique sobre os tópicos listados abaixo para navegar até o conteúdo desejado.

  1. Declarar função
  2. Invocar função
  3. Função com parâmetro
  4. Parâmetros default ou opcional
  5. Parâmetros variáveis
  6. Retornar valor
  7. Tipo Function e função anônima
  8. Função como argumento
  9. Função aninhada/interna
  10. Entender objeto arguments
  11. Retornar mais de um valor

Funções são trechos de código que realizam uma tarefa. São criadas para evitar repetição de código, auxiliar na manutenção e reuso. Funções em JS são do tipo de dado Function e possuem a a sintaxe de declaração abaixo:

Sintaxe
function nome_funcao() {
    //declarações
}
Onde
function: Define a criação de uma funcão ou procedimento
nome_funcao: nome da função desejada
Exemplo 1
//arquivo.js
function funcao(){
    console.log("Olá, World!");  
}

O exemplo acima deve ser executado em um dos compiladores online listados na introdução deste tutorial. A chamada da função írá depender da tecnologia a qual está utilizando a linguagem JS como linguagem principal ou de extensão.

Uma função em JS pode ser invocada, basicamente, de três maneiras: por um evento, chamada da função e automaticamente quando a linguagem JS for integrada com HTML. Outras ferramentas que utilizam JS como linguagem podem utilizar outros métodos.

Por evento HTML

Para invocarmos uma função por evento, precisamos declarar uma função desejada e atribuí-la a alguns dos eventos fornecidos por um elemento HTML.

Exemplo
//arquivo.js
function funcao(){
    console.log("Olá, World!");  
}
Exemplo
<!DOCTYPE html>
 <html> 
  <head>
  </head>
  <body>
    <button onclick="funcao()">Ação </button>
    <script src="arquivo.js"></script>
  </body>
 </html>
Saída
Olá, World!

Na integração com HTML acima, quando um usuário clicar no botão Ação, a função funcao será invocada. O método onclick acima é apenas um exemplo sendo possível utilizar todos os métodos disponíveis pelo elemento button.

Invocando pelo nome

Após a declaração de uma função, essa pode ser invocada normalmente em nossos programas JS utilizamos seu próprio nome.

Exemplo
function funcao(){
    console.log("Olá, Mundo!");  
}

funcao();
Saída
Olá, World!
Invocando automaticamente

Para invocamos automaticamente uma função javascript precisamos declará-la de acordo com a sintaxe abaixo. Quando integramos com HTML e página Web for carregada, a função será executada automaticamente.

Sintaxe
(nome_funcao(){
  //corpo
})();
Exemplo 2
(function funcao(){
    console.log("Olá, Mundo!");  
}());
Saída
Olá, World!

No exemplo acima, a funções em questão deve pode ser criada em um arquivo .js e integrado com a linguagem html dentro da tag script ou incluído como arquivo externo usando a mesma tag.

Exemplo 3
<!-- index.html-->
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
      <script src="script.js"></script>
  </body>
</html>

Mais informações sobre a criação de arquivos usados como bibliotecas pode ser visto em JavaScript Básico: Biblioteca do Usuário.

Para declararmos funções que aceitam parâmetros de entrada, utilizamos a sintaxe abaixo. Diferente de outras linguagens, não precisamos declarar os tipos de dados dos parâmetros:

Sintaxe
function nome_funcao( param1, param2, paramN){
	//corpo função
}
Onde
param1..N: Lista de parâmetros separados por (,)

A chamada de uma função que utiliza parâmetros é feita normalmente passando os argumentos no momento do uso como mostrado no exemplo abaixo:

Exemplo 4
function funcao(param1){
    console.log(param1);  
}

funcao("uma string em JS");
Saída
uma string em JS
Parâmetro com valor padrão

A linguagem JS permite que na declaração de parâmetros de uma função possamos atribuir um valor padrão utilizando o operador de atribuição de acordo com a sintaxe abaixo:

Sintaxe
function nome_funcao(param1=valor_padrao){
	//corpo função
}

Os parâmetros que utilizam valor default devem ser declarados com sendo os últimos parâmetros da função. Quando declaramos com esse valor, os parâmetros tornan-se opcionais.

Exemplo 5
function funcao(param1,param2="qualquer"){
    console.log(param1,param2);  
}

funcao("uma string"); //argumento 2 não informado
Saída
uma string qualquer

No exemplo acima, o segundo parâmetro, opcional, não foi informado ao invocarmos uma função. Essa foi executada utilizando o valor padrão definido.

Parâmetros variáveis

Para declararmos funções com um número variável de parâmetros, utilizamos o operador (...). Nessa abordagem, a lista de argumentos é armazenada em um array/vetor.

Sintaxe
function nome_funcao(...nome_param){
	//corpo função
}
Onde
nome_param: Array contendo lista variável de parâmetros.
Exemplo 6
function funcao(...param){
    for (var i = 0; i < param.length; i++) {
      console.log(param[i]);
    }  
}
funcao("uma","string","qualquer");
Saída
uma 
string
qualquer

Para descobrirmos o número de argumento passadas para as nossas funções que utilizam (…) podemos utilizar o atributo length.

Exemplo 7
function funcao(...param){
    console.log(param.length);
}
funcao("uma","string","qualquer");
Saída
3

Caso seja necessário declara uma função com mais parâmetros além do parâmetro do tipo (...), esse deve ser declarado como sendo o último.

Exemplo 7.1
function funcao(codigo, nome , ...param){
    console.log(param.length);
    console.log(param);
}
funcao("uma","string","qualquer");
Saída
1
[ 'qualquer' ]

Retornando valores

Para que uma função em JS retorne um valor ou objeto, utilizamos a palavra reservada return. Uma função pode conter mais de um return declarado em seu corpo.

Sintaxe
return valor_retornado;
Sintaxe
function nome_funcao()
{
    //corpo omitido
    return valor_retornado;
}
Exemplo 8
function funcao(param){
    return param*2;
}
ret = funcao(2); 
console.log(ret);
Saída
4

A linguagem JS, diferente de linguagens como Lua e Go, não permite o retorno de múltiplos valores em uma função. Dessa forma, um vetor ou objeto deve ser utilizado para alcançar tal necessidade.

Tipo Function e função anônima

A linguagem JS nos permite atribuir uma função à uma variável. A atribuição pode ser feita após a declaração de um função ou no momento de sua declaração. Quando fazemos isso, estamos utilizando o tipo de dado Function.

Sintaxe: função
nome_variavel = nome_funcao;

nome_variavel( lista_argumentos );
Sintaxe: função anônima
let nome_variavel = function ( lista_parametros ){
    //corpo
};

nome_variavel( lista_argumentos );
Exemplo 9
function funcao(){
    console.log("um string qualquer");
}

let funcao1 = funcao;
funcao1();

let funcao2 = function(){
    console.log("um string qualquer");
};
funcao2();
Saída
um string qualquer
um string qualquer

Como podemos utilizar funções como variáveis, podemos também declarar array de funções. Como esse array podemos, por exemplo, substituir, parcialmente, o comando de escolha switch.

Exemplo 10
function funcao1(){
  console.log('funcao1');
}

function funcao2(){
  console.log('funcao1');
}

function funcao3(){
  console.log('funcao1');
}

//array de funções
array = [funcao1,funcao2,funcao2];

//seleção de um função
opcao = 0;

//execução de um função de acordo com uma opcao
array[opcao]();
Saída
funcao1

Função como parâmetro/argumento

Como uma função possui o tipo de dado Function, a linguagem JS nos permite informar uma função como argumento de uma outra função.

Exemplo 11
function funcao_argumento(){
  console.log("um string qualquer");
}
//parâmetro Function
function funcao(fun){
  fun();
}

funcao(funcao_argumento);
Saída
um string qualquer

Quando utilizamos funções como parâmetros/argumentos, fazemos uso do conceito de callback que consiste em passar uma função como argumento para que seja possível customizar algum tratamento.

Em linguagens como C, C++ e GO o uso de funções como parâmetros é conhecido como ponteiro para função. Na linguagem C#, é conhecido como delegate.

Funções aninhadas ou interna

Diferente de linguagens como C, C++ e outras, a linguagem JS nos permite declarar funções dentro de funções, ou funções aninhadas, com a sintaxe abaixo:

Sintaxe
function nome_funcao( lista_parametros )
{
  function nome_funcao_aninhada( lista_parametros )
  {
   //corpo 
  }
  //corpo funcao
}

Uma função aninhada pode acessar as variáveis de sua "função pai" e variáveis globais. Não podemos invocar uma função interna fora de sua função pai.

Exemplo 12
let global = "global";

function funcao()
{
    let local = "local";

    console.log(global);

    function funcao_interna()
    {
      console.log(local);
    }
  funcao_interna(); //chamada funcao aninhada
}
funcao();//chamada função
Saída
global
local

Histórico de atualizações

  1. 15/08/2025 - revisão 4 - Ajustes: Ex. 1/12, sintaxes, sintaxe função interna, 'Objetivos'; Adição: posição parâmetro variável
  2. 26/09/2024 - revisão 3 - Adição de Ex. 3; ajustes pontuais
  3. 02/09/2024 - revisão 2 - Correção em links de objetivos
  4. 05/10/2023 - revisão 1 - Correção em layout, navegação e erros gramaticais
  5. 31/05/2023 - versão inicial
« Anterior: BÁSICO > COMANDOS >ESCOLHA
Próximo: BÁSICO > FUNÇÃO ARROW »