Classes are a fundamental part of object oriented programming (OOP). They define "blueprints" for real-world object modeling and organize code into logical, reusable parts. Classes share many similarities with regular objects. They have their own constructor functions, properties, and methods. In this tutorial, we'll demonstrate how to create and work with ES6 classes.

Creating a class

You can create a class using the class keyword:

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

let person = new Person("Sam", 30)

person.name
//returns 'Sam'

person.age
//returns 30

Notice how we define our Person class with a constructor() function taking two arguments name and age. Using the this keyword, we set the name and age properties based on the provided arguments. Remember that the constructor function is called whenever we create a new instance of the Person class.

Similar to objects, we can read class properties using dot notation so that person.name returns Sam.

Defining properties and methods

You can define properties and methods for a class the same way you do for regular objects:

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

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

let person = new Person('Tim', 40)

person.sayName()
//logs 'My name is Tim'

person.location = 'London'

person.location
//returns 'London'

Notice how we define a sayName() function within our Person class definition. Once we create a new instance of Person, we can call the method via person.sayName().

You can also add properties and methods on the fly. You'll notice that while the location property isn't defined in our constructor function, we can still dynamically add it later on for the person instance. Remember that if we created a new instance of Person, it would not have a location property because that property is not defined in the class definition. Only properties and methods that we explicitly define will be shared by all instances of the class.

Static functions

You can use the static keyword to make class methods static. A static method acts on the class itself, not on instances of the class:

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

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

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

Person.describe()
//logs 'This is a person.'

Notice how static methods operate on the class itself and not an instance of the class. We didn't have to create a new Person to call the static method.

Static methods are useful for common or shared class functionality. In this case, the describe() method is used to describe what the Person class is. It will apply to every instance of Person. This is why we make it a static method.

Class Inheritance

Inheritance allows you to create new classes based off existing ones. These new classes "inherit" the methods and properties of their parent. They can also override or extend the parent:

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

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

  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!")
  }
}

let averageJoe = new Person('Todd', 40)
let programmer = new Programmer('Sam', 33)


averageJoe.sayName()

//logs 'My name is Todd'

programmer.sayName()

//logs 'My name is Sam and I am a programmer!'

Using the extends keyword, we can create a new class sharing the same characteristics as Person. Notice how we override the sayName() method with a new definition for the Programmer class. Apart from overriding this method, everything else remains the same for both Person and Programmer.

Using super

The super keyword allows a child class to invoke parent class properties and methods.

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

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

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


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

let averageJoe = new Person('Todd', 40)
let programmer = new Programmer('Sam', 33)

programmer.sayName()

//logs 'My name is Sam'
//logs 'My name is Sam and I am a programmer!'

Notice how we call super.sayName() in the Programmer implementation of sayName(). While this invokes the parent implementation of super.sayName(), the name property still references the Programmer class.

Conclusion

Classes facilitate object oriented programming in JavaScript. While regular objects provide similar functionality, classes provide the extra advantage of inheritance and static methods.

How do JavaScript arrays work internally?

Your thoughts?

Trending now