JavaScript Objects

In simple words objects are variables containing variables. An object is an unordered collection of data, including primitive types, functions and even other objects. A JavaScript object is an entity having Data (properties) and behavior (method). Example :
  var myObj = {'FirstName':'Frank', 'LastName':'Castle', 'age':41, 'Occupation':'Freeelancer'};
Example :
<!DOCTYPE html>
<html>
<body>
  <script> 
    var myObj = {'FirstName':'Frank', 'LastName':'Castle', 'age':41, 'Occupation':'Freeelancer'};
    document.write("Name : " + myObj.FirstName + " " + myObj.LastName + "<br/>");
    document.write("Age : " + myObj.age + "<br/>");
    document.write("Occupation : " + myObj.Occupation);
  </script>
</body>
</html>
Output :


The objects can be nested within other objects, and this allows the programmer to create arbitrarily complex data structures consisting of data (properties) and behavior (methods) for desired tasks. The programmer can collect all the data and functions related to a specific task into a single unit: an object.

JavaScript is an Object Oriented Programming (OOP) language. A programming language can be called object-oriented if it provides four basic capabilities to developers :

Abstraction :- It is the capability to store one object inside another object. An object should characterize a certain abstract idea or task. The object should present an interface to the programmer that provides the features or services one might expect of an object of that type.

Encapsulation :- It is the capability to store related information, whether data or methods, together in an object. An object should maintain internally the state necessary to characterize its behavior. This data is usually hidden from other objects and accessed through the public interface.

Inheritance :- It is the capability of a class to rely upon another class (or number of classes) for some of its properties and methods. The language should provides the means for specialized objects to be created from more general objects.

Polymorphism :-  It is the capability to write one function or method that works in a variety of different ways. Different objects should be able to respond in different ways to the same action.


Creating Objects in JavaScript :

in JavaScript, there are three ways to create objects :

1. Creating object using an object literal
2. Creating object with the new keyword
3. Creating object with Object constructor

1. Creating object using an object literal :

By using an object literal we can define and create an object in one statement, it is the easiest way to create object in JavaScript. An object literal is nothing but the name:value pairs inside the curly braces {}. The syntax is as follows :
  var object_name = {property1:value1, property2:value2, ...., property_n:value_n};
The property of an object can be accessed with the dot (.) operator applied to an object.

Example :
<!DOCTYPE html>
<html>
<body>
  <script> 
    var myBook = {'Name':'Programming in C', 'Author':'Dennis Ritchie', 'price':10};
    document.write("Book Details  :<br/>Book Name : " + myBook.Name + "<br/>");
    document.write("Author : " + myBook.Author + "<br/>");
    document.write("Price : " + myBook.price + " $");
  </script>
</body>
</html>
Output :



2. Creating object with the new keyword :

With the new keyword we can create an instance of an object. To create an object, the new operator is followed by the Object() constructor method. The syntax would be :
  var object_name = new Object();
At above syntax the Object() is a constructor function which creates and initializes an object.

Example :
<!DOCTYPE html>
<html>
<body>
  <script> 
    var student = new Object();
    student.firstname = "John";
    student.lastname = "snow";
    student.age = "21";
    student.course = "B.Sc (Computer Science)";
    student.rollNo = "12164";
  
    document.write("Student Details  : <br/>");
    document.write("Name : " + student.firstname + " " + student.lastname + "<br/>");
    document.write("Age : " + student.age + "<br/>");
    document.write("Roll No. : " + student.rollNo + "<br/>");
    document.write("Course : " + student.course);
  </script>
</body>
</html>
Output :



3. Creating object with Object constructor :

With object constructor we can define JavaScript objects. For example :
<!DOCTYPE html>
<html>
<body>
  <script> 
  
    function student(fname, lname, course, age, roll) {
      this.firstname = fname;
      this.lastname = lname;
      this.age = age;
      this.course = course;
      this.rollNo = roll;
    }

    stud1 = new student("Jack", "Ritehcer", "Social Science", "24", "12007");
    stud2 = new student("Bruce", "Wayne", "Economics", "25", "12001");

    document.write("Student Details  :<br/>");
    document.write("Name : " + stud1.firstname + " " + stud1.lastname + " | ");
    document.write("Age : " + stud1.age + " | ");
    document.write("Roll No. : " + stud1.rollNo + " | ");
    document.write("Course : " + stud1.course + "<br/>");

    document.write("Name : " + stud2.firstname + " " + stud2.lastname + " | ");
    document.write("Age : " + stud2.age + " | ");
    document.write("Roll No. : " + stud2.rollNo + " | ");
    document.write("Course : " + stud2.course);
  </script>
</body>
</html>
Output :


At above example we create two instances by calling the function by new keywords with object values as argument. And at here this keyword is used to refer to the object that has been passed to a function. The this keyword refers to the current object.


Defining Method For an Object :

JavaScript methods are the actions that can be performed on objects. A JavaScript method is a property containing a function definition. For example :
<!DOCTYPE html>
<html>
<body>
  <script> 

    function CalculatePrice(price) {
      this.price = (price + (price*10)/100);  // with 10% tax
    }

    function myBooks(title, author, price) {
      this.title = title;
      this.author = author;
      this.price = 0;
      this.CalculatePrice = CalculatePrice; // Assign method(function) as property
    }

    book1 = new myBooks("Javascript Basics", "Bruce Wayne");
    book1.CalculatePrice(50);
    document.write("Book Name : " + book1.title + "<br/>");
    document.write("Author : " + book1.author + "<br/>");
    document.write("Price : " + book1.price + " $");

  </script>
</body>
</html>
Output :



Deleting Properties :

With delete keyword deletes a property from an object. The delete keyword deletes both the value of the property and the property itself. After deletion, the property cannot be used before it is added back again. Example :
<!DOCTYPE html>
<html>
<body>
  <script> 
    var myObj = {'FirstName':'Frank', 'LastName':'Castle', 'age':41, 'Occupation':'Freeelancer'};
    document.write("Name : " + myObj.FirstName + " " + myObj.LastName + "<br/>");
    document.write("Age : " + myObj.age + "<br/>");
    document.write("Deleting Age property ...<br/>");
    delete myObj.age;
    document.write("Age : " + myObj.age + "<br/>");
  </script>
</body>
</html>
Output :


The delete operator is designed to be used on object properties. It has no effect on variables or functions. The delete operator should not be used on predefined JavaScript object properties. It can crash your application.


Next Topic :