Introdução

As funções são um dos principais blocos de construção em qualquer linguagem de programação, incluindo JavaScript. Elas são como receitas: você escreve uma série de instruções (o código) uma vez e depois pode "chamar" essas instruções sempre que precisar, sem reescrevê-las.

Por que usamos funções? Simples: para evitar repetir código, facilitar a leitura, e organizar melhor nossa lógica de programação. Neste post, vamos aprender como criar funções, entender os diferentes tipos, e usar exemplos práticos para aplicar em projetos futuros.

Pré-requisitos

Se você está acompanhando nossa série de lógica de programação, já deve ter passado pelos seguintes conteúdos:

Agora, com esse conhecimento, vamos criar nossa primeira função!

Estrutura básica do HTML

Antes de qualquer coisa, vamos criar uma estrutura HTML simples. Crie uma pasta no seu computador e crie um arquivo chamado index.html. No conteúdo desse arquivo, insira o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lógica de Programação - Aprendendo a criar funções | Vivendo de Programação</title>
</head>
<body>
    <!-- O conteúdo do site vai aqui -->
</body>
</html>

Agora, crie um segundo arquivo chamado scripts.js. Agora vamos ver como criar e chamar funções!

O que é uma função?

Uma função é um bloco de código que só executa quando é "chamado". Isso nos permite reutilizar código sem precisar escrevê-lo novamente, o que torna o processo muito mais eficiente.

Função Tradicional

O tipo mais comum de função é a função tradicional. Veja o exemplo:

function digaOla() {
    console.log("Olá, Mundo!");
}

Aqui, criamos uma função chamada digaOla. Ela não faz muita coisa ainda, apenas escreve "Olá, Mundo!" no console. Para testar, abra o console do desenvolvedor (use F12 no seu navegador e vá até a guia "Console"). Para chamar a função, adicione este código no arquivo scripts.js e veja o que acontece:

digaOla();

Você verá a mensagem "Olá, Mundo!" aparecer no console! Isso significa que a função foi chamada com sucesso.

Funções Anônimas

As funções anônimas são funções que não têm nome e são geralmente usadas em situações específicas, como em eventos ou callbacks. Elas são muito úteis quando você só vai usar uma função uma vez, em um local específico.

Veja um exemplo de função anônima em uma variável:

let saudacao = function() {
    console.log("Olá, de uma função anônima!");
};
saudacao();

Aqui, a função anônima foi atribuída à variável saudacao. Quando chamamos saudacao(), ela executa o código da função.

Passando Argumentos para Funções

Agora que você entende o básico sobre funções, vamos passar argumentos para elas. Argumentos são dados que você pode fornecer à função para personalizar o que ela faz.

Veja um exemplo de uma função de soma que recebe dois números como argumento:

function somar(a, b) {
    console.log(a + b);
}
somar(5, 10);

Quando você chama somar(5, 10), o JavaScript adiciona os dois números e imprime 15 no console. Simples, certo?

Retornando Valores de Funções

Funções também podem retornar valores. Isso significa que, em vez de apenas executar uma ação, a função pode "devolver" um resultado. Veja o exemplo:

function multiplicar(a, b) {
    return a * b;
}
let resultado = multiplicar(4, 5);
console.log(resultado); // Exibe 20

Aqui, a função multiplicar retorna o produto dos dois números e armazenamos esse valor na variável resultado.

Seria algo muito parecido como quando você usa uma calculadora pra fazer uma conta. Sendo que a calculadora tem o papel de “função” que retorna o resultado pra você, que consequentemente usa o resultado pra fazer algo a seguir.
Esse conceito é importante de ser compreendido, pois permite que você crie código mais eficiente e reutilizável.

Próximos Passos

Existem outros tipos de funções que abordaremos em futuros posts, como funções de seta (arrow functions) e funções assíncronas, mas por enquanto, com o que aprendemos aqui, você já está perto de criar muita coisa usando JavaScript! Fique de olho no nosso blog para as próximas etapas.

Conclusão

Funções são ferramentas essenciais em qualquer linguagem de programação. Elas tornam seu código mais limpo, organizado e eficiente. Não deixe de praticar! Crie suas próprias funções, teste com diferentes argumentos, e explore o poder do JavaScript.

Saiba quais são as principais dúvidas sobre funções em javascript.

Pergunta: O que é uma função em JavaScript?

Uma função é um bloco de código que executa uma tarefa específica quando é chamada. Ela nos permite reutilizar o código, o que torna nosso programa mais eficiente e fácil de manter.

Pergunta: Como eu crio uma função tradicional em JavaScript?

Para criar uma função tradicional, você usa a palavra-chave function, seguida pelo nome da função e os parênteses. Dentro das chaves {}, você escreve o que a função deve fazer. Por exemplo:

function digaOla() {
    console.log("Olá, Mundo!");
}

Pergunta: Onde eu coloco o JavaScript no HTML para chamar minha função?

Você deve adicionar a chamada do seu arquivo JavaScript no final do <body>, pouco antes da tag de fechamento </body>. Assim, o JavaScript será carregado após o HTML, evitando problemas com elementos que ainda não foram carregados. Exemplo:

<script src="scripts.js"></script>

Pergunta: O que é uma função anônima e quando usá-la?

Uma função anônima é uma função sem nome, frequentemente usada em variáveis ou como callbacks. Elas são úteis quando você precisa de uma função temporária, usada uma única vez. Exemplo:

let saudacao = function() {
    console.log("Olá!");
};
saudacao();

Pergunta: Como eu passo argumentos para uma função em JavaScript?

Para passar argumentos, você coloca os valores que deseja usar entre parênteses quando chama a função. Por exemplo, se você tiver uma função de soma, pode passar dois números como argumentos:

function somar(a, b) {
    console.log(a + b);
}
somar(5, 10); // Mostra 15 no console

Pergunta: O que significa "retornar um valor" em uma função?

Quando uma função retorna um valor, ela devolve um resultado que pode ser usado em outro lugar do código. Para isso, usamos a palavra-chave return. Exemplo:

function multiplicar(a, b) {
    return a * b;
}

A função acima retorna o produto de a e b, que pode ser armazenado ou usado diretamente.

Pergunta: Como armazeno o valor retornado por uma função em uma variável?

Para armazenar o valor retornado, você simplesmente atribui a chamada da função a uma variável. Exemplo:

let resultado = multiplicar(4, 5);
console.log(resultado); // Mostra 20

Pergunta: Existem outros tipos de funções em JavaScript?

Sim! Existem outros tipos, como as funções de seta (arrow functions) e funções assíncronas. Esses tipos mais avançados serão abordados em posts futuros, mas o que você aprendeu aqui já permite avançar no desenvolvimento.

Lembre-se!

Praticar é essencial para se tornar um bom programador! Coloque em ação o que aprendeu, crie suas próprias funções, explore diferentes maneiras de passar argumentos e experimente os resultados. Lembre-se: ler é só o começo, o verdadeiro aprendizado vem com a prática!