EP36 – Objects in JavaScript

As we all know, JavaScript is an object oriented programming language, but we haven't yet gone into detail about how objects work in JavaScript.

Today, we're going to change that!

You see, Objects are by far the most powerful data type that exists in JavaScript and I'm about to show you why.

JavaScript Object Declaration

As you've seen briefly in other articles on this site, you've seen how to declare a variable that will be backed by the Object data type, kind of like this:

var objExample = {};

You can see that we use the open/close curly brackets to declare a variable in JavaScript that will be backed by the Object data type. I say that it will be “backed by the object data type” because you can't explicitly declare a variable as an object in JavaScript due to its dynamic typing.

In any case, this is a pretty mundane example of how to create an Object in JavaScript, so let's get more complex shall we?

Assigning Properties to Objects

The real magic with Objects in JavaScript is that you can assign properties to objects.

These are basically just name/value pairs (just like a Map in Java).

Let's go ahead and create a Person object in JavaScript:

var person = {firstName: "Trevor", lastName: "Page", age: 32, gender: "Male"};

Now what I've done here is I have created an object called Person with four properties:

• firstName
• lastName
• age
• gender

I have created this person object using something called JSON, which stands for JavaScript Object Notation. So everything you see from the opening curly bracket to the closing curly bracket is JSON.

Note: my JSON isn't entirely valid, as the names of the properties should be strings, and I didn't use double quotes, but that's just because JavaScript doesn't complain and knows how to handle the code. So really my only excuse is that I'm lazy and don't want to type out a bunch of double quotes. For the sake of completion, here's what the declaration would look like with completely valid JSON:

var person = {"firstName": "Trevor", "lastName": "Page", "age": 32, "gender": "Male"};

You'll see here that each of the names of the properties are now wrapped in double quotes.

If ever you want to validate your JSON strings, then I'd recommend a site like JSONLint. It allows you to copy/paste your JSON string into an input box and hit a “validate” button to check your code. It will then show you errors if your JSON isn't properly formed.

Declaring Objects Without JSON

Believe it or not, JavaScript also allows you to create objects without using the full JSON syntax. You'll still need to declare a variable with the open/close curly brackets, but then you can start populating the Object's properties with the dot property syntax.

Here's an example of how to populate an object's properties with the dot property syntax:

// first we declare the variable using the most basic JSON string there is
var person = {};

// now we can start adding properties using the dot property syntax
person.firstName = "Trevor";
person.lastName = "Page";
person.age = 32;
person.gender = "Male";

And now we have created an Object without using a whole bunch of JSON text!

Note: there are subtle differences between these two objects, but we won't dive into those crazy details until we talk more about an Object's prototype in a later lesson.

Creating Methods in Objects

There's a great article on mozilla.org that sums up what Objects are in an elegant way:

JavaScript is designed on a simple object-based paradigm. An object is a collection of properties, and a property is an association between a name and a value. A property's value can be a function, in which case the property is known as a method. In addition to objects that are predefined in the browser, you can define your own objects.

So what I want to talk about now is creating property methods.

Remember that an Object can have properties, and those properties are comprised of a name and a value. For example a property name could be "gender" and a value could then be "Female". Pretty simple right?

But with the addition property methods, we can have a the value of a property be a function!

Let's add a function to our person object. As always there are two ways to do this, you can either use JSON or the dot property syntax. First let's take a look at the JSON syntax:

var person =
{
  firstName: "Trevor",
  lastName: "Page",
  age: 32,
  gender: "Male",
  goToWork: function ()
  {
    alert(this.firstName + " is now going to work");
  }
};

Now let's take a look at the dot property syntax:

person.goToWork = function () {
  alert(this.firstName + " is now going to work");
}

Note: With the JSON code, we needed to add the goToWork function in with the original definition of the object, so there seems to be a lot more code when using the JSON syntax… but this code will be reduced once we talk more about the subject of prototypes.

Okay, so now that we've added a function as a property to our person object, all we need to do to “invoke” the function is this:

person.goToWork();

Once we run the code above, we'll get an alert saying "Trevor is now going to work".

In Summary

We've only hit on a few key points with respect to JavaScript Objects and there are more tutorials to come that will cover other aspects of programming with Objects in JavaScript.

But so long as you can remember that Objects have properties, and properties are made up of name / value pairs, then you'll be in a great spot to keep on learning how to use Objects in JavaScript.

OH! Hey by the way, don't forget to put your email address in the box below for some free goodies. Seriously, I'll send you something very relevant to what you're learning now directly to your inbox. Check out the details in the box below.