Sign in Get started
LEARN WEB DEVELOPMENT WEB DEV COURSES WRITE FOR US
JavaScript — Object Oriented
Programming using ES6
NC Patro Follow
Mar 31, 2018 · 6 min read
ES6(ECMAScript2015) is a major upgrade to JavaScript. In this article we
will learn the new way of achieving Object Oriented concepts like class,
object, static properties, constructor and inheritance with super and
extends in JavaScript.
act of writing helps us to remember things better
Class and Object
Object is a thing which can be seen or touched and in software we try to
represent the same real-life thing with object.
Object Oriented Programing is nothing but code around that object.
Class is not an object, it’s like blueprint which can generate objects. So, Top highlight
class helps to set the classification of objects with its properties and
capabilities.
Any number of instance can be created from a class, each instance is
called Object.
class Car {
/* Properties and Actions */
let figo = new Car();
console.log(typeof Car); // function
console.log(typeof figo); // object
console.log(figo instanceof Car); // true
In the above code snippet, we can see the typeof class Car still return as
function because behind the scene JavaScript still works with function only.
Constructor, Properties and Methods
Constructor is just a function which gets called automatically when we
create an instance from the class.
Instance variables get created and initialized using constructor.
Instance variables are nothing but called properties of the object.
Methods are again functions which attached with instance and all
instance created from the same class will have those methods or actions.
Accessing properties and methods inside class, we need this keyword.
class Meetup {
constructor(name, location) {
this.name = name;
this.location = location;
}
start() {
console.log(this.name + 'Meetup ' + 'is started at ' +
this.location);
}
}
let jsMeetup = new Meetup('JS', 'Blr');
let ngMeetup = new Meetup('Angular', 'Noida');
jsMeetup.start(); //JSMeetup is started at Blr
ngMeetup.start(); //AngularMeetup is started at Noida
Explanation of above code snippet:
The instance jsMeetup created using new keyword and class Meetup has
been called like function.
we can pass arguments to the class as well like any other function and
behind the scene, it will call to the constructor function for initializing
the instance variables name and location .
you can go through blog JavaScript — All about this and new keyword to
understand in-depth working of this and new keyword.
Static Properties and Methods
Each instance of the class will have its own properties which gets created
at constructor but Class can have also it’s own properties.
The class only properties are called Static Properties.
Same holds true for Static methods as well.
class Meetup {
constructor(name, location) {
this.name = name;
this.location = location;
}
start() {
console.log(this.name + 'Meetup ' + 'is started at ' +
this.location);
}
static getAddress() {
console.log('Returned Address');
/* this.location will return undefined */
console.log('City: '+ this.location );
}
}
Meetup.admin = "Adam";
Meetup.getMembers = function () {
console.log(Meetup.admin+ ' Returned Members');
}
let jsMeetup = new Meetup('JS', 'Blr');
console.log(Meetup.admin); // Adam
console.log(jsMeetup.admin); // undefined
Meetup.getMembers(); // Adam Returned Members
jsMeetup.getMembers(); // TypeError: jsMeetup.getMembers is not
a function
Meetup.getAddress(); // Returned Address
jsMeetup.getAddress(); // TypeError: jsMeetup.getAddress is not
a function
Explanation of above code snippet:
The instance jsMeetup cannot access the class only methods i.e. static
methods getMembers() and getAddress() . Same with static properties as
well like admin is static property.
We can put label as static in-front of methods and properties inside the
class definition to make it accessible to class only or we can add it later
to the class as well like Meetup.getMembers = function(){...} .
The scope of this keyword is current execution context of the method.
In case of static method, the execution context can never be class
instance or object. That’s the reason this.location of static method
getAddress() prints undefined .
Getter and Setter
class Meetup {
constructor(name) {
this._name = name;
}
get name() {
// Validation can happen on data
return this._name;
}
set name(val) {
// Validation can happen on data
this._name = val;
}
let meetup = new Meetup('JS');
console.log("meetup Name: " + meetup.name); // meetup Name: JS
meetup.name = 'Angular';
console.log("meetup Name: " + meetup.name); // meetup Name: Angular
Explanation of above code snippet:
With getter and setter, will have more control on object properties after
initialization with constructor.
We can do required validation on data within get and set method before
setting or getting the value.
We can see in the above code that the instance property name is _name
but we are using it as meetup.name and its working fine because of getter
and setter methods.
Inheritance in ES6
class Meetup {
class TechMeet extends Meetup {
class SportMeet extends Meetup {
let js = new TechMeet();
console.log(js instanceof TechMeet); // true
console.log(js instanceof Meetup); // true
console.log(js instanceof Object); // true
The above code snippet is new way of achieving inheritance in
JavaScript using extends and class keyword.
We can see that object js is instance of class TechMeet and Meetup both
because class TechMeet extends parent class Meetup .
Example of Inheritance with constructor
class Meetup {
constructor() {
console.log("inside Meetup constructor");
}
}
class TechMeet extends Meetup {
constructor() {
super();
console.log("inside TechMeet constructor");
}
}
let js = new TechMeet();
// inside Meetup constructor
// inside TechMeet constructor
Explanation of above code snippet:
Inside constructor function of child class TechMeet , we have to call
super() method to call the parent constructor first otherwise JavaScript
will throw error.
super() method is nothing but constructor function of Parent class.
super() call is must in constructor of derived class whether explicit
presence of parent constructor exists or not.
One more example on extends and super()
class Meetup {
constructor(organizer) {
this.organizer = organizer;
}
}
class TechMeet extends Meetup {
constructor(organizer) {
super(organizer);
// this.organizer = 'NG';
}
}
let js = new TechMeet('Mr. JS');
console.log(js.organizer); // Mr. JS
Explanation of above code snippet:
We can pass the argument from child constructor to parent constructor
through super() method like above code snippet.
We can override the parent class properties inside constructor of child
class.
More on Inheritance with super keyword
class Meetup {
organise() {
console.log('Organising Meetup');
}
static getMeetupFounderDetails() {
console.log("Meetup Founder Details");
}
}
class TechMeet extends Meetup {
organise() {
//super.organise();
console.log('Organising TechMeet');
super.organise();
}
static getMeetupFounderDetails() {
console.log("TechMeet Founder Details");
super.getMeetupFounderDetails();
}
}
let js = new TechMeet();
js.organise();
/* Output:
Organising TechMeet
Organising Meetup */
TechMeet.getMeetupFounderDetails();
/* Output:
TechMeet Founder Details
Meetup Founder Details */
Explanation of above code snippet:
Child class can access the methods of parent class using super object
like super.organise() .
Similarly static methods of child class can access the static method of
parent class with help of super object.
Summary
Syntax changes in ES6 and new features are helping to write better, cleaner
and less code to achieve the object-oriented concepts in JavaScript. It’s
helping to bridge the gap between prototypal JavaScript and classical
programmers.
If you like this post and it was helpful, please click the clap 👏 button
multiple times to show support, thank you.
✉ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow
CodeBurst on Twitter, view 🗺 The 2018 Web Developer Roadmap, and
🕸 Learn Full Stack Web Development.
JavaScript Object Oriented Web Development Software Development ES6
1.5K 9
WRITTEN BY
NC Patro Follow
Developer | Mentor | Public Speaker | Technical Blogger | Love
for Photography and Programming | twitter: @ncpatro
codeburst Follow
Bursts of code to power through your day. Web Development
articles, tutorials, and news.
More From Medium
React - A simple 鬼灭之刃 剧场版 无限列车 Kbone and WeChat Mini- Javascript reduce
beginning 😀 篇 完整版本 (2020-HD) Program Development function with array of
Deepika Srinivasan in Nerd For
Kimetsu no Yaiba: Mugen Kai Yang
objects
Tech
Ressha-Hen 完整版觀看 Jay Han
電~看电影.
Hening Sunyi
Journaling The ghost of Understanding the Functions in SASS / SCSS
Yoneblogger
useEffect….Abort! importance of the key Dinesh Kumar R in Ampersand
Femi Oni
prop in React 🗝 Academy
Franco D'Alessio in The Startup
Learn more. Make Medium yours. Write a story on Medium.
Medium is an open platform where 170 million readers come Follow the writers, publications, and topics that matter to you, If you have a story to tell, knowledge to share, or a
to find insightful and dynamic thinking. Here, expert and and you’ll see them on your homepage and in your inbox. perspective to offer — welcome home. It’s easy and free to
undiscovered voices alike dive into the heart of any topic and Explore post your thinking on any topic. Start a blog
bring new ideas to the surface. Learn more
About Write Help Legal
