Access Object Properties in JavaScript

The value of object properties can be referenced and accessed using three different syntaxes based on the required use case.

The dot notation

To access and use the value of a property using its key, you can use the dot notation:

object.key
object.key.nestedKey

Note: When working with nested keys, if any of the intermediate keys evaluates to null or undefined, JavaScript will throw a TypeError.

Example

Let's consider this object:

const landmark = {
  name: 'Place du Trocadero',
  type: 'View point',
  location: {
    address: 'Place du Trocadéro et du 11 Novembre, 75016 Paris, France',
    coordinates: {
      latitude: 48.8628402,
      longitude: 2.287142
    }
  }
};

To access the value of the property associated with the name key, you have to reference the landmark object first, then the name key:

const name = landmark.name;   // 'Place du Trocadero'

To access the value of the nested property associated with the latitude key, you have to reference the object, then each intermediate key:

const lat = landmark.location.coordinates.latitude;   // 48.8628402

The optional chaining operator

The optional chaining operator ?. allows you to safely access the deeply nested properties of an object without having to explicitly check if each key in the chain is valid.

object?.key

If any part of the chain is null or undefined, it will automatically return an undefined value rather than throwing an error, which in turn helps reduce the need for repetitive checks and can help avoid runtime errors.

Example

Let's consider this object:

const user = {
  location: {
    city: "Paris, France"
  }
};

To safely access the value of the nested city key, you can either manually check the existence and value of each key:

const city = user && user.location && user.location.city;

Or you can simply use the optional chaining operator:

const city = user?.location?.city;

The square bracket notation

To access and use the value of a property using a computed key, you can use the square bracket notation:

object[expression]
object[expression][...]

Note: This notation can be combined with the optional chaining operator as follows:

object?.[expression]

Example

Let's consider this script, that retrieves the value of an object's property using a computed key:

const settings = {
  theme: "dark",
  language: "en-us",
  notifications: true
};

function getUserPreference(key) {
  return settings?.[key];
}

console.log(getUserPreference('language'));
console.log(getUserPreference('sound'));

When executed, it will:

1. Declare a variable named settings and initialize it with an object literal.
2. Define a function named getUserPreference that takes as argument a key string and returns the value of the corresponding property in the settings object.
3. Execute the getUserPreference function with a valid key and output its value.
4. Execute the getUserPreference function with an invalid key and output its value.

Which will produce this output:

$ node get_user_preference.js
en-us
undefined

Test the existence of object keys

As an alternative to the optional chaining operator ?., you can test the existence of a key in an object using the in operator:

"key" in object

Where:

• "key" is the name of the key within the specified object.
• object is an object instance.

Note: The specified key must be enclosed in single or double quotes, as otherwise, key will be considered as a variable and its value will be evaluated.

Example

Let's consider this script, that checks the existence of an object's property using a computed key:

const motorbike = {
  brand: 'Honda',
  model: 'Gold Wing Tour',
  engine: {
    cc: 1833,
    kw: 93
  }
};

const info = 'cc';

if (info in motorbike.engine) {
  console.log(motorbike.engine[info]);
}

When executed, it will check whether the value of the info variable is a key of the motorbike.engine object and use the info variable as a computed key to output its value.

Which will produce this output:

$ node get_moto_info.js
1833

Loop on object keys using a for...in loop

The for...in loop is used to iterate over the enumerable properties of an object and execute a set of instructions for each iteration.

for (let key in object) {
  instructions
}

Example

Let's consider this script, that calculates the total amount of a cart as well as the total amounts per product category:

const cart = {
  products: {
    electronics: {
      laptop: { price: 3997, quantity: 1 },
      phone: { price: 1869, quantity: 1 }
    },
    appliances: {
      electricMixer: { price: 365, quantity: 1 }
    }
  }
}

let amounts = {
  total: 0,
  electronics: 0,
  appliances: 0
};

for (let category in cart.products) {
  for (let item in cart.products[category]) {
    let price = cart.products[category][item].price;
    let quantity = cart.products[category][item].quantity;

    amounts[category] += price * quantity;
  }

  amounts.total += amounts[category];
}

console.log(amounts);

When executed, it will:

1. Declare a variable named amounts and initialize it with an object containing properties to store the total amounts of the cart.
2. Start a for...in loop that iterates over each category of products and stores its key in the category variable.
3. Start a for...in loop that iterates over each product of the current category and stores its key in the item variable.
4. Store the price of the current product into the price variable.
5. Store the quantity of the current product into the quantity variable.
6. Add the product of the values of the price and quantity variables to the total amount of the category.
7. Add the total amount of the category to the total amount of the cart.

Which will produce this output:

$ node cart_total.js
{ total: 6231, electronics: 5866, appliances: 365 }

Referencing properties within a method

To access the properties of an object from within the body of one of its methods, you can use the this keyword, which is a reference to the object itself:

{
  keyA: value,
  keyF: function() {
    // this.keyA
  }
}

Note: In object methods defined as arrow functions, the this keyword will result in an undefined value.

Example

Let's consider this script:

const user = {
  role: 'admin',
  isAdmin: function() {
    return this.role === 'admin';
  }
};

console.log(user.isAdmin());

When executed, the isAdmin method of the user object will return the boolean evaluation of the comparison between the value of the role property and the string "admin".

Which will produce this output:

$ node is_admin.js
true

Example

Let's consider this script:

const user = {
  fullName: 'John Doe',
  getFullName: () => {
    return this.fullName;
  }
};

console.log(user.getFullName());

When executed, the getFullName method of the user object will try to return the value of the fullName property.

However, since the getFullName method is defined as an arrow function, the this keyword doesn't reference the object and therefore cannot access its properties.

Which will produce this output:

$ node get_user_name.js
undefined