Object Oriented Programming in ES2015 (es6)

1. What is Object Oriented Programming?

An ideal programming language should have good support for Functional (procedural) as well as Object-Oriented Programming. In this article, you will learn Object Oriented Programming in ES2015.

The entire idea of Object-oriented programming is to implement real-world characteristics like Objects (entities), Inheritance, Encapsulations, Polymorphism etc in programming. In OOPs, properties and functions are encapsulated in a Class. These classes work as a blueprint and “n” number of instances (Objects) can be created from a single class.

Most importantly, object-oriented programming focuses on code maintainability with modular programming, reusability with a class & object, simplicity, and extensibility with inheritance.

2. Class and object creation in ECMAScript 2015 – es6

JavaScript is not an Object Oriented Programming language, rather an Object based programming language. New syntax of class class User{...} is introduced in the ECMAScript 2015, informally also known as es6. The new syntax is clean and productive. A class is created using the class keyword and a class name. The body of the class is defined in {} and the class name is declared in Camel case. Class is like a blueprint from which runtime objects are created using new keyword.

The body of a class is always executed in strict mode.

Copy

2.1 Defining a complete ES6 class

We will now look into the class constructor, properties, static properties, methods, static methods, object instantiations and getter/setter.

Copy

class Mobile {

//Constructor @Rule - Only one constructor allowed per class
  constructor(id, model, color) {
    this._id = id; // private member 
    this.model = model;
    this._color = color;
    console.log("Inside constructor");
  }

//Will produce - SyntaxError: A class may only have one constructor
  /* constructor() {
    console.log("Empty constructor");
  } */

//Class method
  dial(number) {
    console.log("Dialing ..." + number);
  }

//Can have n number of static methods.
  static getManufacturer() {
    console.log("Manufactured by ZeemMobile");
  }

//getter
  get id() {
    return this._id;
  }

//setter
  set color(color) {
    this._color = color;
    console.log("Updated color: " + this.color);
  }

//another method
  print() {
    console.log(`_id: ${this._id}, model: ${this.model}, color: ${this._color}`);
  }
}

//static variable
Mobile.minConnectivity = "4G";

//Another way of declaring static method
Mobile.getConnectivity = function () {
  console.log("Connectivity: " + Mobile.minConnectivity);
};

//Instance of the class Mobile
let mobile = new Mobile();
let mobile2 = new Mobile(5, "Galaxy S8", "Pink Silver");

mobile2.print(); //method invocation
Mobile.getConnectivity(); //static method invocation

console.log("typeof Mobile: " + typeof Mobile); //prints function
console.log("typeof mobile: " + typeof mobile); //prints object

2.2 Defining a `constructor` in es6

There can be only one constructor in a class. A SyntaxError is thrown if a class contains more than one constructor. A constructor can use the super(...) keyword to call the constructor of a superclass.

If no constructor is present, then an empty constructor is generated in the class in runtime constructor() {}.

Copy

2.3 Instance properties in es6

Instance properties are available inside the instances of a class, known as object. In the above example, this._id, this.side etc are instance properties. All the properties that are declared upfront are public properties in JavaScript.

Instance properties must be defined inside of class methods.

Copy

Private Properties:

At this moment there is no official way of declaring private properties in a JavaScript class. As a convention, we append _ in a variable to declare it as a private member. e.g. this._id. I encourage you to read the official tc39 proposal for private and public fields.

2.4 `static` properties in es6

Static properties can be directly declared as ClassName.propertyName and accessed in the same way.

A static property cannot be accessed with an instantiated class object, but static methods can access.

Copy

2.5 `static` methods in es6

A static method is declared with the help of a static keyword in es6. e.g. static getManufacturer() {}.
The class Mobile demonstrates a different approach to declare static methods. static methods are invoked from class variables, not objects. e.g. Mobile.getConnectivity()

Copy

2.6 Prototype methods in es6

A shorter syntax, similar to the getter and setter is introduced in ECMAScript 2015. It is a shorthand function assigned to the method’s name.

Copy

2.7 Getter/Setter in ECMAScript 2015 (ES6)

Getter/Setter are implemented with get/set keywords as shown below.

Copy

3. Inheritance in ES6 using “extends” and “super”.

