Question

Can Someone Explain Me Classes In Javascript With Examples?

Answer 1

Classes in JavaScript:

ES6 provides a new syntax to create objects using the classes in JavaScript.

Before getting into explanation there is a thing you have to keep note of: class syntax is just a syntax in Javascript and it’s not like a full fledged class based implementation of object oriented programming, unlike in languages like python, cpp and Java

Note:

UpperCamelCase is used by convention for ES6 class names

Just like functions have expressions and declarations, classes will have too.

We use class keyword to declare classes in JavaScript

Basic syntax of a class declaration in JS:

class Box {

            constructor (height, width, thickness) {

                        this.height = height;

                        this.width = width;

                        this.thickness = thickness;

            }

}

What does this code do is: it creates a class named Box and assigns height, width and thickness for it. For example when we create a new Box object from the class we have created, we can do like :-

let firstBox = new Box(10, 20, 30)

You can understand now what we have done, we have created a new Box object using our Box class and assigned height – 10, width – 20, thickness – 30, only while declaring. This is done because of the constructor() method we have used in our class.

The constructor method is a special method which is used for creating and initializing an object created with a class.

Another best example:

Now we will create a student class and assign name, rollno and age to it.

Before seeing the code, try yourself once.

Code:

class Student {

            constructor (name, rollno, age) {

                        this.name = name;

                        this.rollno= rollno;

                        this.age = age;

            }

}

let chotaBheem = new Student(“bheem”, 2, 15);

// you can even check their properties by console logging below code

// console.log(chotaBheem.name, chotaBheem.rollno, chotaBheem.age)

So, you can see how we have created a class in javascript and even created a new object with that class

Now, you must be wondering what’s the use of using classes for just creating multiple objects? Absolutely not!

Let me show you the best thing that classes have in their armoury – Functions

We can use these functions in many different ways. First let’s get into creating functions and using them

Let’s use same Box example here:

class Box {

            constructor (height, width, thickness) {

                        this.height = height;

                        this.width = width;

                        this.thickness = thickness;

            }

            area(){

                        console.log(this.height * this.width * this.thickness)

            }

}

let secondBox = new Box(10, 20, 30)

secondBox.area()

What we had done is, we created a function called area which multiplies thickness, width and height assigned while creating the class. To call that function we have to call it with this syntax: className.functionName()

In these ways functions can be used inside classes, you can even send parameters to those classes like these:

class Box {

            constructor (height, width) {

                        this.height = height;

                        this.width = width;

            }

            area(thickness){

                        console.log(this.height * this.width * thickness)

            }

}

let secondBox = new Box(10, 20)

secondBox.area(30);

As you can see here we didn’t passed thickness as a parameter while creating a class, we have passed it when we want area of the box.

One more example on Javascript classes:

And yeah, if you call are referencing/creating a new object from a class without declaring it before then it would cause referenceError. So keep an eye on that as well :)

So, this is how we declare, assign and use classes in JavaScript. Don’t think classes as a part of object-oriented paradigm. It’s not like so. Hope you understand the things I explained

If you have any queries or need further more explanation in any area please leave a comment below.

And don’t forget to give an upvote – which will boost our confidence

Thank you! Have a great day!