Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Função em JavaScript: Parâmetro, Argumento e Retorno

Neste tutorial, vamos de fato aprender como criar e usar funções em JavaScript, aprendendo o que são parâmetros, argumentos e o comando return.

Como Declarar uma Função


Agora que já sabemos o que é uma função, para que serve e como são usadas, vamos botar a mão na massa e aprender de fato como criar uma.

Para isso, vamos estudar conceitos como parâmetros, argumentos e o comando return.

Sem mais delongas, a declaração de uma função de nome func é:



function func( lista_de_parametros){
 [codigo];
 [codigo];
 [codigo];

 return retorno;
}

Explicando: primeiro digitamos o comando function, para sinalizar que vamos declarar uma função.
Em seguida, vamos dar um nome único pra essa função, a nossa é func.

Entre parêntesis, vem a lista do que chamamos de parâmetros, que são dados que iremos enviar quando formos chamar uma função. Pode ser por exemplo, um número ou uma string.

Dentro das chaves, o código de nossa função, que vai realizar procedimento que você definir e vai ter acesso a lista de parâmetros.

Por fim, a nossa função retorna uma informação, como um booleano, um número ou uma string.

Exemplo de uso função

Vamos criar uma função de nome quadrado que tem um parâmetro, um número chamado numero.

Dentro da função, criamos uma variável (chamada de variável interna, pois só existe dentro da função) de nome resposta, onde calculamos o quadrado:
resposta = numero * numero;

Por fim, retornamos esse valor:
return resposta;

Veja como fica nosso código:


<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <script type="text/javascript">
   document.write("O quadrado de 2 é: ");
   document.write( quadrado(2) ); 

   function quadrado(numero)
   {
    var resposta = numero * numero;
    return resposta;
   }
  </script>
 </body>
</html>

Invocamos a função com o comando: quadrado(2)
Ou seja, passamos o número 2 (2 é um argumento) para a função quadrado.

Essa função pega esse argumento de valor 2 e coloca na variável numero.
Prontinho, dentro da função temos: numero=2

Agora é só calcular o quadrado e retornar ele.

Quando fizemos: document.write( quadrado(2) )
Estamos printando na tela o retorno da função quadrado.

Exemplo de uso de função

Vamos fazer uma página mais interativa.
Agora o usuário vai digitar qualquer valor, que será armazenado na string numero.
Em seguida, transformamos essa variável em um número inteiro com a função parseInt.

Agora vamos mostrar na tela o quadrado do número.
Para isso, basta passar a variável numero como argumento para a função quadrado, que ela retorna o quadrado.

Veja nosso código HTML + .js:


<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
 </head>
 <body>
  <script type="text/javascript">
   var numero = prompt("Digite num numero: ");
   numero = parseInt(numero);

   document.write("O quadrado de "+numero+" é: "+ quadrado(numero))

   function quadrado(numero)
   {
    return (numero * numero);
   }
  </script>
 </body>
</html>

Veja que demos uma enxugada na função, damos logo o return assim:
return (numero*numero);

Ou seja, eliminamos a declaração da variável resposta.
Como usar uma função

Parâmetro, Argumentos e Return

Uma função pode receber várias informações ao mesmo tempo.
Na declaração seguinte, a função tem três parâmetros: x, y e z
function media(x, y, z)
{
 var media=(x+y+z)/3;
 return media;
}
Para invocar a função, precisamos passar três informações.
Por exemplo: media(10, 9, 8)

Estamos fazendo as seguintes atribuições:
x = 10
y = 9
z = 8

Os parâmetros são: x, y e z
Os argumentos são: 10, 9 e 8

O comando return não é obrigatório.
Você pode, por exemplo, printar a média de dentro da função:
function media(x, y, z)
{
 var media=(x+y+z)/3;
 document.write("A media é: "+ media);
}

Perceba a utilidade das funções: você pode invocar essa função uma, duas, três ou 1 milhão de vezes, desde que passe corretamente os argumentos.

Veja que o número de argumentos que você passa tem que ser o mesmo número de argumentos, para o JavaScript associar o valor correto do argumento para cada parâmetro.

Note também que você vai usar x, y e z como número dentro da função, inclusive calculando sua soma e depois a divisão por 3 pra achar a média. É óbvio que vai ser um erro se você passar strings,

Errado:
media(1, 2)
media('1', 2, 3)
media(1, 2, 3, 4)
media('oi', 'ola', 'ae')

Por fim, veja que a variável media foi declarada dentro da função. Logo, ela só existe ali dentro da função. O código que estiver fora da função, não consegue ver nem sabe da existência dessa variável.

Ela é criada quando a função é invocada, ela desempenha seu papel no código interno da função e depois, quando a função termina, ela simplesmente deixa de existir.

6 comentários:

  1. Perfeito!
    Você tem canal no youtube?

    ResponderExcluir
  2. Excelente artigo. Ajudou muito nos meus estudos de JS.

    ResponderExcluir
  3. Como faço para declarar uma função com dois argumentos numéricos.
    funciona functionWithArgs (1,2 ; 7,9){
    Output
    functionWithArgs(3,16)...

    ResponderExcluir
    Respostas
    1. function functionWithArgs(param1, param2){
      console.log(param1 + param2);
      }
      functionWithArgs(1,2);
      functionWithArgs(7,9);

      Excluir
    2. function functionWithArgs(param1, param2){
      console.log(param1 + param2);
      }
      functionWithArgs(1,2);
      functionWithArgs(7,9);

      Excluir
  4. Muito obrigada pelo esclarecimento da questão.

    ResponderExcluir