Re-introducing JavaScript Objects using Constructor Function
Tags: javascript, oop, beginners, explainlikeimfive
Published: 2020-05-04 12:34:07

[Previously](https://dev.to/salyadav/re-introducing-javascript-objects-1-3m4h) we had seen JavaScript's Object Literal method of creating an object. In this post, we will explore how to create an object using the __Constructor Function__. Yes, that's right. You can create an object using a function! 

For those of you familiar with Classes and instantiating an object from a class, this concept is very similar. 

*Then why don't we just create a class??*
Surprisingly, classes were introduced in JS only with ES6 (ECMAScript2015), which is quite recent. Sigh! Until then, Constructor Function was our savior. (Don't worry if you don't know what I am talking about.)

Having said that, let's dive in:

We will use the same object format we used in [#1 post](https://dev.to/salyadav/re-introducing-javascript-objects-1-3m4h) for our example. Here it is,

```javascript
function Person(thename) {
    this.name = thename; 
    this.greeting = function() {
        console.log('Hola! Mi nombre es ' + this.name + '.');
    }
}
```
PS. I have dropped the age and country attributes just to keep it simple.

This creates a function "object" with a namespace *Person*, within which there are two attributes called *name (of string type)* and *greeting (of function type)*. 
Internally, JS converts this code into an [Immediately-Invoked Function Expression](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and allocates a variable *Person* of type - function object. We will learn about IIFE later, let's keep it simple for now.

> **Note-** The CAPITAL 'P' used while declaring 'Person' is nothing but a common naming convention for anything that resembles a Class. If you are using any modern code editor like VSCode with ES6 JS version, you will notice a warning like:
*"This constructor function may be converted to a class declaration."*

Remember, we haven't created an object yet. We have only defined what the object should look like. Now, to create an object, simply call the function like a constructor:

`person1 = new Person('Sanchez');`

This creates a new object called `person1`. Go ahead and print *person1* in your console using `console.log(person1)` and dissect it. Open it until you have reached trivia. You will see something like this (and a lot more): 

```javascript
/**
 * {
 *  name: 'Sanchez',
 *  greeting: f (), --> no name to the function - anonymous function
 *  __proto__: {
 *      constructor: f Person(thename), --> name of the function "Person"
 *      __proto__: Object
 *  }
 * }
 */
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/097n927duuvmq0o4if71.JPG)

### What is actually happening here?
We can break it down to three steps:
1. **new** creates a new empty object and assigns it to **this** -> 
`this = {}`
2. The function then runs and adds new key-value pairs to **this** object -> 
`this.name = thename` and  `this.greeting = function() {...}`
3. Finally, the value of **this** is returned and assigned to person1 ->
`person1 = function () {...  return this; }`

> **Note-** In this case, your constructor function should NOT have any return statement. JS won't stop you from adding one. If you do, that return statement will be executed and the corresponding object will be returned instead of **this** and the instantiation will work differently than you anticipate. So be careful!

But what is this ugly wormy thing that creeped into your object called `__proto__`!! This is JavaScript's *Object Prototypes*. It's an amazing and equally important concept for us to master Objects in JS. We will get to them soon!
For now, stash them in your memory palace.

### When do we use Constructor Functions?
Take a scenario where you just know you are going to have Objects of 'Person' type, but don't know HOW MANY. Here, it is simply convenient to call `var newguy = new Person('His Name')` everytime you encounter a need for new object, instead of creating them using the verbose method of *Object Literal*.

But this can't be all so perfect, can it? 

Think about this...
Everytime you create a new object from Person, a new variable is getting assigned in the memory with an object reference. And EVERY object contains a function called *greeting* which is essentially doing the same thing in all the objects. If you have 10 such object, 50... 100... How many times do we define the same function for every object!! 

We have solution to this extravagant waste of space. 🎶🎵 #SuspenseMusic ...
**Prototypes**. 
Whaaaaaa.... 😱 
Anyways, let's not overload ourselves. If you have made it this far, treat yourself with some 🍦. Take a break. Then move on to [#3](https://dev.to/salyadav/re-introducing-javascript-objects-using-object-constructor-1bmk).

> PS: Before you move on to the next chapter. I would suggest you play around with this a bit. Create new functions. Instantiate new objects. Open them up. Open what's openable inside of them. Keep going. I promise, it's fun! Comment here some interesting things you see.

> Also, I will soon add some JS Interview kind of questions to help you grasp the usage of these concepts soon. Hang in there!

Reference: 
https://javascript.info/constructor-new#constructor-function
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS