Objects

MMP 310 > Week 6

Throughout the semester we have seen examples of objects in JavaScript. In fact, basically everything in JavaScript is an object, including arrays, functions, and anything that has methods or properties.

JavaScript is based on an object oriented programming design. This means the language is organized around objects.

So far we haven't written any objects of our own, but today we will start.

Object members

Simply put, and object is a collection of properties and methods.

Properties and methods are assigned with key value pairs.

In a key value pair, the key is a string and the value can be any JavaScript value, a number, string, array, function or another object.

Single values like numbers, strings and booleans are called properties, while functions are called methods.

key	value
color	"blue"
length	7
push	function() { }
pop	function() { }

For the Array object, .length is a property and .push() is a method.

An array is an object that contains key values for each of the elements in the array as well as other methods and properties.

var fruit = ["banana.jpg", "orange.jpg", "kiwi.jpg"];

key	value
0	"banana.jpg"
1	"orange.jpg"
2	"kiwi.jpg"
length	3
push	function() {}
pop	function() {}

Object literal

There are many ways to create objects in JavaScript. Today we'll start with an object literal. A literal in JavaScript is a statement that uses fixed values, like the properties we will assgin our object.

Declaring an object can be as simple as the following statement.

var spaceship = {};

The curly brackets that we have previously see to define code blocks for functions, loops and conditional statements, are also used to define an object.

Inside our spaceship literal we can define some properties of the spaceship.

var spaceship = {
	x: 0,
	y: 0
};

Within an object literal, properties are assignment with the name followed by a colon and then the value, then a comma to separate the next key value pair.

Here we can see that the variables of our program are simplified, instead of having two separate variables for x and y, we have an object that contains both values.

Let's add some code to draw the spaceship and move it across the screen.

Dot notation

The above example uses dot notation to set or access the properties of the spaceship object.

object.property // returns values
object.property = 0; // set value

In the example, spaceship.x and spaceship.y are first accessed to draw the triangle to represent the spaceship visually.

Then, the spaceship.x value is set, or updated, using spaceship.x += 5; when the user presses a key.

Bracket notation

We won't be using it for these examples, but the properties of objects can also be accessed using bracket notation, like in an array, but with key values instead of number indexes.

spaceship['x'] += 5;
spaceship['y'] += 5;

Looking at the above example, how can we add more properties to the spaceship? What values in our code can be captured with properties?

Any hard coded value could be a variable, right?

Now we can add those values to our object.

By adding these values to the spaceship object, we can organize the properties in one variable with multiple properties, making out code easier to understand and update.

So far we've only added values with properties, but we can further simplify our code, and make it more object oriented, by adding some methods.

As we start to build a more complex program to create a game, we want to think of the draw function as the sort of main function in our code. To better organize the draw function, we can use objects that display and update themselves, so our main function isn't cluttered with the code of specific parts of each component.

First we'll take the code that draws the spaceship and add it to the object.

var spaceship = { x: 0, y: 200, size: 100, speed: 5, display: function() { fill('white'); noStroke(); triangle(spaceship.x, spaceship.y, spaceship.x + spaceship.size/2, spaceship.y + spaceship.size, spaceship.x - spaceship.size/2, spaceship.y + spaceship.size); } };

For methods that are part of an object, we can use the this keyword to replace references to that object.

First we'll take the code that draws the spaceship and add it to the object.

var spaceship = { x: 0, y: 200, size: 100, speed: 5, display: function() { fill('white'); noStroke(); triangle(this.x, this.y, this.x + this.size/2, this.y + this.size, this.x - this.size/2, this.y + this.size); } };

Next we can take the code that updates the position of the spaceship to create the update function.

Let's finish the example and see the simplified draw function.