Understanding objects in JavaScript

An intro for working with JavaScript objects and how to access and modify the properties inside of them.

Objects are one of the fundamental building blocks of JavaScript, in fact, you may have even heard the statement “everything in JavaScript is an object”. How helpful is that statement though if you don’t have a good grasp of what an object is?

This article aims to demystify JavaScript objects, explaining how they work as well as exploring some of the nuances of working with them.

What is an object?

An object allows us to group together related data and/or functionality.

There are two ways to create an object:

1. The object literal syntax which uses curly brackets { }
2. The object constructor which uses the keyword new

The following code demonstrates how to create an empty object using both of the above methods.

const person = {};
let person = new Object();

The properties within an object can contain any type of data, including strings, booleans, numbers etc.

Let’s create an example object, contained in the variable person.

const person = {
  firstName: 'James',
  lastName: 'Smith',
  age: 38,
  eyeColour: 'blue',
  hairColour: 'blonde',
  married: true,
  greet: function() {
    return `Hi, my name is ${this.firstName}!`;
  },
};

Our new object is called person and it has six properties. Each property consists of a key:value pair. eyeColour is a property name, which has a property value of blue which is a string. The object has one method with a name of greet and the method value contains a function.

Within the greet function, you can see the this keyword. When we use this inside an object it refers to the current object, in this case, person.

Sending person to the console will print out the entire object.

{firstName: "James", lastName: "Smith", age: 38, eyeColour: "blue", hairColour: "blonde", married: true, greet: f}

The order of the properties in the object may vary depending on which browser you are in. We can only use objects where the order of the properties does not matter.

Accessing properties inside of an object

There are two ways to access the properties within an object:

1. Using dot notation .
2. Using bracket notation []

Using our example of person, to retrieve the value of age we can use dot notation by typing the variable name of the object, followed by a dot and then the property name.

console.log(person.age); // 38

To retrieve the same property information using bracket notation, we use two square brackets to encase the property name.

console.log(person['age']); // 38

When retrieving information from an object method, we call it the same way we would call a regular function, we just need to attach the object variable.

console.log(person.greet()); // Hi, my name is James!

Adding properties to an object

To add a new property to an object, we assign a value using the assignment operator =.

To add the new property to our person object we can use either dot or bracket notation

person.shoeSize = 9;
person['shoeSize'] = 9;

It is now possible to access the value using either the dot notation or the bracket notation.

console.log(person.shoeSize); // 9
console.log(person['shoeSize']); // 9

We can also add methods to our object in the same way.

person.describe = function() {
  return `Hi, my name is ${this.firstName}. I have ${this.eyeColour}  eyes, ${this.hairColour} hair and I am ${this.age} years old.`
};
person.describe(); // "Hi, my name is James. I have blue eyes, blonde hair and I am 38 years old."

If we now call our person object, we can see our additions included.

{firstName: "James", lastName: "Smith", age: 38, eyeColour: "blue", hairColour: "blonde", married: true, greet: f, shoeSize: 9, describe: f}

Modifying properties in an object

Using the same methods as described above, we can modify an existing property by assigning a new value to it.

person.hairColour = 'blue';
person['hairColour'] = 'blue';
console.log(person.hairColour); // blue
console.log(person['hairColour']); // blue

If we call our person object now we see the modification to hairColour is included.

{firstName: "James", lastName: "Smith", age: 38, eyeColour: "blue", hairColour: "blue", married: true, greet: f}

Removing properties from an object

To remove a property from an object, we use the delete keyword. In the following example, we remove the married property from the person object using delete.

delete person.married // true

This returns true if the property was removed successfully or if the property doesn’t exist.

Calling the person object again, we can check if this worked.

{firstName: "James", lastName: "Smith", age: 38, eyeColour: "blue", hairColour: "blue", greet: f}

Nested properties in objects

Sometimes we want a nested property inside our object. Using our example person object, I’ve added a new property called pets.

const person = {
  firstName: 'James',
  lastName: 'Smith',
  age: 38,
  eyeColour: 'blue',
  hairColour: 'blonde',
  married: true,
  greet: function() {
    return `Hi, my name is ${this.firstName}!`;
  },
  pets: {
    dog: 'snuffles',
    cat: 'fluffy',
    fish: 'jaws',
  },
};

The pets property is an object containing three properties made up of key:value pairs where the property name is a type of animal and the value is a string containing the animal’s name.

Properties of nested objects can be accessed by chaining dot or bracket notations together.

console.log(person.pets.dog); // snuffles
console.log(person['pets']['dog']); // snuffles

If we call our person object we can see the pets object gets included.

{firstName: "James", lastName: "Smith", age: 38, eyeColour: "blue", hairColour: "blonde", married: true, greet: f, pets: {...}}

Summary

Objects are a core component of the JavaScript language and having a solid understanding of them helps us organise related data and functionality.

• There are two ways to create an object, using the object literal syntax which uses curly brackets { } or by using the object constructor which uses the keyword new
• Properties in objects consist of key:value pairs
• Properties within an object can contain any type of data including strings, booleans and numbers
• We access the properties of an object by using either dot notation or bracket notation
• We add and modify properties of an object by using the assignment operator
• To remove a property from an object, we use the delete keyword
• Objects can contain nested properties which can be accessed by chaining dot or bracket notations together