Introduction to Classes in JavaScript

Classes are one of the most powerful features of JavaScript, and they are a great tool to structure and organize code. Classes are a way of wrapping related data and behavior together into a single unit. By using classes, you can create objects that have their own properties (data) and methods (behavior). This makes it easier to create and maintain complex programs.

Creating a Class

To create a class in JavaScript, you use the class keyword followed by a name for the class. The class body is surrounded by curly brackets and contains the class properties and methods. Here is an example of a basic class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

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

[/dm_code_snippet]

This class has two properties: name and age. It also has a constructor method which is used to create new Person objects. The constructor method takes two parameters: name and age. The constructor method sets the name and age properties of the new Person object.

Creating Objects from Classes

Once a class has been defined, you can create objects from it. To create an object from a class, you use the new keyword followed by the class name:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let bob = new Person("Bob", 27);

[/dm_code_snippet]

This will create a new Person object with the name property set to “Bob” and the age property set to 27. You can access the properties of the object using dot notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(bob.name); // "Bob"
console.log(bob.age); // 27

[/dm_code_snippet]

Adding Methods to a Class

You can add methods to a class that allow objects created from the class to perform certain actions. Here is an example of a method added to the Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

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

  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

[/dm_code_snippet]

This method prints a greeting to the console. To call this method, you use dot notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

bob.greet(); // Hi, my name is Bob

[/dm_code_snippet]

Class Inheritance

Classes can inherit from other classes. This allows you to create a class that shares some of the same properties and methods as another class. Here is an example of a class that inherits from the Person class:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

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

[/dm_code_snippet]

This Student class has the properties of the Person class (name and age) plus an additional property (major). You can create a Student object in the same way as a Person object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let jane = new Student("Jane", 20, "Computer Science");

[/dm_code_snippet]

Conclusion

Classes are an important part of JavaScript and they are a great tool for structuring and organizing code. Classes allow you to create objects that have their own properties and methods, which makes it easier to create and maintain complex programs. Classes can also be used to create objects that inherit the properties and methods of other classes, making it easier to create related objects.