ES6 Classes: Syntax sugar?
By: Rahul Padalkar
Tags: JavaScript, ES6, Development, Javascript Tips, Front End Development

“JavaScript now has classes! Cool right?” said one of my colleagues. That got me thinking, is it a new construct introduced in ECMA 2015? I didn’t try to dig in deep, but a few days later I came across this video by Mattias Petter Johansson and that got me experimenting with functions and objects.

If you prefer video over reading, I have made a video on this topic. Click here.

One of these experiments revealed something that completely blew my mind (At least it was mind-blowing for me! 😆). Today in this article I will share what I have learnt. So get ready to get your mind blown.

Okay, here it is, Classes in JS are just syntax sugar.

Told ya!

If you don’t believe me.

The next obvious question is how are classes implemented internally then? and if they aren’t a new construct can I use them in pre-ECMA 2015 environments? The answer to the latter is yes, but you cannot use the class keyword as it won’t be recognized by the JS interpreter. Instead, you can have class-like behaviour using functions.

Going back to the former question, let’s see how classes are implemented internally.

var users = ['Adam','Elle','Jhon','Chris']; class User {



constructor(username, password, email, age){

this.username = username;

this.password = password;

this.email = email;

this.age = age;

}



isAdult() {

if (this.age > 18) {

return true;

}

return false;

}



getUserName() {

return this.username;

}



static isUsernameTaken(username) {



if(users.indexOf(username) < 0) {

return false;

}

return true;

}



static getAllUsers() {

return users;

}



}

So here we have a class User with

a constructor

2 static methods getAllUsers and isUsernameTaken

and 2 instance methods isAdult and getUserName

After running this code in Chrome console and typing in User you can see this

This makes it pretty clear.

So User, even though is defined as a class is internally recognized as a function. Moreover, constructor represents the body of this function.

But what happens to the methods then?

Static methods are properties of the function

Instance methods are available on the prototype of the function.

If this is still not clear, I would recommend writing a class and then transpiling it using babel. Personally, that helped me get a better understanding.

Now we know with certainty that classes aren’t a new construct, so how can we simulate class-like behaviour in pre ES6 environments?

var users = ['Adam','Elle','Jhon','Chris']; //class constructor --> function body

var User = function(username, password, email, age) {

this.username = username;

this.password = password;

this.email = email;

this.age = age;

} // instance methods --> property of prototype

User.prototype.isAdult = function() {

if (this.age > 18) {

return true;

}

return false;

}



User.prototype.getUserName = function() {

return this.username;

} // static methods --> property of function

User.isUsernameTaken = function(username) {



if(users.indexOf(username) < 0) {

return true;

}

return false;

}



User.getAllUsers = function() {

return users;

}

I think this answers the question pretty clearly.

Thank you for reading, I hope I was able to blow your mind. I have made a video on the same topic available here. If you like it, then be sure to subscribe and hit like!

Happy coding 😄!