Class Syntax

We use the class construct to define a type and group related state and behavior together.

class Note {
  constructor(content) {
    this.text = content;
  }
  print() {
    console.log(this.text);
  }
}

• A class is declared using the class keyword.
• Typically, the class name is capitalized.
• Every class has a unique method named constructor, even if one is not explicitly provided.
• The constructor is used to create objects. It is typically used to initialize the state or properties of your objects, much like in Java/C++.
• Unlike Java/C++, a JavaScript class can only have one constructor.
• Methods are declared using syntax that resembles Java/C++.
• In a class declaration, method definitions are not separated by a comma, unlike in object literals.

A class encapsulates state (data) and behavior (operations). For instance, in the Note class, the data is a string of text stored in the this.text member property. The behavior is print(), a method that outputs the text to the console.

The this keyword

You must use the keyword this within a method of a class to define or access class properties.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  display() {
    console.log(this.make + " " + this.model);
  }
}

const myCar = new Car("Toyota", "Camry");
myCar.display();  // Toyota Camry

If you change the display method like this, you get an error.

class Car {
  // same constructor
  display() {
    console.log(make + " " + model);
  }
}

const myCar = new Car("Toyota", "Camry");
myCar.display();  // ReferenceError: make is not defined

Here make and model are referenced without the this keyword. That gives a ReferenceError, because make and model are not defined within the scope of the display method.

Instantiate Classes

To get objects to use in the program, you instantiate the class with the new keyword. You can do that as many times as you need.

Note that we do not call Note.constructor(). Instead, we use the new keyword followed by the class name.

const myNote = new Note("This is my first note!");

console.log(typeof Note);  // function
console.log(typeof myNote);  // object
console.log(myNote instanceof Note);  // true
console.log(myNote);  // {"text":"This is my first note!"}

Notice that typeof Note reports that Note is a function. A JavaScript class is mostly syntactic sugar. Internally, it uses object constructor functions and prototype chains to create objects.

Classes are functions, but they are not hoisted. This means you must declare a class before using it.

Dot Operator

You use dot notation, which you have probably seen before, to read a property or call a method on an object created from a class.

console.log(myNote.text);  // This is my first note!
myNote.print();  // This is my first note!

Class Expression

Class declarations can be used in expressions.

const Student = class Person {
  constructor(name) {
    this.name = name;
  }
};

const tom = new Student("Tom");
console.log(tom);  // {"name":"Tom"}
console.log(typeof Student);  // function
console.log(typeof Person);  // undefined
console.log(tom instanceof Student);  // true
console.log(tom instanceof Person);  // ReferenceError: Person is not defined

You cannot use Person as a class (constructor function). Instead, you must use Student. You can also leave out the class name in a class expression, which gives you an anonymous class.

const Student = class {
  constructor(name) {
    this.name = name;
  }
};

const tom = new Student("Tom");
console.log(tom);  // {"name":"Tom"}
console.log(typeof Student);  // function
console.log(tom instanceof Student);  // true