Como criar funções com JavaScript

Por: Angelo Luis Ferreira | 14/06/2018 Acessos: 6.765

Neste tutorial, vamos mostrar como criar funções estáticas pelo usuário em JavaScript. Este recurso é um dos principais métodos para garantir a reutilização de códigos nos documentos JavaScript, tornando a programação mais prática e muito mais organizada.

Leia também: Criando funções através de Expressão de Função - Funções anônimas

Funções JavaScript estáticas são utilizadas para criar pequenos blocos de códigos independentes. Esses blocos podem gerar um resultado (funções com retorno) ou apenas executar uma rotina (funções sem retorno). Sua principal vantagem é condensar um trecho de códigos e torná-lo reutilizável em vários pontos diferentes do documento.

Funções JavaScript definidas pelo usuário

1. Para criar funções estáticas em JavaScript utilizamos a palavra-chave function, onde definimos um nome para esta função. Veja a sintaxe abaixo:

function nomeDaFuncao(parâmetros){ 
     
       // códigos da função
}

Obs 1: O nome escolhido para a sua função não pode ter espaços, caracteres especiais e nem começar com um número.

Obs 2: Você pode adicionar quantos parâmetros quiser, desde que cada um esteja separado por vírgula e que não tenham a mesma denominação.

Obs 3: Parâmetros devem ter as mesmas características de uma variável.

2. Mesmo se não utilizarmos parâmetros em nossa função, deve haver o parênteses. Neste caso, essa seria a forma correta sem parâmetros:

function nomeDaFuncao() { 
     
       // códigos da função
} 

Funções sem retorno

Funções sem retorno são ideais pra criar pequenos blocos de código que poderão ser repetidos várias vezes no documento.

1.1. Exemplo de função sem retorno e sem parâmetros (ou argumentos):

function trocarDiv() {
            var area = document.getElementById("local");
            var texto = prompt("Qual é o seu nome?");
            texto = "Seu nome é: "+texto;
            area.innerHTML = texto;       
}

  Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

1.2. Exemplo de função sem retorno e com parâmetros:

function perfil(nome, idade) {
         sobrenome = prompt("Qual é o sobrenome?");
         texto1 = "Olá
";
         texto2 = "Meu nome é "+nome+" "+sobrenome+" e tenho "+idade+" anos";
         document.getElementById('local').innerHTML = texto1+texto2;
}

Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado.

Funções com retorno

Funções com retorno são criadas da mesma forma que as funções sem retorno. A diferença é que esta função retorna um resultado através da palavra chave return. Este valor poderá ser utilizado em uma variável ou instrução JavaScript qualquer.

1.1. Exemplo de função com retorno e sem parâmetros:

function mensagem() {
   return "Olá, seja bem-vindo";
}

  Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado. 

1.2. Exemplo de função com retorno e com parâmetros:

function soma(x, y) {
   return x+y;
}

 Para verificar os códigos acima, teste: Squids Editor. Clique no botão [Executar] para ver o resultado. 

Documentação Oficial

1. [Funções - definições básicas] » Sobre criação e exemplos de 'funções estáticas' criadas pelo usuário.