CS 11: Javascript track

Lecture 2: Basics and OOP

Caltech CS 11 JS 1 To d ay — Javascript basics § primitive types § compound types • objects • arrays § variable declarations § functions

Caltech CS 11 JS 2 To d ay — Object-oriented programming (OOP) in Javascript § Objects or classes? § Prototypes § The prototype chain § Object creation using Object.create() § Object creation using new • functions as constructors § The many faces of this

Caltech CS 11 JS 3 To d ay

— The purpose of this lecture is to explain enough Javascript so that you can get through assignments 1 and 2 — We assume that you know C or Java or both — We will highlight aspects of Javascript that differ from C/Java — We will then describe object-oriented programming (OOP) in Javascript

Caltech CS 11 JS 4 Primitive types

— Here are the primitive types in Javascript: § null § undefined § boolean (true or false) § number (double-precision floating-point) • no integers! • use e.g. 100 | 0 if you want to make sure a number is an integer (ugh!) • vertical bar character (|) is "bitwise or" § string • uses ' ' or " " as delimiters (like Python)

Caltech CS 11 JS 5 Compound types

— Here are the compound types in Javascript: § objects § arrays — Arrays are actually a special kind of object, so really, the only compound type is "object" — Functions (anonymous or not) are also a distinct type, and also a special kind of object

Caltech CS 11 JS 6 Objects

— Objects are basically name/value mappings (hash tables with strings as keys) — Object literals can be created using curly braces: { foo : 1, s : "I am a string" }

Caltech CS 11 JS 7 Local variables — Define local variables using the var keyword: var x = 0; — If you leave out the var, it's not an error, but x will become a global variable! § So don't do it! § Ever! § I'm serious! NEVER do that! — vars are scoped over the entire function they occur in, no matter where in the function they occur

Caltech CS 11 JS 8 Objects

— You can access fields of an object using the dot syntax: var obj = { foo : 1, s : "I am a string" } ; obj.foo // 1 obj.s // "I am a string" — You can mutate object fields the same way: obj.foo = "I am now a string"; obj.s = 42;

Caltech CS 11 JS 9 Objects

— You can add fields to an object at any time: var obj = { foo : 1, s : "I am a string" } ; obj.frobnitz = 1001.3; — You can access object fields using strings instead of bare words: obj.foo = 1001; obj["foo"] // 1001 obj["foo"] = 99.9; obj["this is an unusual field name"] = true;

Caltech CS 11 JS 10 Equality comparison

— Compare two values for equality using the === operator — Compare two values for inequality using the !== operator — NOTE! There are also == and != operators, but DO NOT USE THEM! § They coerce types in weird ways!

Caltech CS 11 JS 11 Functions

— Function syntax for named functions: function add(x, y) { return x + y; } — Anonymous functions: function(x, y) { return x + y; }

Caltech CS 11 JS 12 Methods

— Methods are just function values inside of objects: var myobj = {}; myobj.add = function(x, y) { return x + y; }; myobj.add(2, 3) // 5

Caltech CS 11 JS 13 Arrays

— Arrays are a kind of object — Arrays have literal syntax: var myarr = [1, 2, 3, 4, 5]; — Arrays use square brackets for accessing elements: myarr[0] = 42; myarr[3] // 4 — Arrays have a length attribute: myarr.length // 5

Caltech CS 11 JS 14 WAT

> typeof(1) 'number' > typeof('foo') 'string' > typeof({}) 'object' > typeof([1, 2, 3, 4, 5]) 'object' > typeof(function (x, y) { return x + y; }) 'function'

Caltech CS 11 JS 15 Objects or classes? — Objects are a fundamental data type in Javascript — Objects are basically just key/value maps (like Python dictionaries) where the keys have to be strings — Keys that are identifiers can be bare words: var myobj = { foo: 10, bar: 20 }; — Otherwise, use quotes: var myobj = { foo: 10, "hello world" : 42 };

