Funções: Declaração, Parâmetros e Retorno de Valores no JavaScript
Bem-vindo(a) ao post no blog.
🧠 O que é
uma Função
Uma função é um bloco de código reutilizável que
executa uma tarefa específica.
Você a define uma vez e pode chamá-la
quantas vezes quiser, em qualquer parte do código.
💬 Analogia simples:
Pense em uma função como uma
“máquina de café”:
● Você envia insumos (parâmetros);
● A máquina executa um processo interno;
● Ela te devolve o resultado (retorno).
💡 Em programação, isso significa que podemos criar uma função para somar números, exibir mensagens, calcular médias, validar login, etc.
⚙️ Estrutura básica de uma função
Sintaxe:
function nomeDaFuncao() {
// bloco de código
}
Exemplo:
function saudacao() {
console.log("Olá! Seja bem-vindo ao curso de JavaScript!");
}
Chamando a função (executando-a):
saudacao(); // executa o código dentro da função
Saída no console:
Olá! Seja bem-vindo ao curso de JavaScript!
💬 O par de parênteses () indica a execução da função.
Sem eles, você está apenas se referindo
à função, não executando.
🔹 Funções com Parâmetros (Entrada)
Uma função pode receber parâmetros, que são valores que
entram nela no momento da chamada.
São variáveis internas da função.
Sintaxe:
function nomeDaFuncao(parametro1, parametro2) {
// usa os parâmetros dentro do código
}
Exemplo:
function saudacaoPersonalizada(nome) {
console.log(`Olá, ${nome}! Seja bem-vindo(a)!`);
}
saudacaoPersonalizada("Carlos");
saudacaoPersonalizada("Ana");
Saída:
Olá, Carlos! Seja bem-vindo(a)!
Olá, Ana! Seja bem-vindo(a)!
💬 Você pode passar valores diferentes a cada execução — sem precisar duplicar o código.
🧩 Funções com Retorno (return)
Nem toda função serve apenas para exibir algo.
Muitas vezes, queremos que ela calcule
algo e devolva o resultado.
Para isso, usamos a palavra-chave return.
Exemplo:
function somar(a, b) {
return a + b;
}
let resultado = somar(5, 3);
console.log("Resultado da soma:", resultado);
Saída:
Resultado da soma: 8
💬 O return interrompe
a função e envia o valor calculado para quem a chamou.
Sem return, a função simplesmente executa e encerra, sem
devolver nada.
⚡ Diferença entre Exibir e Retornar
function somarExibir(a, b) {
console.log(a + b);
}
function somarRetornar(a, b) {
return a + b;
}
// Exemplo de uso
somarExibir(3, 4); // mostra 7, mas não pode ser reaproveitado
let total = somarRetornar(3, 4) + 10; // retorna 7 e soma com 10
console.log(total); // 17
💬 A função com console.log exibe o resultado.
Mas a função com return devolve o valor, permitindo usá-lo em
outras operações.
✅ Escopo de Variáveis
O escopo define onde uma variável pode ser acessada.
● Variável local: criada dentro da função → só existe lá dentro.
● Variável global: criada fora → pode ser usada em qualquer lugar.
Exemplo:
let nome = "João"; // variável global
function mostrarNome() {
let saudacao = "Oi"; // variável local
console.log(`${saudacao}, ${nome}!`);
}
mostrarNome();
console.log(nome); // Ok
// console.log(saudacao); // Erro: saudacao não está definida
💡 Sempre prefira variáveis locais. Elas evitam conflitos e deixam o código mais seguro.
🔁 Funções que combinam Lógica e Loops
É comum usar funções com laços de repetição, criando scripts poderosos e organizados.
Exemplo: Tabuada com Função
function tabuada(numero) {
for (let i = 1; i <= 10; i++) {
console.log(`${numero} x ${i} = ${numero * i}`);
}
}
tabuada(6);
Saída:
6 x 1 = 6
6 x 2 = 12
...
6 x 10 = 60
💬 Agora, você pode chamar tabuada() para qualquer número — função reutilizável e elegante.
🔸 Parâmetros Opcionais
Nem sempre é necessário passar todos os parâmetros em uma
função.
Você pode definir valores padrão
(default) quando o parâmetro não for fornecido.
Exemplo:
function apresentar(nome = "Convidado", idade = 0) {
console.log(`Olá, ${nome}! Sua idade é ${idade}.`);
}
apresentar("Maria", 25);
apresentar(); // usa os valores padrão
Saída:
Olá, Maria! Sua idade é 25.
Olá, Convidado! Sua idade é 0.
💡 Valores padrão evitam erros e tornam suas funções mais robustas.
💬 Tipos de Funções em JavaScript
Existem três formas principais de declarar funções, e todas funcionam, mas cada uma tem suas particularidades.
🔹 1. Declaração tradicional
function somar(a, b) {
return a + b;
}
✅ Pode ser usada antes de ser declarada (o JS “levanta” a função automaticamente — hoisting).
🔹 2. Função anônima (expressão de função)
const subtrair = function(a, b) {
return a - b;
};
console.log(subtrair(10, 5));
💬 Aqui, a função é armazenada dentro de uma variável, e só pode ser chamada depois da declaração.
🔹 3. Arrow Function (Função de seta)
Introduzida no ES6 (2015), é uma forma mais curta e moderna.
const multiplicar = (a, b) => {
return a * b;
};
console.log(multiplicar(4, 5));
💡 Se a função tiver apenas uma linha, pode ser simplificada:
const dividir = (a, b) => a / b;
console.log(dividir(20, 4)); // 5
🧱 Diferenças entre Tipos de Função
|
Tipo |
Sintaxe |
Pode usar antes da declaração? |
Indicado para |
|
Tradicional |
function nome() {} |
✅ Sim |
Estruturas clássicas |
|
Anônima |
const nome = function() {} |
❌ Não |
Encapsular lógica |
|
Arrow Function |
const nome = () => {} |
❌ Não |
Código moderno e expressivo |
🧩 Exemplo Completo — Calculadora com Funções
function somar(a, b) {
return a + b;
}
function subtrair(a, b) {
return a - b;
}
function multiplicar(a, b) {
return a * b;
}
function dividir(a, b) {
if (b === 0) {
return "Erro: divisão por zero!";
}
return a / b;
}
let num1 = Number(prompt("Digite o primeiro número:"));
let num2 = Number(prompt("Digite o segundo número:"));
let operacao = prompt("Escolha a operação (+, -, *, /):");
let resultado;
switch (operacao) {
case "+":
resultado = somar(num1, num2);
break;
case "-":
resultado = subtrair(num1, num2);
break;
case "*":
resultado = multiplicar(num1, num2);
break;
case "/":
resultado = dividir(num1, num2);
break;
default:
resultado = "Operação inválida!";
}
alert(`Resultado: ${resultado}`);
💬 Observe que o código principal ficou limpo e organizado, porque a lógica pesada está dentro das funções.
💻 Exercício Prático
Crie um arquivo chamado funcoes.html com o script:
1. Uma função chamada saudarUsuario(nome) que exibe uma mensagem personalizada;
2. Uma função chamada dobrar(numero) que retorna o dobro do valor;
3. Uma função parOuImpar(numero) que retorna "Par" ou "Ímpar";
4. Teste todas no console.
💡 Exemplo:
function saudarUsuario(nome) {
console.log(`Olá, ${nome}!`);
}
function dobrar(num) {
return num * 2;
}
function parOuImpar(num) {
return (num % 2 === 0) ? "Par" : "Ímpar";
}
saudarUsuario("Paula");
console.log("Dobro de 5 é", dobrar(5));
console.log("7 é", parOuImpar(7));
🧩 Desafio – Média com Função e Retorno
Crie uma função que receba 3 notas, calcule a média e retorne o resultado com uma mensagem de acordo com o desempenho:
|
Média |
Resultado |
|
≥ 7 |
Aprovado |
|
5 a 6.9 |
Recuperação |
|
< 5 |
Reprovado |
💡 Solução sugerida:
function avaliarAluno(n1, n2, n3) {
let media = (n1 + n2 + n3) / 3;
if (media >= 7) {
return `Média ${media.toFixed(1)} — Aprovado!`;
} else if (media >= 5) {
return `Média ${media.toFixed(1)} — Recuperação.`;
} else {
return `Média ${media.toFixed(1)} — Reprovado.`;
}
}
console.log(avaliarAluno(6, 7, 5));
🧠 Hoje você aprendeu:
✅ O
que são funções e por que usá-las;
✅ Como declarar e chamar funções;
✅ Como usar parâmetros e o
comando return;
✅ Diferença entre exibir e retornar
valores;
✅ Escopo de variáveis (local e global);
✅ Funções modernas com arrow
function;
✅ Aplicações práticas com calculadora e
tabuada.
🎓 Conclusão
Funções são o coração da programação modular.
Com elas, seu código fica limpo,
poderoso e fácil de manter.
Você acabou de conquistar uma das bases
mais importantes do desenvolvimento JavaScript.
Prepare-se, porque na próxima aula daremos um passo além: você
aprenderá a detectar e reagir a eventos — cliques, movimentos, digitação
e muito mais!
É aí que suas funções começam a
interagir com o usuário e o mundo real da página web.
Comentários
Postar um comentário