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 a 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 them public or private.
In Javascript, we can fake this by using parent function object 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 lets 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

Quiz

Which of the following statements is true?

Javascript does not support anonymous functions.
To access the make property of a Javascript object my_object, one could use either the syntax my_object.make or my_object['make']
Declaring a variable using let creates it with function scope.

OO since Ecmascript 2015

Ecmascript 2015 introduced the ability to define classes:

class MyClass
{
    a_public_field; //public field declaration
    #a_private_field; // private field declaration notice #
    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
    }
    #myPrivateMethod1(arg1, ...) //notice # indicates private
    {
       // code
    }
    // one can also have generator methods preceded with *
    *getSides() {
       for (const some_var of this.some_iterable_field) {
         yield some_var; 
       }
    }
    // a bunch or static methods...
    static myStaticMethod1(arg1, ...)
    {
       // code
    }
}

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).
One can also have anonymous classes (these behave more like traditional JS OO using function objects):
```
let some_object = class {
   //class definition
}
```

Unlike var declarations class declarations are not hoisted:

const p = new MyClass(); // ReferenceError

class MyClass {}

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()
}

It is also legal to extend traditional JS function objects:

function A(some_arg) {
  this.some_field = some_arg;
}
class B extends A
{
   //code
}

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 occurrence 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]

Execution Environment

When a browser displays an HTML document in a window, it will set up a Javascript Window object to represent information about the window.
All variables defined in global scope (not in a function) are properties of the window variable object in use where they were defined.
You can have more than one Window object if the browser opens more than one window.
Every Window object has a property document which is the Document object representing the HTML document it displays.
Every document objects has a forms array each element of which represents a form (Form object) on the document.
Each Form object has an elements array as a property which contains an array of form elements for the buttons , menus, etc on it.
Document objects also have property arrays for anchors, links, images, and applets.

Document Object Model

The Document Object Model is a model developed in the 90s for how the contents of an HTML, XHTML, or XML document should be modeled by Javascript or other language's objects.
Typically a document is modeled as a tree with roughly one node for each element type.
DOM also described methods for getting, updating, and modifying elements.
- DOM Level 1 was the first standardization which occurred in 1998. (I'll call stuff prior to this Level 0). IE 5 was the first browser to partially support it.
- DOM Level 2 in 2000 added getElementById and a new event model, which we will describe in a moment.
- DOM Level 3 in 2004 added XPath, keyboard event handling, and serialization support.
- DOM Level 4 has 2015. It seeks to incorporate stuff from HTML 5 that makes more sense as part of DOM and sought to simplify the specification of the event model.
The DOM Living Standard always has the most up to date version of the spec.
Most browsers support DOM Levels 1 and 2 and parts of Level 3 and 4.

Element Access in Javascript

The DOM 0 way of associating Javascript objects with form elements was to use the forms array of the Document Object, as well as its sub elements array.
For example, if there was only one form on a page with the following button on it:
```
<input type="button" name="turnItOn" />
```
then it could be accessed with document.forms[0].elements[0].
This is awkward if we start to add elements as this address could change. Instead, we could do document.forms[0].turnItOn
Still, having forms[0] is awkward. Another approach is to given this button an id:
```
<input type="button" id="turnItOn" name="turnItOn"/>
```

We could then look up the button using:

button = document.getElementById("turnItOn");

We need the attribute name still for the button above because that is what gets sent to the server as the name/value pair when the form is submitted.

More on Element Access

Checkboxes in a group of checkboxes often share the same name.
Radio buttons in a group of radio buttons always share the same name.
In the DOM, these object get reflected as an array rather than an element of that name.

For example suppose we had a radio button group with name vehicles. on a form with id bob. We could access this by doing

myForm = document.getElementById("bob");
numButtons = myForm.vehicles.length;
// if we want to we could cycle over this array for values.
for( i =0 ; i < numButtons; i++)
{
	 oneVehicle = myForm.vehicles[i].
     // do something
}

OO Patterns - Regex - DOM

Outline