Function Parameters, Arguments and Return Values

Function parameters let you pass data into a JavaScript function, and return sends a result back. Learn arguments, default values and return.

Parameters vs arguments: what is the difference?

A recipe for pancakes might say "use X eggs". The recipe has a blank space, and you fill it in when you cook. Functions work the same way.

• A parameter is the name for the blank space, written in the round brackets when you declare the function.
• An argument is the real value you put in when you call the function.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Amina");
greet("Carlos");
// Output:
// Hello, Amina!
// Hello, Carlos!

Here name is the parameter. "Amina" and "Carlos" are arguments. Inside the function, name works like a variable that holds whatever value was passed in.

Functions with multiple parameters

Separate parameters with commas. Arguments are matched by position: the first argument goes into the first parameter, the second into the second, and so on.

function describeProduct(name, price, inStock) {
  const status = inStock ? "available" : "sold out";
  console.log(`${name} costs $${price} and is ${status}.`);
}

describeProduct("Backpack", 49, true);
describeProduct("Water bottle", 15, false);
// Output:
// Backpack costs $49 and is available.
// Water bottle costs $15 and is sold out.

The order matters. If you wrote describeProduct(49, "Backpack", true), the name would be 49 and the price would be "Backpack".

Default parameters

What happens if you forget an argument? The parameter gets the value undefined. To avoid that, you can give a parameter a default value with =. It is used only when no argument (or undefined) is passed.

function orderCoffee(size = "medium", milk = "regular") {
  console.log(`One ${size} coffee with ${milk} milk.`);
}

orderCoffee("large", "oat");
orderCoffee("small");
orderCoffee();
// Output:
// One large coffee with oat milk.
// One small coffee with regular milk.
// One medium coffee with regular milk.

Tip: Put parameters with defaults at the end of the list. Then callers can simply leave them out.

How return values work

So far our functions only printed things. Often you want a function to give back a result so you can use it later, like a calculator that shows an answer. The return keyword does this.

function calculateTotal(price, quantity) {
  return price * quantity;
}

const total = calculateTotal(4.5, 3);
console.log(total);
console.log(`With delivery: $${calculateTotal(10, 2) + 5}`);
// Output:
// 13.5
// With delivery: $25

return price * quantity sends the answer back to the place where the function was called. That is why we can store it in total or use it inside another expression. console.log only shows a value; return hands the value to your code.

Common mistake: Using console.log inside a function when you meant to return. The value appears in the console, but const result = myFunction() will be undefined, because nothing was returned.

Returning early and functions without return

return also stops the function immediately. Any code after it does not run. This is useful for checking bad input first, which is called returning early.

function getDiscount(age) {
  if (age < 0) {
    return "Invalid age";
  }
  if (age < 12 || age >= 65) {
    return 0.5;
  }
  return 0;
}

console.log(getDiscount(-4));
console.log(getDiscount(8));
console.log(getDiscount(30));
// Output:
// Invalid age
// 0.5
// 0

Each return ends the function, so we do not need else. The code stays flat and easy to read.

If a function has no return at all, it still gives something back: undefined.

function sayHi() {
  console.log("Hi!");
}

const result = sayHi();
console.log(result);
// Output:
// Hi!
// undefined

What is a pure function?

A pure function follows two simple rules:

1. It always gives the same output for the same input.
2. It does not change anything outside itself (no changing outside variables, no printing).

calculateTotal(price, quantity) is pure: calculateTotal(4.5, 3) is always 13.5. Pure functions are easy to test and hard to break, like a reliable calculator. Not every function can be pure (a function that shows a message must affect the outside), but try to keep your calculations pure.

Practice exercise

Write a function convertToFahrenheit(celsius) that returns the temperature in Fahrenheit using the formula celsius * 9 / 5 + 32. Give celsius a default value of 0. Use a loop to print the conversion for 0, 10, 20, 30 and 40 degrees.

Hint: The function should only return the number. Use a for loop like for (let c = 0; c <= 40; c += 10) and call convertToFahrenheit(c) inside a template literal in console.log. For 20 degrees you should get 68.

Key takeaways

• Parameters are the names in the function declaration; arguments are the values you pass when calling.
• Arguments match parameters by position, and default values fill in missing ones.
• return sends a value back and stops the function right away.
• A function without return gives back undefined.
• Pure functions give the same output for the same input and change nothing outside.