What is a composite data type i.e. object in JavaScript?

Javascript Web Development Front End Technology

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.

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.

Example

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>

Output

This will produce the following result -

firstname: Shivi
lastname: Singh
age: 23
haircolour: Black

Creating an object using ‘new’ keyword

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 −

Example

<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>

Output

This will produce the following result -

firstname: Shivi
lastname: Singh
age: 23
haircolour: Black

Accessing object value

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 −

1. Using the dot(.) operator

We can access the object value using a dot(.) operator as shown in the below example −

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>

Output

The output of the above example is given below −

Prince
23

2. Using the square bracket

We can also access the object value using a square bracket [] as shown in the below example −

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>

Output

The output of the above example is given below -

Prince
23

Karthikeya Boyini

Published on 23-Jan-2018 08:10:09

Previous Page Print Page