Constructor Vs Literal Notation In JavaScript

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:

function constructorNotation() {
   // Code goes here
}

A literal notation is used in the following way:

var literalNotation = {
   // Code goes here
};

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:

function constructorNotation()
{
    this.testValue = '';
    this.testFunction = function ()
    {
        alert(this.testValue);
    }
}

Let's add them to the literal notation now:

var literalNotation = {
    testValue: '',
    testFunction: function ()
    {
        alert(this.testValue);
    }
};

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 it's value separated by an "=" sign i.e. the equal to symbol. 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. Same is for function name and definition.
  
  
• 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 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:

function callConstNotation()
{
    // Create new instance
    var _cnstNotation = new constructorNotation();
    // Access the varoable and Set the value
    _cnstNotation.testValue = 'Test Value for Constructor';
    // Call the function
    _cnstNotation.testFunction();
}

Now, let's create the callLiteralNotation function. For using the objects of the type literal notation, we do not need to create any 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:

function callLiteralNotation()
{
    // Access the variable directly and Set the value
    literalNotation.testValue = 'Test Value for Literal';
    // Call the function
    literalNotation.testFunction();
}

Next, we call these two methods on click of two different buttons and can see the results.

<input type="button" value="Call Literal notation" onclick="callLiteralNotation()" />
<input type="button" value="Call Constructor notation" onclick="callConstNotation()" />

Run the application and click the buttons:





Now the question is when should we be using Literal notation and constructor notation.

 

• The point is when we need only one instance with 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.
  

  function callConstNotation()
  {
      // Create new instance
      var _cnstNotation = new constructorNotation();
      // Access the varoable and Set the value
      _cnstNotation.testValue = 'Test Value for Constructor';
      // Call the function
      _cnstNotation.testFunction();
      // Another instance of constructor notation.
      var _cnstNotation2 = new constructorNotation();
      // Access the variable and Set the value
      _cnstNotation2.testValue = 'Test Value2 for Constructor';
      // Call the function for second instance
      _cnstNotation2.testFunction();
  }

• Another consideration point is the need of 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:

• JavaScript Coding Patterns
• Optional Parameters In JavaScript
• JavaScript Strings