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.


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.


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() {}.


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.


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.


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()


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.


2.7 Getter/Setter in ECMAScript 2015 (ES6)

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


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


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.


3.2 Properties inheritance in ES6

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


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.


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.


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.


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.



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.