The entire idea of Inheritance is code reusability. In a real world, every entity or object inherits some properties/characteristics from Parents. Same concept is used in programming, where a Child class inherits properties & functions from Parent class. In OOPs language, Parent class is also called as Base class and Child class is also kown as Derived class.

All classes in JavaScript are derived from the Parent class Object. Therefore objects in JavaScript has few inbuilt methods, inherited from Parent Object class. e.g toString(), valueOf() etc.

Let us look at the below example

Copy

In the above example:

class Device {} is used as the base class or parent class
With the help of extends keyword, we created the derived class Mobile from base class Device
New object/objects of Mobile are created with the help of new as we used this earlier

3.1 Constructors in Inheritance

We will now look into constructors in Inheritance. Working with constructors in JavaScript can be a little tricky if you are new to it. Let us look into the below example to understand this in details.

Copy

Constructor rules

If the child class does not have a constructor, it invokes the Parent class constructor
If the child class wants to have its own constructor, then it must have super(_optional_parameters) constructor in the first line.Look at the constructor of Mobile class. This behavior may surprise you if you are especially from Java background.
What if class Device does not have a constructor? Well, when you don’t write, js created one for you in every class. Therefore, it is mandatory to write super() in the base class constructor.

3.2 Properties inheritance in ES6

Let us look into the below example to understand how class properties are inherited in es6.

Copy

Like many other programming languages, in JavaScript:

static properties and static methods are never inherited
public functions and public properties are inherited
constructors are inherited
Using super.parent_method() syntax, you can invoke parent class methods inside the subclass methods
If you override the parent constructor, it is mandatory to use super(..)in the subclass constructor on the first line, which invokes the parent class constructor.

4. ES6 modules using “import” and “export”

Modules are used to manage the large code base. Before ES6, we were able to achieve this with the help of various js libraries like RequireJS, etc.

Modules are a collection of small independent code units (like components or functions) that can be easily reused in an Application.

Copy

As shown in the above example, function cube and foo can be reused by doing import in any other javascript file. To understand the different syntax used for export and import, let us look into the below example carefully.

Copy

The export can be used in front of a class, function, variable and separately at the end of the file, as shown in the above example.

Copy

Now, import is used to make use of the functions exposed in number-util.js. Here, we only import what is needed. If we import and not use in the code, there will be a warning thrown by the javascript linters. The example below explains this well.

To load the modular JavaScript files in a web browser, we need to use the special syntax type="module" inside the <script>tag of html pages.

Copy

Conclusion

The support for the above features of es6 is pretty good. Some developers still prefer using a transpiler like BabelJs for compatibility issues. These features are widely used, specifically, import and export are very useful for reusability, maintainability, separation of concerns and encapsulation. I would love to hear your feedback.

Object Oriented Programming in ES2015 (es6)

1. What is Object Oriented Programming?

2. Class and object creation in ECMAScript 2015 – es6

2.1 Defining a complete ES6 class

2.2 Defining a `constructor` in es6

2.3 Instance properties in es6

2.4 `static` properties in es6

2.5 `static` methods in es6

2.6 Prototype methods in es6

2.7 Getter/Setter in ECMAScript 2015 (ES6)

3. Inheritance in ES6 using “extends” and “super”.

3.1 Constructors in Inheritance

Constructor rules

3.2 Properties inheritance in ES6

4. ES6 modules using “import” and “export”

Conclusion

Further reading:

Complete list of ES2017 (ES8) Features!

Object Oriented Programming in ES2015 (es6)

1. What is Object Oriented Programming?

2. Class and object creation in ECMAScript 2015 – es6

2.1 Defining a complete ES6 class

2.2 Defining a constructor in es6

2.3 Instance properties in es6

2.4 static properties in es6

2.5 static methods in es6

2.6 Prototype methods in es6

2.7 Getter/Setter in ECMAScript 2015 (ES6)

3. Inheritance in ES6 using “extends” and “super”.

3.1 Constructors in Inheritance

Constructor rules

3.2 Properties inheritance in ES6

4. ES6 modules using “import” and “export”

Conclusion

Further reading:

Complete list of ES2017 (ES8) Features!

2.2 Defining a `constructor` in es6

2.4 `static` properties in es6

2.5 `static` methods in es6