Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to access properties of an array of objects in JavaScript?
In this tutorial, we will learn how to access the properties of an array of objects in JavaScript.
JavaScript is built on a basic object-oriented paradigm. A collection of properties is an object, and property is a relationship between a name (or key) and a value. The value of a property can be a function, in which case the property is known as a method.
A JavaScript object is associated with properties. An object's property may be thought of as a variable that is associated with the object. Except for the attachment to objects, object attributes are the same as regular JavaScript variables. The attributes of an object define the thing's qualities.
Property assessors use the dot or bracket notation to access an object's properties. When discussing an object's properties, it's common to distinguish between properties and methods. The property/method difference, on the other hand, is only a convention. A method is a property that may be accessed by calling it. A method is not tied to the object for which it is a method. This, in particular, is not fixed in a technique. To put it another way, this does not always correspond to the object with a method. Instead, the function call "passes" this.
Following are the methods to access the properties of an array of objects in JavaScript.
Using the dot-notation
The property in the "object. property" syntax must be a valid JavaScript identifier. The expression should return an object, with the identifier being the name of the property you want to access. In a chain, you may use the dot property accessor to get to deeper properties such as (object.prop1.prop2). When the property name is known ahead of time, the dot property accessor should be used. The dot property accessor functions properly when the property name is a valid identifier.
Syntax
var name = myBook.title;
The title is accessed in the myBook object using the dot property accessor.
Example
We have created a function book in this example that takes some parameters as input. The values of the parameters are passed in the function. The properties of the objects are accessed using dot notation.
<html> <head> <script> function book(title, author, price, publisher, isbn) { this.title = title; this.author = author; this.price = price; this.publisher = publisher; this.isbn = isbn; } </script> </head> <body> <h3>Access properties of an array of objects using dot property accessor</h3> <p id="root"></p> <script> let root = document.getElementById("root"); var myBook = new book("Chronicles of Economics", "Anirban Maity", "399", "Geetam Publishers", "Q123D8"); book.prototype.price = null; root.innerHTML = "Book title is : " + myBook.title + "<br>"; root.innerHTML += "Book author is : " + myBook.author + "<br>"; root.innerHTML += "Book price is : " + myBook.price + "<br>"; root.innerHTML += "Book Publisher is : " + myBook.publisher + "<br>"; root.innerHTML += "Book ISBN is : " + myBook.isbn + "<br>"; </script> </body> </html>
Using the square bracket notation
The 'propertyName' syntax is simply a string or Symbol in the object[propertyName] syntax. So it might be any string, such as '1foo', '!bar!', or even ' (a space). String and Symbol are the two types of property names. Any other value, even a number, is forced to be converted to a string. Because 1 is coerced into '1', this produces 'value.' When the property name is dynamic, i.e., decided at runtime, use the square brackets property accessor.
Syntax
var name = myBook['title'];
The square bracket property accessor is used to access the title in the myBook object.
Example
We've constructed a function book that accepts arguments as input in this example. The arguments' values are passed into the function. The square bracket notation is used to access the properties of the objects.
<html> <head> <script> function book(title, author, price, publisher, isbn){ this.title = title; this.author = author; this.price = price; this.publisher = publisher; this.isbn = isbn; } </script> </head> <body> <h3>Access properties of an array of objects using <i>square brackets </i> property accessor </h3> <p id = "root"></p> <script> let root = document.getElementById("root"); var myBook = new book("Day in the life of a National Swimmer", "Amitanshu Maity", "768", "Honey Well Publishers", "245F67"); root.innerHTML = "Book title is : "+myBook['title'] + "<br>"; root.innerHTML += "Book author is : "+myBook['author'] + "<br>"; root.innerHTML += "Book price is : "+myBook['price'] + "<br>"; root.innerHTML += "Book Publisher is : "+myBook['publisher'] + "<br>"; root.innerHTML += "Book ISBN is : "+myBook['isbn'] + "<br>"; </script> </body> </html>
Using the De-structuring objects
The identifier is the property's name to be accessed, and the expression must return an object. The variable identifier now contains the property value after de-structuring.
The object de-structuring is (const {title} = book). The de-structuring specifies a variable name whose value is the value of the property name.
Its syntax is a fantastic approach to extracting properties into variables in object destructuring when you want to construct a variable with the property value, use object destructuring.
Syntax
const { title } = book;
The book object is de-structured, and the title is accessed.
Example
In this example, a function expression is created with some parameters. The parameters of the object are de-structured and stored in specific variables. The constant variables store the value of the properties and are accessed in the output.
<html> <body> <h3>Access properties of an array of objects using <i>object destructuring</i></h3> <p id="root"></p> <script> let root = document.getElementById("root"); const book = { title: 'Let Us JavaScript', author: 'Neelanshu R', price: '456', publisher: 'Trinity Publishers', isbn: 'F624RT', }; const { title } = book; const { author } = book; const { price } = book; const { publisher } = book; const { isbn } = book; root.innerHTML = "Book title is : "+title + "<br>"; root.innerHTML += "Book author is : "+author + "<br>"; root.innerHTML += "Book price is : "+price + "<br>"; root.innerHTML += "Book Publisher is : "+publisher+ "<br>"; root.innerHTML += "Book ISBN is : "+isbn + "<br>"; </script> </body> </html>
In this tutorial, we learned about different methods to access the properties of than array of objects in JavaScript.
5K+ Views
