JavaScript Classes
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
javascript
class Person {
constructor(name) {
this.name = name;
}
}
const ada = new Person("Ada");
console.log(ada.name);The output is Ada.
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
javascript
class Name {
constructor(parameter) {
this.property = parameter;
}
}Class names start with a capital letter by convention.
Each instance keeps its own copy of the properties.
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.
A method is written inside the class, without the word function.
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.
Calling a class without new throws a TypeError.
This is stricter than a constructor function, and a good thing.
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.
A class cannot be used before the line that defines it.
Function declarations can be, which catches people out.
Example
javascript
class Box {
constructor() {
this.size = 1;
}
}
console.log(new Box().size);Moving the new Box() above the class would throw a ReferenceError.
A class is a nicer way of writing a constructor function.
The prototype machinery is the same; only the syntax changed.
Example
javascript
class Person {}
console.log(typeof Person);The output is function.
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>Run the above example in the Try It Editor.
Try a third person:
Create one more with new Person(...) and describe them.
new creates the instance and runs the constructor.new throws.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.