Post
Ask Question

Constructor Vs Literal Notation In JavaScript

Introduction

 
Objects in JavaScript can be created in the following two different ways. These are:
  1. Constructor notation
  2. Literal notation
These two techniques differ in many ways and which one to be used depends on the requirement. So, let's first see how they differ syntactically. 
 
A constructor notation is used in the following way
  1. function constructorNotation() {      
  2.    // Code goes here      
  3. }     
A literal notation is used in the following way
  1. var literalNotation = {    
  2.    // Code goes here    
  3. };   
See the basic difference, constructor notation uses function declaration type syntax and literal notation uses the variable declaration type syntax. Now, let's add some properties and methods to these two notations and see how we can use them. We will add a property named testValue and testFunction in both of these.
 
Let's add them to the constructor notation first
  1. function constructorNotation()    
  2. {    
  3.     this.testValue = '';    
  4.     this.testFunction = function ()    
  5.     {    
  6.         alert(this.testValue);    
  7.     }    
  8. }   
Let's add them to the literal notation now
  1. var literalNotation = {    
  2.     testValue: '',    
  3.     testFunction: function ()    
  4.     {    
  5.         alert(this.testValue);    
  6.     }    
  7. };   
As we can see above, the difference in the way the properties and methods are added to these objects.
  • For constructor notation, we have the property name and its value separated by an "=" sign i.e. the equal to symbol. The same is for the function name and definition. On the other hand, the property name and value are separated by a ":" i.e. colon symbol in literal notation. The same is for function names and definitions.
     
  • Another point is that, in constructor notation, the definition of objects, these properties, and functions are separated by ";" symbol i.e. semi-colon. However, for literal notation, they are separated by a "," i.e. comma.`
Now let's see how we can use these two notations practically. In order to use these, we will create two functions, one is callConstNotation for constructor notation and the other is callLiteralNotation for literal notation.
 
So in order to use the constructor notation, we will simply create a new instance of the constructorNotation type using the new operator and access the properties and functions using this instance. So, our function will look like:
  1. function callConstNotation()    
  2. {    
  3.     // Create new instance    
  4.     var _cnstNotation = new constructorNotation();    
  5.     // Access the varoable and Set the value    
  6.     _cnstNotation.testValue = 'Test Value for Constructor';    
  7.     // Call the function    
  8.     _cnstNotation.testFunction();    
  9. }   
Now, let's create the callLiteralNotation function. For using the objects of the type literal notation, we do not need to create an instance and can directly access the properties and methods by using the variable name literalNotation and apply "." i.e. dot symbol. So our function will look like the following:
  1. function callLiteralNotation()    
  2. {    
  3.     // Access the variable directly and Set the value    
  4.     literalNotation.testValue = 'Test Value for Literal';    
  5.     // Call the function    
  6.     literalNotation.testFunction();    
  7. }   
Next, we call these two methods on click of two different buttons and can see the results.
  1. <input type="button" value="Call Literal notation" onclick="callLiteralNotation()" />    
  2. <input type="button" value="Call Constructor notation" onclick="callConstNotation()" /> 
Run the application and click the buttons
 
Run
 
Run the applicatio
 
Now the question is when should we be using Literal notation and constructor notation.
  • The point is when we need only one instance with the same values then we can go with the literal notation else if we may need multiple instances, like the instance of a class, we can go for the constructor notation. So let's use our above example and see how we can use the constructor notation for this purpose.
    1. function callConstNotation()    
    2. {    
    3.     // Create new instance    
    4.     var _cnstNotation = new constructorNotation();    
    5.     // Access the varoable and Set the value    
    6.     _cnstNotation.testValue = 'Test Value for Constructor';    
    7.     // Call the function    
    8.     _cnstNotation.testFunction();    
    9.     // Another instance of constructor notation.    
    10.     var _cnstNotation2 = new constructorNotation();    
    11.     // Access the variable and Set the value    
    12.     _cnstNotation2.testValue = 'Test Value2 for Constructor';    
    13.     // Call the function for second instance    
    14.     _cnstNotation2.testFunction();    
    15. }   
  • Another consideration point is the need for namespace. While using JavaScript in your application, you may face conflict issues. So in order to avoid conflicts, you can use the literal notation, which acts like the concept of namespace and you can add your functions in it. Like in our literal Notation above, we can add our variables and functions as required and use them through the use of the variable and dot operator.
So that was about the constructor and literal notation in JavaScript. Hope you enjoyed reading it. Happy coding.
 
Read more articles on JavaScript


Similar Articles