Objects

Objectives

create user-defined objects
access object properties and methods
add/define object properties and methods
use an object's prototype
modify object properties and methods
delete an object property
overriding an object's toString() method
use JSON to "stringify" and "destringify" objects
demonstrate the equivalence of the "." and "[ ]" operators when used with objects

Resources

Mozilla has a nice introduction to object-oriented progamming in JavaScript.
Mozilla also has a good article about the details of the object model.

Creating objects

Almost everything is treated like an object in JavaScript.
Objects have properties and methods (functions).
You can access properties and methods two different ways:
- ".": object.property
- "[]": object["property"]
JavaScript allows you to add properties and functions to objects dynamically.
You can add a property or function to all objects of a particular "class" by adding the property or object to the object's prototype. This changes objects that were created before you made the addition!
Objects can be created using a constructor function or by using an object literal.
Objects in JavaScript can be turned into a string representation using JSON.stringify(object)
JSON strings in JavaScript can be turned back into objects using JSON.parse(JSONstring)
JSON stands for JavaScript Object Notation

Object literals

Object literals are just a set of key:value pairs. You can specify an object directly this way. The key names do not have to be quoted in most cases, but it doesn't hurt if they are quoted, and they are quoted in the example given below. The following example shows how you could create an object for employee "Sharon York" who has employee ID 56201, and then display the employee's information:

// create the object var emp = { "firstName": "Sharon", "lastName": "York", "id": 56201, "greet": function() { alert("Hello"); } }; // access the object's properties alert(emp.id + ": " + emp.lastName + ", " + emp.firstName); // call the object's "greet" method emp.greet(); // displays: Hello

Every Object in JavaScript has a toString() method that it has inherited. That method returns a rather generic string representation of the object. While useful, it is often nice to override the inherited toString() method to provide more pleasing output.

Constructors

Constructors are used to create objects. A constructor is written like a regular function, but is called using the "new" keyword.

Changing, adding, deleting object properties

Accessing or setting an object's properties is pretty simple using either the "." or "[]" operators. Properties can be created dynamically by just setting them. Properties can be deleted dynamically using the "delete" keyword. Objects have a "prototype" property which can be used to add or change a property for all objects of a specific object's type. When JavaScript resolves references for an object property or function, it first looks at the individual object, and then at its prototype to try to find it.

Discussion of subclassing in JavaScript is a little beyond the scope of this course. If you wish to pursue this further, there is a useful guide to how the JavaScript object model works on the Mozilla developer network: Details of the object model.

// the following adds a property to just one object emp1.note = "vegetarian"; // the following adds a method to all objects created as an Employee Employee.prototype.fullName = function() { return this.firstName + " " + this.lastName; }; console.log(emp1.note); // displays: vegetarian console.log(emp2.note); // displays: undefined (because the "note" property was never defined for emp2) console.log(emp1.fullName()); // displays: Sharon York console.log(emp2.fullName()); // displays: Dennis Lenski // we can access properties using either "." or "[]" notation emp1.id = 357; emp2["id"] = 9102; // let's add a toString() method override for all the Employee objects Employee.prototype.toString = function() { return this.id + ": " + this.lastName + ", " + this.firstName; }; // and then find out if the employee IDs have changed console.log(emp1 + "\n" + emp2); // displays: // 357: York, Sharon // 9102: Lenski, Dennis // we can even delete a property dynamically using "delete" delete emp1.note; console.log(emp1.note); // displays: undefined (it used to be "vegetarian")

JSON (JavaScript Object Notation)

JSON can be used to create a string representation of an object. This is useful for storing JavaScript objects or transmitting them over a network. JSON can also be used to turn the string back into a JavaScript object. The object we get back from the JSON.parse(string) method is a generic JavaScript object. This is partly because JSON does not store functions, so it can't recreate the original.

JSON is a subset of JavaScript's object literal notation
An object can define what its own JSON string representation looks like by having a "toJSON" method that returns the desired string representation
The JSON.stringify() method takes an optional second argument called a replacer. The replacer is a function which is called for each key:value pair in the JSON string.

// using the same Employee objects earlier on this page console.log(JSON.stringify(emp1)); // displays: {"id":357,"firstName":"Sharon","lastName":"York"} // let's create our own JSON-style string and use JSON.parse() to make it an object var strEmp = '{"id":8585,"firstName":"Teri","lastName":"Chavez"}'; var emp3 = JSON.parse(strEmp); console.log(emp3); // displays: Object { id=8585, firstName="Teri", lastName="Chavez"} // Note that we got an object, but it is NOT an Employee object

More advanced object-oriented programming

In general, the more advanced aspects of JavaScript object-oriented programming are well beyond the needs of this course. For in-class demonstration and explanation (if needed), there is some demonstration code at progs/testObj.html.