31.6 C
Jaipur
Tuesday, September 21, 2021

Beginners guide to classes in JavaScript

Must read

Classes are a template/blueprint for objects. They simplify the process of creating multiple objects with similar properties and methods. Classes were not present in ES5 and were introduced in the ES6 version of JavaScript. Classes are merely syntactic sugar in JavaScript, built on top of prototypes, and work in the same manner behind the scenes.

How to use classes in JavaScript

Let’s take a programmer’s example who has to make five objects for five different users. He will write the following code:

const user1 = {
fName: “Mary” ,
lName: “Jane” ,
    age: 23 ,
    id: 01
};

const user2 = {
fName: “John” ,
lName: “Doe” ,
    age: 47 ,
    id: 02
};

const user3 = {
fName: “Jane” ,
lName: “Doe” ,
    age: 34 ,
    id: 03
};

const user4 = {
fName: “John” ,
lName: “Smith” ,
    age: 18 ,
    id: 04
};
const user5 = {
fName: “Mary” ,
lName: “Anne” ,
    age: 22 ,
    id: 05
};

In the example above, the code has a lot of repetitiveness as all the objects have similar properties. We can easily eliminate the repetitiveness in code and make it more organized by using a class.

In JavaScript, the class keyword is used to create a class. Classes in JavaScript use a method named constructor(). It automatically executes when creating a new object. It initializes the properties of the object.

classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
    }
  }

In the example above, we have created a new class named User. It serves as a template/blueprint for all the user objects we want to make. The constructor takes four arguments and makes four properties for each object. These properties are named fName, lName, age, and id and can be accessed by using the following syntax (after we have created the object)

object_name.property_name

The ‘this’ keyword in the example refers to the object that owns the age property. This keyword is used to access the value of a property within an object.

Now we will create the user objects shown in the first example using the User class.

classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
    }
  }

const user1 = newUser(‘Mary’, ‘Jane’, 23, 01);
const user2 = new User(‘John’, ‘Doe’, 47, 02);
const user3 = new User(‘Jane’, ‘Doe’, 34, 03);
const user4 = new User(‘John’, ‘Smith’, 18, 04);
const user5 = new User(‘Mary’, ‘Anne’, 22, 05);

Here you can see that the code has become a lot more readable.

What are methods in JavaScript classes

We can also add methods to classes in JavaScript. These methods can be easily added to the body of the class after the constructor by using the same syntax which is used in objects:

classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
    }
birthYear() {
const date = newDate();
let Year = date.getFullYear() this.age;
return Year;
    }
  }

const user1 = new User(‘Mary’, ‘Jane’, 23, 01);
const user2 = new User(‘John’, ‘Doe’, 47, 02);
const user3 = new User(‘Jane’, ‘Doe’, 34, 03);
const user4 = new User(‘John’, ‘Smith’, 18, 04);
const user5 = new User(‘Mary’, ‘Anne’, 22, 05);

Now, if we try to access the birthYear() method and print it on the console using the console.log() method, then we will get the following output:

console.log(user1.birthYear());

console.log(user2.birthYear());

console.log(user3.birthYear());

console.log(user4.birthYear());

console.log(user5.birthYear());</td>

How to use the Getter and Setter methods

The Getter and Setter methods can be used in a class to get and set the value of a property in an object. Use the get or set keyword to use the getter or setter method, respectively:

classUser {
constructor(firstName, lastName, age, id) {
this.fName = firstName;
this.lName = lastName;
this.age = age;
this.id = id;
    }
    get userAge() {
returnthis.age;
    }
    set userAge(i) {
this.age = i;
    }
  }

const user1 = new User(‘Mary’, ‘Jane’, 23, 01);
console.log(user1.age); // will output 23

// setting the value of the age property
user1.userAge = 24;
console.log(user1.age); // will output 24

Conclusion

Classes are code templates that are used to create new objects with similar properties and methods. They come in handy when the coder has to make several different objects with similar properties.

In this write-up, we have discussed classes. We learned how to use them to create objects. Moreover, we also learned to add different methods to objects using classes.

Source link

- Advertisement -

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -

Latest article