Introduction

In this tutorial, we have already covered the primitive data types found in JavaScript, like numbers, strings, booleans and so on. There are a total of 7 primitive data types, and then one data type considered as complex: The object.

The difference between a simple and a complex data type is generally considered to be whether the type consists of one or several values. For instance, a number will just hold the value, e.g. 42, but an object is in fact a collection of other keys and values, allowing you to store multiple values in it. These values could be primitive types, like numbers and strings, but it could also be other objects, allowing you to have objects of objects (nesting).

Since objects are the only complex type found in JavaScript, you can probably imagine that it plays quite an important role. In fact, everywhere you look in JavaScript, you will run into objects: There are the built-in objects already discussed, like Date and Math. There are arrays, which are actually just instances of the Array object, and so on.

Creating an object

In many programming languages, you often need to define a class (we'll discuss classes in the next chapter) and then create an instance of it, to get an object. However, in JavaScript, objects came way before the concept of classes and can easily be created and used without defining a class.

You can create a new object by instantiating the Object type, like this:

let obj = new Object();

This will result in an empty object.

However, in JavaScript, curly brackets are used frequently when working with objects. This also allow us to use the object initializer syntax, like this:

let obj = {};

This is the syntax you will see the most when working with JavaScript - it's shorter and also allow us to easily create a new object and add properties to it while it's created:

let user = 
{
	name: "John Doe",
	age: 42
};

This will create an object with two properties: name and age.

Using an object

Once we have an object, we can access any properties and/or methods that it might hold by referencing the object we just created (user), then a dot, and then the name of the property/method we want to access. Here's a more complete example:

let user = 
{
	name: "John Doe",
	age: 42
};
alert(user.name + " is " + user.age + " years old");

As you can see, its very easy to both define and access the properties of an object.

Looping over an object

We already mentioned the fact that an object is basically just a collection of keys and values. We have already seen how we can define properties by writing the name (key) of the property, a colon, and then the value of the property. This allow us to access a property value using a string, either directly or from a variable, like this:

let user = 
{
	name: "John Doe",
	age: 42
};

let key = "name"
alert(user[key]);

Notice that I use another notation now, where we specify the name of the property (or the variable containing the name) within a set of square brackets, instead of after the dot. We will discuss this more in detail in the next article, where we dig deeper into object properties, but for now, I'll just use it to illustrate how this also makes it possible for us to loop over the object and access all keys/values without knowing their names:

let user = 
{
	name: "John Doe",
	age: 42
};

for(let propKey in user)
	alert(propKey + " = " + user[propKey]);

I use the for...in loop, previously discussed in this tutorial, to get each property name/key from the object, and then I use the key to get the value. It's quite simple, but it can be used to accomplish some pretty cool things!

Summary

After reading this article, you should have a better understanding of what an object is, how you can create your own objects and define/use its properties. We also discussed the fact that objects are just key/value pairs, allowing you to loop over them and access each of its properties and their corresponding values.

With all this in place, you're now ready to move on to the next article, where we dig much deeper into the subject of object properties.