Parameters, Arguments, and Return Values

A function is a contract: "if you give me these inputs, I will give you this output". The vocabulary around that contract is worth getting right.

• Parameters are the names in the function declaration. They are the placeholders.
• Arguments are the actual values passed in when the function is called.

function greet(name, age) {    // 'name' and 'age' are parameters
  return `Hi ${name}, ${age}`;
}

greet("Ada", 28);              // "Ada" and 28 are arguments

In casual conversation, people use the two words interchangeably. In writing about JavaScript precisely, this distinction is useful.

Arguments are matched by position

When you call a function, JavaScript binds each argument to the parameter in the same position — first to first, second to second.

This makes long parameter lists fragile. If a function takes five booleans, callers have to remember the exact order. We will see a much nicer pattern (options objects) in a moment.

Missing and extra arguments

JavaScript will not complain if you pass too few or too many arguments. Both are legal.

• A missing argument becomes undefined.
• An extra argument is just ignored (though it is still available via arguments or rest parameters).

This forgiveness is a double-edged sword. It makes JavaScript beginner-friendly, but it also means typos like forgetting an argument fail silently rather than loudly. We will see in the debugging chapter how to defend against this.

Default parameter values

You can give a parameter a default value, used when the caller does not pass anything for it (or passes undefined).

Defaults are a great way to make a function easier to use without sacrificing flexibility.

Rest parameters: gathering many arguments

If you don't know how many arguments a function will be called with, gather them with a rest parameter (...name):

numbers is a real array containing all the arguments. The rest parameter must come last in the parameter list. You can have ordinary parameters before it:

function first(label, ...values) {
  console.log(label, ":", values);
}
first("scores", 90, 85, 70);   // "scores : [90, 85, 70]"

The spread operator: unpacking an array into arguments

The opposite of gathering is spreading. If you have an array and want to pass each element as a separate argument, use ... at the call site:

The same ... syntax means rest in a parameter list and spread at a call site. The context tells you which.

Returning values

A function communicates its result through return. A few useful things to know:

• return immediately exits the function.
• return; without a value, or no return at all, gives the caller undefined.
• A function can have many return statements.
• Anywhere in the body — including from inside a loop, an if, or a nested block.

The early return inside the for loop is idiomatic. There's no need to set a flag and break — return does both at once.

Returning more than one value: object destructuring

JavaScript functions return one value. But that value can be an object with multiple named pieces, which is the standard way to return several related results.

The const { min, max, ... } = ... syntax is called destructuring. It pulls named properties out of the returned object into separate variables in one line. We will use this all the time.

Options objects (the named-arguments pattern)

For functions with many parameters, especially booleans or configuration values, passing an object of options is far more readable than passing many separate positional arguments.

Both calls produce the same string. The second is dramatically easier to read and to extend (a new option is one new property, not a new positional slot to remember).

The = {} at the end of the parameter list is a default for the options object itself, so callers who don't need any options can call the function with no second argument.

Functions are objects too

A small but important fact: in JavaScript, functions are a kind of object. They can have properties attached to them. They are compared by reference, like other objects. They are stored on the heap.

You don't need to use this fact often, but it explains a few behaviours:

Documenting parameters with JSDoc

A common, lightweight way to describe what a function expects is to add a JSDoc comment block above it:

Editors (like VS Code) pick up JSDoc comments and use them for autocomplete and hover help. They are an easy, low-cost way to make a codebase friendlier.

Challenge