Parameters and Arguments in JavaScript

Parameters and arguments in JavaScript are not two fancy names for the same thing. A parameter is the placeholder in the function definition. An argument is the real value passed during a function call. That difference matters because JavaScript connects arguments to parameters by position, not by the meaning of the names you chose.

If a function keeps using the wrong value, start by tracing which argument landed in which parameter.

The basic difference

function greet(name) {
  return `Hello, ${name}`;
}

greet("Ada");

In that example:

Parameters belong to the function's design. Arguments belong to one specific call.

The same function can receive different arguments each time:

greet("Ada"); // "Hello, Ada"
greet("Mira"); // "Hello, Mira"
greet("Lin"); // "Hello, Lin"

The parameter name stays name. The argument value changes on each call.

Arguments match parameters by position

JavaScript does not match argument values to parameter names by meaning. It lines them up from left to right.

function formatTicket(prefix, number) {
  return `${prefix}-${number}`;
}

formatTicket("BUG", 42); // "BUG-42"

The first argument goes into the first parameter. The second argument goes into the second parameter.

That is why this call is not magically corrected:

formatTicket(42, "BUG"); // "42-BUG"

JavaScript does not know that "BUG" feels more like a prefix. Names help humans read the function. Position controls the actual assignment.

Parameters are local variables

A parameter acts like a local variable inside the function.

const minutes = 30;

function doubleSession(minutes) {
  return minutes * 2;
}

doubleSession(12); // 24

Inside doubleSession, the parameter named minutes refers to the argument for this call. It is separate from the outer minutes variable.

This bug happens when a function ignores its parameter and uses a nearby outer value instead:

const defaultMinutes = 30;

function doubleSession(minutes) {
  return defaultMinutes * 2;
}

doubleSession(12); // 60

The caller passed 12, but the function calculated from defaultMinutes. That is not reusable. Use the parameter when the call should control the value.

Missing arguments become undefined

If you call a function with fewer arguments than parameters, the missing parameters receive undefined.

function describeUser(name, role) {
  return `${name}: ${role}`;
}

describeUser("Ada"); // "Ada: undefined"

That might be useful while debugging, but it is usually a sign that the function needs a default, a validation check, or a clearer call site.

function describeUser(name, role = "member") {
  return `${name}: ${role}`;
}

describeUser("Ada"); // "Ada: member"

A default parameter is used when the argument is missing or explicitly undefined.

describeUser("Ada", undefined); // "Ada: member"
describeUser("Ada", null); // "Ada: null"

null is still a provided argument. JavaScript will not treat it as "use the default" unless you write that logic yourself.

For the deeper version of this rule, read Default Parameters in JavaScript.

Extra arguments are ignored unless you collect them

If you pass more arguments than there are named parameters, JavaScript still allows the call.

function add(a, b) {
  return a + b;
}

add(2, 3, 99); // 5

The third argument is ignored because nothing collects it.

Use a rest parameter when a function should accept any number of arguments:

function total(...numbers) {
  let sum = 0;

  for (const number of numbers) {
    sum += number;
  }

  return sum;
}

total(2, 3, 99); // 104

The rest parameter gathers arguments into a real array. It must be the last parameter.

function labelTotal(label, ...numbers) {
  return `${label}: ${total(...numbers)}`;
}

labelTotal("Score", 10, 20, 30); // "Score: 60"

For flexible function inputs, read Rest Parameters in JavaScript.

For the call-side version of ..., see The Spread Operator.

Arguments can be any value

Arguments are not limited to strings and numbers. You can pass arrays, objects, booleans, functions, and anything else JavaScript can store in a variable.

function getDisplayName(user) {
  return `${user.firstName} ${user.lastName}`;
}

getDisplayName({ firstName: "Ada", lastName: "Lovelace" });

Object arguments are useful when a function needs several related values. The call is often clearer than a long list of positional arguments:

function createUser({ name, role, active }) {
  return {
    name,
    role,
    active,
  };
}

createUser({ name: "Mira", role: "admin", active: true });

This does not mean JavaScript suddenly matches function arguments by object property name. It means you passed one object argument, then destructured that object inside the parameter list.

Objects can still be changed inside a function

JavaScript passes the value of each argument into the function. For objects and arrays, that value is a reference to the same object.

function renameUser(user) {
  user.name = "Changed";
}

const user = { name: "Ada" };

renameUser(user);

console.log(user.name); // "Changed"

The parameter user is local, but it points at the same object the caller passed. Reassigning the parameter is different:

function replaceUser(user) {
  user = { name: "New" };
}

const user = { name: "Ada" };

replaceUser(user);

console.log(user.name); // "Ada"

Changing a property affects the shared object. Reassigning the local parameter does not replace the caller's variable.

Callback parameters come from the caller function

When you pass a function as an argument, the function that calls it decides which arguments it receives.

const names = ["Ada", "Mira"];

const labels = names.map((name, index) => {
  return `${index + 1}. ${name}`;
});

console.log(labels); // ["1. Ada", "2. Mira"]

map calls your callback with the current item, the index, and the original array. Your callback parameters receive those values by position.

That is why callback signatures matter:

["10", "10", "10"].map(parseInt); // [10, NaN, 2]

parseInt expects its second parameter to be a radix. map passes the index as the second argument. Wrap the call so the parameters mean what you intend:

["10", "10", "10"].map((text) => parseInt(text, 10)); // [10, 10, 10]

For more callback patterns, read Higher-Order Functions in JavaScript.

Parameter names should explain the contract

JavaScript will run this:

function calculate(a, b) {
  return a * b;
}

But better parameter names make the function easier to call correctly:

function calculateArea(width, height) {
  return width * height;
}

Names do not control argument matching, but they do communicate the contract. That contract becomes more important when a function is reused, tested, or passed around as a value.

Key Takeaways

• Parameters are placeholders in a function definition; arguments are the values passed during a call.
• JavaScript matches arguments to parameters by position.
• Missing arguments become undefined unless a default parameter handles them.
• Extra arguments are ignored unless a rest parameter gathers them.
• Object arguments can make multi-value calls clearer, but you are still passing one argument.
• Callback parameters are controlled by the function that calls your callback.