Chapter 6: Objects

6.1. What are objects?

An object can be thought of as a grouping of variables and functions. These variables and functions are related to one another such that as a group, they form a representation of a concept or a real-life object.

To create an object in Javascript, we use curly braces { } to enclose the variables and functions of the object. Variables and functions that are declared inside an object are known as properties and methods respectively. We use a colon to separate a property or method name from its value. This is known as a key:value pair. Each key:value pair is separated by a comma (,).

Let’s consider an example. Suppose we want to model a car as an object in Javascript. Create a new file in Brackets and save it as chap6.js. Update template.html to link to chap6.js.

Add the code below to chap6.js:

var jamiesCar = {
    make: 'Toyota',
    model: 'Prius',
    year: 2016,
    drive: function(speed) { console.log("Moving forward at " + speed + " mph"); }
};

In the code above, we created an object called jamiesCar. This object has three properties (variables) and one method (function). The three properties are make, model and year which store the values 'Toyota', 'Prius' and 2016 respectively.

The object also has a method called drive(). This method has one parameter speed and displays a message about the car moving forward at a speed determined by the value of speed.

That’s it! That’s how we can create an object in Javascript.

After creating this object, we can access its properties and methods in our code. To do that, we use either of two notations.

The first notation is to use square brackets. With this notation, we need to enclose the property or method name with quotation marks. For instance, to display the car’s model, we can write

console.log(jamiesCar['model']);

This gives us Prius as the output.

To call the drive() method, we can write

jamiesCar['drive'](50);

This gives us

Moving forward at 50 mph

as the output.

Alternatively, we can also use the dot notation. The following two statements give us the same output as the previous two statements.

console.log(jamiesCar.model);
jamiesCar.drive(50);

When we use the dot notation, we do not enclose the property or method name in quotation marks.

Next, we can also add properties to an object. To do that, simply assign a value to the new property using square brackets or the dot notation. For instance, the statements below add two properties (color and sunRoof) to jamiesCar:

jamiesCar.color = 'White'; 
jamiesCar['sunRoof'] = false;

Finally, we can delete properties from an object. To do that, use the delete keyword. The statement below deletes the property year from jamiesCar:

delete jamiesCar.year;

We can print out the contents of an object using the console.log() method. Add the following line to chap6.js.

console.log(jamiesCar);

You'll get

{make: "Toyota", model: "Prius", drive: ƒ, color: "White", sunRoof: false}

as the output.