<TutorialDEV/> - Tutorial Javascript

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

Declarar função
Invocar função
Função com parâmetro
Parâmetro default/opcional
Parâmetros variáveis
Retornando valor
Função anônima
Função como argumento
Função aninhada/interna
~~Retornando mais de um valor~~
~~Retornando função~~
~~Return sem valor~~
~~Entender objeto arguments~~

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.

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.

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!

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

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.

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

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' ]

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

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.

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

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.

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

15/08/2025 - revisão 4 - Ajustes: Ex. 1/12, sintaxes, sintaxe função interna, 'Objetivos'; Adição: posição parâmetro variável
26/09/2024 - revisão 3 - Adição de Ex. 3; ajustes pontuais
02/09/2024 - revisão 2 - Correção em links de objetivos
05/10/2023 - revisão 1 - Correção em layout, navegação e erros gramaticais
31/05/2023 - versão inicial

Os cursos oferecidos nesta página são cursos fornecidos por parceiros. Ao comprar um curso clicando em seu banner, você está ajudando a manter o projeto TutorialDev vivo. Os sites dos cursos parceiros utilizam cookies.

Objetivos

Funções

Sintaxe

Onde

Exemplo 1

Invocando uma função

Por evento HTML

Exemplo

Exemplo

Saída

Invocando pelo nome

Exemplo

Saída

Invocando automaticamente

Sintaxe

Exemplo 2

Saída

Exemplo 3

Função com parâmetro

Sintaxe

Onde

Exemplo 4

Saída

Parâmetro default/opcional

Sintaxe

Exemplo 5

Saída

Parâmetros variáveis

Sintaxe

Onde

Exemplo 6

Saída

Exemplo 7

Saída

Exemplo 7.1

Saída

Retornando valor

Sintaxe

Sintaxe

Exemplo 8

Saída

Função anônima

Sintaxe: função

Sintaxe: função anônima

Exemplo 9

Saída

Exemplo 10

Saída

Função como parâmetro/argumento

Exemplo 11

Saída

Funções aninhadas ou interna

Sintaxe

Exemplo 12

Saída

Histórico de atualizações