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

Let's Build Something

Make an HTML page with a form on it with text fields labeled Title, Author, Publisher, Year and with a button Save. Clicking the button Save should store into a Javascript object book the fields title, author, publisher and year. It then causes an alert to be displayed with the contents of the book object neatly drawn.

Post your answers to the Let's Build Something Thread.

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 = this.arguments[0], j=this.arguments[1], a=this.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 />");
    }
}

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

Variable Hoisting

We said before the scope of a variable is the variable object within which it is defined (var) or the current object instance (this) within which it is used (a property).

A variable in an variable object can be used in function declarations within that variable object:

var b = 10; // scope window variable object
function foo () { // same as window.foo
    alert(typeof b); /* b can be used in foo.
                       this will say number */
}
foo();

If in a function declaration, we declare a variable with the same name as in a parent variable object, then this declaration is assumed to appear at the start of the function (it is hoisted), and it will hide the variable from the parent object.

var b = 10; // scope window variable object
function foo () {
    alert(typeof b); /* the var b below is hoisted,
                        b property of this function used
                        which is currently undefined, so
                        outputs undefined*/
    var b = "hello";
    alert(typeof b); // outputs string
}
foo();

The Module Pattern

In PHP, Java, etc, we can declare the visibility of variable: We can make the public or private.
In Javascript, we can fake this by using parent function objects as a scope in which to declare variables that are used in an inner function declaration.
The parent function objects are sometimes called a closure.
If the parent function object is anonymous and immediately called, it is called an immediately invoked function expression (IIFE, pronounced "iffy").

The general format of how to fake private variables using IIFE's is called the module pattern:

var object_we_are_making = (function () {
    // private variables
    return {
       // public data and methods
    }
}());

Here is an example of using this pattern:

var employee = (function() {
    var salary = 20000; 
    return {
        name: "John Smith",
        getSalary : function () {
            return salary;
        },
        setSalary : function (sal) {
            salary = sal;
        }
    }
}());
alert(employee.name); // John Smith
alert(employee.getSalary()); // 20000
employee.setSalary(100000);
alert(employee.getSalary()); // 100000
alert(employee.salary); // undefined

More Faking Visibility

The example of the last slide let's us create single objects with private variables.

If we want to create something like a class with private variables, we can use an idiom like:

function Employee(name, sal) {
    var salary; // scope within constructor
    this.name = name;
    salary = sal;
    this.getSalary = function () {
        return salary;
    }
    this.setSalary = function (sal) {
        salary = sal;
    }
}
var emp1 = new Employee("John", 100000);
var emp2 = new Employee("Sally", 150000);
alert(emp1.name); // John
alert(emp2.name); // Sally
alert(emp1.getSalary()); // 100000
emp2.setSalary(200000);
alert(emp2.getSalary()); // 200000
alert(emp1.getSalary()); // 100000
alert(emp1.salary); // undefined

Pattern Matching

Frequently in Javascript we will be manipulating strings using pattern matching, so it is useful to know what facilities are available for this.
Javascript pattern matching is modeled on Perl's regular expressions.
A pattern is an expression between / /.
In such a pattern normal characters match themselves.
In addition to normal characters there are special characters: \ | ( ) [] {} ^ $ * + ? .

As an example:

var str = "Rabbits are furry";
var position = str.search(/bits/); /* returns position of first occurrence */

Pattern Special Characters

. -- matches any single character. So /snow./ would match snows and snowy
() -- used to control order of matching /(ab)*/ matches ab, abab, but not aab
[] -- logical or of a group of patterns
[azf] matches an "a", a "z", or an "f".
[a-d] - matches the range a,b,c,d
^ -- acts as negation or as a start of string anchor. So [^abc] is any character other than a, b, c; /^abc/ matches abc at the start of a string.
$ -- acts an anchor to end of a string. /abc$/ matches abc at the end of a string.
\ -- either can be used to escape characters (so \. would match a period), or for one of a list of special escape patterns such as \r \t, \n, \f or

Slash Patterns

\d -- match a digit,
\D -- match anything other than a digit
\w match a word character (alphanumeric)
\W match a not a word character.
\s match a single whitespace character
\S match a single nonwhitespace character

Yet more special characters

* -- matches 0 or more occurrences of the pattern. For example /x*/ would match empty string, x, xx, xxx ...
+ -- matches 1 or more occurrences of the pattern
? -- matches 0 or 1 occurrences of the pattern
{} -- can be used to match exactly k occurrences:
```
/yx{5}z/ matches yxxxxxz	
```

Pattern Modifiers

i -- makes the pattern case insensitive. For example,
```
/Apple/i would match APPLE, aPple and apple.
```
x -- allows whitespace to occur in the pattern
g-- means do globally - we'll see this more on the next slide

More Pattern Methods

replace -- replace the matched pattern with the given replacement string.
```
var str="Fred, Freddie, Frederica";
str.replace(/Fre/g, "Boyd");
```
notice we use g to replace all occurrences.

match -- returns an array of the pattern matched results

var str= "3 and 4";
var matches = str.match(/\d/g); //returns [3, 4]

split -- splits a string into an array of substrings according to the pattern delimiter

var str="grapes:apples:oranges"
var fruit = str.split(":"); // [grapes, apples,oranges]

Javascript (Arrays, Objects, Regex, Functions)

Outline

Arrays