JavaScript Objects and Object Notation

Intro

This module is going to talk about two very closely related topics: JavaScript objects and JSON or JavaScript Object Notation. It is important to note that you will see JSON at lots of places in which JavaScript is nowhere to be found. It is an easy format to use to send data back and forth. But conveniently it is also one of the notations which can be used to create object instances in JavaScript.

Object in JavaScript

Objects are kind of a mess in JavaScript compared to the well ordered land of C++. In C++, there are class definitions or interfaces which are clearly defined. You know what all the public and private properties of an object are ahead of time... heck, you have public and private properties.

In JavaScript, all of this pretty much goes out the window. There are lots of ways to approximate a lot of the functionality, but it is not the most direct thing ever. In later modules, we will get into some of the tricks and things like the object prototype chain. But for now, we will just deal with basic objects which are probably closer to structs than actual object from C++. Let's take a look at an object:

var day1 = {
  squirrel: false,
  events: ["work", "touched tree", "pizza", "running",
           "television"]
};

Here is the example log from the weresquirrel in Eloquent JavaScript. It is well described there. But just to summarize the format is {key1: value1, key2: value2, ... keyn: valuen}. You can use strings with invalid identifier symbols like spaces if you put them in quotes... But just because you can does not mean you should.

In this case, we stored a reference to the object in the variable day1 so we can access content one of two ways. The first is the format you are probably most familiar with and that is dot notation. consle.log(day1.squirrel) will log false to the console. We can also treat it like a map and use array-map notation like console.log(day1["squirrel"]). This will also log false to the console. It may not seem apparent at first but there are some really useful use cases for the map notation of accessing object properties.

It is also critical to note that day1 is a reference to an object, not an object itself. So if you were to make a second variable and do something like var otherDay = day1; then otherDay and day1 are both referencing the same object. Updating a property on one will update the property on the other. But if we later did something like otherDay = { foo: "Bar" };, then day1 would not be updated. They are now pointing to different objects.

What About this JSON?

This sort of notation of key/value pairs inside of curly braces is the basis of a notation called JSON. There are very few differences between JSON notation and object notation. One is that the key always must have quotation marks around it. Another is that because it is just concerned with data, you cannot have a function in JSON notation, it just does not make sense. But objects in JavaScript can have functions as members because JavaScript is a programming language so it makes sense to have functions.

JSON will come up often when we start looking at Ajax and server side programming, but it is good to start thinking about it now.

For ... In

Finally, let's talk about a new kind of iterator. In C++ you should have used some kind of iterator to move through an array or linked list and call a function on each element. In that case, it is pretty easy because the order of traversal is well defined. You increment the index one at a time or move from one link to the next in a linked list.

Well in JavaScript a new sort of problem comes up. Because objects can be defined on the fly and properties can be added to them on the fly, we may get objects where we don't even know all of the property names but we still need to access their values. One could imagine that someone would make an object where the keys are the names of files in a directory and the values are the size of those files. These keys would change every time and are not in a well ordered list of any sort.

The for ... in loop is here to help with this problem. The syntax is:

for (variable in object) {
	...
}

So variable is the variable that will hold a property name in every iteration of the loop. object is the object whose property names we will be iterating through. We can combine this loop with the previously mentioned map property to get through this. An example would look like this:

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

Let's assume this was our object:

var obj = {a:1, b:2, c:3};

The output of this would be

obj.a = 1
obj.b = 2
obj.c = 3

On the first iteration prop holds the value 'a'. So obj[prop] is the same as obj["a"] which will return 1. On the next iteration prop holds the value b, and on the next c. This allows us to iterate through the object calling some code for each property name.

Activity

Implement the Deep Comparison described here in the Eloquent JavaScript textbook. This will check your understanding of object notation and the for ... in loop.

Review

This concludes the introduction to JavaScript. We have covered the core components of the language and really focused on what is similar to C/C++. In this section we focused on objects. But coming up later, we will start to see some more major deviations of C++ when we start talking about trying to implement classes.