JavaScript From Beginner To Advanced - Part Three (Objects)

In previous articles we learned about the basics of JavaScript and JavaScript functions. In this this article we will learn about the basics of creating and manipulating objects in JavaScript.

In JavaScript, objects are king. If you understand objects, you understand JavaScript. JavaScript is designed on a simple object-based paradigm. An object may be a collection of Key-Value pairs, which means it is a collection of properties. For example car is one of the objects with properties like color, wheel, fuel type etc.The Properties of Object can be Number, String, Boolean, Array, function etc.

Creating Object

JavaScript has several number of inbuilt objects, but we can also create our own objects according to our requirements.

There are several different way to creating JavaScript object.

1. Literal Based Object:
   
   This is the most frequent and popular way to create objects in JavaScript. If you are not requiring multiple instances of an object then Literal Based object is based on the idea. This type of object is denoted by curly braces. e.g.
   

   <script type="text/javascript">
   var book =
   {
     name : "Getting Started With JavaScript",
   author:[“KP”,”David”],
     getName : function ()
   {
      return this.name
     }
   };
   </script>

   In the above example we created one object named “book”. Inside the curly braces the properties (we’ll discuss it  later) and its value are defined as a collection of key and value pairs. Here the key is identifiers or strings while the value can be any valid expressionwhich  means it may be string, number, object, function, array etc. In the object the collections of properties (key/value pair) is comma(,) delimited and each property name and its value are separated by a colon(:).
   
   
2. Using a constructor function:
   
   We can Create JavaScript object using constructor as well by using these steps:
   
   a. First we have to define an object type by writing a constructor function.
   b. Second Create an instance of the object by using new keyword.
   
   Now, let's create a constructor function for object type that contains its name, properties and methods. e.g.
   

   <script type="text/javascript">
   function Book(name,author,year)
   {
   this. name =make;
   this. author =model;
   this.year=year;
   }
   </script>

   In above example you see that we use this keyword to assign value to properties of its object. Note that this is a reserve keyword by JavaScript.
   
   Ok , now we have to create an object . e.g.
   

   var myBook= new Book(‘Getting Started With JavaScript’,’KP Singh’,’2016’);
   
   //We can also create multiple object e.g.
   var javaBook= new Book(‘Getting Started With Java,’KP Singh’,’2016’);
   var csharpBook= new Book(‘Getting Started With C#,’Robin Singh’,’2016’);
   var phpBook= new Book(‘Getting Started With PHP,’Priya Singh’,’2016’);

3. Using the Object.create method:
   
   We can also create object by using Object.create. It is most useful when we want to inherit one object directly from another object e.g.
   

   <script type="text/javascript">
         var girl={
          name:””,
         traits:{}
   };
   //Create the instance of girl object
   var deepika=Object.create(girl);
   deepika.Name=” Deepika”;
   deepika.traits.age=35,
   deepika.traits.weight=70,
   deepika.traits.favColor=”Blue”
   console.log(“Deepika”, deepika.traits)  // Output : Deepika: Object { age=35, weight=70, favColor=”Blue” }
   </script>

   In the above example you can see that first I create one object named  “girl” with two properties :- name and traits . And after that I used Object.create () function to create the instance of girl ,where girl will be prototype (We'll discuss it in upcoming article).
   
   
4. Object and Properties:
   
   Basically JavaScript object properties is associate with it and defined the characteristics of object. We can access JavaScript Object properties by using dot (.) notation like other server side programming language e.g.
   

   Myobject.propertyname

   We can access JavaScript Object Properties value and also assign value according to our requirement. As we know that JavaScript is case sensitive, hence its objects and properties are also case sensitive. e.g.
   

   Myobject. propertyname
   Myobject .Propertyname

   In the above simple example both properties are different.

Conclusion

We learned about JavaScript objects and how to create and run them. This is my third article in the series "JavaScript from Beginner to Advanced." In upcoming articles we will learn properties and prototypes in JavaScript. Your valuable suggestions, comments and critiques are welcomed.

Read more articles on JavaScript:

• Implementing Modular Design Pattern And OOP In JavaScript
• Heatmaps Using JavaScript: Part Two