Your first function

A cookbook describes a sauce once, on a page of its own. The other recipes do not repeat its steps; they say in short: "make the sauce". A function you write yourself works the same way: its steps are written in one place, and you can run them from anywhere in the program.

When the same calculation is needed in several places of a program, it is written once—in a function. The function add takes two numbers and returns their sum:

function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // 5
console.log(add(10, -4)); // 6

Let's follow the first call:

1. add(2, 3) sends the run into the function add, where a is 2 and b is 3.
2. The statement return a + b; works out 5 and returns that number to where the function was called.
3. console.log receives 5 and prints it.

The second call works the same way, but with other numbers, and prints 6.

Declaring a function

The word function starts a function declaration. The line function add(a, b) { reads from left to right:

• function is a keyword: "I am declaring a function";
• add is the function's name;
• (a, b) are the parameters, names that receive values on every call;
• { opens the function's body—the statements in curly braces.

No semicolon follows the closing curly brace of a declaration; inside the body each statement ends with one as usual.

The declaration itself calculates nothing: the function's body runs only when the function is called, and anew on every call. The function's author picks the parameter names: with the parameters x, y and the line return x + y; the function add would work the same.

Calls and arguments

The notation add(2, 3) is a function call. The numbers 2 and 3 in it are called arguments: the first goes to the first parameter, the second to the second. On every call the parameters receive the values of its arguments, so add(2, 3) and add(10, -4) give different sums.

Interviewers often ask beginners how a parameter differs from an argument:

• a parameter is a name in the function's declaration, for example a;
• an argument is a value passed in a call, for example 2.

The order of the arguments matters when the result depends on it, for example in subtraction:

function minus(a, b) {
    return a - b;
}

console.log(minus(10, 4)); // 6
console.log(minus(4, 10)); // -6

1. In minus(10, 4), the parameter a is 10 and b is 4, and the function returns 6.
2. In minus(4, 10), the arguments swapped places, and the result became -6.

Here the sauce picture stops working. A sauce made by the recipe comes out the same every time, while a function gets its own arguments on every call, and its result depends on them.

Returning a value

The return statement ends the function and returns the value written after it. The function itself prints nothing. The call is replaced by the returned value, and it is console.log that prints it.

The returned value can be used in a calculation right away: add(2, 3) + 1 gives 6.

Common mistake

The function is missing its return:

function add(a, b) {
    a + b; // ✗
}

console.log(add(2, 3)); // undefined

There is no error message, but the program prints undefined—this is how JavaScript marks a missing value. The sum is calculated, but without return the function does not give it back. The fix is to write return a + b;, as in the first example.

Key points

• A function is declared with the word function: the name, the parameters in parentheses, the body in curly braces.
• A call's arguments go to the parameters in order: the first to the first, the second to the second.
• return ends the function, and the call is replaced by the returned value; without return you get undefined.
• A parameter is a name in the function's declaration; an argument is a value passed in a call.