JavaScript Function Parameters
Last lesson packed steps under a name. The parentheses stayed empty. Real programs need inputs — a name, a total, a message — so the same body can work with different values. Those named slots are parameters. The values you hand in at the call are arguments.
Parameters and arguments
When you declare function greet(name) { … }, name is a parameter: a local name inside the body. When you write greet("Sara"), "Sara" is the argument: the concrete value that fills that slot for this call. Same recipe, different ingredients.
Who holds what
📊 Parameter vs argument
| Idea | Where you write it | Everyday fit |
|---|---|---|
| parameter | inside () at declaration |
empty bowl labeled name |
| argument | inside () at the call |
the food you pour in — "Sara" |
| order | left to right | first argument → first parameter |
| default | name = "friend" in the declaration |
bowl already has a spare if you bring nothing |
| missing slot | call with fewer values | that parameter is undefined unless a default exists |
Parameters live on the declaration. Arguments show up at each call. Mixing the two words is a common beginner slip — keep the table nearby until the habit sticks.
function greet(name) {
console.log("Hello, " + name);
}
greet("Sara");
One input, one slot
name waits inside greet. The call passes "Sara". The body builds Hello, Sara and logs it. Change the argument, keep the body — that is the win of parameters.
function add(a, b) {
console.log(a + b);
}
add(3, 4);
Two slots, two values
List parameters with commas: a, b. Pass arguments in the same order: 3 lands in a, 4 in b. The log shows 7. The body never hard-codes those numbers — the call supplies them.
function label(color, surface) {
console.log(color + " on " + surface);
}
label("red", "wall");
label("wall", "red");
Order is the contract
First call prints red on wall. Second prints wall on red — same function, swapped arguments. JavaScript does not guess which value “feels like” a color. Position decides.
function greetFriend(name = "friend") {
console.log("Hi, " + name);
}
greetFriend("Ali");
greetFriend();
A spare value when nothing arrives
name = "friend" sets a default. greetFriend("Ali") still uses "Ali". greetFriend() with empty parentheses uses "friend". Defaults keep the body safe when a caller skips a slot.
function showId(id) {
console.log(id);
}
showId();
No value and no default
showId() passes nothing into id. With no default, id is undefined and that is what prints. That is not a crash — it is a signal you forgot an argument or need a default.
Pass a string into the page
Same DOM pattern as before, but the message is built from the argument. One function can welcome different guests — only the call changes. The HTML demo below does exactly that.
Show parameters on the page
Declare a function that takes a guest name, write a short welcome into a paragraph, then call it with a real string.
<!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>
The page shows Hello, Omar. guest was the parameter; "Omar" was the argument. Change only the string in the call, refresh, and read the new line. Next lesson covers return — sending a value out of the function.
Try it yourself
- Write
function hello(name)that logs"hi "plusname, then call it with your name. - Write
function sum(x, y)that logsx + y, then call it with two numbers. - Call a two-parameter function twice with the arguments swapped and compare the logs.
- Add a default like
title = "guest"and call once with a value, once with empty(). - Call a one-parameter function with no argument and no default; confirm
undefinedin the console. - In the HTML demo, change only the argument string, refresh, and read the paragraph.
Common mistakes
- Calling with empty
()when the body needs a value — you getundefinedunless a default exists - Swapping argument order and expecting JavaScript to “know” which is which
- Mixing up the words parameter (declaration) and argument (call)
- Forgetting the comma between two parameters or two arguments
- Looking for a return value here — that is the next lesson; this page is about inputs only
Summary
- Parameters are names in the declaration’s
() - Arguments are values you pass at the call
- Order is left to right — first with first, second with second
- Defaults fill a slot when the caller skips it
- A missing slot without a default becomes
undefined - Page updates can use the passed-in value in the message
- Next: return — send a result out of the function
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top