Arguments and the return value

In the previous lesson a function was a coffee machine. Its parameters are the compartments, the arguments are what you put into them, and return pours the drink into the cup. Now let's work through the questions this picture raises by itself.

What happens if you add beans but forget the water? Or bring three bags of beans for two compartments? And what ends up in the cup if the machine's program poured nothing into it?

How many arguments to pass

The number of arguments in a call does not have to match the number of parameters. Arguments fill the parameters in order, from left to right. Let's look at a function with two parameters and three calls:

function pair(a, b) {
    console.log(a, b);
}

pair(1); // 1 undefined
pair(1, 2, 3); // 1 2
console.log(2 + undefined); // NaN

Let's see what happened in each case.

Fewer arguments

The call pair(1) puts 1 into a, and there is no argument left for b. A parameter without an argument gets undefined. That is how the line 1 undefined is printed.

In arithmetic undefined turns into NaN. So a missing argument in a sum gives NaN, not 0: the third line, 2 + undefined, prints NaN.

More arguments

The call pair(1, 2, 3) puts 1 into a and 2 into b. An extra argument is dropped by the function: there is no parameter for it. It prints 1 2.

Here the coffee-machine picture stops working. A real machine would beep and refuse to brew without water. JavaScript gives no warning about missing arguments or extra ones: the function runs with what it got.

A result without return

The value of a call is what the function gave back with return. If the body has no return, the machine's program ran, but the cup stayed empty. An empty cup in JavaScript is undefined.

const result = pair(5, 6); // 5 6
console.log(result); // undefined

function half(n) {
    if (n < 0) {
        return;
    }
    return n / 2;
    console.log("never");
}

console.log(half(10), half(-4)); // 5 undefined

Let's go step by step:

1. pair(5, 6) prints 5 6, but it has no return, so result gets undefined.
2. half(10) reaches return n / 2 and gives back 5.
3. The line console.log("never") never runs: return ends the call at once.
4. half(-4) enters the if and runs return without a value. Such a return also gives back undefined.

Printing and returning are different things. console.log shows a value on the screen, while return hands it to whoever called the function.

A printed value can only be read with your eyes. A returned value is something the program keeps working with:

• it stores it in a constant: const h = half(10);
• it puts it into an expression: half(10) + 1 gives 6;
• it passes it as an argument to another call: half(half(20)) gives 5.

So a function that computes something returns the result, and whoever called it prints it.

Interviewers like to ask this: "What does a function without return give back?" The answer is undefined, and a return without a value gives the same.

Common mistake

A function was written to compute something, but return was forgotten:

function total(price, count) {
    price * count; // ✗
}

console.log(total(3, 4)); // undefined

The function multiplies 3 by 4, but the result goes nowhere, and the call gives back undefined. JavaScript reports no error. The fix is to return the value: return price * count;.

Key points

• Arguments fill the parameters from left to right.
• A parameter without an argument gets undefined, and an extra argument is dropped.
• A function without return, or with an empty return, returns undefined.
• return ends the call: the lines after it do not run.