Working with Objects

Learning Goals

In this Lesson, you will learn how to:

In this Lesson, you will meet the following term:

• Object
• Object Literal

About objects, properties and methods

Objects, properties and methods are three important concepts in JavaScript.

JavaScript Object

A container of information (pairs of property names and values). Examples include the navigator, window, location and document objects. Many objects contain other objects nested inside them. JavaScript code can read values of all properties of an object, and some values it can change.

Creating an object

The recommended way to create an object in JavaScript is to use a so-called object literal. You would create a new, empty object as follows.

const myDog = {};

In a single statement, you can create an object, add some properties in it, and assign values to those properties. Use a comma (,) to separate the property-value pairs.

const myDog = {
    name: 'Luna',
    breed: 'Golden Retriever',
    description: 'Fun-loving, affectionate, and obedient.'
    age_months: 16,
    weight_kg: 25    
};

If your new object has more than two or three property-value pairs, it is a good idea to type each pair on a new line as shown above. This minimises typing errors when creating the object and improves readability when maintaining the code later.

A property name must be wrapped in single or double quotes if it contains spaces or other special characters. For example:

const myDog = {
    name: 'Luna',
    breed: 'Golden Retriever',
    description: 'Fun-loving, affectionate, and obedient.',
    age_months: 24,
    "weight(kg)": 25  // Special character in property name
};

An object can include one or more other objects nested inside it.

const myFavBand = {
    name: 'U2',
    website: 'u2.com',
    "studio albums": 14,  // Special character in property name    
    u2_band_vocals: { name: 'Bono' },
    u2_band_guitar: { name: 'Edge' },  
    u2_band_bass:   { name: 'Adam' },  
    u2_band_drums:  { name: 'Larry } 
};

Object Literal

A pair curly braces { } enclosing a comma-separated list of name-value pairs of properties and their values. Property values can include other object literals nested inside them.

Accessing the properties and values of an object

JavaScript offers a number of ways for viewing and working with the properties of an existing object. The two most common are the dot and square brackets options.

Objects: The dot notation

The simplest option for accessing objects. You separate the object name from the property name with a dot (.). The general syntax is as follows.

objectName.propertyName

Here are two examples:

document.write(myDog.description);
console.log(myFavBand.name);

Objects: The square brackets notation

You must use this to access a property if its name:

• Contains spaces, underlines, emoji or other special characters.
• Is a keyword reserved in JavaScript

The general syntax is:

objName["propertyName"];

You can wrap the property name in single or double quotes. For example:

document.write(myDog['weight(kg)']);
console.log(myDog["studio albums"]);

This notation is also necessary when accessing an object with a for/in loop. See below.

Looping through an object's properties

JavaScript provides a special version of the standard for loop to loop (iterate) through properties of an object. This is called a for/in loop. For example.

for (let i in myDog) {
    document.write(myDog[i]);
}

for (let key in myFavBand) {
    console.log(myFavBand[key]);
}

Adding, updating and deleting object properties

You can add a new property-value pair to an object by assignment as follows.

objMyDog.awards_won = 3;

To update the current value of a property, assign the new value to it.

objMyDog.awards_won = 4;

To remove a property from an object, use the delete operator.

delete objMyDog.awards_wo;

In all three of the above operations, you have used the dot notation. The brackets notation would work as well.

objMyDog["awards_won"] = 3;
objMyDog["awards_won"] = 4;
delete objMyDog["awards_won"];