Building a iphone store

OOP - Object-oriented Programming, in general, is very useful. It helps developers to model real-world things that we want to represent inside our code, and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.

Getting a full understanding of how OOP works in javascript is a bit difficult especially in ES5 syntax, ES6 class made it a lot easier to use object constructor but as developers, we will run into ES5 object prototype codes along our journey and in case you do not know, ES6 class, work as object prototypes under the hood.

This article will explain javascript object in ES5 and ES6 syntax. Stay tuned!

You must have questioned the need for using object constructor and not stick with object literals. Well, object literals are easy and straight forward to understand but let's think of a scenario whereby we want to create an object from data gotten from an input field, for example; we have a website and in our website a form field that requests for the name, email, phone number, and address of our users. We want to use the data gotten from the form field to create an object as a way to keep user data together and then create a profile for each user and make sure each user should have the same properties(in this case name, email, number, and address). Using object literal notation requires us to create an object every time for each user, for instance from our form we got these data from three (3) users:

// 1st user
const user1 = {                               
  name: 'Precious',
  email: 'precious@gmail.com',      
  number: '+234-810-5025-740',
  address: 'Earth'
}

// 2nd User
const user2 = {                               
  name: 'Frank',
  email: 'frank@gmail.com',      
  number: '+234-800-5525-540',
  address: 'Jupiter'
}

// 3rd User
const user3 = {                               
  name: 'Charles',
  email: 'charles@yahoo.com',      
  number: '+234-810-4985-376',
  address: 'Mars'
}



The code is repetitive and that is against the DRY(Don't Repeat Yourself) principle of programming and we don't want that. The perfect solution to that is using object constructor notation, and then making

of the object. Now let's write the above code using object constructor notation and how to make instances of an object:-

// Object Constructor(ES5)
function User(name, email, number, address){
  this.name = name;
  this.email = email;
  this.number= number;
  this.address = address;
}

// Instances
// 1st user
const user1 = new User('Precious', 'precious@gmail.com', '+234-810-5025-740', 'Earth');

// 2nd user
const user2 = new User('Frank', 'frank@gmail.com', '+234-800-5525-540', 'Jupiter');

// 3rd User
const user3 = new User('Charles', 'charles@yahoo.com', '+234-810-4985-376', 'Mars');



From the above code, we just created, we used a

function which as the name implies is a function that constructs object

to create objects from the data each user submitted in the form. It is DRY and clean with the constructor notation, and values from the object can be accessed with the same syntax

// OBJECT LITERAL NOTATION
// To get the name of the first user.
   console.log(user1.name) // Precious

// OBJECT CONSTRUCTOR NOTATION(ES5)
// To get the name of the first user.
   console.log(user1.name) // Precious


Let us explain some keywords that are used in the constructor notation.

The method in the constructor function can better be written in javascript by writing it as a prototype like this:

Now, What is an Object Prototype? An object prototype is an object that is associated with every instance of an object by default in JavaScript. Prototypes allow you to easily define methods to all instances of a particular object. This is very useful in that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it.

We can also add a property to the object using a prototype which is not possible normally after declaring a constructor function, but it should only be used for properties we want all instances to share:

Dog.prototype.breed = 'German shepherd'



What if we have another object that we want to have all the properties and methods of the first object and their own special properties and/or methods, what do we do keeping DRY in mind?

which simply means one object inheriting properties and methods of another. for instance, we want another group of dog to inherit some properties of the first group plus their own special properties(dog weight):

// Group 1
function Group1(dogName, dogAge){
 // Properties
  this.dogName = dogName;
  this.dogAge = dogAge;
}

// Object Prototype
  Group1.prototype.canBark = function(){
    if(this.dogAge => '180 days'){
       return 'YES';
    } else{
      return 'NO';
    }
  }

// Group 2
function Group2(dogName, dogAge, dogWeight){
  Group1.call(this, dogName, dogAge);
  this.dogWeight = dogWeight;
}



To Inherit the properties from the first group we used the call() method which is used to call the contractor we want to inherit its properties, and it takes in

as the first parameter and then the parameters to be inherited from that constructor(in this case:- dogName and dogAge). After which we then set the special property of the object(in this case: dogWeight);

This only inherits the properties and not the prototypes. To inherit the prototypes, we will say:

Group2.prototype = object.create(Group1.prototype);



With this, we have made the 2nd group of dogs possess all the properties and objects of the 1st group.

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    // PROPERTIES
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   // METHOD
   }   
}



- is simply used to declare a class(ES6 object) it is followed by the name of the object.

- Just as we used function in ES5 syntax. constructor is used construct the object.

NOTE: Value of objects in ES^ can be accessed in same way asin ES5 and also instantiation has the same syntax.

As simple as that looks we have just written our first object using ES6 class.

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   
   }   
}

class Customer extends Person{
  constructor(firstName, lastName, age, memberShip){
    Super(firstName, lastName, age)   
    this.memberShip = memberShip;
  } 
}



: specifies that the Customer object inherit the properties and methods the Person object.

states the properties inherited but here we don't have to use the

NOTE: In ES6, we do not have to write a special line of code to inherit prototypes. as we already know, prototypes are accessible by all instances of the class object and so inherited by the extending class.

class Person{
  constructor(firstName, lastName, age){
    this.firstName = firstName;
    this.lastName = lastName;    
    this.age = age;
  }

   getAge(){
     return `${this.firstName} ${this.lastName};   
   }   

   static isHuman(){
     return 'Is a Human'
   }
}



Just as simple as that. But mind you, Static methods are defined on the class itself, and not on the prototype.

That means you cannot call a static method with the instance but with the class itself e.g calling the static method in our class above will be

I know this article was long, but I believe you have understanding of Object in ES5 and ES6 syntax; what object prototype mean, how to inherit from objects in ES5 and ES6, as well as ES6 class features and syntax.

Kay's Blog.

How to schedule releases

More Stories

Building a iphone store

Object-Oriented Programming in Javascript(ES5 & ES6) EXPLAINED.