Objects in JavaScript

Introduction

 
Objects are used to store collections of data and complex entities. Objects are variables too, but they can contain many values. JavaScript objects belong to the Non-Primitive Data type.
 
There are two types of Objects:
  • User-defined Objects
  • Built-in Objects

User-defined Objects

 
In the objects that are defined/created by the user to solve any given problem. Users can create their own objects, such as Student, House, Car, Company, etc...
 

Built-in Objects

 
A built-in object is an object that is of the primitive and non-primitive data types, handling some specific tasks. They are different types of Objects in JavaScript
 

Common reference Objects

  • Array Object
  • Boolean Object
  • Math Object
  • Date Object
  • String object
  • Regular Expression Object

DOM (Data Object Model)

  • Attributes Object
  • Element Object
  • Style Object
  • Document Object

BOM (Browser Object Model)

  • Windows Object
  • Navigator Object
  • Location Object
  • Screen Object
  • Storage Object

Object Creation

 
There are three types of objects that can be created in JavaScript.
  • By Object literal
  • By creating an instance of the object
  • By using Constructors
We can access the properties and method of the object,
  • By Dot operator – objname. property value
  • By Square brackets –  [property]

Creating an object in a literal way

 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>By Object literal</h2>  
  9.     <script type="text/javascript">  
  10.         var student={};              //literal
  11.         student.name= 'VijayKumar';  
  12.         student.rollno= '17CS095';  
  13.         student.dept= 'CSE';  
  14.         student.year= '3rd year';  
  15.         document.write(student.rollno);       
  16.     </script>  
  17. </body>  
  18. </html>  
Output
 
 

Creating Instance of an Object

 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Instance Of an Object</h2>  
  9.     <script type="text/javascript">  
  10.         var Faculty= new Object();  // instance of an Object  
  11.             Faculty.name= 'RajKumar';  
  12.             Faculty.rollno= '950';  
  13.             Faculty.dept= 'ECE';  
  14.             Faculty.salary= '30,000';  
  15.         document.write("Faculty name :"+Faculty.name,"<br/>"+"Depeartment :"+Faculty.dept);                 
  16.     </script>  
  17. </body>  
  18. </html>   
Output
 
 

By using a Method Constructors

 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Constructor Objects</h2>  
  9.     <script type="text/javascript">  
  10.         function student(name, rollno, dept, year,) //Methods constructor  
  11.         {  
  12.             this.name=name;  
  13.             this.rollno=rollno;  
  14.             this.dept=dept;  
  15.             this.year=year;  
  16.         }  
  17.         var student1= new student("Vijay",95,"CSE","3rd year");   
  18.         var student2= new student("Surya",80,"ECE","3rd year");  
  19.         var student3= new student("Naveen",90,"EEE","2rd year");  
  20.         document.write(student1.dept,"<br />");  
  21.         document.write(student2.name);  
  22.     </script>  
  23. </body>  
  24. </html>   
Output
 
 

Array of Object

 
Array is a collection of similar data types. Array is another programming language. It is a data type, in JavaScript Array is an Object. It stores the multiple values in a single
variable. We can declare an Array Object in JavaScript in three ways,
  • literal
  • instance of object
  • Method Constructors
Literal Syntax
  1. Var name = [“arr 1”,” arr 2”,” arr 3”]  
See the demo
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Instance Of an Object</h2>  
  9.     <script type="text/javascript">  
  10.         var myarray = ["HTML","CSS","JAVASCRIPT","BOOTSTRAP","ANGULAR JS"]    
  11.         document.write("Web developement Languages is :"+myarray,"<br />");     
  12.         document.write("Number of Element in Array is :"+myarray.length);     
  13.     </script>  
  14. </body>  
  15. </html>   
Output
 
 
Another example in the Array reverse Method()
 
Example 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Instance Of an Object</h2>  
  9.     <script type="text/javascript">  
  10.         var myarray = ["HTML","CSS","JAVASCRIPT","BOOTSTRAP","ANGULAR JS"]    
  11.         document.write("Web developement Languages is :"+myarray,"<br />");     
  12.         document.write("Number of Element in Array is :"+myarray.length,"<br />");  
  13.         document.write("Array Element in reverse order :"+myarray.reverse());  
  14.     </script>  
  15. </body>  
  16. </html>   
Output
 
 
Instance of Object 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Instance Of an Array Object</h2>  
  9.     <script type="text/javascript">  
  10.         var myarr1 = new Array(); // instance of an Object  
  11.         myarr1[0]="HTML";  
  12.         myarr1[1]="CSS";  
  13.         myarr1[2]="JAVASCRIPT";  
  14.         myarr1[3]="ANGULAR JS";  
  15.         document.write("Web developement Languages is :"+myarr1,"<br />");      
  16.         document.write("Number of Element in Array is :"+myarr1.length,"<br />");  
  17.     </script>  
  18. </body>  
  19. </html>   
Output
 
 
By using Constructors
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Objects in JavaScript</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Constructors</h2>  
  9.     <script type="text/javascript">  
  10.         var myarray =["C","C++","JAVA","PYTHON","R PROGRAMING"]   //constructor  
  11.         document.write("Web developement Languages is :"+myarray,"<br />");     
  12.         document.write("Number of Element in Array is :"+myarray.length,"<br />");  
  13.     </script>  
  14. </body>  
  15. </html>   
Output
 
 

Summary

 
In this article, we learned about objects in JavaScript. In the next article, I will explain the other core objects. I hope this article was useful to you. Thanks!