Caltech CS 11 JS 16 Objects or classes? — Most object-oriented programming languages are class-based § They use classes as a template to build objects § Classes define the object constructor and the inheritance relationship — However, there is nothing fundamental about classes — Some OOP languages have experimented with classless object systems

Caltech CS 11 JS 17 Objects or classes? — One of the earliest object-oriented languages that didn't use classes was called Self § mainly a research language developed at Sun Microsystems — Self was one of the principal inspirations for Javascript (along with Scheme) — Javascript, like Self, does not use classes in its object-oriented system

Caltech CS 11 JS 18 Objects or classes? — Nevertheless, Javascript is profoundly object- oriented — Almost all interesting code in Javascript makes heavy use of objects — What is used in place of classes? — Answer: Prototypes

Caltech CS 11 JS 19 What classes provide — Before we describe what prototypes are, let's see what classes provide in class-based OOP languages § A place where fields and methods are defined § A place where object constructors are defined § A place where inheritance relationships are specified — Javascript needs all of these things, so there must be ways to do these without classes

Caltech CS 11 JS 20 Objects and properties — Javascript uses plain old objects as a repository for fields and methods § which are called "properties" in Javascript — Objects can be created using object literals: var myobj = { foo: 1, bar: 2 }; — New properties can be added at any time: myobj.baz = 42; — Methods are just properties which are functions: myobj.add = function(x, y) { return x + y; };

Caltech CS 11 JS 21 this, part 1 — Actually, methods are slightly more than just functions — When a method is called on an object, the object is bound to a variable called this var myobj = { count: 0; } myobj.inc = function() { this.count++; } — As we will see, this has a bunch of other rules associated with it

