JavaScript Class

A class is a template for creating objects.

We use the class keyword to create a class. The class body is enclosed in curly braces {}, where we can define class members such as methods or the constructor.

Every class contains a special method constructor(), which is the class constructor. This method is used to create and initialize an object created with a class.

The syntax for creating a class is as follows:

class ClassName {
  constructor() { ... }
}

Example:

Example

class tutorialpro {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

The above example creates a class named "tutorialpro".

The class initializes two properties: "name" and "url".

Browser Support

The numbers in the table represent the first browser version that supports the property.

Using the Class

After defining the class, we can use the new keyword to create objects:

Example

class tutorialpro {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

let site = new tutorialpro("tutorialpro.org", "https://www.tutorialpro.org");

Creating an object automatically invokes the constructor method constructor().

Class Expression

A class expression is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class body.

Example

// Unnamed/Anonymous class
let tutorialpro = class {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(tutorialpro.name);
// output: "tutorialpro"

// Named class
let tutorialpro = class tutorialpro2 {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
};
console.log(tutorialpro.name);
// output: "tutorialpro2"

Constructor Method

The constructor method is a special method:

• It is named constructor().
• It is executed automatically when a new object is created.
• It is used to initialize object properties.
• If you do not define a constructor method, JavaScript will automatically add an empty constructor method.

Class Methods

We use the class keyword to create a class, add a constructor() method, and then add any number of methods.

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

The following example creates an "age" method to return the website age:

Example

class tutorialpro {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let tutorialpro = new tutorialpro("tutorialpro.org", 2018);
document.getElementById("demo").innerHTML =
"tutorialpro.org " + tutorialpro.age() + " years old.";

We can also send parameters to class methods:

Example

class tutorialpro {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let tutorialpro = new tutorialpro("tutorialpro.org", 2020);
document.getElementById("demo").innerHTML =
"tutorialpro.org " + tutorialpro.age(year) + " years old.";

Strict Mode "use strict"

Class declarations and class expressions are executed in strict mode. For example, the constructor, static methods, prototype methods, getters, and setters are executed in strict mode.

If you do not follow strict mode, an error will occur:

Example

class tutorialpro {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Error
    let date = new Date(); // Correct
    return date.getFullYear() - this.year;
  }
}

The following example uses an undeclared variable in a class:

For more information on strict mode, refer to: JavaScript Strict Mode (use strict)

Reference

Class Methods

Class Keywords