What is a Class in JavaScript?

A JavaScript class is a template for creating an object with some pre-built features for storing and retrieving data. Classes have been around a long time in programming, and they are an ES6 addition to JavaScript.

Use the class keyword to declare a class. Note that the convention is to capitalize the class name:

class ClassName { }

You can also use a class expression to store an anonymous class:

const MyClass = class { }

... or you can give it a name before you store it:

const MyClass = class ClassName { }

While there are multiple ways to declare a class, it can only be declared once. Whichever way you choose, now you have access to the pre-defined constructor method:

class Location { 
  constructor(city, state, country) {
    this.city = city;
    this.state = state;
    this.country = country;
  }
}

The constructor method allows you to pass values into an instance of the class as arguments:

const MyHome = new Location('Anytown', 'WA', 'USA');

You can then access the values as you would with any object:

console.log(MyHome.city); // logs "Anytown"

Classes also offer prototype-based inheritance using the super() function:

class IceCream extends Location {
  constructor(iceCream, city) {
    super(city);
    this.iceCream = iceCream;
  }
}
const MyFavs = new IceCream('Frankie & Jo’s','Seattle');
console.log(MyFavs.iceCream);

As with any object, you can also store methods in a class:

class Smoothie {
  constructor(fruit) {
    this.fruit = fruit;
  }
  blend() { 
    return 'whirrrrr...';
  }
}

Once you create an instance of the class:

const MySmoothie = new Smoothie('strawberry');

You can access the methods as you would with any object:

console.log(MySmoothie.blend());
// "whirrrrr..."

As with scalar properties, you can access methods from a parent class as long as you call super():

class Soup extends Smoothie { constructor(name) { super();
  this.name = name;
}
}
const MySoup = new Soup('tomato');
console.log(MySoup.blend());
// "whirrrrr..."

Classes are not hoisted like functions. They must be declared before they can be used.

Below, a method calls a property inside the class:

class Greeting {
  constructor(words) {
    this.words = words;
  }
  greet() {
    return this.words;
  }
}

Now let’s instantiate the class with a greeting and call the method:

const SayHi = new Greeting('Hello there!');
console.log(SayHi.greet());
// "Hello there!"

The object equivalent would be:

const greeting = {
  words: '',
  greet: function () {
    return this.words
  }
}
greeting.words = 'Hello there!';
console.log(greeting.greet());
// "Hello there!"

Either way, if you call this from the method, you’ll get undefined:

class...

console.log(SayHi.greet.this);
// undefined

object...

console.log(greeting.greet.this); // logs 'undefined'

You can add an expression in the class constructor to bind this:

class Greeting {
  constructor(words) {
    this.words = words;
    this.greet = this.greet.bind(this);
  }
  greet() { return this.words; }
}
const SayHi = new Greeting('Hello there!');
const greetMe = SayHi.greet;
console.log(greetMe());
// 'Hello there!'

You can also bind this to a method in an object:

const greeting = {
  words: '',
  greet: function () {
    return this.words
  }
} 
greeting.words = 'Hello there!';
const greetPrep = greeting.greet;
const greetMe = greetPrep.bind(greeting);
console.log(greetMe());
// 'Hello there!'

Helpful references:

MDN Web Docs: Classes
W3 schools

Have feedback on this topic?