JavaScript Data Types: Part 3, Objects

This is part 3 of a 4-part series on JavaScript data types. (View part 1 here.) In this article we are going to take an in-depth look at objects, quite possibly the most important JavaScript data type.

An object in JavaScript is a compound data type. All other data types in JavaScript are so-called primitives, such as numbers, strings and booleans. Primitive data types are immutable, which means that they cannot directly be changed.

Objects are made up of key-value pairs. The keys are usually strings, while the values may be of any data type: even other objects.

Object Literals

The preferred way of creating an object is using object literal notation. We do this using curly braces ({}).

For example:

var obj = {};

This will create an empty object assigned to the variable obj.

If we want to add a property to the object, there are a couple of ways to do that.

obj.firstname = 'Michael';

This will add a property with a key of ‘firstname’ and a value of ‘Michael’ to obj.

The other way to add a property to an object is:

obj['lastname'] = 'Nicholas';

This will add a property with a key of ‘lastname’ and a value of ‘Nicholas’ to obj.

The first way — called dot notation — is the preferred way of adding to an object, as its syntax is easier and more clear. However, the second way — called bracket notation — can come in handy when we need a key with more than one word or special characters. This is because we can type anything in between the quotes using bracket notation.

Say, for example, that we wanted a key of ‘phone number’. We wouldn’t be able to use dot notation here:

obj.phone number = '(555) 555-5555'; // returns an error

This would cause a syntax error, but using bracket notation would work fine:

obj['phone number'] = '(555) 555-5555';

Of course, if we wanted to we could use dot notation and use a variation of ‘phone number’ for our key, such as:

obj.phoneNumber = '(555) 555-5555';

This would work fine.

We also have the option of adding properties to an object when we initialize it:

var person = {
  name: {
    first: 'Michael',
    last: 'Nicholas'
  },
  phone: '(555) 555-5555'
};

Notice here we have nested a name object within the person object. The name object has two properties: first and last. So in this person object, the name object is the first property, and phone is the second.

Accessing Object Properties

Just as we can use dot notation or bracket notation to add new properties to an object, we can also use them to access properties of an object:

person.name.first;      // returns 'Michael'
person['name']['last']; // returns 'Nicholas'

Other Objects

There are two other types of object to be aware of, arrays and functions. We’ll cover arrays in depth in the next and last article of this series, but for now let’s just point out that an array is an indexed collection of key-value pairs. While an object’s keys are usually strings, an array’s keys are always numbers, indexed starting from 0.

A function is also a kind of object, however we won’t be covering functions in this series.

What’s important for our discussion here is that, since both the array and function are types of object, they can both also be included into an object.

var javascript = {
  datatypes: {
    primitive: ['number', 'string', 'boolean', 'null', 'undefined', 'symbol'],
    compound: ['object']
  },
  isFun: true,
};

Here we have an object assigned to the variable javascript. It contains 2 properties: an object (datatypes) and a boolean (isFun). The datatypes object contains 2 arrays: primitive and compound.

When we add a function to an object, we call it a method in JavaScript. Let’s add a method to our javascript object:

javascript.speak = function() {
  return "Hello, I'm JavaScript!";
};

Now we can call this method by typing:

javascript.speak(); // returns 'Hello, I'm JavaScript!'

Reference vs. Value

Objects, unlike the primitive data types, are passed by reference instead of by value. What does this mean? Let’s look at some examples.

var a = 1;
function foo() {
  var a = 2;
}
foo();
console.log(a); // returns 1

What is happening here? We assign the number (primitive data type) 1 to the variable a. We then create a simple function called foo, and within this function we assign the number 2 to a. We then call the function foo() which runs the code, and finally we print a to the console, which gives us the value of 1.

Because the number data type is a primitive, it is passed by value. We effectively have 2 a variables, one in what we call the global scope (value is 1) and a ‘copy’ of a within the function scope of foo, where the variable a is reassigned to 2.

So when we run the console.log(a); within the global scope, the value of a is still 1.

With objects, things work differently:

var a = {
  age: 20
};
function foo() {
  a.age = 24;
}
foo();
console.log(a.age); // returns 24

Here we assign an object containing 1 property, age, to a. Within the function foo we then reassign the value of the age property of a to 24. Finally we call the foo() function and console.log() the age property, and see that it has been updated to 24. This is because a is an object and is passed by reference.

this

this is a big topic. To get an in-depth understanding, read this book. For our purposes, you can think of this as a contextual pointer to an object.

Let’s look at our person object again to explain.

var person = {
  name: {
    first: 'Michael',
    last: 'Nicholas'
  },
  phone: '(555) 555-5555'
};

Say we wanted to add a method to this person object which would print out the full name. We could use the this keyword to represent the object we’re in (the context). This would let us do something like the following:

person.printFullName = function() {
  console.log(this.name.first + ' ' + this.name.last);
};

Now when we call the method:

person.printFullName();

we will get ‘Michael Nicholas’ printed to the console.

Note that we could have just as well added this method to the name object within the person object. In that case we would have done something like this:

person.name.printFullName = function() {
  console.log(this.first + ' ' + this.last);
};

We would call the method thus:

person.name.printFullName();

Notice that since we created the method within the name object this time, the context for this is now name, not person.

For a look at arrays in JavaScript, check out part 4 of this series here.

Questions? Comments? You can reach me at acropoiesis@gmail.com