Power of the "new" keyword during constructor instantiation in JavaScript
Tags: javascript, node, webdev, programming
Published: 2022-06-04 04:38:49

**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](https://codesandbox.io/s/core-javascript-object-oriented-programming-dmmov)