06 objects

View the source code.

This document has a bunch of code examples that you can try in the Chrome developer tools console. In Chrome, press F12 to open the developer tools. Open the Console tab.

In the console, you can enter one line at a time or several lines at once.

When you enter one line at a time, you see the value of each expression you enter:

> person = {}
<- Object {}
> person.firstName = "Steve"
<- "Steve"
> person.age = 62
<- 62

To enter several lines, press SHIFT-ENTER between lines. Then press ENTER enter after the last line.

> person = {
    firstName:"Steve",
    lastName:"Smith"
  }
<- Object {firstName: "Steve", lastName: "Smith"}

JavaScript Objects

An object is a collection of named values. Or sometimes we say an object is a colleciton of name/value pairs. The named values are called properties.

Here is an object that has an object as one of its values:

person = {}

person.firstName = "Steve"
person.lastName = "Perry"
person.age = 62

person.address = {}

person.address.number= 678
person.address.street = "Broadway"

Javascript has a bunch of standard built-in objects. What does built-in mean? It means you're using a JavaScript interpreter that supports the object.

JSON definition

The JSON object is one of the standard built-in objects. That is, most interpreters support the JSON object. Some interpreters, say the interpreters included in older browsers, don't support the JSON object.

The JSON object has two methods: parse() and stringify().

> JSON.stringify(person)
<- "{"firstName":"Steve","lastName":"Perry","age":62,"address":{"number":678,"street":"Broadway"}}"

> p = JSON.stringify(person)
<- "{"firstName":"Steve","lastName":"Perry","age":62,"address":{"number":678,"street":"Broadway"}}"
> ob = JSON.parse(p)
<- Object {firstName: "Steve", lastName: "Perry", age: 62, address: Object}

Objects can have properties (named values), and those properties are captured when you use JSON.stringify. Objects can also have methods, which are not captured by JSON.stringify.

Here we add an increaseAge method to the person object.

person.increaseAge = function(){this.age++}

person.increaseAge()
person
<- Object {firstName: "Steve", lastName: "Perry", age: 63, address: Object}

What about object prototypes?

JavaScript Prototype in Plain Language

Let's start over with a new person object. This person object has no properties, but it has two methods.

person = {
  getFullName(){return this.firstName+" "+this.lastName;},
  increaseAge(){this.age++}
}

Now let's write a function that extends an object.

function extend(obj) {
  function E(){};
  E.prototype = obj;
  return new E();
}

What's going on here? The extend function receives an object and returns a new object that has the received object as its prototype.

A function's prototype property is the object that will be assigned as the prototype to all instances created when the function is used as a constructor. So new E() gives us an object whose prototype is obj. This gives us a way to inherit the the properties and methods of obj. It's not always important to inherit properties, because we'll probably need to set new property values in our new object anyway. But it's very useful to be able to inherit methods.

Here's a nice explanation of prototypes.

Let's create a second person.

> person2 = extend(person)
<- E {}
> person2.age
<- 63
> person2.increaseAge()
<- undefined
> person2.age
<- 64
> person2.firstName
<- "Steve"