Share 5 ways to access object properties in JS

In JavaScript, objects are the fundamental building blocks of the language and are used extensively to represent data structures. Objects consist of properties that hold values. To access these properties, JavaScript provides several methods. In this article, we'll explore 5 different ways to access object properties in JavaScript.

1. Point attribute

Dot property accessors are the most common and straightforward way of accessing object properties in JavaScript. It uses dot (.) notation to access specific properties of an object.

const person = {
  name: 'John',
  age: 30,
};

console.log(person.name); // Output: John
console.log(person.age);  // Output: 30

In the above example, we have an object named person with properties name and age. We use dot property accessors to access the values ​​of these properties.

Dot property accessors are recommended when the property name is known ahead of time and is a valid identifier. It is simple and intuitive to use and makes code more readable.

2. Square bracket attribute

Bracket property accessors are another way to access object properties in JavaScript. It uses square brackets ([]) and the string representation of the property name to access the value.

const person = {
  name: 'John',
  age: 30,
};

console.log(person['name']); // Output: John
console.log(person['age']);  // Output: 30

In this example, we use square bracket property accessors to access the name and age properties of the person object. The advantage of this method is that it allows dynamic property names or property names that are not valid identifiers.

const propertyName = 'age';
console.log(person[propertyName]); // Output: 30

Here, we use a variable propertyName to dynamically store the property name. This is not possible with dot property accessors.

3. Object Deconstruction

Object destructuring is a powerful feature introduced in ECMAScript 2015 (ES6) that allows us to extract properties from objects and assign them to variables.

const person = {
  name: 'John',
  age: 30,
};
const { name, age } = person;
console.log(name); // Output: John
console.log(age);  // Output: 30

In this example, we destructure the person object to extract the name and age attributes. Then assign the corresponding values ​​to the variable name and age.

Object destructuring is especially useful when we want to extract multiple properties from an object and assign them to individual variables. It provides a concise and readable way to access object properties.

We can also use object destructuring to use aliases to assign properties to variables with different names.

const { name: personName, age: personAge } = person;
console.log(personName); // Output: John
console.log(personAge);  // Output: 30

In this example, we assign the name property of the person object to the variable personName and the age property to the variable personAge. This allows us to use different variable names when accessing object properties.

Additionally, object destructuring can handle dynamic property names by using computed property names.

const propertyName = 'age';
const { [propertyName]: propertyValue } = person;
console.log(propertyValue); // Output: 30

Here we use the square bracket notation in the object destructuring syntax to dynamically access the property with the name stored in the propertyName variable.

Object destructuring provides a flexible and concise way to access and assign object properties, making code more readable and expressive.

4. Object.keys()

The Object.keys() method returns an array of the given object's own enumerable property names. It allows us to access object properties by taking an array of property names and then iterating over them.

const person = {
  name: 'John',
  age: 30,
};

const keys = Object.keys(person);
for (const key of keys) {
  console.log(key + ': ' + person[key]);
}

In this example, we use Object.keys() to get an array of property names from a person object. We then iterate through the array using a for...of loop and access the corresponding property values ​​using square bracket property accessors.

The Object.keys() method is useful when we need to operate on each property of an object, or when we want to get an array of property names for further processing.

5. Object.entries()

The Object.entries() method returns an array of [key, value] pairs of enumerable attributes of the given object itself. It allows us to access property names and their corresponding values.

const person = {
  name: 'John',
  age: 30,
};

const entries = Object.entries(person);
for (const [key, value] of entries) {
  console.log(key + ': ' + value);
}

In this example, we use Object.entries() to get an array of [key, value] pairs from the person object. We then use a for...of loop to iterate through the array and access each property's key and value.

The Object.entries() method is especially useful when we need to perform operations on property names and their values, such as mapping or filtering based on certain conditions.

Summarize

When choosing an appropriate approach, remember to consider factors such as predictability of property names, dynamic property names, code readability, and specific use cases. By following best practices and using these methods appropriately, you can write cleaner, more efficient, and more maintainable JavaScript code.

Finally, thank you for reading.

learn more skills

Please click on the public number below