JavaScript Function Parameters

Table of Contents +

In the previous lesson, we learned how to write and call functions. Now let’s give our functions some inputs to work with, using parameters and arguments.

📥 What are Parameters?

A parameter is a named input that a function expects. We list parameters inside the parentheses when we define the function, and they act like variables that hold the values passed in.

Here is a function with one parameter named name:

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alex"); // Hello, Alex!
greet("Sam"); // Hello, Sam!

Let’s walk through what each line does:

function greet(name) defines a function with a single parameter, name.
console.log("Hello, " + name + "!") joins the greeting text with whatever value name holds and prints it.
greet("Alex") calls the function and sends in "Alex", so name becomes "Alex" and we see Hello, Alex!.
greet("Sam") calls the same function with "Sam", so it prints Hello, Sam!.

The name parameter does not have a fixed value. Each time we call greet, it takes on whatever value we hand it, so the same function works for any name.

🔁 Parameters vs Arguments

These two words are easy to mix up, so let’s pin them down. A parameter is the name we write in the function definition. An argument is the actual value we pass when we call the function.

Term	Where it lives	Example
Parameter	In the function definition	`function greet(name)`
Argument	In the function call	`greet("Alex")`

In short, name is the parameter and "Alex" is the argument that fills it.

🧩 Multiple Parameters

A function can take more than one parameter. We separate them with commas, and we pass the same number of arguments in the same order when we call it.

This add function takes two numbers and prints their sum:

function add(a, b) {
  console.log(a + b);
}

add(5, 3); // 8
add(10, 20); // 30

Let’s trace the lines:

function add(a, b) defines a function with two parameters, a and b, separated by a comma.
console.log(a + b) adds the two values together and prints the result.
add(5, 3) passes 5 into a and 3 into b, so it prints 8.
add(10, 20) passes 10 into a and 20 into b, so it prints 30.

The first argument fills the first parameter, and the second argument fills the second. So in add(5, 3), a becomes 5 and b becomes 3.

Order matters

Arguments are matched to parameters by position, not by name. The first value you pass always lands in the first parameter.

💵 A Practical Example

Let’s build a function that calculates the total price of an order. It takes the price of one item and the quantity, then prints the total.

function totalPrice(price, quantity) {
  const total = price * quantity;
  console.log("Total: $" + total);
}

totalPrice(20, 3); // Total: $60
totalPrice(9, 5); // Total: $45

Here is what each line does:

function totalPrice(price, quantity) defines the function with two parameters, price and quantity.
const total = price * quantity multiplies the two values and stores the result in total.
console.log("Total: $" + total) builds the output text and prints it.
totalPrice(20, 3) sets price to 20 and quantity to 3, so the total is 60.
totalPrice(9, 5) sets price to 9 and quantity to 5, so the total is 45.

Here price and quantity are the parameters. When we call totalPrice(20, 3), price becomes 20 and quantity becomes 3, and the function multiplies them to get the total.

⚙️ Default Parameters

Sometimes we want a parameter to have a fallback value when no argument is passed. JavaScript lets us set a default value right in the definition.

function greet(name = "friend") {
  console.log("Hello, " + name + "!");
}

greet("Alex"); // Hello, Alex!
greet(); // Hello, friend!

Let’s see how the default kicks in:

function greet(name = "friend") defines a function where name falls back to "friend" if no argument is passed.
console.log("Hello, " + name + "!") prints the greeting using whatever value name holds.
greet("Alex") passes "Alex", so the default is ignored and we see Hello, Alex!.
greet() passes nothing, so name uses its default of "friend" and prints Hello, friend!.

⚠️ Common Mistakes to Avoid

Mistake	Problem	Solution
Passing arguments in the wrong order	`totalPrice(3, 20)` swaps price and quantity	Match the order of the parameters exactly
Passing too few arguments	The missing parameter becomes `undefined`	Pass a value for every parameter, or use a default
Confusing parameter with argument	Mixing up the name and the value	Parameter is in the definition, argument is in the call

🔧 Try It Yourself!

Write a greet function that takes a name parameter and prints a greeting, then call it with two different names.
Write an add function with two parameters and print the sum of 7 and 4.
Build a totalPrice function that takes a price and a quantity, then call it with your own values.
Call add with only one argument and print the result to see how undefined appears.

🧩 What You’ve Learned

✅ A parameter is a named input listed in the function definition
✅ An argument is the actual value passed in the function call
✅ A function can take multiple parameters separated by commas
✅ Arguments fill parameters by position, so order matters
✅ A missing argument makes its parameter undefined, and default parameters can prevent this

🚀 What’s Next?

Now that our functions can take inputs, let’s learn how they can hand a result back to us. Let’s continue to Return Values.

Previous break and continue Next JavaScript Return Values

Share & Connect

Share on LinkedIn