Learn JavaScript: Classes

Learn how to create classes and use inheritance to minimize redundancy in your code.

Start

Key Concepts

Review core concepts you need to learn to master this subject

JavaScript Class

JS Class Constructor

JS class methods

JS Class extends

javascript static methods

JavaScript Class

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
  	console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

JavaScript supports the concept of classes as a syntax for creating objects. Classes specify the shared properties and methods that objects produced from the class will have.

When an object is created based on the class, the new object is referred to as an instance of the class. New instances are created using the new keyword.

The code sample shows a class that represents a Song. A new object called mySong is created underneath and the .play() method on the class is called. The result would be the text Song playing! printed in the console.

JS Class Constructor

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
  	console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

JavaScript classes can have a constructor method. This is a special method that is called when the object is created (instantiated). Constructor methods are usually used to set initial values for the object.

JS class methods

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
  	console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

Properties in JS objects are separated using commas. This is not the case when using the class syntax. Methods in classes do not have any separators between them.

JS Class extends

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
  	console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

JavaScript classes support the concept of inheritance - a child class can extend a parent class. This is accomplished by using the extends keyword as part of the class definition.

Child classes have access to all of the instance properties and methods of the parent class. They can add their own properties and methods in addition to those. A child class constructor calls the parent class constructor using the super() method.

javascript static methods

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
  	console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

Within a JavaScript class, the static keyword defines a static method for a class. Static methods are not called on individual instances of the class, but are called on the class itself. Therefore, they tend to be general (utility) methods.

Classes

Lesson 1 of 1

1
JavaScript is an object-oriented programming (OOP) language we can use to model real-world items. In this lesson, you will learn how to make classes. Classes are a tool that developers use to q...
2
In the last exercise, you created a class called [...] , and used it to produce a [...] object. Although you may see similarities between class and object syntax, there is one important method...
3
Now, we're ready to create class instances. An instance is an object that contains the property names and methods of a class, but with unique property values. Let's look at our [...] class exam...
4
At this point, we have a [...] class that spins up objects with [...] and [...] properties. Below, we will add getters and a method to bring our class to life. Class method and getter synta...
5
Finally, let's use our new methods to access and manipulate data from [...] instances. [...] In the example above, we create the [...] class, then create an instance, and save it to a variab...
6
Imagine our doggy daycare is so successful that we decide to expand the business and open a kitty daycare. Before the daycare opens, we need to create a [...] class so we can quickly generate [...
7
In the last exercise, we created a parent class named [...] for two child classes named [...] and [...] . The [...] class below contains the shared properties and methods of [...] and [...
8
We've abstracted the shared properties and methods of our [...] and [...] classes into a parent class called [...] (See below). [...] Now that we have these shared properties and methods ...
9
Now that we know how to create an object that inherits properties from a parent class let's turn our attention to methods. When we call [...] in a class declaration, all of the parent methods ar...
10
In addition to the inherited features, child classes can contain their own properties, getters, setters, and methods. Below, we will add a [...] getter. The syntax for creating getters, setters...
11
Sometimes you will want a class to have methods that aren't available in individual instances, but that you can call directly from the class. Take the [...] class, for example — you can b...
12
Way to go! Let's review what you learned. - Classes are templates for objects. - Javascript calls a constructor method when we create a new instance of a class. - Inheritance is when we cre...

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Classes
What is the purpose of inheritance?

Learn JavaScript: Classes

Start

Learn JavaScript: Classes

Key Concepts

JavaScript Class

JS Class Constructor

JS class methods

JS Class extends

javascript static methods

What you'll create

Build a Library

School Catalogue

How you'll master it

Classes

Learn JavaScript: Classes