Parameters, Arguments, and Return Values

The function in the previous lesson always logged the same hardcoded tour. Useful for demonstration, not useful in practice. Parameters let you pass different data to the same function each time you call it. Return values let the function produce a result you can use elsewhere.

Parameters vs arguments

Parameters are the placeholder names in the function definition:

function formatPrice(price) {
  //             ↑ parameter
  console.log('$' + price.toFixed(2));
}

Arguments are the actual values you pass when calling the function:

formatPrice(149);   // 149 is the argument
formatPrice(199);   // 199 is the argument

Parameters are in the definition. Arguments are in the call. The terms are often used interchangeably in conversation, but the distinction is worth knowing.

Multiple parameters

A function can accept multiple parameters, separated by commas. Order matters — the first argument maps to the first parameter, second to second:

function formatTourSummary(name, price, available) {
  const status = available ? 'Available' : 'Sold Out';
  console.log(`${name} | $${price.toFixed(2)} | ${status}`);
}

formatTourSummary('Cascade Ridge Hike', 149, true);
// 'Cascade Ridge Hike | $149.00 | Available'

formatTourSummary('Summit Loop Trek', 199, false);
// 'Summit Loop Trek | $199.00 | Sold Out'

Default parameters

A default parameter is used when no argument is provided for that position:

function greet(name = 'Guest') {
  console.log(`Welcome, ${name}!`);
}

greet('Brandon');  // 'Welcome, Brandon!'
greet();           // 'Welcome, Guest!'

Default parameters are set with = in the parameter list. They activate only when the argument is undefined (absent or explicitly undefined).

The return statement

return sends a value back to the caller. Without it, the function returns undefined.

function formatPrice(price) {
  return '$' + price.toFixed(2);
}

const label = formatPrice(149);
console.log(label);  // '$149.00'

return also exits the function immediately — code after it in the same block does not run:

function isAvailable(available) {
  if (!available) {
    return false;   // exits here when false
  }
  return true;
}

Using the return value

A returned value can be stored, used in an expression, or passed directly to another function:

const priceLabel = formatPrice(149);          // store it
console.log('Price: ' + formatPrice(149));    // use in expression
console.log(formatPrice(isAvailable(true) ? 149 : 0));  // pass to another call

Pure functions

A pure function always produces the same output for the same input and has no side effects — it does not modify anything outside itself.

// Pure — same input always gives same output, no side effects
const formatPrice = (price) => '$' + price.toFixed(2);

// Not pure — reads a global variable; result depends on outside state
function formatPrice() {
  return '$' + tourPrice.toFixed(2);  // depends on external tourPrice
}

Pure functions are easier to test, reason about, and reuse. Aim for them in your helpers. The STO functions you are writing — formatPrice, isAvailable — should be pure.

Exercise

Open main.js in VS Code. Replace its current contents with the following, then save the file and reload index.html in Chrome.

Open DevTools → Console tab and verify each line of output matches the comment next to it.

function isAvailable(available) {
  return available === true;
}

function formatPrice(price) {
  return '$' + price.toFixed(2);
}

// Call both with STO tour data
console.log(isAvailable(true));   // true
console.log(isAvailable(false));  // false

console.log(formatPrice(149));    // '$149.00'
console.log(formatPrice(199));    // '$199.00'

// Use both in a tour summary
const tourName = 'Cascade Ridge Hike';
const tourPrice = 149;
const tourAvailable = true;

console.log(`${tourName} | ${formatPrice(tourPrice)} | ${isAvailable(tourAvailable) ? 'Available' : 'Sold Out'}`);

Recap

• Parameters are placeholders in the definition. Arguments are the values passed at the call site.
• Multiple parameters are separated by commas. Order of arguments must match order of parameters.
• Default parameters (name = 'Guest') activate when the argument is undefined.
• return sends a value back to the caller and exits the function immediately. Without return, the function returns undefined.
• Pure functions — same input, same output, no side effects — are easier to test and reuse.