Object Oriented JavaScript & More ! [ Part 1 ]

Hey There!

Let's talk about JavaScript and Object-Oriented Programming. Huh? Oh yes. Everything in JS ( I will use JS as an alias for Javascript, so please bear with me ) is referenced as an object to some extent. Today, I will show you how to implement Object Oriented concepts using JS and its ES6 features.

Before we get more in-depth, we will go through the object and we will see why we really need OOP concepts in JS.

Consider the code below.

const userOneName = 'John Doe';
const userOneEmail = '[e-mail]';

const usertwoName = 'Shah';
const usertwoEmail = '[e-mail]';

const userThreeName = 'Jack';
const userThreeEmail = '[e-mail]';

this code does not make any sense when you try to look at it from the entity perspective. It is really boring to keep writing and repeating the same code of line for the same entity.

Now, let's create an object of UserOne by the following code.

const UserOne = {
  name: "joh  doe",
  email: "[e-mail]",
  printUser: function () {
    console.log(`${this.name} ${this.email}`);
  },
};

This code makes sense now that we are encapsulating the properties of user entities into a single object. It is now possible to create the same object for another user by simply changing its properties and customizing them as well.

You can simply access the properties of the object by using the below code.

console.log(UserOne.name); 

//Dynamic Access
console.log(UserOne['email']);

You can access and retrieve data from the object using the above syntax. Dynamic access is recommended as the key to access the data may change and may depend on some external environment. This explanation is shown in the following code.

 

User = {
  name: "John Doe",
  email: "[e-mail]",
};

var getUserBytKey = "name";
console.log(User[getUserBytKey]);
//output = John Doe

getUserBytKey = "email";
console.log(User[getUserBytKey]);
//output = [e-mail]

// but we cannnot use below way to access the property
console.log(User.getuserBytKey);
//output = undefined

So I hope you are clear with this concept of Dynamic access of properties.

Now, what if there are more than one user object having same properties and methods ? Do we really need to keep copying this object and can modify accordingly ? NO NO NO. We really do not need to do this.

If you know JS well, then you will also be familiar with the prototype. Prototypes allow you to create multiple objects with similar properties and behaviors (generally functions). JS has its own implementation of Object-Oriented Programming High-Level Language since many developers are using or are compatible with Object-Oriented Programming High Level Language.  Bingo! By using the new JS ES6 Class feature, we can replicate some of the basic concepts of OOP.

let's discuss Class. Well, behind the scene this class concept is using the working style of prototype. I want to talk a bit about prototype here.

i.e Let's create a Person prototype function and do some fun stuff with it.

function Person(name, age, email) {
  this.name = name;
  this.age = age;
  this.email = email;
  this.getInfo = function () {
    console.log(`${this.name} ${this.age} ${this.email}`);
  };
}

//This is how we can create a objects from the Person prototype..
const userOne = new Person("Alisha", 30, "[e-mail]");
const userTwo = new Person("Shah", 30, "[e-mail]");

userOne.getInfo();

Yes, This is how you can play with the prototype.

Now enough of this. Let's play with classes.
No more talking, just understanding through code.

class User {
  constructor(name, email) {
    this.name = name; 
    this.email = email;
  }
  getInfo() {
    console.log(`${this.name} ${this.email}`);
  } 
}

Above code represents User class where you can have constructor and method.

Whenever you create an object based on a class, the constructor will initialize that object with default values.
let's create an object.

const UserOne = new User("John Doe", "[e-mail]");

const UserTwo = new User("Shah", "[e-mail]");

Here, UserOne and UserTwo are the object from the User class created using "new" keyword.

Taking note of the fact that, you can now create a function in the constructor, a function in a class generally represents the behavior of the object.

Also, Here,  "this" keyword refer to the context of particular object.

so for UserOne, this refers to object UserOne
UserTwo, this refers to object UserTwo.

Is that clear? It is not that hard, you can try it by your self.
Comment down below if you find any difficulty understanding this article.

I will discuss some Advanced concepts In Part 2.