Tempo de leitura: 5 minutos
Olá desenvolvedor, seja bem-vindo a mais um artigo sobre essa linguagem fascinante que é o JavaScript, porém hoje iremos dar uma ênfase bem especial as funções em JavaScript.
Podemos dizer que a função é um grupo de código reutilizável que pode ser chamados em qualquer local do seu programa.
Com isso você não precisará mais ficar escrevendo o mesmo código várias vezes. Isso ajuda os programadores a escrever códigos modulares.
Com as funções o programador poderá dividir um enorme programa em várias funções gerenciáveis e minúsculas.
O JavaScript, assim como em qualquer linguagem de programação avançada, também suporta todos os recursos necessários para se escrever código modular utilizando funções.
Além disso, no JavaScript nós podemos escrever nossas próprias funções. E nesse artigo nós vamos aprender a escrever nossas próprias funções e também:
Definição de função
Antes de podermos utilizar uma função é necessário defini-la. E a forma mais comum de fazermos isso é utilizando a palavra-chave function, seguida por um nome de função exclusiva, uma lista de parâmetros (pode estar vazio) e um com instruções cercado por chaves.
Sintaxe
<script type=”text/javascript”>
<!–
function functionname(parameter-list)
{
statements
}
//–>
</script>
Exemplo
Tente o exemplo seguinte. Ele define uma função chamada sayHello que não recebe parâmetros:
<script type=”text/javascript”>
<!–
function sayHello()
{
alert(“Hello there”);
}
//–>
</script>
Chamando uma função
Para chamar uma função em algum lugar mais a frente no script, basta escrever o nome da função, do jeito que mostramos no código abaixo:
<html>
<head>
<script type=”text/javascript”>
function sayHello()
{
document.write (“Hello there!”);
}
</script>
</head>
<body>
<p>Clique no botão a seguir para chamar a função</p>
<form>
<input type=”button” onclick=”sayHello()” value=”Say Hello”>
</form>
<p>Use texto diferente no método write e tente …</p>
</body>
</html>
Baixe Gratuitamente o Guia Completo de Como se Tornar um Desenvolvedor Full StackTenha em mãos o livro digital, que irá lhe ensinar tudo sobre as principais tecnologias web e fará você dar o ponta-pé inicial no Universo Full-Stack!
Parâmetros da função
Até aqui vimos funções sem parâmetros, mas há um recurso para passar diferentes parâmetros diferentes ao chamar uma função.
Esse parâmetros podem ser capturados dentro da função e qualquer manipulação pode ser feita sobre esses parâmetros.
Uma função pode ter inúmeros parâmetros separados por vírgula.
Exemplo
Vamos tentar o seguinte exemplo. Nós fizemos modificações na nossa função sayHello. Agora são necessários dois parâmetros.
<html>
<head>
<script type=”text/javascript”>
function sayHello(name, age)
{
document.write (name + ” is ” + age + ” years old.”);
}
</script>
</head>
<body>
<p>Clique no botão a seguir para chamar a função</p>
<form>
<input type=”button” onclick=”sayHello(‘Zara’, 7)” value=”Say Hello”>
</form>
<p>Use parâmetros diferentes dentro da função e tente …</p>
</body>
</html>
Declaração de retorno
Uma instrução de retorno é opcional nas funções em javascript.
Isso é necessário se você desejar retornar um valor de uma função. Esta declaração deve ser a última em uma função.
Um exemplo disso é que você pode passar dois números em uma função e, em seguida, você pode esperar que a função retorne sua multiplicação em seu programa de chamada.
Exemplo
Vamos tentar o exemplo a seguir. É definida uma função que recebe dois parâmetros e os concatena antes de retornar o resultado no programa de chamada.
<html>
<head>
<script type=”text/javascript”>
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{
var result;
result = concatenate(‘Zara’, ‘Ali’);
document.write (result );
}
</script>
</head>
<body>
<p>Clique no botão a seguir para chamar a função</p>
<form>
<input type=”button” onclick=”secondFunction()” value=”Call Function”>
</form>
<p>Use parâmetros diferentes dentro da função e tente …</p>
</body>
</html>
Conclusão de Funções em JavaScript
Como você percebeu, esse foi um artigo bem rápido e direto ao ponto, e para quem já tem um certo conhecimento prévio da linguagem.
Porém se você deseja se aprofundar mais em JavaScript, temos um guia super completo para iniciantes para te ajudar a começar programar nessa incrível linguagem.
Introdução ao JavaScript: Um Guia para Iniciantes
Quer aprender mais sobre JavaScript?
O próximo passo para você, é colocar a mão na massa e aprender a linguagem, que é bem simples, porém extremamente importante para a carreira de um programador.
Uma excelente forma de você começar a desenvolver projetos reais é com o Pacote Full-Stack, nele você aprenderá desde o básico HTML até construir os projetos mais incríveis e cobiçados do mercado.
Um forte abraço, e até o próximo artigo desenvolvedor!
Referência: https://www.tutorialspoint.com/javascript/javascript_functions.htm
