Post
Ask Question

JavaScript From Beginner To Advanced - Part Three (Objects)

Introduction

 
In previous articles we learned about the basics of JavaScript and JavaScript functions. In 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 a 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 inbuilt objects, but we can also create our own objects according to our requirements.
 
There are several different ways of creating JavaScript objects.

  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.
    1. < script type = "text/javascript" >  
    2.     var book = {  
    3.         name: "Getting Started With JavaScript",  
    4.         author: [“KP”, ”David”],  
    5.         getName: function () {  
    6.             return this.name  
    7.         }  
    8.     }; <  
    9. /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 expression which 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 a JavaScript object using the 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 the new keyword. 
     
    Now, let's create a constructor function for the object type that contains its name, properties and methods. e.g.
    1. < script type = "text/javascript" >  
    2.     function Book(name, author, year) {  
    3.         this.name = make;  
    4.         this.author = model;  
    5.         this.year = year;  
    6.     } <  
    7.     /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.
    1. var myBook = new Book(‘Getting Started With JavaScript’, ’KP Singh’, ’2016’);  
    2.   
    3. //We can also create multiple objects e.g.      
    4. var javaBook = new Book(‘Getting Started With Java, ’KP Singh’, ’2016’);  
    5. var csharpBook = new Book(‘Getting Started With C#, ’Robin Singh’, ’2016’);  
    6. var phpBook = new Book(‘Getting Started With PHP, ’Priya Singh’, ’2016’); 

  3. Using the Object. create method

     
    We can also create an object by using Object.create. It is most useful when we want to inherit one object directly from another object e.g.
    1. < script type = "text/javascript" >  
    2.     var girl = {  
    3.         name: ””,  
    4.         traits: {}  
    5.     };  
    6. //Create the instance of girl object      
    7. var deepika = Object.create(girl);  
    8. deepika.Name = ”Deepika”;  
    9. deepika.traits.age = 35,  
    10.     deepika.traits.weight = 70,  
    11.     deepika.traits.favColor = ”Blue”  
    12. console.log(“Deepika”, deepika.traits) // Output : Deepika: Object { age=35, weight=70, favColor=”Blue” }      
    13.     <  
    14.     /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 a () function to create the instance of girl, where the girl will be a prototype (We'll discuss it in the upcoming article).
     

  4. Object and Properties

     
    Basically JavaScript object properties are associate with it and defined the characteristics of objects. We can access JavaScript Object properties by using dot (.) notation like another server-side programming language e.g.
    1. Myobject.propertyname    
    We can access JavaScript Object Properties value and also assign value according to our requirements. As we know that JavaScript is case sensitive, hence its objects and properties are also case sensitive. e.g.
    1. Myobject. propertyname  
    2. 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


Similar Articles