JavaScript ES6 Classes

Classes are a core feature of object-oriented programming (OOP) in JavaScript, introduced with ES6. They provide a structured way to model real-world entities through constructors, properties, and methods. While similar to objects, classes bring added benefits like inheritance and static methods. This guide dives into ES6 classes, showing you how to create and manipulate them effectively in JavaScript.

Key Takeaways

• ES6 classes offer clear, logical structure for object-oriented programming in JavaScript.
• The class keyword is used to define a class with constructors and methods.
• Inheritance allows a class to extend another, reusing and overriding functionality.
• Static methods act on the class itself rather than instances.

Creating a Class

To define a class in JavaScript, use the class keyword to create a blueprint for objects:

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

const person = new Person("Sam", 30);

console.log(person.name); // Outputs: 'Sam'
console.log(person.age);  // Outputs: 30

The constructor() function runs when a new instance of the class is created, initializing object properties.

Defining Properties and Methods

Methods can be added to a class just like properties. Here's how to define them:

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

  sayName() {
    console.log("My name is " + this.name);
  }
}

const person = new Person('Tim', 40);
person.sayName(); // Outputs: 'My name is Tim'

Properties and methods can also be defined dynamically on instances, though these won't be shared across all instances.

Static Functions

Static methods are declared with the static keyword and are not tied to an instance of the class:

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

  static describe() {
    console.log("This is a person.");
  }
}

Person.describe(); // Outputs: 'This is a person.'

Static methods are useful for functionality that applies to all instances collectively.

Class Inheritance

Inheritance allows one class to extend another, reusing properties and methods:

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

  sayName() {
    console.log("My name is " + this.name);
  }
}

class Programmer extends Person {
  sayName() {
    console.log("My name is " + this.name + " and I am a programmer!");
  }
}

const programmer = new Programmer('Sam', 33);
programmer.sayName(); // Outputs: 'My name is Sam and I am a programmer!'

Using extends, the Programmer class adopts the properties of Person, allowing method override.

Using super

The super keyword allows access to parent class methods and constructors from a child class:

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

  sayName() {
    super.sayName();
    console.log("I write code in " + this.language);
  }
}

const programmer = new Programmer('Sam', 33, 'JavaScript');
programmer.sayName();
// Outputs: 'My name is Sam'
// Outputs: 'I write code in JavaScript'

super() calls to the parent class methods provide additional functionality to inherited methods.

FAQ

Are classes in JavaScript exactly like those in other languages?

No, JavaScript's class syntax is primarily syntactic sugar over its existing prototype-based inheritance model.

Can you change class definitions at runtime?

Yes, you can add or remove properties and methods from class instances during runtime, though it can lead to unpredictable behavior.

Why use classes over functions for object creation?

Classes provide a more organized, recognizable approach to creating objects, especially with complex inheritance hierarchies.