JavaScript Classes
Class fields declare properties directly in the class body.
Before fields existed, every property had to be assigned in the constructor.
A field states the default up front, where it is easy to see.
Example
javascript
class Counter {
count = 0;
up() {
this.count++;
return this.count;
}
}
console.log(new Counter().up());The output is 1, starting from the field's default of 0.
A field is a property written directly in the class body.
It is set on every instance before the constructor body runs.
Fields end with a semicolon, not a comma.
Syntax
javascript
class Name {
property = value;
}No let, const or this in the declaration.
Each instance gets its own copy, so arrays are not shared.
Example
javascript
class Basket {
items = [];
}
const a = new Basket();
const b = new Basket();
a.items.push("Book");
console.log(a.items.length + " and " + b.items.length);The output is 1 and 0.
The constructor can rely on the field already having its default.
Example
javascript
class Person {
greeting = "Hello";
constructor(name) {
this.message = this.greeting + " " + name;
}
}
console.log(new Person("Ada").message);The output is Hello Ada.
An assignment in the constructor happens after the field is set.
Example
javascript
class Box {
size = 1;
constructor(size) {
if (size) {
this.size = size;
}
}
}
console.log(new Box().size + " then " + new Box(5).size);The output is 1 then 5.
An arrow function field is bound to the instance permanently.
That makes it safe to pass around as a callback.
Example
javascript
class Person {
name = "Ada";
greet = () => {
return "Hello " + this.name;
};
}
const greet = new Person().greet;
console.log(greet());A normal method here would have lost this.
Each instance gets its own copy, unlike a shared prototype method.
Use them when you need the binding, not by default.
Example
javascript
class Person {
arrow = () => "hi";
normal() {
return "hi";
}
}
const a = new Person();
const b = new Person();
console.log(a.arrow === b.arrow);
console.log(a.normal === b.normal);The arrow is false and the method is true: one is copied, the other shared.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Class Fields</title>
</head>
<body>
<h1>Class Fields</h1>
<p id="out"></p>
<button id="btn">Add one</button>
<script>
class Counter {
count = 0;
up = () => {
this.count++;
document.getElementById("out").textContent = "Count: " + this.count;
};
}
const counter = new Counter();
document.getElementById("btn").addEventListener("click", counter.up);
</script>
</body>
</html>Run the above example in the Try It Editor.
Try a normal method:
Change up to a normal method and see the click handler break.
this bound to the instance.Class fields put an object's shape where you can see it at a glance.
The arrow function field is the standard fix for callbacks losing this.
Just remember it trades sharing for binding.