Lesson 07 · Basics

Functions

A function is a named list of steps you write once and run whenever you call it. Follow a seven-line script that prices two orders with one function, total(price, count): each call hands in arguments, gets its own call frame of local variables, and return sends one value back to the line that called. console.log then prints 22.

10 min11 steps5 questionsBeginner

Fig 7 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01In function total(price, count) { ... }, what are price and count?

Parameters are the names in the function's brackets. A call such as total(3, 4) fills them in order: price = 3, count = 4.

02When JavaScript reaches the function declaration on line 1, what happens to lines 2 and 3?

Declaring a function stores it under its name. The body runs only when a line calls the function, once per call.

03What does return cost; do inside total?

return ends the call. total(3, 4) on line 5 is replaced by the value 12, which const tea then keeps.

04After line 5 has run, a new line console.log(cost); is added below it, outside the function. What happens?

cost is a local variable. It existed only in that call's frame, which was cleared when the call returned.

05What does a function send back if it has no return statement?

A function that ends without return, or with a bare return;, gives back undefined.

Key terms

Glossary

Function: A named list of steps, written once, that runs each time it is called.
Function declaration: A statement such as function total(price, count) { ... } that creates a function and binds it to a name. It is hoisted: the name works from the top of the script.
Parameter: A name in a function's brackets, such as price, that each call fills in with a value.
Argument: A value passed in a call, such as 3 in total(3, 4).
Call: Running a function by writing its name followed by brackets and arguments, as in total(3, 4).
return: A statement that ends a call and sends a value back to the place the call was made.
Local variable: A variable that exists only inside one call of a function, such as price, count or cost.
Call frame: The scratch space a call gets for its local variables; the ECMAScript specification calls it an execution context. It is removed when the call returns.

Fine print

Notes and sources

The drawing shows each call’s local variables on a tray, the call frame. The ECMAScript specification calls it an execution context: every call gets a new one with its own record of local names, it goes on the call stack, and it is removed when the call returns.
A function declaration is hoisted: JavaScript creates the function and binds the name total before the first line runs, so a call could even come above the declaration. const tea and const cake get their values only when their lines run.
A function that ends without a return statement, or with a bare return;, sends back the value undefined.
Here the arguments are numbers, so the frame gets its own copies of them: changing price inside total would not change anything outside. For an object, what is copied is a reference to the same object.
JavaScript has other ways to write a function. const total = (price, count) => price * count; is an arrow function that gives the same answers and is called the same way.
All seven lines are real: paste them into the browser console, or save them as total.js and run node total.js. Both print 22.

Quiz Unlocks after the last step.