Parâmetros de função
Na lição anterior você empacotou passos sob um nome; os parênteses ficaram vazios. Programas reais precisam de entradas — um nome, um total, uma mensagem — para o mesmo corpo trabalhar com valores diferentes. Esses espaços nomeados são parâmetros. Os valores que você entrega na chamada são argumentos.
Parâmetros e argumentos
Quando você escreve function greet(name) { … }, name é um parâmetro: um nome local no corpo. Quando escreve greet("Sara"), "Sara" é o argumento: o valor concreto que preenche aquele espaço nesta chamada. Mesma receita, ingredientes diferentes.
Quem fica onde
📊 Parâmetro versus argumento
| Ideia | Onde você escreve | No dia a dia |
|---|---|---|
| parâmetro | dentro de () na declaração |
tigela vazia com etiqueta name |
| argumento | dentro de () na chamada |
o que você coloca — "Sara" |
| ordem | da esquerda para a direita | primeiro argumento → primeiro parâmetro |
| padrão | name = "friend" na declaração |
reserva se você não trouxer nada |
| espaço vazio | chamada com menos valores | esse parâmetro fica undefined sem padrão |
Parâmetros vivem na declaração. Argumentos aparecem em cada chamada. Misturar as duas palavras é erro clássico de iniciante — mantenha a tabela por perto até virar hábito.
function greet(name) {
console.log("Hello, " + name);
}
greet("Sara");
Uma entrada, um espaço
name espera dentro de greet. A chamada passa "Sara". O corpo monta Hello, Sara e registra. Mude o argumento, conserve o corpo — esse é o ganho dos parâmetros.
function add(a, b) {
console.log(a + b);
}
add(3, 4);
Dois espaços, dois valores
Liste parâmetros com vírgulas: a, b. Passe argumentos na mesma ordem: 3 vai para a, 4 para b. O registro mostra 7. O corpo não fixa esses números — a chamada os fornece.
function label(color, surface) {
console.log(color + " on " + surface);
}
label("red", "wall");
label("wall", "red");
A ordem é o contrato
A primeira chamada imprime red on wall. A segunda wall on red — mesma função, argumentos trocados. O JavaScript não adivinha qual valor «parece» uma cor. A posição decide.
function greetFriend(name = "friend") {
console.log("Hi, " + name);
}
greetFriend("Ali");
greetFriend();
Um valor de reserva quando nada chega
name = "friend" define um padrão. greetFriend("Ali") ainda usa "Ali". greetFriend() com parênteses vazios usa "friend". O padrão protege o corpo quando a chamada omite um espaço.
function showId(id) {
console.log(id);
}
showId();
Sem valor e sem padrão
showId() não passa nada para id. Sem padrão, id é undefined e isso é impresso. Não é um crash — é um sinal de que faltou argumento ou precisa de padrão.
Passe uma string para a página
Mesmo padrão DOM de antes, mas a mensagem nasce do argumento. Uma função pode cumprimentar convidados diferentes — só a chamada muda. A demo HTML abaixo faz exatamente isso.
Mostre parâmetros na página
Declare uma função que receba o nome do convidado, escreva uma boas-vindas curta num parágrafo e chame com uma string real.
<!DOCTYPE html>
<html>
<head>
<title>parameters — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function welcome(guest) {
let box = document.getElementById("msg");
box.textContent = "Hello, " + guest;
}
welcome("Omar");
</script>
</body>
</html>
A página mostra Hello, Omar. guest era o parâmetro; "Omar" o argumento. Mude só a string na chamada, atualize e leia a nova linha. Em seguida vem return — enviar um valor para fora da função.
Experimente você
- Escreva
function hello(name)que registre"hi "maisnamee chame com seu nome. - Escreva
function sum(x, y)que registrex + ye chame com dois números. - Chame duas vezes uma função de dois parâmetros com argumentos trocados e compare os registros.
- Adicione um padrão como
title = "guest"e chame uma vez com valor, outra com()vazio. - Chame uma função de um parâmetro sem argumento e sem padrão; confirme
undefinedno console. - Na demo HTML, mude só a string do argumento, atualize e leia o parágrafo.
Erros comuns
- Chamar com
()vazio quando o corpo precisa de valor — você obtémundefinedsem padrão - Inverter a ordem dos argumentos e esperar que o JavaScript «saiba» qual é qual
- Confundir parâmetro (declaração) com argumento (chamada)
- Esquecer a vírgula entre dois parâmetros ou dois argumentos
- Procurar valor de retorno aqui — isso é a próxima lição; esta página só trata de entradas
Resumo
- Parâmetros são nomes nos
()da declaração - Argumentos são valores que você passa na chamada
- A ordem vai da esquerda para a direita — primeiro com primeiro, segundo com segundo
- Padrões preenchem um espaço quando a chamada o omite
- Espaço vazio sem padrão vira
undefined - Atualizações de página podem usar o valor passado na mensagem
- Próximo: return — envie um resultado para fora da função
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo