What Exactly is a Class in Javascript?

How a class works under the hood — JavaScript

zmjdev
JavaScript in Plain English

--

Why am I writing this?

In Javascript, Classes don’t behave the same as in the other languages. As a result, we run into problems very often because we think classes are the same as in the other languages.

Now that React is popular, we often run into such problems. As a result, React introduced functional components. So, understanding class in JavaScript is very important. Today, we are going to understand what exactly is a class in JavaScript.

What to Expect?

  • Object creation in JavaScript
  • Factory functions
  • Constructor functions
  • class in JavaScript

Object Creation in JavaScript

The primary purpose of a class is to create objects. There are 4 ways to create objects in JavaScript.

  • Object literals
  • Factory functions
  • Constructor functions
  • Classes

To understand class in JavaScript, we have to know object creation using factory functions and constructor functions.

Factory Functions

var circleFunctions = {
draw:function(){
console.log("draw")
}
}
function createCircle(radius){
var newCircle = Object.create(circleFunctions);
newCircle.radius = radius;
return newCircle;
}
var circle = createCircle(5);
circle.draw() // draw

Object.create(obj) returns an empty object with a link established to the object passed as the argument.

var newCircle = Object.create(circleFunctions)

The above line of code will establish a link between circleFunctions and newCircle . After the above line, we will have an empty object with a link established to circleFunctions, assigned to newCircle . The link is stored in __proto__. i.e:

newCircle={__proto__:circleFunctions}

var circle = createCircle(5)

After the above line,

circle={
radius:5,
__proto__:circleFunctions
}

When we access the draw method on the circle object, Javascript will look for the draw method inside the circle object. obviously, there is no draw method defined inside circle object. JavaScript doesn’t stop there. Rather, it looks for the draw method inside the object assigned to the __proto__ property. There the JavaScript engine can find the draw method. That’s how we get “draw” as the output.

We call circleFunctions as prototype in JavaScript.

Constructor Functions

function Circle(radius){
this.radius = radius
}
Circle.prototype.draw=function(){
console.log("Draw")
}
var circle = new Circle(5);
circle.draw()// Draw

We need a new keyword to correctly invoke constructor functions. As a convention, we use the pascal naming method to name the constructor functions. Here, the new keyword does several things for us. Basically, it does these 4 things:

  • Create a new empty object i.e {}
  • Assign the newly created empty object to this keyword i.e this = {}
  • Establish a link between this and prototype object i.e this = {__proto__:Circle.prototype}
  • return this

If you want a deep understanding of the new keyword, refer to the following article:

var circle = new Circle(5)

When we get to the above line, we will have an object with the property radius and a link to Circle.prototype i.e.,

circle = {
radius:5,
__proto__:Circle.prototype
}

Now, if we invoke the draw method on circle object, the JavaScript engine doesn’t find the draw method inside circle object. And it continues its search through the __proto__ and finds the draw method.

Class

class Circle{
constructor(radius){
this.radius = radius
}
draw(){
console.log(“Draw”)
}
}
var circle = new Circle(5);
circle.draw()//"Draw"

The draw method in the class Circle is actually assigned to Circle.prototype.draw.

The above code segment and the following code segments are the same.

function Circle(radius){
this.radius = radius
}
Circle.prototype.draw=function(){
console.log("Draw")
}
var circle = new Circle(5);
circle.draw()// Draw

The class is just syntactical sugar for constructor functions. It makes our world a lot easier when it comes to sub-classing.

Conclusion

The class in JavaScript is nothing but syntactical sugar for constructor functions. It hides all the complexity and automates several things for us. That way, our code is way simpler and cleaner.

More content at plainenglish.io

--

--