Assignment – Functions

Lecture Notes

Functions

A function is a block of code that is not called automatically by the browser when the page is loaded. Instead, you must manually call the function or attach a function call to an event on the page.
Note: When a function is defined as belonging to an object, it is called a ‘method’ of that object. An example of this is the ‘log’ method of the ‘console’ object (console.log).

function printName() {
    console.log("My Name");
}
printName();

Parameters

Parameters are what a function eats. When you define a function, you give it placeholders for values that the function will use within itself when it runs.

// seperate parameters with a comma and a space
function printName(firstName, lastName) {
    // concatenate the variables to make a single string 
    // (this is the 1 parameter that the log(string) method takes
    console.log(firstName + " " + lastName); 
}
printName("My", "Name");

Return Value

If you think of functions as living things and parameters are what a function eats, it makes sense to think of return values as what it excretes :P

This is why we can think of functions as input/output black boxes that perform operations on the input based on the purpose of the function, outputting the result.

function printName(firstName, lastName) {
    // return statements can return anything (even functions!)
    return firstName + " " + lastName; 
}
// the function printName returns a string, which is 1 parameter to console.log()
console.log( printName("My", "Name") );

Functions as Objects

A function is a type of object. It can be assigned as the value of a variable or declared using the ‘new’ constructor keyword

function person(firstName, lastName) {
    // 'this' is an alias keyword referring to particular instance of this object
    this.name = firstName + " " + lastName; 
}
 
var adam = new person("Adam", "Eivy");
console.log(adam.name);
 
var joe = new person("Joe", "Bob");
console.log(joe.name);
 
var yourName = function() {
     console.log("This is your name");
}
document.getElementById("nameButton").onClick = yourName;

Scope

The area of code in which you can access a particular variable is called ‘the variable scope’. Javascript has 2 scopes, global or local

Global Variables

If you create a variable without using the ‘var’ keyword, the variable will have global scope. Global functions are available inside or outside of functions and can become confusing, leading to bugs. There really isn’t much reason to use global variables (YUI calls them evil). So it’s always good practice to initialize your variables with the ‘var’ keyword the first time the variable is used (or initialize it before you use it).

Scope Demo:

// local (page level variables) -- these can be accessed within functions on the page
 
// example of initializing a variable with no default value
var init;             
// example of initializing multiple variables
var init1,init2,ini3; 
 
var varA = "A";
var varB = "B";
var param1 = "param1";
 
// create a function
// param1 has function 'local' scope
function addMyName(param1){                       
 
    // new function variable (even though it has the same name, it's a new variable inside this function)
    var varA = "D (in function)";               
    // overwriting page level variable!  
    varB = "I overwrote your variable :P";        
    // no need to use var keyword because the argument is already created
    param1 += " (modified inside function only)"; 
     // new page level variable
    varC = "I'm invading the world! :)";
 
    console.log("Inside Function Call:");
    console.log("varA = " + varA);
    console.log("varB = " + varB);
    console.log("param1 = " + param1);
    console.log("varC = " + varC);
 
}
 
console.log("Before Function Call:");
console.log("varA = " + varA);
console.log("varB = " + varB);
console.log("param1 = " + param1);
 
// call the function
addMyName(param1);
 
console.log("After Function Call");
// this didn't get changed by the function
console.log("varA = " + varA);      
// the function messed up my page variable!!!
console.log("varB = " + varB);      
// didn't change by on the function call
console.log("param1 = " + param1);
// AHHH! I don't want this to be defined at this level...
console.log("varC = " + varC);

Outputs:

    Page Before Function Call:
    varA = A
    varB = B
    param1 = param1
 
    Inside Function Call:
    varA = D (in function)
    varB = I overwrote your variable :P
    param1 = param1 (modified inside function only)
 
    Page After Function Call
    varA = A
    varB = I overwrote your variable :P
    param1 = param1
    varC = I'm invading the world! :)

Prototypes

In JavaScript when you create an object, you can add functions (which we call “methods”) to that object as prototypes:

var x = ['monkey','robot','chicken','goat','zombie'];
/* Finds the index of the first occurence of item in the array, or -1 if not found */
Array.prototype.indexOf = function(v) {
    for (var i = 0; i < this.length; ++i) {
        if (this[i] === v) { return i; }
    }
    return -1;
};
// Now arrays all have the 'indexOf' method attached to them
console.log(x.indexOf("goat"));
console.log(x.indexOf("shark"));

Intellectual Pirates

Lecture 05: Functions