JS Function Parameters vs Arguments Differences

The difference between a parameter and an argument can be summed up in one sentence: a parameter is a named placeholder in the function definition, and an argument is the actual value passed when calling the function.

Here it is in one clear example:

javascript

//  price  and  quantity  are PARAMETERS (placeholders)
function calcTotal(price, quantity) {
  return price * quantity;
}
 
//  19.99  and  3      are ARGUMENTS (actual values)
calcTotal(19.99, 3); // 59.97

The names are defined once when you write the function. The values change every time you call it. That distinction is simple but important.

Quick Comparison

Why the Distinction Matters

If you mix up parameters and arguments, you might write confusing explanations in code reviews or misread error messages. But the practical reason the distinction matters is that JavaScript handles mismatches between them silently.

If you pass fewer arguments than there are parameters, the extra parameters become undefined. If you pass more, the extras are ignored by the named parameters but still accessible.

Understanding this behavior lets you debug function calls that do not behave as expected.

What Happens When Arguments Do Not Match Parameters

Fewer Arguments Than Parameters

javascript

function introduce(name, age, city) {
  console.log(`${name} is ${age} and lives in ${city}.`);
}
 
introduce("Alex", 25);
// "Alex is 25 and lives in undefined."

No error. The city parameter is undefined. JavaScript fills parameters left to right, so calling a function expecting three values with only two leaves the third slot empty.

More Arguments Than Parameters

javascript

function showFirst(a) {
  console.log(a);
}
 
showFirst(10, 20, 30);
// 10

No error. The extras (20 and 30) are silently ignored by the named parameter. But they are not lost, you can still access them through the arguments object in regular functions:

javascript

function showAll(a) {
  console.log("Named parameter:", a);
  console.log("All arguments:", arguments);
}
 
showAll(10, 20, 30);
// Named parameter: 10
// All arguments: [Arguments] { '0': 10, '1': 20, '2': 30 }

Passing by Value vs Passing by Sharing

When you pass a primitive as an argument, the function gets a copy. Changing the parameter inside the function does not affect the original:

javascript

function changeValue(x) {
  x = 100;
  console.log("Inside:", x);
}
 
let num = 5;
changeValue(num); // Inside: 100
console.log(num); // 5 -- unchanged

When you pass an object, the function gets a reference. Mutating the object's properties affects the original, but reassigning the parameter does not:

javascript

function updateCar(car) {
  car.color = "blue";     // Mutates the original object
  car = { color: "red" }; // Reassigns the local parameter only
}
 
const myCar = { color: "black" };
updateCar(myCar);
console.log(myCar.color); // "blue" -- mutated, not reassigned

This is called pass by sharing. The parameter holds a reference to the same object, so property changes are visible outside. But reassigning the parameter variable itself only changes the local binding.

Default Parameters: Handling Missing Arguments

Instead of checking for undefined inside the function body, you can set default values directly in the parameter list:

javascript

// Without defaults (old way)
function greet(name) {
  name = name || "Guest";
  console.log(`Hello, ${name}!`);
}
 
// With defaults (modern way)
function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
 
greet();        // "Hello, Guest!"
greet("Sara");  // "Hello, Sara!"

The default only activates when the argument is undefined, not for other falsy values like null, 0, or "". Learn more in How to Use Default Parameters in JS Functions.

For a broader introduction to functions, see What Is a Function in JavaScript Beginner Guide.

Common Beginner Mistake: Naming Confusion

Beginners often say "I passed the parameter 5" when they mean "I passed the argument 5." In casual conversation, people understand. But in technical discussions, the wrong term can cause confusion, especially when discussing function signatures, TypeScript types, or API design.

A simple rule to remember:

• If you are writing the function, you are working with parameters.
• If you are calling the function, you are working with arguments.

Arguments in Arrow Functions

Arrow functions do not have their own arguments object:

javascript

const show = () => {
  console.log(arguments);
};
 
show(1, 2, 3); // ReferenceError: arguments is not defined

If you need to capture all arguments in an arrow function, use rest parameters instead. A rest parameter collects every argument into a real array, which arrow functions can read normally:

javascript

const show = (...args) => {
  console.log(args); // [1, 2, 3]
};
 
show(1, 2, 3);

Where to Go Next

Parameters are the named slots you define in a function signature, and arguments are the real values that fill those slots at call time. Keeping that distinction straight makes it easier to debug mismatched calls and read function signatures in any codebase.