Parameters and Return Values

After this lesson you can

• Write a function with parameters and call it with arguments
• Return a value from a function and use it, and tell when a call gives back undefined

Key takeaways

• A parameter is a name in a function's parentheses. An argument is the value you hand over when you call the function.
• Arguments fill parameters in order, so the first argument goes to the first parameter, whatever their names.
• return hands a value back to the code that called the function, and ends the function right there.
• console.log only shows a value on the screen. To use a function's result in your code, the function has to return it.
• A function with no return gives back undefined, and so does a parameter that gets no argument.

In Coin Dash, a gem is worth 50 points. Pip might grab 2 gems in one level and 9 in the next, and the math is the same each time: only the number changes. A separate function for every possible number of gems would never end. Instead, you write one function with a blank in it, and fill in the blank each time you call it.

You'll use this in almost every function you write. A shopping site has a function that takes a cart and gives back its total; a weather app has one that takes a temperature in Celsius and gives back Fahrenheit. Values go in, a result comes out. This lesson shows both halves: how values go in (parameters and arguments), and how a result comes out (return).

Handing a function what it needs

At a coffee shop, the barista makes every latte from the same recipe, but the recipe has a blank: whose name goes on the cup? You fill in that blank when you order.

A function's blanks are its parameters: names written inside its parentheses. The values you fill them with when you call it are its arguments.

function cheer(playerName) {
  console.log(`Nice jump, ${playerName}!`);
}

cheer('RocketRae');
cheer('PixelPanda');

Nice jump, RocketRae!
Nice jump, PixelPanda!

playerName is the parameter. Inside the function it works like a variable, and each call gives it a new value: 'RocketRae' the first time, 'PixelPanda' the second. Those two strings are the arguments.

A way to remember which is which: a Parameter is a Placeholder, and an Argument is the Actual value.

More than one parameter

A function can have several parameters, separated by commas. The arguments fill them in order: the first argument goes to the first parameter, the second to the second.

function showScore(playerName, score) {
  console.log(`${playerName}: ${score} points`);
}

showScore('RocketRae', 1250);
showScore(1250, 'RocketRae');

RocketRae: 1250 points
1250: RocketRae points

JavaScript doesn't look at the names to work out which value goes where. It goes by position, so the second call puts the score where the name should be. When a function has two or more parameters, keep the arguments in the same order as the parameters.

Try it. Make a file named cheer.js with the showScore function. Call it for three players of your own, then run it with node cheer.js.

return: handing back a result

Ask a friend to add up the bill at a restaurant and they tell you the total, so you can split it, tip on it, or pay it. They don't shout it across the room and forget it.

The keyword return is how a function tells its result to the code that called it. The value it hands back is called the function's return value, and the call itself turns into that value:

function pointsForGems(gems) {
  return gems * 50;
}

const levelOnePoints = pointsForGems(2);
const levelTwoPoints = pointsForGems(9);

console.log(levelOnePoints);
console.log(levelOnePoints + levelTwoPoints);
console.log(`Total: ${pointsForGems(2) + pointsForGems(9)}`);

100
550
Total: 550

pointsForGems(2) works out 2 * 50 and hands back 100, which goes into levelOnePoints. Because a call turns into its return value, you can use it anywhere a value fits: in a variable, in a sum, or in a template literal.

That's the difference between return and console.log. console.log shows a value on the screen, for a person to read. return hands the value back to your code, so the program can keep working with it.

return ends the function

When return runs, the function stops right there and hands back its value. Any lines after it are skipped. That makes return a handy way to finish early from inside an if:

function medalFor(score) {
  if (score >= 1000) {
    return 'gold';
  }
  if (score >= 500) {
    return 'silver';
  }
  return 'bronze';
}

console.log(medalFor(1250));
console.log(medalFor(600));
console.log(medalFor(80));

gold
silver
bronze

For a score of 1250, the first return runs and the function is done: it never gets to the other two checks. For 80, neither if is true, so the last line hands back 'bronze'.

When there's no return: undefined

A function without a return still hands something back: undefined, JavaScript's word for "there's no value here". It's a common surprise, and it shows up two ways.

The first is a function that works something out but never returns it, or prints it instead of returning it:

function addLife(lives) {
  lives + 1;
}

function bonusForStars(stars) {
  console.log(stars * 100);
}

console.log(addLife(3));
const bonus = bonusForStars(4);
console.log(bonus);

undefined
400
undefined

addLife adds 1 and throws the answer away. bonusForStars prints 400, but hands back nothing, so bonus holds undefined. Both are fixed the same way: write return in front of the value.

The second is a call that leaves out an argument. The parameter that gets nothing is undefined too:

function cheer(playerName) {
  return `Nice jump, ${playerName}!`;
}

console.log(cheer());

Nice jump, undefined!

When you see undefined where you expected a value, ask two questions: does the function return its result, and did the call hand over every argument?

Try it. Write a function named secondsToMinutes(seconds) that returns the number of whole minutes, using Math.floor(seconds / 60) (Math.floor rounds a number down). Print secondsToMinutes(150), which should be 2. Then delete the word return and run it again, to see undefined for yourself.

Check yourself

2 questions to try on the lesson page.

So what

Parameters take values in, and return hands a result back: together they make a function a small machine you can trust with any input. Nearly every function you'll write from here on works this way, from a game's score to a shop's total.

Key terms

• Parameter
• Argument
• Return Value
• undefined

Cheat sheets

• Parameters and Return Values

Related

• What Is a Function