Intro to Object Oriented Javascript: Part 1

Originally Published on Hashnode

Hi, my name is Adhik 👋. I am a front-end Web developer. You can find me on Twitter.

For as long as object-oriented programming has been around, it is sometimes difficult to get your head around it. In this article and the next coming ones, I will try my best to make these object-oriented concepts easier to understand.

For people who are just starting to learn javascript, may or may not be familiar with ES6+ syntax. Not to worry. We are going to understand in brief about the version before ES6+ came out so that when you start with the ES6+ syntax, you would understand the terminology effortlessly.

We are going to learn how to create objects with the help of constructor functions.

Are you still here? Let's dive right into it.

An object is a collection of properties and methods. For example, a car has properties such as a distinctive color, a brand, type of seats (hand-stitched or leather),etc. You can start a car and accelerate using the accelerator, you can use brakes to stop the car. These are nothing but methods of a Car.

We can create objects in many well-known ways,

• Using object literal syntax

• Using the **Object.create() **method

• Using constructor functions

1. Using the object literal syntax

let audi = {
    model: "A4",
    brand: "Audi",
    color: "Metallic Black"
};

let bmw = {
    model: "Z4",
    brand: "BMW",
    color: "Alpine White"
};

In the above example, we create some variables called audi and bmw and wrap them in curly braces ({}). This is how we create an object using the object literal i.e. using curly braces ({}). model, brand and color are nothing but properties of an object.

1. Using the Object.create() method

let person = {
    firstName: "John",
    lastName: "Doe",
    age: 42
};

const newPerson = Object.create(person);
newPerson.firstName = "Jane";
newPerson.age = 32;

console.log(newPerson);

The Object.create() method creates a new object, using an existing object as the prototype of the newly created object. An Object inherits properties and methods from the prototype. In simple terms, the object "newPerson" has inherited the properties firstName, lastName and age of the "person" object, because we used the reference of the "person" object while creating the **"newPerson" **object.
We will discuss about the prototype in detail in the next post.

1. Using constructor functions

While using the object literal syntax above, we defined two objects having same properties inside them. In that example we were referring to two different brands of a car, but the properties and methods of any car would be the same right? The brand, the model, the color would be different but the property names would be the same.

Imagine, we have to create more than 20 objects for every different car object but they all have the same property names and just their values would be different. In that case, creating the object for every brand would be just repeating and not keeping the code DRY (Don't Repeat Yourself). This is where constructor functions come into picture.

In JavaScript, a constructor gets called when an object is created using the new keyword. The purpose of a constructor is to create a new object and set values for any existing object properties.

function Person(firstName, lastName){

  this.firstName = firstName;
  this.lastName = lastName;

  this.greet = function() {
     console.log(`Hi, this is ${this.firstName} ${lastName}`)
  }

}

// Creating an instance of the Person constructor using the "new" operator
const john = new Person("John", "Doe");
john.greet(); //Expected Output: Hi, this is John Doe.

Okay, so let's break down this complex constructor function. We have a function called Person. If you look closely, you will notice that the starting letter of the function name is capitalized. When we define a constructor function or a class (ES6+ concept, will be discussed in the coming posts), its considered to be a good practice to capitalize the first letter of the constructor or a class.

Here, we created an instance of the constructor Person . The "this" keyword references the object that will be created when the constructor is instantiated. In other words, the this keyword in the above example refers to the object properties defined when the instance "john" was created. That is why, we are able to use the method greet of the constructor function as it refers to the instance "john" in this case.

That's it for this post guys. Hope you were able to understand the concepts effortlessly. There will be few more posts regarding object-oriented concepts.
Stay tuned for that.