JS Function Parameters vs Arguments: Differences
Learn the difference between parameters and arguments in JavaScript functions. Covers parameter naming, argument passing, default values, the arguments object, rest parameters, and how JavaScript handles missing or extra arguments.
Parameters and arguments are two terms that developers often use interchangeably, but they refer to different things. Parameters are the names listed in the function definition. Arguments are the actual values passed when calling the function. Understanding this distinction matters because JavaScript handles missing arguments, extra arguments, and default values in specific ways that affect how your functions behave.
This tutorial clarifies the difference with clear examples, covers how JavaScript handles argument count mismatches, and explores the arguments object and rest parameters.
The Core Difference
javascript// parameters (defined)
// vvvvvvvvvv
function add(a, b) {
return a + b;
}
// arguments (passed)
// vvvvvv
add(3, 5);| Term | What it is | When it exists | Example |
|---|---|---|---|
| Parameter | Variable name in function definition | At definition time | a, b |
| Argument | Actual value passed to the function | At call time | 3, 5 |
Think of parameters as labeled parking spots. Arguments are the cars that park in those spots. The spots exist whether or not cars arrive.
javascriptfunction greet(name, greeting) { // 'name' and 'greeting' are parameters
return `${greeting}, ${name}!`;
}
greet("Alice", "Hello"); // "Alice" and "Hello" are arguments
greet("Bob", "Hey"); // "Bob" and "Hey" are different argumentsWhat Happens with Missing Arguments
When you call a function with fewer arguments than parameters, the unmatched parameters become undefined:
javascriptfunction introduce(name, age, city) {
console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`City: ${city}`);
}
introduce("Alice", 28);
// Name: Alice
// Age: 28
// City: undefinedJavaScript does not throw an error. The function runs with undefined for any parameter that did not receive an argument.
Checking for Missing Arguments
javascriptfunction createProfile(name, bio) {
if (name === undefined) {
return "Error: name is required";
}
const profile = {
name: name,
bio: bio !== undefined ? bio : "No bio provided",
};
return profile;
}
console.log(createProfile("Alice", "Developer"));
// { name: "Alice", bio: "Developer" }
console.log(createProfile("Bob"));
// { name: "Bob", bio: "No bio provided" }
console.log(createProfile());
// "Error: name is required"Use Default Parameters Instead
Manually checking for undefined works but is verbose. Default parameters provide a cleaner way to handle missing arguments: function greet(name = "Guest").
What Happens with Extra Arguments
When you pass more arguments than the function has parameters, the extras are silently ignored:
javascriptfunction add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
console.log(add(1, 2, 3)); // 3 (third argument ignored)
console.log(add(1, 2, 3, 4)); // 3 (third and fourth ignored)The extra arguments do not cause an error. They simply have no parameter name to map to. However, they are still accessible through the arguments object or rest parameters.
The arguments Object
Every regular function has a built-in arguments object that contains all passed arguments, regardless of how many parameters are defined:
javascriptfunction showArgs() {
console.log(arguments);
console.log(`Count: ${arguments.length}`);
for (let i = 0; i < arguments.length; i++) {
console.log(` [${i}]: ${arguments[i]}`);
}
}
showArgs("hello", 42, true);
// Arguments(3) ["hello", 42, true]
// Count: 3
// [0]: hello
// [1]: 42
// [2]: truearguments Is Not a Real Array
javascriptfunction example() {
console.log(Array.isArray(arguments)); // false
// arguments.map is not a function
// arguments.map(x => x * 2); // TypeError
// Convert to real array first
const arr = Array.from(arguments);
console.log(arr.map((x) => x * 2)); // works
}
example(1, 2, 3);| Feature | arguments | Real array |
|---|---|---|
| Type | Array-like object | Array |
.length | Yes | Yes |
Index access [0] | Yes | Yes |
.map(), .filter() | No | Yes |
.forEach() | No | Yes |
| Spread operator | Yes ([...arguments]) | Yes |
arguments in Arrow Functions
Arrow functions do not have their own arguments object:
javascriptconst show = () => {
// console.log(arguments); // ReferenceError in strict mode
};
// Use rest parameters instead
const show = (...args) => {
console.log(args); // real array
};Rest Parameters: The Modern Alternative
Rest parameters (...name) collect all remaining arguments into a real array:
javascriptfunction sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(10, 20, 30, 40)); // 100Rest After Named Parameters
javascriptfunction log(level, ...messages) {
const prefix = `[${level.toUpperCase()}]`;
messages.forEach((msg) => console.log(`${prefix} ${msg}`));
}
log("info", "Server started", "Listening on port 3000");
// [INFO] Server started
// [INFO] Listening on port 3000
log("error", "Connection failed");
// [ERROR] Connection failedThe rest parameter must be the last parameter:
javascript// Valid
function valid(a, b, ...rest) {}
// SyntaxError: rest parameter must be last
// function invalid(a, ...rest, b) {}arguments vs Rest Parameters
| Feature | arguments | Rest parameters |
|---|---|---|
| Real array | No | Yes |
| Works in arrow functions | No | Yes |
| Includes all arguments | Yes | Only uncaptured ones |
| Descriptive name | No (always arguments) | Yes (...items, ...errors) |
| Destructuring | No | Yes |
| Modern recommendation | Avoid | Preferred |
Passing by Value vs by Reference
JavaScript passes primitive values (numbers, strings, booleans) by value and objects by reference:
Primitives: Passed by Value
javascriptfunction double(num) {
num = num * 2;
console.log(`Inside: ${num}`);
}
let x = 5;
double(x);
console.log(`Outside: ${x}`);
// Inside: 10
// Outside: 5 (unchanged)The function receives a copy. Changing the parameter does not affect the original variable.
Objects: Passed by Reference
javascriptfunction addRole(user) {
user.role = "admin"; // modifies the original object
}
const alice = { name: "Alice" };
addRole(alice);
console.log(alice); // { name: "Alice", role: "admin" } (modified!)The function receives a reference to the same object. Changes to properties affect the original.
Reassigning an Object Parameter
javascriptfunction replaceUser(user) {
user = { name: "Bob" }; // reassigns the local reference
console.log(`Inside: ${user.name}`);
}
const alice = { name: "Alice" };
replaceUser(alice);
console.log(`Outside: ${alice.name}`);
// Inside: Bob
// Outside: Alice (unchanged)Reassigning the parameter creates a new local reference. The original object is not affected.
Be Careful with Object Parameters
Functions that modify object parameters create side effects that can be hard to debug. If a function receives an object and changes its properties, the change is visible everywhere that object is used. To avoid this, create a copy inside the function before modifying.
Parameter Order Matters
Arguments are matched to parameters by position, not by name:
javascriptfunction createRect(width, height) {
return { width, height, area: width * height };
}
// Arguments match parameters left-to-right
console.log(createRect(10, 5));
// { width: 10, height: 5, area: 50 }
// Swapped: 5 goes to width, 10 goes to height
console.log(createRect(5, 10));
// { width: 5, height: 10, area: 50 }When Order Gets Confusing: Use an Object
Functions with many parameters become hard to call correctly. Destructured objects solve this:
javascript// Hard to remember parameter order
function createUser(name, age, email, role, active) {
return { name, age, email, role, active };
}
// Which is age? Which is role?
createUser("Alice", 28, "alice@test.com", "admin", true);// Easier: destructured object parameter
function createUser({ name, age, email, role = "user", active = true }) {
return { name, age, email, role, active };
}
// Order doesn't matter, names are self-documenting
createUser({
name: "Alice",
email: "alice@test.com",
age: 28,
});
// { name: "Alice", age: 28, email: "alice@test.com", role: "user", active: true }Practical Examples
Flexible Logger
javascriptfunction log(message, ...metadata) {
const timestamp = new Date().toISOString();
console.log(`[${timestamp}] ${message}`);
if (metadata.length > 0) {
console.log(" Metadata:", metadata);
}
}
log("User logged in");
// [2026-02-05T09:50:00.000Z] User logged in
log("Payment processed", { amount: 99.99 }, { userId: 42 });
// [2026-02-05T09:50:00.000Z] Payment processed
// Metadata: [{ amount: 99.99 }, { userId: 42 }]Safe Object Modifier
javascriptfunction updateUser(user, updates) {
// Create a copy to avoid mutating the original
const updated = { ...user, ...updates };
return updated;
}
const original = { name: "Alice", age: 28, role: "user" };
const modified = updateUser(original, { role: "admin", active: true });
console.log(original); // { name: "Alice", age: 28, role: "user" } (unchanged)
console.log(modified); // { name: "Alice", age: 28, role: "admin", active: true }
Rune AI
Key Insights
- Parameters are names, arguments are values: defined at declaration time vs passed at call time
- Missing arguments become
undefined: JavaScript does not throw errors for argument count mismatches - Rest parameters replace the arguments object:
...argsgives a real array with a descriptive name - Objects are passed by reference: changes to object properties inside a function affect the original
- Use object parameters for 4+ inputs: destructuring makes function calls self-documenting
Frequently Asked Questions
Why does JavaScript not throw an error for wrong argument counts?
Should I use the arguments object or rest parameters?
Can parameters and variables inside the function have the same name?
How many parameters should a function have?
Is there a way to make parameters required in JavaScript?
Conclusion
Parameters are the names in a function definition. Arguments are the values passed at call time. JavaScript matches arguments to parameters by position, silently assigns undefined for missing arguments, and ignores extras. The arguments object captures all passed values but is an array-like legacy feature. Rest parameters (...args) are the modern replacement: they produce real arrays, work in arrow functions, and can be named descriptively. For functions that take many inputs, use a destructured object parameter to make calls self-documenting and order-independent.
More in this topic
OffscreenCanvas API in JS for UI Performance
Master the OffscreenCanvas API to offload rendering from the main thread. Covers worker-based 2D and WebGL rendering, animation loops inside workers, bitmap transfer, double buffering, chart rendering pipelines, image processing, and performance measurement strategies.
Advanced Web Workers for High Performance JS
Master Web Workers for truly parallel JavaScript execution. Covers dedicated and shared workers, structured cloning, transferable objects, SharedArrayBuffer with Atomics, worker pools, task scheduling, Comlink RPC patterns, module workers, and performance profiling strategies.
JavaScript Macros and Abstract Code Generation
Master JavaScript code generation techniques for compile-time and runtime metaprogramming. Covers AST manipulation, Babel plugin authorship, tagged template literals as macros, code generation pipelines, source-to-source transformation, compile-time evaluation, and safe eval alternatives.