What are classes in javascript??

Are you wondering to understand the javascript classes? Then you pick up the right article to read

So without any further ado let's get started.

Classes are one of the features introduced in the ES6 version of JavaScript. A class is a blueprint for the object. You can create an object from the class. You can think of the class as a sketch (prototype) of a house. It contains all the details about the floors, doors, windows, etc. Based on these descriptions, you build the house. House is the object.

Since many houses can be made from the same description, we can create many objects from a class.

JavaScript Classes are templates for JavaScript Objects.

Javascript Function

JavaScript class is similar to the Javascript constructor function, which is merely syntactic sugar.

There are Factory function and Constructor function

The constructor function is defined as:

// constructor function
function Person () {
    this.name = 'prajwal',
    this.age = 23
}

// create an object
const person1 = new Person();

Instead of using the function keyword, you use the classkeyword for creating JS classes. For example,

JavaScript Class Syntax

class ClassName {
  constructor() { ... }
}

for example:

class User{
  constructor(name, age) {
    this.name = name;
    this.age= age;
  }
}

The example above creates a class named "User". The class has two initial properties: "name" and "age".

The class keyword is used to create a class. The properties are assigned in a constructor function.

1. A JavaScript class is not an object.
2. It is a template for JavaScript objects.

Using a Class

When you have a class, you can use the class to create objects:

let User1 = new User("Hitesh",31);
let User2= new User("Prajwal", 23);

the example above uses the User class to create user objects so in the above example, we create 2 users with help of the User class.

1. The constructor method is called automatically when a new object is created.
2. new keyword call the constructor.

The Constructor Method

The constructor method is a special method:

1. It has to have the exact name "constructor".
2. It is executed automatically when a new object is created.
3. It is used to initialize object properties.

If you do not define a constructor method, JavaScript will add an empty constructor method.

Example

This Example will give you a brief understanding

class User{
  constructor(name, age) {
    this.name = name;
    this.age= age;
  }
}
let User1 = new User("Hitesh",31);
let User2= new User("Prajwal", 23);

console.log(User1.name); // Hitesh
console.log(User2.name); // Prajwal

Javascript Class Methods

it is quite easy to understand

Class methods are created with the same syntax as object methods.

Use the keyword class to create a class.

Always add a constructor() method.

Then add any number of methods.

It is easy to define methods in the JavaScript class. You simply give the name of the method followed by (). For example,

class User{
  constructor(name, age) {
    this.name = name;
    this.age= age;
  }
 // defining method
    greet() {
        console.log(`Hello ${this.name}`);
    }
}
let User1 = new User("Hitesh",31);
let User2= new User("Prajwal", 23);

// accessing property
console.log(User1.name); // Hitesh

//accessing method
Usert1.greet();//Hello Hitesh

You can add n number of methods according to your need.

Getters and Setters

In JavaScript, getter methods get the value of an object and setter methods set the value of an object.

JavaScript classes may include getters and setters. You use the get keyword for getter methods and set for setter methods. For example,

class Person {
    constructor(name) {
        this.name = name;
    }

    // getter
    get personName() {
        return this.name;
    }

    // setter
    set personName(x) {
        this.name = x;
    }
}

let person1 = new Person('Jack');
console.log(person1.name); // Jack

// changing the value of name property
person1.personName = 'Sarah';
console.log(person1.name); // Sarah

We can write a whole article on getter and setter as of now understand this much.

Hoisting

Classes are not hoisted

A class should be defined before using it. Unlike functions and other JavaScript declarations, the class is not hoisted. For example,

// accessing class
const p = new Person(); // ReferenceError

// defining class
class Person {
  constructor(name) {
    this.name = name;
  }
}

As you can see, accessing a class before defining it throws an error. ReferenceError

Important Note

Note: JavaScript class is a special type of function. And the typeof operator returns function for a class. For example,

class Person {}
console.log(typeof Person); // function

Conclusion

I explain hear what classes in javascript are,How to create that one with the example, getter, and setter, and hoisting. I hope that this article is useful to you, to help understand the topic better. If you have any questions, you can leave them in the comments section below.

Happy Coding.

ByBy

Follow Me