A data type is known as a composite data type when it represents a number of similar or different data under a single declaration of variable i.e., a data type that has multiple values grouped together. There are mainly three types of composite data types named as below −
Object
Array
Function
In this article, we will discuss the first type of composite data type i.e. object.
An object is a collection of properties i.e, an object can store the properties of anything in the key-value pairs. An object in javascript has keys and each key has its own value as shown in the example
let person={firstname:"Prince", lastname:"Varshney", age:23, haircolour:"Black"};
An object is used whenever we want to store more than one value for a single variable like in the above example we have stored the firstname, lastname, age, and haircolour of a person in a single variable named ‘person’. The property of an object can be of any data type i.e., it can be string, number, Boolean or it can be an array as well. Due to the specialty of having data of any data type the objects are very useful in processing large amounts of data. We can use an object to store the whole data of a batch of students, people of a society, or people in a country.
You can try to run the following code to learn how to declare objects in JavaScript
<html> <head> <title>Javascript objects</title> </head> <body> <script> let person={firstname:"Shivi", lastname:"Singh", age:23, haircolour:"Black"}; for (i in person){ document.write(i + ": " + person[i] + "<br />"); } </script> </body> </html>
This will produce the following result -
firstname: Shivi lastname: Singh age: 23 haircolour: Black
We can also create an empty JavaScript object and add properties in the object later. To create an empty object, we have to use the “new” keyword like shown below −
<html> <head> <title>Javascript objects</title> </head> <body> <script> let person=new Object(); person.firstname="Shivi"; person.lastname="Singh"; person.age=23; person.haircolour="Black"; for (i in person){ document.write(i + ": " + person[i] + "<br />"); } </script> </body> </html>
This will produce the following result -
firstname: Shivi lastname: Singh age: 23 haircolour: Black
Each and every value of an object can be fetched so that we can use them further whenever we need them in our code further. The object values can be accessed by 2 methods −
We can access the object value using a dot(.) operator as shown in the below example −
<html> <head> <title>Javascript objects</title> </head> <body> <script> let person={firstname:"Prince", lastname:"Varshney", age:23, haircolour:"Black"}; document.write(person.firstname); document.write("<br>"); document.write(person.age); </script> </body> </html>
The output of the above example is given below −
Prince 23
We can also access the object value using a square bracket [] as shown in the below example −
<html> <head> <title>Javascript objects</title> </head> <body> <script> let person={firstname:"Prince", lastname:"Varshney", age:23, haircolour:"Black"}; document.write(person["firstname"]); document.write("<br>"); document.write(person["age"]); </script> </body> </html>
The output of the above example is given below -
Prince 23