JavaScript module pattern and "new" keyword

It is an old post based on old idea, it is not so relevant anymore.

 

I have just encountered an article about JavaScript module pattern. As a Java developer, it blows my thinking about JavaScript. So far, it is the excellent article about JavaScript module pattern, according to my point of view. I added the link of the article for me and who wants to learn module pattern.

https://toddmotto.com/mastering-the-module-pattern/

However, the self invoked function creates only one object in the memory. As a Java developer, it looks like Java singleton or static method kind of thing. You cannot create multiple objects using self invoked function.

In this post, I am trying to demonstrate the situation step by step using simple example and potential solution of this issue.

 For example:

       var Name = (function(){

          var firstName = "Ted";
          var lastName = "Bid";

          var nameObject = {};

          nameObject.setFirstName = function(fn){
             firstName = fn;
          }

          nameObject.setLastName = function(ln){
             lastName = ln;
          }

          nameObject.getFirstName = function(){
             return firstName;
          }

          nameObject.getLastName = function(){
             return lastName;
          }
 
          return nameObject;

       })();  

I have simple "Name" object to set and get firstName and lastName. If firstName and lastName are not initialised then "Ted" and "Bid" will be used.

Now, I created two "Name" objects to set and print first name and last name in the console.

     ...
        var name1 = new Name();
        name1.setFirstName("a");
        name1.setLastName("v");
        console.log("Name1: "+name1.getFirstName()+", "+name1.getLastName());

        var name2 = new Name();
        console.log("Name2: "+name2.getFirstName()+", "+name2.getLastName());
     ...

According to my test, I received JavaScript error in Firebug. (I used FireFox.).

The FireBug reported error:

TypeError: Name is not a constructor
   var name1 = new Name();

O....yes, I remember, it is called self invoked function. I cannot create object manually. "Name" object is already created automatically.

Ok. what should I do now. I like new, I want to use new because I am a Java developer. I removed the "new" keyword and tried to run it again. FireBug did not not throw any error.

   
     ...       
        var name1 = Name;
        name1.setFirstName("a");
        name1.setLastName("v");
        console.log("Name1: "+name1.getFirstName()+", "+name1.getLastName());

        var name2 = Name;
        console.log("Name2: "+name2.getFirstName()+", "+name2.getLastName());
     ...

According to below console output, the result is not correct.

Console output:

  Name1: a, v
  Name2: a, v

The Name2 should give me the default name, "Ted" and "Bid" because I did not initialise the first name and last name. In the memory, only one "Name" object is created. For this reason, name1 and name2 are pointing to same "Name" object.

I need to create "Name" object manually. Somehow, I have to inform JavaScript engine that do not create "Name" object for me, I will create "Name" object manually by invoking "new" keyword.

The trick is to remove "()" parenthesis from the end of the function as below.
     

       var Name = (function(){

             ...
 
       });

Therefore, the "Name" object will not be created automatically. Now, I can use "new" keyword in the below example to set and print first name and last name in the console.

    ...     
       var name1 = new Name();
       name1.setFirstName("a");
       name1.setLastName("v");
       console.log("Name1: "+name1.getFirstName()+", "+name1.getLastName());

       var name2 = new Name();
       console.log("Name2: "+name2.getFirstName()+", "+name2.getLastName());
   ...

Console output:

Name1: a, v
Name2: Ted, Bid

I successfully created two "Name" objects but not self invoked function style.