You are currently viewing JavaScript Cheat Sheet 10.50: JavaScript Classes

JavaScript Cheat Sheet 10.50: JavaScript Classes

JavaScript Classes: A Comprehensive Guide

Welcome to the world of JavaScript programming! In this tutorial, we’ll dive into one of the fundamental concepts of JavaScript – classes. Classes provide a way to create blueprints for objects in JavaScript, enabling you to organize your code more effectively and create reusable components.

What are JavaScript Classes?

JavaScript classes are templates for creating objects. They encapsulate data for the object (properties) and functions to manipulate that data (methods). Classes follow the syntax of ES6 (ECMAScript 2015) and provide a more structured and cleaner way to create objects compared to traditional constructor functions.

Creating a Class

To define a class in JavaScript, you use the class keyword followed by the name of the class. Let’s create a simple class called Person.

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

Explanation:

  • We declare a class named Person.
  • Inside the class, we define a constructor method using the constructor keyword. This method gets called automatically when you create a new instance of the class. It initializes the object’s properties.
  • In this example, the constructor takes two parameters name and age, and assigns them to the respective properties this.name and this.age.
  • We also define a method greet() which logs a greeting message containing the person’s name and age.

Creating Objects from a Class

Once a class is defined, you can create objects (instances) based on that class using the new keyword.

const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 25 years old.

Explanation:

  • We create two instances of the Person class, person1 and person2, with different name and age values.
  • We then call the greet() method on each instance to display their respective greetings.

Class Inheritance

JavaScript supports inheritance, allowing a class to inherit properties and methods from another class. This is achieved using the extends keyword.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying hard for the exam.`);
  }
}

Explanation:

  • We define a new class Student that extends the Person class using the extends keyword.
  • Inside the constructor of the Student class, we call super() to invoke the parent class constructor with the name and age parameters.
  • Additionally, we define a new property grade specific to the Student class.
  • We also add a method study() to the Student class.

Using Inherited Classes

Let’s create a Student object and call its methods.

const student1 = new Student('Eve', 20, 'A');
student1.greet(); // Output: Hello, my name is Eve and I am 20 years old.
student1.study(); // Output: Eve is studying hard for the exam.

Explanation:

  • We create an instance of the Student class named student1 with the specified parameters.
  • We call both the greet() method inherited from the Person class and the study() method defined in the Student class.

Conclusion

Congratulations! You’ve now learned the basics of JavaScript classes. Classes provide a powerful tool for organizing and structuring your code, making it more maintainable and reusable. Experiment with creating your own classes and exploring more advanced features to deepen your understanding of JavaScript programming. Happy coding!

Leave a Reply