More Arrays

The Array object in Javascript has several useful methods for manipulating arrays.

join --- can be used to make a string out of an array.

var names = new Array("Mary", "Murray", "Max");
var nstring = names.join(":");

concat --- can be used to add elements to an existing array.
```
var a = [1, 2, 3];
a.concat(4, 5);
```
slice(i,j) --- return a sublist from the i to the j element.
push, pop, shift, unshift --- stack-like operations

You can iterate over arrays using the syntax:

(//we'll talk more about functions in a moment)
function my_callback(item, index) {
  alert(index + ":" + item);
}
var a = [1, 2, 3];
a.forEach(my_callback);

Functions

A Javascript function definition consists of two parts:
1. a function header consisting of
  - the keyword function
  - an identifier
  - a parenthesized list of parameters
2. a compound statement

Function Example

function swap(i, j, a)
{
	var tmp=a[i]; /* explicitly defined variables 
                         have scope within the function
                         if I had declared the variable 
                         implicitly it would have global scope */
	a[i] = a[j]; a[j] = tmp;
}

This function could be called with a syntax like:
```
swap(10, 5, b);
```
A return statement can be used to return a value from a function.
Functions are objects so can be assigned as a value to variables.
```
var c = swap;
```
So could call:
```
c(10, 5, b);
```
The definition of a function does not need to list its arguments. One can obtain a list of arguments using the argument subobject of a Function.
```
function swap()
{ 
  var i = arguments[0], j=arguments[1], a=arguments[2];
  //same code as before
}
```
Functions can be declared anonymously in Javascript, so we can also write code like:
```
swap = function(i, j, a) {
   /* same code as before*/
}
```

Constructors

Javascript constructors are special methods that create and initialize the properties for newly created objects. For example,

function car(new_make, new_model, new_year)
{
   this.make = new_make;
   this.model = new_model;
   this.year = new_year;
}

I could then create an object with

my_car = new car("Ford", "Contour SVT", "2000");

Methods

To create methods, I can do things like the following way to create a display method to pretty print cars:

function display_car()
{
    document.write("Make:", this.make, "<br />");
    document.write("Model:", this.model, "<br />");
    document.write("Year:", this.year, "<br />");
}
function car(new_make, new_model, new_year)
{ 
    //same as before
    this.display = display_car;
}

this always refers to the enclosing object. If you haven't defined any objects yet this will usually end up being the window object.
Notice we wrote this.display = display_car not this.display = new display_car. When we do my_car = new car("Ford", "Contour SVT", "2000"); the enclosing object for this.display and the occurrences of this within display_car as used within car will be my_car.
The drawback of the above code is that each time we create a new car we have a separate pointer to display_car. Instead, we can use the prototype property of the car function. This will only create one pointer.
```
function car(new_make, new_model, new_year)
{ 
    //same as before
}
car.prototype.display = display_car;
```

If we want to define the methods in the function body, we can also write:

function car(new_make, new_model, new_year)
{ 
    //same as before
    car.prototype.display = function()
    {
        document.write("Make:", this.make, "<br />");
        document.write("Model:", this.model, "<br />");
        document.write("Year:", this.year, "<br />");
    }
}

In-Class Exercise

Create a Javascript object Cart with properties a list of grocery items and prices.
Add to this Cart a method prettyPrint to nicely print out its contents.
Post your solutions to the Apr 21 In-Class Exercise Thread

More on the Prototype Property

When Javascript looks up a property of an object, it:
- Looks up property in the instance,
- If it is not found then it looks in the prototype object of the given function object,
- Since prototype is an Object, it too has a prototype subobject. So it looks at the prototype property of this subobject to see if the property is set there.

We can use the prototype property to achieve something like inheritance:

function A() {
}
A.prototype.foo = function() {
   alert("foo");
}
function B() {
}
B.prototype = new A();
/*
  we just made B's prototype an instance of an A function object 
  which has its own prototype. So property look up for B,
  looks within its instance, then within it prototype,
  which is an instance of A, to see if it is a property of A,
  then it looks at A's prototype to see if the property is there.
  As A's prototype is an Object, it finally looks at Object's
  prototype to see if the property is there.
*/ 
B.prototype.goo = function() {
   alert("goo");
}
a = new A();
a.foo(); // alert with foo in it
b = new B();
b.foo(); // alert with foo in it
b.goo(); // alert with goo in it
a.goo(); // type error goo is not a function of A

Javascript Arrays - Functions - OO Patterns - Classes - Patterns

Outline