# OOJS - Object Oriented JavaScript - Part 4

In this part you'll understand about ```Class```, ```Constructor```, ```this``` keyword and how to create multiple instances of objects with the help of a Class's constructor.

*Hi! I am [Sunil](https://www.linkedin.com/in/linkinsunil/)! I am a front-end developer and this is the fourth part of 'OOJS - Object Oriented JavaScript' series. You can find the other parts of this series [here](https://linkinsunil.hashnode.dev/series/object-oriented-js-oojs).
For more useful content and articles, [follow me](https://twitter.com/intent/follow?original_referer=https%3A%2F%2Fgithub.com%2Flinkinsunil&screen_name=officialskv).*

This series will make you understand - 
- Creating your own objects using object literal notation.
- Encapsulation, instances.
- JavaScript Classes and Constructors.
- Inheritance.
- Method Chaining.
- Prototypes and Prototype inheritance.
---

# OOJS - Object Oriented JavaScript - Part 4

In third part of this blog series we understood how we can update properties of an object and ways to access its properties and values. In this blog we'll understand how to create multiple instances of objects with the help of a Class's constructor.  Lets get started.

We had this piece of code left in our last blog- 

```
var userOne = {
    email: 'sunilnet4@gmail.com',
    name : 'Sunil',
    friends: 'Rekha',
    login: function(){
        console.log(this.email, 'has logged in');
    },
    logout(){
        console.log(this.email, 'has logged out');
    }
};
``` 
This code above is enough to create a user with certain properties and methods. But what if we have to create hundreds and thousands of users like employees of an organization or students in a college. 

One thing we can do is replicate the above code with different properties, but that would be a lot of code repetition and nobody would want to be in that scenario. 

To solve the purpose, there is a couple of ways. One way is to use the ```prototype``` model. But with the release of <abbr title="ECMAScript 16">ES6</abbr> we got a little <abbr title="Syntactic sugar means that the new features of the language are not really new. Instead, they are a nicer syntax for something existing. You could do exactly the same by writing something different in the old version. Due to that, there are transpilers like Babel which can convert the new syntax to the old one.">syntactic sugar</abbr> so that we can solve this problem using classes as well. Under the hood, classes essentially do the same thing as prototypes in JavaScript. Now some devs find it easier to work with these classes and some don't as JavaScript as a language doesn't have classes built into it. So this ES6 is just some syntactic sugar which emulates the idea of classes but under the hood its just same as working with JavaScript prototype model (which we'll surely cover by the end of this series).

Coming back to Classes, we define a class in the following way- 

```
class User {
    constructor(){

    }
};
``` 
Notice that, we have a ```class``` keyword followed by an uppercased class of name ```User``` and an immediate code block. There is no ```=``` sign between name and code block unlike in object declaration. Keep this syntax in mind while working with Classes.

A class also hosts a ```constructor``` function which serves the purpose of making new object <abbr title="An instance, in object-oriented programming (OOP), is a specific realization of any object. An object may be varied in a number of ways. Each realized variation of that object is an instance. In a non-programming context, you could think of A dog as a class and your particular dog as an instance of that class.">instances</abbr>. 

So, instead of replicating the object multiple times what we can do is get rid of all the previous code  and- 

Step 1- Create a class.

Step 2- Create an object instance of the class.

Now, log the object instance in the console, just like below- 

```
class User {
    constructor(){
        this.email = "sunilnet4@gmail.com";
        this.name = "Sunil";
        this.friends = "Rekha";
    }
};

let userOne = new User();

console.log(userOne);
``` 

![oojs4 -1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637168821073/L1FF2wcrI.png)

We can see in the console, an object instance of the ```User``` class. 

Here, the ```new``` keyword is-
1. creating a new empty object { }
2. sets the value of ```this``` to be the new empty object. Meaning, ```this``` refers to the empty object.
3. calls the constructor method.

But there is a catch here. All our values are hard coded, which means we can not differentiate between two or more instances because the values will always remain the same. 

So in this case, we can make use of ```this``` keyword and take value as arguments.

```
class User {
    constructor(email, name, friends){
        this.email = email ;
        this.name = name;
        this.friends = friends;
    }
};

let userOne = new User("sunilnet4@gmail.com", "Sunil", "Rekha");

console.log(userOne);
``` 

![oojs4 -2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637168861728/bRIa1gVBK.png)

We can see the object in the console which, this time, is created dynamically. Similarly, we can create multiple object instances of User class- 

```
let userTwo = new User("dan@gmail.com", "Dan", "Ambrov");
let userThree = new User("jack@gmail.com", "Jack", "Daniel");

console.log(userTwo);
console.log(userThree);
``` 

Untill now we saw properties defined in the constructor function of the class, and we conveniently omitted the methods. Thats because methods aren't defined in constructor rather, they are defined outside the constructor function, in the class itself.

```
class User {
    constructor(email, name, friends){
        this.email = email ;
        this.name = name;
        this.friends = friends;
    }

    login(){
        console.log(this.email, "is logged in");
    }

    logout(){
        console.log(this.email, "is logged out");
    }
};

let userOne = new User("sunilnet4@gmail.com", "Sunil", "Rekha");
let userTwo = new User("dan@gmail.com", "Dan", "Ambrov");

console.log(userOne.login());
console.log(userTwo.logout());
``` 

You can see that we have two object instances of the User class here, ```userOne``` and ```userTwo``` with the value of its properties passed as arguments. The methods however are in the class itself and the ```this``` in the methods refer to object instance which is created. So, no matter what the object name is, ```this.email``` will pick up the email property of that object.

![oojs4 -3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1637168718822/mda8I3LJ3.png)

From this, we can conclude that we can use the ES6 classes to create object instances of a class which is highly readable and maintainable.

In the next blog we'll understand about a little trick called Method Chaining. Stay tuned and follow me 👇

---

### You can reach me here.

👉 If you like this blog you can [tweet about it](https://twitter.com/intent/tweet?text=Object%20Oriented%20programming%20isn't%20considered%20easy%20but%20I%20think%20this%20blog%20article%20on%20Object%20Oriented%20JavaScript%20https://linkinsunil.hashnode.dev/%20has%20made%20it%20super%20easy%20to%20understand%20and%20get%20going,%20give%20it%20a%20try.%20Thanks%20for%20the%20article,%20Sunil🙌🏿.).

👉 Also, [connect with me on Linkedin](https://www.linkedin.com/in/linkinsunil/) to be the part of **15000+ members strong family of devs and tech recruiters**.

👉 As an appreciation, you can [follow me on Github](https://github.com/linkinsunil/)  and star my repos if you find them useful. 

👉 You can also subscribe to my [youtube channel](https://www.youtube.com/channel/UCU8n-kOWA4q2IClm5MGdI5Q?sub_confirmation=1). I'll regularly post useful and some unique code and productivity targetting stuff here.

**Lets get things working, see you again. 🤘**