Caltech CS 11 JS 22 Properties — Properties can be created on the fly, deleted (using the delete operator), mutated, or looked up — Creating properties on the fly, deleting properties, or mutating properties only affects the named object itself (as you'd expect) — Looking up properties is more complex § If the property exists in the object, just return that value § Otherwise, look it up in the object's prototype

Caltech CS 11 JS 23 Prototypes — Prototypes are Javascript's equivalent to inheritance in other OO languages — Prototypes are used to handle the case where a requested property doesn't exist in an object — In that case, the property is looked up in the object's prototype — If that fails too, the property is looked up in the prototype's prototype, etc. until § the property is found, in which case it's returned § there are no more prototypes, in which case undefined is returned Caltech CS 11 JS 24 Prototypes — The cool part: any object can act as a prototype! — There is no class/object distinction in Javascript — In traditional languages, classes serve as prototypes and objects as units of computation — In Javascript, the same objects can fulfill both roles — This makes the system extremely flexible

Caltech CS 11 JS 25 Prototypes — OK, so how do we specify what the prototype of a particular object is? — This leads to our next topic…

Caltech CS 11 JS 26 Constructors — So far: § We've got a way to put fields and methods (properties) into objects § We know that property lookup failures cause the system to continue looking up the property in an object's prototype — We still need § a way to create objects based on some sort of a template • because most of the time, need to make more than one object of each kind § a way to set the prototype for created objects — Javascript has two main ways to do this

Caltech CS 11 JS 27 Constructors (1st way) — To create an object, you can call the Object.create method with one argument, which is the prototype of the new object var myproto = { foo: 1001, bar: 42 }; var myobj = Object.create(myproto); myobj.foo // 1001 myobj.foo = 10; // shadow prototype property myobj.foo // 10 myproto.foo // 1001 delete myobj.foo; // unshadow property 'foo' myobj.foo // 1001

Caltech CS 11 JS 28 __proto__ — Note: some JS implementations (Firefox, Chrome browsers, Node.js), use a special field called __proto__ to hold the prototype of an object — Other Javascript implementations hide the field containing the prototype, so it isn't directly accessible — Don't assume this field will exist in any particular JS implementation § and if it does exist, leave it alone!

Caltech CS 11 JS 29 Accessing the prototype — If you must interact directly with an object's prototype, there are standard functions to allow you to do this: Object.getPrototypeOf(someObject) Object.setPrototypeOf(someObject, someProto) — We very strongly advise against using setPrototypeOf! § slow, and can radically mess up object hierarchies — Normally, you don't need either of these functions

Caltech CS 11 JS 30 Constructors (2nd way) — Another way to create objects is to use a constructor function — In true Javascript fashion, any function can be a constructor function! — A function is treated as a constructor of an object if it is called with the new keyword — The object being created inside the constructor is accessed using the this keyword (second use of this)

Caltech CS 11 JS 31 Constructors (2nd way) — Example of a function used as a constructor: function Point(x, y) { // this is the object being constructed this.x = x; this.y = y; } var myPoint = new Point(10, 20); — Constructor function names are capitalized by convention

Caltech CS 11 JS 32 Constructors (2nd way) — Constructor function names (like Point) are capitalized by convention — new assigns a new (empty) object to this, then calls the function with that binding for this — new also ensures that the return value of the function will be this (the new object)

Caltech CS 11 JS 33 Constructors (2nd way) — OK, we can create objects based on a constructor function — How is the prototype object specified for the objects created by the constructor function? — This is a bit sneaky… — Functions are objects too! — Therefore, they can have their own properties — One such property could be called prototype

Caltech CS 11 JS 34 Constructors (2nd way) — The prototype property of a function is (very confusingly!) not the prototype of the function object itself! § it is not __proto__, or anything like it — Instead, that property becomes the prototype object of any object created by using the function as a constructor with new — This is the most typical way to add methods to an object

Caltech CS 11 JS 35 Constructors (2nd way) — Here is the usual code pattern for defining a new kind of object (a "class" if you will): function MyConstructor(arg1, ...) { this.field1 = ...; this.field2 = ...; } MyConstructor.prototype = { method1: function(...) {...}, method2: function(...) {...} // etc. }

Caltech CS 11 JS 36 Constructors (2nd way) — Variant: function MyConstructor(arg1, ...) { this.field1 = ...; this.field2 = ...; } MyConstructor.prototype.method1 = function(...) {...}; MyConstructor.prototype.method2 = function(...) {...}; // etc.

Caltech CS 11 JS 37 Constructors (2nd way) — What this pattern accomplishes: § Each object gets its own fields, which are distinct from those of all other objects § Each object shares its methods with all other objects created from the same prototype — This is exactly what you get with standard OO languages using classes — However, you are not limited to doing things this way

Caltech CS 11 JS 38 The many faces of this — The special variable this is probably the most confusing aspect of Javascript — There are many different ways to set the value of this — this is very important information, so pay attention!

Caltech CS 11 JS 39 The many faces of this — When a function contained in an object is called (a "method call"), this is set to be the object which contains the function being called (as you would expect) — When a function is used as a constructor using new, this is set to be the new object being constructed (as you would expect) — If the function is called without using new, this is set to be the "global object" § In many web browsers, this is a "window" object § This leads to tons of bugs if used incorrectly! Caltech CS 11 JS 40 The many faces of this — You can force this to have a particular value when calling a function in three (3) different ways: § the bind method on functions: • function f(...) {... this.x ...} • var g = f.bind(someObject); • now g is like f, but this === someObject § the call and apply methods on functions: • f.call(someObject, arg1, arg2, ...) • f.apply(someObject, [arg1, arg2, ...])

Caltech CS 11 JS 41 The many faces of this — If a function is a callback from some event (an event handler), then this is set to be the element the event fired from — For instance, if this is used in an inline event handler in a browser:

bla bla bla

— then this is set to the DOM element on which the listener is placed

Caltech CS 11 JS 42 Next time — OK, this is enough about that — Next time: pitfalls!

Caltech CS 11 JS 43