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 />");
    }
}

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 Nov 4 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

Variable Hoisting

We said before the scope of a variable is the function within which it is defined (var), the block within which it is defined (let), 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();

Variables declared with let are not hoisted. They are not evaluated until they have been declared:

function checkingLetHoisting() {
    console.log(foo); // ReferenceError
    let foo = "blah";
    console.log(foo); // blah
}

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

OO in Ecmascript 2015

Ecmascript 2015 introduced the ability to define classes:

class MyClass
{
    contructor(arg1, arg2,...)
    {
       // code
       this.foo = arg1; //an example of setting a field
    }
    //getter methods...
    get myGetterFunction(arg1, ...)
    {
       // code
    }
    // a bunch or instance methods...
    myMethod1(arg1, ...)
    {
       // code
    }
    // a bunch or static methods...
    static myStaticMethod1(arg1, ...)
    {
       // code
    }
}

There are some minor difference with respect to definition hoisting between the traditional way (which supports it, and the new way doesn't) to define classes and the new way.
The code inside a class definition must satisfy Javascript strict mode; whereas, the traditional way does not have to (we will say more about strict mode in a couple slides).

To get one class to inherit another one can use the extends keyword much like Java:

class B extends A
{
   //code
   //can refer to parent in child using super keyword. I.e., super.foo()
}

Private versus public variables are still experimental using class definition and have not been standardized yet.

Modules in Ecmascript 2015 and Beyond

In Ecmascript 2015, you can put functions, classes, etc into a file and put the export keyword in front of some of them:

//my_module.js
function hideme() {
   return "from hideme";
}
export function showme() {
   return showme();
}
export class goo
{
}
//another syntax for this is
function foo1()
{
}
function foo2()
{
}
export {foo1, foo2}

You can load such a module using the syntax:

<script type="module" src="my_module.js" >

You can also declare modules inline within your html code:
```
<script type="module">
// some code
</script>
```
One speed-up of modules is that if you accidentally import a module twice, your browser will only process it once. So
```
<script type="module" src="my_module.js" >
<script type="module" src="my_module.js" >
```
would have the same effect as just a single copy of the above line.
Modules must be written as if a "use strict"; declaration had been made. This means, that in a module you must declare variables before using them, function arguments names can't be repeated twice, you can't use the older Javascript with blocks, etc. For example, you would need to write
```
var x = 3.14; // if this was the first occurence of x
```
rather than the more lazy
```
x = 3.14;
```

Modules are allowed to import functions, etc. from other modules without having to import everything:

//my_second_module.js
import {showme} from "./my_module.js";
// I can now call showme()
import "some_other_module.js" //executes module only for side-effects
import * as ModuleName from "./module_name.js" //import everything with a name
/* if module_name.js exports foo(), 
   I could then use this function as ModuleName.foo();
*/

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 Functions - OO Patterns - Classes - Patterns

Outline

Functions