Javascript: Review of Functions

// Introducing Functions 

A function can be defined by preceding a bunch of code with the word function followed by its inputs. These inputs are known as parameters and are enclosed with (). The associated code is enclosed with {}.

// Accepts a number x as input and returns its square
var square = function(x) {
    return x * x;
};

// Accepts a number x as input and returns its cube
var cube = function(x) {
    return x * x * x;
};

cube(7);

// Understanding Parameters
Functions can have zero, one, or more parameters. You can think of these as input that the function receives, and then uses to do something.

// the code example shows a function that takes two number as arguments and returns their product
var multiply = function (x, y) {
    return x * y;
};

multiply(2, 5);

// Argument Types, part 1
We just saw that the naming of parameters doesn't impact the caller of a function. In JavaScript, you don't need to specify a type when defining a function which means that when someone else calls your function, they can supply any type of argument that they want to-- a number, a string, an array, etc. This may lead to some strange behavior if you call your multiply function with a string:

multiply("tweedledee", "tweedledum");
// returned value is NaN (stands for, not a number)

// Argument Types, part 2
Let's say that we want to make sure that the caller always gets a numeric value back, even if the input wasn't of the right type... To achieve that, we need to check the type of argument that was passed in. If it wasn't a number, we probably shouldn't try to multiply it. We'll just return 0 in that case.

var cube = function (x) {
    if (typeof(x) !== 'number') return 0;
    return x * x * x;
};

// the cube() function should return 0.
cube("test");

// Local Variables
Each parameter of a function is effectively a variable. It has a name that we can use inside the function to refer to the value that was supplied by the call to the function. Once the function has been called, is that name available outside the function? To test this, let's run the code below as is:

var volume = function (w, l, h) {
    return w * l * h;
};

volume(2, 3, 4) ;
console.log(w);

We get a "Reference: Error", w is not defined. What that means is that the name w was set to the value 2 inside the function when it was called, but was never defined outside of the function. For the code to work, we've got to set:

var w = 15;

What if you need additional local variables beyond the arguments (e.g. to hold an intermediate result)? In the volume function, you can see an example of such a local variable. The variable area is local because it is visible only inside the function. Even after the function has been called, area is still not defining outside the function and referring to it triggers an error.

var volume = function (w, l, h) {
    var area = w * l;
    return area * h;
};

// var area = 36
console.log("Inside the function, area is 6");
console.log("The volume is " + volume(2, 3, 4));
console.log("Outside the function, area is " + area);

You'll get another Reference Error: area is not defined... so now, uncomment line 6 and you'll have:
Inside the function, the area is 6
The volume is 24
Outside the function, area is 36

Now you see a slightly different version of the volume function: can you spot the difference?


var area = 36;
var volume = function (w, l, h) {
    area = w * l;
    return area * h;
};

console.log(volume(2, 3, 4));
console.log(area);

Area is no longer preceded by var. The area variable is no longer local to the function. Instead, when the function has been called, the area is set to 2 * 3 = 6 when volume is called. The area variable outside the function is called a global variable because it is visible everywhere. Modifying it inside a function is referred to as a side-effect and is generally something you want to avoid. This is why you should always use var when declaring variables!

var area = 36;
var volume = function (w, l, h) {
    var area = w * l;
    return area * h;
};

console.log(volume(2, 3, 4));
console.log(area);