This chapter focuses on the creation of objects in JavaScript together with certain related concepts.

Literally literals

The most convenient way to create objects in JavaScript is using the object literals {}

var tv = {
    color: "black",
    res: 1080,
    price: 500,
    getPrice: function() { return this.price - 50; }
}

Going with out tv example, here we have created an object named tv with four properties color, res, price and getPrice. The property names are followed by a colon and then their respective values. Multiple properties are seperated using commas.

Now you may be confused why we said 4 properties and not 3 properties and 1 method. Here's the idea behind it:

You already know that properties in JavaScript can be of any data type. When the type is a function we can give the property a special name i.e a method.

Hence methods can be defined as properties with functions as their values.

So for the tv object you can claim it as having either 4 properties or 3 properties and 1 method - as you like. Now let's go over some key ideas related to objects in JavaScript:

Keys

Property names of objects are sometimes also referred to as keys. Therefore we can also say that the object above has 4 keys.

Another commonly used term is key-value pairs that simply adds the property values to the definition as well. The object above can said to be have 4 key-value pairs.

Line Breaks

It is not necessary to write key-value pairs in objects on multiple lines. Line breaks, new lines, spaces are all upto the programmer. However it is best to be consistent and follow code readability guidelines.

var tv = {color: "black", res: 1080, price: 500, getPrice: function() { return this.price - 50; }}

Getting Values

To get/return/output the values in an object we have two choices. The first one matches the array syntax:

tv["color"] // "black"

First we have the name of the object and then, enclosed in square brackets, the name of the property.

The second choice matches the way to output object properties in many other programming languages:

tv.color // "black"

First just like before we have the name of the object and then a dot/period followed by the property name. Note that the property name here shall not be enclosed in quotes.

this keyword

In the definition of the method getPrice() you might have noticed something new and strange - the this keyword.

In very simple terms, this points to the object on which the method is defined. In this case since getPrice() is defined on the object tv, therefore this holds the object tv.

Methods

For calling methods just put parentheses at the end of the property. Remember methods are also properties!

tv["getPrice"](); // 450
// or
tv.getPrice(); // 450

If you forget to do so then the underlying definition will be returned instead:

tv["getPrice"]; // function() { return this.price - 50; }
// or
tv.getPrice; // function() { return this.price - 50; }

Adding properties and methods

To add properties to an object in JavaScript after it has been created use the same syntax as to output properties, but in the assignment context.

tv["size"] = 32;
// or
tv.size = 32

Bringing all this together we have the following code:

// creating an object
var tv = {
    color: "black",
    res: 1080,
    price: 500,
    getPrice: function() { return this.price - 50; }
}

 // properties added
tv.size = 32;
tv["type"] = "LED";

// output values
console.log(tv.color); // "black"
console.log(tv.getPrice()); // 450
console.log(tv["size"]); // 32

And you have succesfully created an object in JavaScript, added stuff to it and even output its data. Wonderful!

Constructor functions

Another way to create objects in JavaScript is using the Object() constructor.

Just like JavaScript provides constructor functions for other data types, it has a constructor function for creating objects too.

Creating the same tv object using Object() constructor would look something like this.
// creating an object using the Object() constructor
var tv = new Object({
    color: "black",
    res: 1080,
    price: 500,
    getPrice: function() { return this.price - 50; }
});

All the concepts we've learnt above for objects created using literals also apply for objects created using Object().

And by now you should know that these predefined constructor functions just complicate code unnecessarily and desirably shouldn't be used. But this doesn't mean that custom constructor functions shall not be used in JavaScript. The next chapter is focused on constructors where we will discuss these details in detail.

Objects from objects

Objects can also be created using other objects as a template. The method Object.create() helps in doing so. The argument passed to it is the template object.

// the template tv object
var tv = {
    color: "black",
    res: 1080,
    price: 500,
    getPrice: function() { return this.price - 50; }
};

var tv2 = Object.create(tv);
console.log(tv2.color); // "black"

This method assigns the same properties as the template to the new object created. It makes the new object's prototype the template object from which it inherits properties and methods.

More on prototypes later in this unit.