Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Classes

JavaScript Classes

Written by Published

A JavaScript class is a template for creating objects that share the same shape.

Writing the same object by hand ten times is repetitive and easy to get wrong.

A class describes the shape once, and new builds as many as you need.

Example

Example

javascript

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

const ada = new Person("Ada");

console.log(ada.name);

The output is Ada.

What is a Class?

A class is a template that describes what an object holds and what it can do.

An object built from a class is called an instance.

new creates the instance and runs the constructor.

Syntax

Syntax

javascript

class Name {
  constructor(parameter) {
    this.property = parameter;
  }
}

Class names start with a capital letter by convention.

Many Instances from One Class

Each instance keeps its own copy of the properties.

Example

Example

javascript

class Car {
  constructor(brand) {
    this.brand = brand;
  }
}

const a = new Car("Toyota");
const b = new Car("Honda");

console.log(a.brand + " " + b.brand);

Changing one does not affect the other.

Adding Behaviour

A method is written inside the class, without the word function.

Example

Example

javascript

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hello " + this.name;
  }
}

console.log(new Person("Grace").greet());

The output is Hello Grace.

new Is Required

Calling a class without new throws a TypeError.

This is stricter than a constructor function, and a good thing.

Example

Example

javascript

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

let message;
try {
  Person("Ada");
} catch (error) {
  message = "classes need new";
}

console.log(message);

The error is caught, so the mistake is impossible to miss.

Classes Are Not Hoisted

A class cannot be used before the line that defines it.

Function declarations can be, which catches people out.

Example

Example

javascript

class Box {
  constructor() {
    this.size = 1;
  }
}

console.log(new Box().size);

Moving the new Box() above the class would throw a ReferenceError.

Classes Are Functions Underneath

A class is a nicer way of writing a constructor function.

The prototype machinery is the same; only the syntax changed.

Example

Example

javascript

class Person {}

console.log(typeof Person);

The output is function.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Classes</title>
</head>
<body>

  <h1>JavaScript Classes</h1>

  <p id="out"></p>

  <script>
    class Person {
      constructor(name, role) {
        this.name = name;
        this.role = role;
      }
      describe() {
        return this.name + " is a " + this.role;
      }
    }

    const ada = new Person("Ada", "mathematician");
    const alan = new Person("Alan", "logician");

    document.getElementById("out").innerHTML =
      ada.describe() + "<br>" + alan.describe();
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a third person:

Create one more with new Person(...) and describe them.

Important Points

  • A class is a template for building objects.
  • An object built from a class is an instance.
  • new creates the instance and runs the constructor.
  • Calling a class without new throws.
  • A class is a function underneath.

Conclusion

Classes give a clear, standard way to describe objects that share a shape.

They replace the constructor function pattern with something far easier to read.

Everything else in this section builds on this one idea.

PreviousJavaScript Event LoopNextJavaScript Class Constructor