Funções em JavaScript: Guia Básico para Iniciantes

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

// Chamando uma função

// Parâmetros da função

// Declaração de retorno

Definição de função

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

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>

E-book Desenvolvimento Full Stack
Baixe Gratuitamente o Guia Completo de Como se Tornar um Desenvolvedor Full Stack

Tenha 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

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

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

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.

>> Conheça o treinamento completo “Pacote Full-Stack” e Domine as Tecnologias mais Atuais e Poderosas do Mercado! <<

Um forte abraço, e até o próximo artigo desenvolvedor!

Referência: https://www.tutorialspoint.com/javascript/javascript_functions.htm