Functions

The phone store employee probably doesn’t carry around a calculator to figure out the taxes and final purchase amount. That’s a task she needs to define once and reuse over and over again. Odds are, the company has a checkout register (computer, tablet, etc.) with those “functions” built in.

Similarly, your program will almost certainly want to break up the code’s tasks into reusable pieces, instead of repeatedly repeating yourself repetitiously (pun intended!). The way to do this is to define a function.

A function is generally a named section of code that can be “called” by name, and the code inside it will be run each time. Consider:

function printAmount() {
    console.log( amount.toFixed( 2 ) );
}
var amount = 99.99;
printAmount(); // "99.99"
amount = amount * 2;
printAmount(); // "199.98"

Functions can optionally take arguments (aka parameters) — values you pass in. And they can also optionally return a value back.

function printAmount(amt) {
    console.log( amt.toFixed( 2 ) );
}
function formatAmount() {
    return "$" + amount.toFixed( 2 );
}
var amount = 99.99;
printAmount( amount * 2 );        // "199.98"
amount = formatAmount();
console.log( amount );            // "$99.99"

The function printAmount(..) takes a parameter that we call amt. The function formatAmount() returns a value. Of course, you can also combine those two techniques in the same function.

Functions are often used for code that you plan to call multiple times, but they can also be useful just to organize related bits of code into named collections, even if you only plan to call them once.

Consider:

const TAX_RATE = 0.08;
function calculateFinalPurchaseAmount(amt) {
    // calculate the new amount with the tax
    amt = amt + (amt * TAX_RATE);
    // return the new amount
    return amt;
}
var amount = 99.99;
amount = calculateFinalPurchaseAmount( amount );
console.log( amount.toFixed( 2 ) );        // "107.99"

Although calculateFinalPurchaseAmount(..) is only called once, organizing its behavior into a separate named function makes the code that uses its logic (the amount = calculateFinal... statement) cleaner. If the function had more statements in it, the benefits would be even more pronounced.

Scope

If you ask the phone store employee for a phone model that her store doesn’t carry, she will not be able to sell you the phone you want. She only has access to the phones in her store’s inventory. You’ll have to try another store to see if you can find the phone you’re looking for.

Programming has a term for this concept: scope (technically called lexical scope). In JavaScript, each function gets its own scope. Scope is basically a collection of variables as well as the rules for how those variables are accessed by name. Only code inside that function can access that function’s scoped variables.

A variable name has to be unique within the same scope — there can’t be two different a variables sitting right next to each other. But the same variable name a could appear in different scopes.

function one() {
    // this `a` only belongs to the `one()` function
    var a = 1;
    console.log( a );
}
function two() {
    // this `a` only belongs to the `two()` function
    var a = 2;
    console.log( a );
}
one();        // 1
two();        // 2

Also, a scope can be nested inside another scope, just like if a clown at a birthday party blows up one balloon inside another balloon. If one scope is nested inside another, code inside the innermost scope can access variables from either scope.

Consider:

function outer() {
    var a = 1;
    function inner() {
        var b = 2;
        // we can access both `a` and `b` here
        console.log( a + b );    // 3
    }
    inner();
    // we can only access `a` here
    console.log( a );            // 1
}
outer();

Lexical scope rules say that code in one scope can access variables of either that scope or any scope outside of it.

So, code inside the inner() function has access to both variables a and b, but code in outer() has access only to a — it cannot access b because that variable is only inside inner().

Recall this code snippet from earlier:

const TAX_RATE = 0.08;
function calculateFinalPurchaseAmount(amt) {
    // calculate the new amount with the tax
    amt = amt + (amt * TAX_RATE);
    // return the new amount
    return amt;
}

The TAX_RATE constant (variable) is accessible from inside the calculateFinalPurchaseAmount(..) function, even though we didn’t pass it in, because of lexical scope.

Note: For more information about lexical scope, see the first three chapters of the Scope & Closures title of this series.