October 5

Objects

Javascript allows us to store multiple properties and values in a single place called an object.

So far, we have seen integers:

var x = 1; // an integer

We have seen strings:

var x = "a string"; // a string value

We have seen arrays:

var x = [1, 2, 3, "just to be different"]; // an array of values

Objects as Literals

Now, we introduce objects. An object can be created using "literal" syntax, in which all the properties and values are specified within braces {}:

var lecture = {title: "Objects", room: "DH A302", time: "12:30pm"};

Once we have an object, we can access different properties using the “dot” notation (remember, “dot” can be read “apostrophe-s” or “‘s”):

x.title // evaluates to "Objects"
x.room // evaluates to "DH A302"

You can also access properties using array subscript notation, but where the “index” is a string naming the property:

x["room"] // evaluates to "DH A302"

Objects by Construction

We can also construct objects bit-by-bit. This might be useful if the values depend on conditions or you are reading data from somewhere and storing it in properties of objects. First, we make a new empty object:

var y = new Object();

Next, we can store values into properties using assignment statements:

y.title = "Objects";
y.room = "DH A302";
y.time = "12:30pm";

Now x and y have the same properties and values. Are they equal?

x == y evaluates to false. Yes, the properties are all the same, but x and y are different objects so JavaScript says they are “not equal.” Can we have “equal” objects:

z = x; // assign x to z
print(z === x); // prints "true"!

In this case, z and x are said to reference the same object. There is only one object here but two different variables, z and x, both reference the same object and hence are considered to be equal. Changing z will change x — they are the same object:

z.title = "z title";
print(x); // prints {"title": "z title", "room": "DH A302", "time": "12:30pm"}

This is sometimes confusing, and we say that z is an alias for x and changing z has the side effect of changing x.

However, the advantage of objects working this way is that when we pass an object as a parameter, the object is not copied. Instead the parameter gets a reference to the same identical object, allowing the function to modify the object. When the function returns, the modifications are seen by the caller.

Here is a short program to draw a rectangle represented by properties of an object:

sketch

var myBox = {x: 20, y: 20, w: 50, h: 60};


function setup() {
    createCanvas(100, 100);
}

function draw() {
    background(220);
    rect(myBox.x, myBox.y, myBox.w, myBox.h);
}

We can modify the object in the draw loop. (If the % operator is unfamiliar, look it up. It computes the remainder.)

sketch

var myBox = {x: 20, y: 20, w: 50, h: 60};


function setup() {
    createCanvas(100, 100);
}

function draw() {
    background(220);
    rect(myBox.x, myBox.y, myBox.w, myBox.h);
    myBox.x += 1;
    myBox.x = myBox.x % width;
}

Finally, here is an example where we pass objects as parameters to functions to draw and move the object. Notice how clean and elegant the draw function becomes:

sketch

// initialize myBox using literal object notation:
var myBox = {x: 20, y: 20, w: 50, h: 60};

function setup() {
    createCanvas(100, 100);
}

// function to draw a box object with x, y, w, h properties
function drawBox(box) {
    rect(box.x, box.y, box.w, box.h);
}

// move a box object to the right by 1 and wrap
function moveBox(box) {
    box.x += 1;
    box.x = box.x % width;
}

// notice how clean draw() code becomes when we can talk about
// drawing or moving objects as opposed to manipulating all the
// properties of objects as independent variables (myX, myY, ...)
function draw() {
    background(220);
    drawBox(myBox);
    moveBox(myBox);
}