Last Class Review

What are Functions?

• Allows you to group a series of statements together to perform a specific task

• Functions are used to promote “code reuse”

• You can control when functions are executed, for example - you can write functions that only get executed (or called) when a user clicks a specific button

// a simple function that greets you with a 'Good Morning' alert

// 1) Declare a function named greeting

function greeting(){
  alert('Good Morning');
};


// 2) Call (or run) the function

greeting();

Declaring a Function

• Use the function keyword to declare a function

• Functions can be given a name

• The name must be followed by parentheses

• The opening and closing curly braces indicate a “code block”

• The statements for your function goes within the code block

• Simply declaring the function will not run this code, this function must be “called” in order for the code inside the function to be run

Calling a Function

• To run the code inside of a function you use the function name followed by parentheses (don’t forget the parentheses!)

• Now you can call this function as many times as you want

Declaring Functions that need information

• Some functions need additional information in order to perform a specific task

• This additional information is referred to as “parameters”

• To provide parameters to a function, you specify them inside the parentheses after the parameter name

• The parameters are used like variables within the function body

• We use the “return” keyword when we want to retrieve a value from our function, in the case of the example we want to retrieve the result of the multiplying the width times the height

Calling Functions that need information

// Calling the getArea() function with values

getArea(7, 5); // returns 35


// Calling the getArea() function with variables

var doorWidth = 2;
var doorHeight = 8;

getArea(doorWidth, doorHeight); // returns 16

Functions can call other functions

• Function reusability is key results in cleaner code

• Reusing functions leverages key programming principle - Don’t Repeat Yourself

• In the example of below, the surfaceAreaOfCube function calls another function (areaOfSquare) instead of duplicating work that was already done

// Function that calculates area of a square

function areaOfSquare(side){
  return side * side;
};

areaOfSquare(3); // returns 9


// This is a function that calculates the 
// surface area of a cube that *reuses* the areaOfSquare function

function surfaceAreaOfCube(side){
  return 6 * areaOfSquare(side);
};

surfaceAreaOfCube(7); // returns 42

What are Anonymous Functions?

// An anonymous function is a function without a name

function(width, height){
  return width * height;
};


// this function can later be stored as a variable and used later in your code

var area = function(width, height){
  return width * height;
};

// Call anonymous function stored as a variable

area(4, 5); // returns 20

When should you use Anonymous Functions?

• Use for code that only needs to run once within a task

• Use as an event handlers to perform a task when an event occurs

Using an anonymous function as an event handler

// Uses a *named function* to serve as a event handler (function that is called as a result of an event)

$('#blueButton').click(blueEffect);

function blueEffect(){
  $('body').css('background-color', 'blue');
};

// Results are same as above example, but instead we use an anonymous function as a click handler
// This is the common jQuery pattern

$('#blueButton').click(function(){
  $('body').css('background-color', 'blue');
});