CS133JS Beginning Programming: JavaScript

Object Constructors and Complex Objects

Table of Contents

Introduction

Q and A

• Due this week:

  • Lab 5: Thursday

  • Reading quiz on objects: Thursday

  • Lab 6 beta version: Sunday

• Does anyone have any questions about anything?

Review of Objects

Creating an Object Literal

const fili = {
    name: "Fili",
    race: "dwarf",
    brother: "Kili",
    greet: function() {
        return this.name + " at your service!";
    }
};

Accessing an Object Property

• Dot notation: .

  xxxxxxxxxx
  fili.race;
  

• Bracket notation: []

  xxxxxxxxxx
  fili["race"];
  

The this keyword

Inside a method, the this keyword references the object that contains the method so you can access an object property.

xxxxxxxxxx
const fili = {
    name: "Fili",
    greet: function() { 
        return this.name + " at your service!";
    },
};

Calling a Method on an Object

xxxxxxxxxx
fili.greet();

Object Constructors

Sometimes we will want to make multiple objects that are nearly the same. For example, we might want to make a "template" for creating a flock of pigeons. Here is one pigeon object:

xxxxxxxxxx
// Object literal
const pigeon = {
    name: "Agatha",
  breed: "Egyptian Swift",
  speed: 50,
  fly: function(){
    return this.name + " is flying at " + this.speed + " MPH.";
  }
}

What if we want more pigeon objects, but with different property values? Is there a way we can make a template that we can use to make others? Yes! We can make an object constructor.

Here's a special function that's an object constructor.

Notice that the first letter is capitalized (style, not syntax).

xxxxxxxxxx
// Object constructor
function Pigeon(name, breed, speed){
    this.name = name;
  this.breed = breed;
  this.speed = speed;
  this.fly = function(){
    return this.name + " is flying at " + this.speed + " MPH.";
  };
}

Now we can use the constructor function to make some Pigeon objects. We call the constructor with the keword new which indicates that we are making a new object. We set the property values in the new object by passing them in the constructor function call:

xxxxxxxxxx
const agatha = new Pigeon("Agatha", "Egyptian Swift", 50);
const elizabeth = new Pigeon("Elizabeth", "Egyptian Swift", 60);

We can use these objects just like we would a literal object:

xxxxxxxxxx
agatha.speed = 55;
agatha.fly();
elizabeth.fly();

The this Keyword

Now that we have multiple objects that use the same object definition, we can see the importance of using this inside of object methods. The this keyword represents whatever object it is in and now it can be in multiple objects made by the same object constructor function.

Q: What would have happened if we used the object name inside the method instead of this?

Complex Objects

Object properties can be other objects. When we put objects inside of objects we say they are a complex object. That doesn't mean they are complicated, just that objects are composed with one or more other objects inside of them.

An Object Inside an Object

An object can have a property that has an object as it's value. For example we can make a loft object for our pigeons to live in (a pigeon house is called a loft). Here is a loft for just one pigeon. (The pigeon property is an object literal.)

xxxxxxxxxx
// Object literal
const loft = {
  water: 100,  // percent full water
  food: 100,    // percent full food
  pigeon: {
      name: "Agatha", 
      type: "Egyptian Swift", 
      speed: 50,
      fly: function() {
           return this.name + " is flying at " + this.speed + " MPH.";
      }
  }
}

Or, we can use an object constructor:

xxxxxxxxxx
// Object literal with object from object constructor
const loft = {
  water: 100,  // percent full water
  food: 100,    // percent full food
  pigeon: new Pigeon("Agatha", "Egyptian Swift", 50)
}

We access the pigeon in the loft like this:

xxxxxxxxxx
loft.pigeon.fly();

An Array of Objects Inside an Object

We can also put objects in arrays and put arrays of objects inside objects.

Let's start with just an array of objects. Here is an array that represents a flock of pigeons. I could have written object literals in each element of the array, but it was much easier to use the Pigeon object constructor.

xxxxxxxxxx
// Array of Pigeon objects
const pigeons = [new Pigeon("Agatha", "Egyptian Swift", 50),
                            new Pigeon("Elizabeth", "Egyptian Swift", 60),
                            new Pigeon("Jutta", "Utility", 45)];

We can access an individual pigeon by it's array index:

xxxxxxxxxx
pigeons[1].fly();  // Elizabeth will fly

Now let's create a loft object that has an array of pigeon objects:

xxxxxxxxxx
// Object literal
const loft = {
  water: 100,   // percent full water
  food: 100,    // percent full food
  pigeons: [new Pigeon("Agatha", "Egyptian Swift", 50),
            new Pigeon("Elizabeth", "Egyptian Swift", 60),
            new Pigeon("Jutta", "Utility", 45)]
}

Alternatively, we could just put a declaration for an array that can hold pigeon objects in the loft object:

xxxxxxxxxx
const loft = {
  water: 100,   // percent full water
  food: 100,    // percent full food
  pigeons: []
}

And then add some pigeons:

xxxxxxxxxx
loft.pigeons.push(new Pigeon("Agatha", "Egyptian Swift", 60));
loft.pigeons.push(new Pigeon("Aberforth", "Egyptian Swift", 50));
loft.pigeons.push(new Pigeon("Rosalind", "Egyptian Swift", 55));

We can access a pigeon in the loft like this:

xxxxxxxxxx
loft.pigeons[2].fly(); // Rosalind will fly

What code could we write to make all the pigeons fly?

Examples

These are the same examples that are posted on Moodle.

GPA Calculator with Objects

This is a new version of the GPA calculator. (The old one used arrays.)

Movies and Actors with Objects

This is a new version of the Movie and Actors web app.

Alternate Syntaxes for Object Constructors

You will also see object constructor functions that internally create an object, set it's values and return it; rather than setting properties on this. Here's an example:

xxxxxxxxxx
function Pigeon(name, breed, speed) {
  const obj = {};
    obj.name = name;
  obj.breed = breed;
  obj.speed = speed;
  obj.fly = function(){
    return this.name + " is flying at " + this.speed + " MPH.";
  };
  return obj;
}

Or you might see an object constructor written like this, where the creation of an object is combined with assignment of properties:

xxxxxxxxxx
function Pigeon(name, breed, speed) {
  return {
    name: name,
    breed: breed,
    speed: speed,
    fly: function(){
      return this.name + " is flying at " + this.speed + " MPH.";
    };
  }
}

And this can be simplified to:

xxxxxxxxxx
function Pigeon(name, breed, speed) {
  return {
    name,
    breed,
    speed,
    fly: function(){
      return this.name + " is flying at " + this.speed + " MPH.";
    };
  }
}

References

Tutorials

Working With Objects - MDN Guide

JavaScript Object Constructors - W3Schools

Beginning JavaScript Lecture Notes by Brian Bird, 2020, revised 2024, are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.