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.

JavaScriptbeginner

RuneHub Team

February 26, 2026

10 min read

RuneHub Team

Feb 26, 2026

10 min read

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.

javascript

function 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 arguments

What Happens with Missing Arguments

When you call a function with fewer arguments than parameters, the unmatched parameters become undefined:

javascript

function introduce(name, age, city) {
  console.log(`Name: ${name}`);
  console.log(`Age: ${age}`);
  console.log(`City: ${city}`);
}
 
introduce("Alice", 28);
// Name: Alice
// Age: 28
// City: undefined

JavaScript does not throw an error. The function runs with undefined for any parameter that did not receive an argument.

Checking for Missing Arguments

javascript

function 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:

javascript

function 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:

javascript

function 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]: true

arguments Is Not a Real Array

javascript

function 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:

javascript

const 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:

javascript

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
 
console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

Rest After Named Parameters

javascript

function 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 failed

The 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

javascript

function 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

javascript

function 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

javascript

function 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:

javascript

function 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);

javascript

// 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

javascript

function 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

javascript

function 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: ...args gives 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?

JavaScript was designed to be forgiving. Missing arguments become `undefined`, extra arguments are ignored. This flexibility allows patterns like optional parameters and variadic functions (functions that accept any number of arguments). TypeScript adds compile-time checking for argument counts if you want stricter behavior.

Should I use the arguments object or rest parameters?

Use rest parameters. They produce real arrays, work in arrow functions, can have descriptive names, and are the modern standard. The `arguments` object is a legacy feature. The only reason to know about it is to understand older code.

Can parameters and variables inside the function have the same name?

In non-[strict mode](/tutorials/programming-languages/javascript/javascript-strict-mode-use-strict-explained), yes, but it creates confusion. In strict mode with `let` or `const`, redeclaring a parameter name [throws an error](/tutorials/programming-languages/javascript/basic-javascript-debugging-tips-for-beginners): `function f(x) { let x = 5; }` is a SyntaxError. Avoid reusing parameter names for local variables.

How many parameters should a function have?

[Best practice](/tutorials/programming-languages/javascript/javascript-commenting-best-practices-every-coder-should-know) is 0 to 3 parameters. Functions with 4 or more parameters are hard to call correctly because the order matters. If you need many inputs, use a single object parameter with destructuring. This makes calls self-documenting and order-independent.

Is there a way to make parameters required in JavaScript?

Not natively. But you can use a default parameter trick: `function required() { throw new Error("Missing required argument"); }` and then `function greet(name = required()) {}`. Calling `greet()` without an argument triggers the default, which throws. TypeScript provides compile-time enforcement.

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.

JS Function Parameters vs Arguments: Differences

The Core Difference

What Happens with Missing Arguments

Checking for Missing Arguments

Use Default Parameters Instead

What Happens with Extra Arguments

The arguments Object

arguments Is Not a Real Array

arguments in Arrow Functions

Rest Parameters: The Modern Alternative

Rest After Named Parameters

arguments vs Rest Parameters

Passing by Value vs by Reference

Primitives: Passed by Value

Objects: Passed by Reference

Reassigning an Object Parameter

Be Careful with Object Parameters

Parameter Order Matters

When Order Gets Confusing: Use an Object

Practical Examples

Flexible Logger

Safe Object Modifier

Rune AI

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

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated