ES5 and ES6

 

Object in JS: The object is a complex data type that allows you to store collections of data as key-value pairs.

Function in JS: A function is callable object that executes a block of code. Since functions are objects, so it is possible to assign them to variables

var x = function() { }

·         There are no classes in JavaScript. Instead functions in JavaScript may be made to behave like constructors by preceding a function call with the new keyword (constructor pattern).

·         In JavaScript everything is an object except for the primitive data types (boolean, number and string), and undefined. On the other hand, null is actually an object reference even though you may at first believe otherwise. This is the reason typeof null returns "object".

·         The most important point however is that there are no classes in JavaScript because JavaScript is a prototypal object oriented language. This means that objects in JavaScript directly inherit from other objects. Hence we don't need classes. All we need is a way to create and extend objects.

 

3 Ways to define objects in JS

1)     The Constructor Function way

function Fruit(v) { this.name = v }

2 ways to define additional properties:

Methods defined internally:

function Fruit(v) {

this.name = v

this.display() =function() { return “Fruit name is:”+this.name }

}

Using “prototype” object:

Fruit.prototype.display = function() { return “Fruit name is:”+this.name }

 

2)     Using Object Literals

var x = {

name: “fruit”,

 display: function() {

   return this.name

 }

}

Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do:

var o = {};

instead of the "normal" way:

var o = new Object();

For arrays you can do:

var a = [];

instead of:

var a = new Array();

So you can skip the class-like stuff and create an instance (object) immediately.

In this case you don't need to (and cannot) create an instance of the class, it already exists. So you simply start using this instance.

x.color = "reddish";

alert(x.display());

Such an object is also sometimes called singleton. In "classical" languages such as Java, singleton means that you can have only one single instance of this class at any time, you cannot create more objects of the same class. In JavaScript (no classes, remember?) this concept makes no sense anymore since all objects are singletons to begin with.

 

3)     Singleton using a function

This is a combination of the other two previously seen. You can use a function to define a singleton object. Here's the syntax:

var apple = new function() {

    this.type = "macintosh";

    this.color = "red";

    this.getInfo = function () {

        return this.color + ' ' + this.type + ' apple';

    };

}

So you see that this is very similar to constructor functions. discussed above, but the way to use the object is exactly like in 2.

apple.color = "reddish";

alert(apple.getInfo());

new function(){...} does two things at the same time: define a function (an anonymous constructor function) and invoke it with new. It might look a bit confusing if you're not used to it and it's not too common, but hey, it's an option, when you really want a constructor function that you'll use only once and there's no sense of giving it a name.

 

ES5 vs ES6

Under the hood it's the same implementation, "class" in Javascript is just a syntactic sugar.

Inheritance in ES5: Here, Object.create() returns a new object with the specified prototype object and properties. It is mainly used for implementing inheritance. We’re passing Person.prototype as an argument so it will extend all the properties of the Person to the class extending Person(Teacher and Student).

Inheritance in ES6: constructor is used for initialization and super is used to call the constructor of the base class.

ES5

ES6

function Person(name, age, gender) {   this.name = name;   this.age = age;   this.gender = gender; }   Person.prototype.getName = function() {   return this.name; };   Person.prototype.getAge = function() {   return this.age; };   Person.prototype.getGender = function() {   return this.gender; };   /* Teacher class.*/ function Teacher(name, age, gender, subject) {   Person.call(this, name, age, gender);   this.subject = subject; }   Teacher.prototype = Object.create(Person.prototype);   Teacher.prototype.getSubject = function() {   return this.subject; };   /* Student class*/ function Student(name, age, gender, marks) {   Person.call(this, name, age, gender);   this.marks = marks; }   Student.prototype = Object.create(Person.prototype);   Student.prototype.getMarks = function() {   return this.marks; };   const teacher = new Teacher('John Doe', 30, 'male', 'Maths'); const student = new Student('Jane Miles', 12, 'female', 88);   console.log(   'Teacher:',teacher.getName(),  teacher.getSubject(), ); console.log(   'Student:',student.getName(), student.getMarks(), );

class Person {   constructor(name, age, gender) {     this.name = name;     this.age = age;     this.gender = gender;   }     getName() {     return this.name;   }     getAge() {     return this.age;   }     getGender() {     return this.gender;   } }   /* Teacher class.*/ class Teacher extends Person {   constructor(name, age, gender, subject) {     super(name, age, gender);     this.subject = subject;   }     getSubject() {     return this.subject;   } }   /* Student class.*/ class Student extends Person {   constructor(name, age, gender, marks) {     super(name, age, gender);     this.marks = marks;   }     getMarks() {     return this.marks;   } }   const teacher = new Teacher('John Doe', 30, 'male', 'Maths'); const student = new Student('Jane Miles', 12, 'female', 88);   console.log(   'Teacher:',   teacher.getName(),  teacher.getSubject(), ); console.log(   'Student:', student.getName(),student.getMarks(), );

 

Conclusion:

Apart from initializing, calling the constructor of the base class and extending all the properties of the base class (which is almost everything), everything else remains the same. Also, you can extend these properties anywhere in the code as they are not wrapped inside a common scope which makes the code difficult to read and in the gigantic applications, I believe the readability of the code is one of the most important features.