JavaScript Classes Tutorial

In this tutorial, you will learn JavaScript Classes and how to use them to create JavaScript Objects.

What are JavaScript Classes?

JavaScript classes are a syntactic construct that allows programmers to create blueprints for JavaScript objects.
Classes can be used to define the properties and behaviors of objects, and to create hierarchies of objects with different capabilities.

Class Declaration

To declare a class in JavaScript, you use the class keyword followed by the class name. Inside the class, you can define properties and methods.

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

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

In the above example, we've defined a Person class with a constructor that sets the name and age properties and a sayHello method to print a greeting.

Creating Objects (Instances)

To create objects (instances) from a class, you use the new keyword and call the class constructor.

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

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

Class Inheritance

You can also create a subclass that inherits properties and methods from a parent class.

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

    study() {
        console.log(`${this.name} is studying hard to get good grades.`);
    }
}

In this example, the Student class extends the Person class and adds a study method. The super keyword is used to call the constructor of the parent class.

Static Methods

You can define static methods on a class, which are called on the class itself, not on instances.

class MathUtils {
    static add(x, y) {
      return x + y;
    }
  }
  
const result = MathUtils.add(5, 3); // Call the static method directly

Getter and Setter Methods

You can also define getter and setter methods to control access to class properties.

class Circle {
constructor(radius) {
    this._radius = radius; // Prefix with an underscore by convention
}

get radius() {
    return this._radius;
}

set radius(value) {
    if (value < 0) {
    console.log("Radius cannot be negative.");
    } else {
    this._radius = value;
    }
}
}

Rock Paper Scissors Game

class Game {
    arr = ["rock", "paper", "scissors"];
  
    Random() {
      let rand = Math.floor(Math.random() * this.arr.length);
      return rand;
    }
  
    Human() {
      let ch = this.arr[this.Random()];
      return ch;
    }
  
    Computer() {
      let ch2 = this.arr[this.Random()];
      return ch2;
    }
  
    Play() {
        let human = this.Human();
        let computer = this.Computer();
      
        console.log("Human: " + human);
        console.log("Computer: " + computer);
      
        if (human === computer) {
          console.log("It's a draw!");
        } else if (
          (human === "rock" && computer === "scissors") ||
          (human === "paper" && computer === "rock") ||
          (human === "scissors" && computer === "paper")
        ) {
          console.log("Human wins");
        } else {
          console.log("Computer wins");
        }
      }
      
  }

const game = new Game();
game.Play();
/*Output:
Human: rock
Computer: scissors
Human wins
*/
game.play();
/* Output:
Human: scissors
Computer: scissors
It's a draw!
*/

Previous Next