The Basics of JavaScript Objects

While doing some work in backbone, it became clear that it was time to revisit the basics of JavaScript Objects and Functions. In this post we will talk about objects and in the next post let's tackle functions.

This post will be example heavy. I encourage you to open up the console and poke around.

Javascript Objects In General

What exactly are JavaScript objects? Really they are nothing more than a collection of properties. A property is an association between a name and a value. If you have programmed before, think hash or associative array. These properties of the object are defined using keys and values. The keys are strings but may or may not be quoted, and the values can be values or functions.

The basic syntax of an object is to use the var keyword, the name you want to give to your object, an equals sign, a set of braces, and a semicolon. It looks like this...

  var exampleObject = {

  };

Once you have an object, you will likely want to fill it with properties. But wait, you can even fill your object with properties upon creation. Let's take a look.

Adding properties to your Objects

Say we started out with an empty object...

  var secondExampleObject = {

  };

And we wanted to add some things to it.

Since we know how to create an empty object, let's now create a new object from scratch, this time giving it properties upon creation.

  var secondExampleObject = {
      propertyOne: "this is property one.",
      propertyTwo: "this is property two.",
      "foo/bar": "whatevs",
      anotherProperty: 3,
      sayHello: function () {
          console.log("Hello");
      },
      "apples I like": ["honeycrisp", "gala", "granny smith", "fugi"],
      animals: {
          redPanda: "cute",
          duck: "quack",
          babyBird: "chirp",
          alligator: "What you talkin bout Willis?"
          animalSpeak: function (animal) {
              console.log(secondExampleObject[animals.animal]);
        }
      }
  };

WOW! There is A LOT going on there, so let's walk through it really slowly. First thing to take note of are the keys and values. They are separated by a colon : . On the left hand is the key and on the right hand is the value. Do you remember when we said that "The keys are strings but may or may not be quoted, and the values can be values or functions."? Here we see that in action. Take a look at propertyOne. No quotes. Now take a look at "foo/bar". Quotes. Because JavaScript will convert the keys to strings under the hood, there is no need to use strings except in certain cases. Those cases are where the keys will have spaces (look at "apples I like"), when keys start with a number, or when keys use special characters. (look at "foo/bar". The / dictates that we must use the quotes.)

Other things to take note of are the commas that come at the end of the key value pairs with the exception of the last key value pair and the fact that a key's value can contain values, functions, and even other objects! Objects that are inside other objects are called nested objects and because of this nesting allowance, you can often times end up with a russian doll effect. The trick then, is knowing how to access correctly the information you are trying to get at.