Power of the "new" keyword during constructor instantiation in JavaScript

What we will discuss

1. What is the new keyword in constructor instantiation
2. What happens if we don't use the new keyword during constructor instantiation
3. How to resolve the issue caused when we miss the new keyword
4. More on Es5 constructor pattern

1. What is the new keyword in constructor instantiation

The new keyword in JavaScript is used to create an instance of a constructor. In other words, a new keyword helps us to create a fresh variant of a constructor(either built-in constructors or custom defined constructors by we JavaScript developers).

Code example

const emmanuel = new Person({name:"Emmanuel"});

2. What happens if we don't use the new keyword during constructor instantiation

Before answering the second question, i will like to breakdown in simple steps what the new keyword causes JavaScript to do to its constructor behind the hood:

• A dunder/dondo(__proto__) object gets created
• The dunder(__proto__) object will inherit the content of the constructor prototype
• And finally, the this global object of the constructor will now inherit from the dunder(__proto__) object

Code example

 function Linkedin() {
   if (!new.target) return new arguments.callee();

 /***********************************
  * When you instantiate this constructor
  * with the new keyword, the below steps
  * gets executed like a magic 🪄:
  *
  * STEP 1: a dunder object is created:
  *       const __proto__ = {}
  *
  * STEP 2: the dunder object inherits
  * from constructor prototype
  *       Object.assign(__proto__,
  * Object.create(Linkedin.prototype))
  *
  * STEP 3: the "this" object inherits from the dunder object
  *     Object.assign(this,__proto__)
  *
  * Sumary of what happens behind the hood, i will use Es6 
  * for this summary so you understand better:
  *
  *     const __proto__={
  *             ...Component.prototype
  *       } /*Hey, do you know i am the new object which 
  * can only be accessible by my Constructor instance 
  * e.g new Func().__proto__*/
  *
  *    (function transferDunderToThis(){
  *       for(const prop in __proto__){
  *            this[prop] =__proto__[prop]
  *         }
  *     })()
  ****************************************/

  //private variables in es5
  const features = ['CAN_POST', 'CAN_CHAT'];

  //public methods in es5
  Linkedin.prototype.getFeatures = function getFeatures() {
    return features;
  };
}

const linkedin = Linkedin();

console.log(linkedin.getFeatures());// [ 'CAN_POST', 'CAN_CHAT' ]

Now back to question 2, this is what happens if we don't use the "new" keyword during constructor instantiation

• New __proto__ object is prevented from being created

• Because __proto__ object is not created, it doesn't get binded or inherits from Component.prototype

• Because __proto__ object is not created, the this object automatically has nothing related to our constructor to be returned/consumed

3. How to resolve the issue caused when we miss the new keyword during constructor instantiation

The solution i use personally is to detect if new was used, if not return i then instatiate the constructor using its declaration signature(that is, if its expecting argument a, i will just pass down the argument like a parameter 😄) if need be. Just like below

function Linkedin() {
  if (!new.target) return new arguments.callee();// so here is the magic
}

4. More on Es5 constructor pattern

For more on Es5 patterns, checkout my eBook