Home » Tutorials » Learn Javascript » JavaScript Classes

Learn Javascript

 Prev

JavaScript Classes

A JavaScript Class is the template, blueprint or skeleton from which more than one objects can be created having similar properties. JavaScript Classes allow us to create more objects that follow similar structure.

JavaScript Classes wrap common data and functions (which we can perform on that data) together. In a more standard definition, Classes encapsulates data and functions together.

Classes were introduced at ES6.

With the help of classes, we can create numerous objects easily having similar properties and without the need of defining each property over and over again. We just have to define a class once, then we can instantiate or create more than one object using that class which belong to that class.

Syntax

class class_name {
    constructor(){
        // Code block
    }
}

Explanation 🤔

  • We can define a Class in JavaScript using the class keyword followed by the name of the class.
  • The constructor() method is a special method which is used to instantiate or create objects and with it’s help we can give properties to objects.

Example

Note: Generally, we use CamelCasing to define class names. Here, the class-name Student has it’s first letter capital. It’s not compulsory to use CamelCasing, it is just a good syntax for ClassNames.

// We defined a "class" called "student".
// When we create an object using this class, that object will have "name" and "age" as properties.
class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Creating or Instantiating Objects using a Class 😎

The main goal of a Class in JavaScript is to create Objects. We can define a Class once then use it to create multiple objects having similar properties.

Example

The this keyword comes in handy here. We already learned about this keyword in our 👉 JavaScript Object Methods lesson.

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

// Creating an object called "student1", using the "Student" class, having properties: "name": "Harry" and "age": "18".
const student1 = new Student("Harry", 18);
// Creating an object called "student2", using the "Student" class, having properties: "name": "Monica" and "age": "22".
const student2 = new Student("Monica", 22);
// Creating an object called "student3", using the "Student" class, having properties: "name": "Rachel" and "age": "16".
const student3 = new Student("Rachel", 16);

console.log(student1);
console.log(student2);
console.log(student3);

console.log(`Meet my friends: ${student1.name}, ${student2.name} and ${student3.name}.`);

Output

Student { name: 'Harry', age: 18 }
Student { name: 'Monica', age: 22 }
Student { name: 'Rachel', age: 16 }
Meet my friends: Harry, Monica and Rachel.

Note: Here, the objects student1, student2 and student3 are said to belong to the class Student.

JavaScript Constructor Method 🤓

From the above example, we can see that the constructor() method helps to assign properties when creating objects using a Class.

Some more information about the constructor() method:

  • The constructor() method runs automatically when we initialize or create an object using a class.
  • It is used to assign properties when creating objects using a class.

JavaScript Class Methods 🤯

Classes encapsulates or wraps data and functions together.

Therefore, along with data, we can also have functions inside classes. These functions are called methods which is accessible by every object created using that class.

Example

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

  // Defining a method called "giveIntroduction".
  // The "this" keyword comes in handy here.
  giveIntroduction() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

const student1 = new Student("Janice", 22);
const student2 = new Student("Michael", 20);

// Each created object will have the "giveIntroduction" method. 
// We can call the method the same way as we call normal functions.
student1.giveIntroduction();
student2.giveIntroduction();

Output

Hi, my name is Janice and I'm 22 years old.
Hi, my name is Michael and I'm 20 years old.

Getters and Setters in JavaScript 👇

Getters are functions that return values of any property of an object whereas Setters are functions that help us set or assign values to properties.

Getters: We can use the get keyword inside of a class to define a Getter function.

Setters: We can use the set keyword inside of a class to define a Setter function.

Note: Although Getters and Setters are functions, to call them we don’t use parenthesis “()” like we did with other normal functions or methods.

Example

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

  // Defining a Getter Function
  get getName() {
    return this.name;
  }

  // Defining a Setter Function
  set setName(name) {
    this.name = name;
  }
}

const student1 = new Student("Steve", 18);

// Although Getters and Setters are functions, to call them we don't use parenthesis "()" like we did with other normal functions or methods.
console.log(student1.getName);

// Changing the name property of "student1" object to "Michael".
student1.setName = "Michael";

// Getting the property again.
console.log(student1.getName);

Output

Steve
Michael

In this way, more than one objects can be created having similar properties but different values using Classes.

Next