Creating an Object

Let’s work with an example! To initialize a variable car as an object, we use curly braces {}:

var car = {};

We now have an empty object which can be accessed via the Developer Tools console, by simply typing our variable name:

car // {} [object]

An empty object isn’t all that useful, so lets update it with some data:

var car = {

name: 'Tesla',

model: 'Model 3',

weight: 1700,

extras: ['heated seats', 'wood decor', 'tinted glass'],

details: function() {

alert('This ' + this.name + ' is a ' + this.model + ' it weighs ' + this.weight + 'kg and includes the following extras: ' + this.extras[0] + ', ' + this.extras[1] + ' and ' + this.extras[2] + '.');

},

display: function() {

alert('This car is a ' + this.name + '.');

}

};

Let’s access this data in our developer tools console:

car.name // Tesla

car.model // Model 3

car.weight // 1700

car.extras[1] // wood decor

car.details() // This Tesla is a Model 3 it weighs 1700kg and includes the following extras: heated seats, wood decor and tinted glass.

car.display() // This car is a Tesla.

As you can see, each name/value pair must be separated by a comma, and the name and value in each case are separated by a colon. The syntax will always follows this pattern:

var objectName = {

member1Name: member1Value,

member2Name: member2Value,

member3Name: member3Value

};

The value of an object member can be pretty much anything — in our car object we have a two strings, a number, an array, and two functions. The first four items are data items, and are referred to as the object’s properties. The last two items are functions that allow the object to do something with that data, and are referred to as the object’s methods.

This kind of object is called an object literal — we’ve literally written out the object contents as we’ve created it. This is in comparison to objects instantiated from classes, which we’ll take a look at later on.

Dot notation

Above, you’ve seen the object’s properties and methods accessed using dot notation. The object name car acts as the namespace — it needs to be entered first to access anything within the object. Then you write a dot, followed by the item you want to access — this can be the name of a simple property, an item of an array property, or a call to one of the object’s methods, for example:

car.name

car.extras[1]

car.details()

Deleting Properties

We can use the delete operator to remove properties, like so:

car.model

// Tesla 3 delete car.model car.model

// undefined

Square Brackets

If for example, we had a multi-word property within our object, such as:

var user = {

name: "Sam",

age: 32,

"likes potatoes": true // multiword property name must be quoted

};

We couldn’t access the multi-word property with dot-notation:

user.likes potatoes // syntax error!

This is because a dot requires the key to be a valid variable identifier. That is: no spaces and other limitations.

The alternative is to use square brackets, which works with any string:

let user = {};



// set

user["likes potatoes"] = true;



// get

alert(user["likes potatoes"]); // true



// delete

delete user["likes potatoes"];

Updating object members

We can update the values within our objects by simply declaring the property you’d like to set with the new value, like so:

user.age // 32

user.age = 33 // 33

user.age // 33

You can also create completely new members of your object. For example:

user.surname = 'Smithessson'; // user

{name: "Sam", age: 33, likes potatoes: true, surname: "Smithessson"}

What is “this”?

You may have noticed the use of the word ‘this’ in our earlier example. See the following:

display: function() {

alert('This car is a ' + this.name + '.');

}

The this keyword refers to the current object that the code is being written inside of— so in this case this is equivalent to car .

Why not just write car instead? It’s best practice to write well-constructed object-orientated code, and in doing so the use of this is extremely useful. It will ensure the correct values are used when a member's context changes (e.g. two different car object instances may have different names, but will want to use their own name when displaying their own information).

For example:

var car1 = {

name: 'Tesla',

display: function() {

alert('This car is a ' + this.name + '.');

}

} var car2 = {

name: 'Toyota',

display: function() {

alert('This car is a ' + this.name + '.');

}

}

In this case, car1.display() will output "This car is a Tesla." And car2.display() will output "This car is a Toyota.", even though the method's code is exactly the same in both cases.