2.8 class methods ownership

In the last video we wrote class properties inside a constructor and methods as regular function-like blocks. Next-generation JavaScript offers a more modern, more compact syntax for both, and it is the one we will use throughout the React course. The idea is to declare properties and methods directly at the top of the class body, without writing a constructor at all.

Class fields and arrow methods

A property becomes name = value at the class level. Behind the scenes, this is still transformed into a constructor by the build tool, but the code reads much better. Methods are written as name = () => { ... }, that is, as arrow functions stored in a property. The huge advantage of this form is that the this keyword is preserved automatically, which removes a whole category of bugs around event handlers.

class Human {
  gender = "male";
  printGender = () => {
    console.log(this.gender);
  };
}

class Person extends Human {
  name = "Matthieu";
  gender = "female";
  printMyName = () => {
    console.log(this.name);
  };
}

const p = new Person();
p.printMyName();    // "Matthieu"
p.printGender();    // "female"

We no longer write a constructor, we no longer call super() manually, and we no longer struggle with this in callbacks. To try this on jsbin.com you need to set the JavaScript language to ES6 in the dropdown, otherwise the editor refuses the syntax. From now on, all the React class components in this course will use this newer style.

Summary

This lesson introduces modern ES6+ syntax for defining class properties and methods in JavaScript. Instead of using constructor functions, you can now assign properties directly in the class body using shorthand syntax. For methods, the modern approach uses arrow function syntax as class properties, which lexically binds the `this` keyword and eliminates the binding issues common with traditional method definitions.

Key points

• Modern class field syntax allows direct property assignment in the class body without constructor functions: `myProperty = value`
• Arrow function methods defined as class properties guarantee correct `this` binding, unlike traditional function declarations
• The syntax `myMethod = () => { ... }` simplifies method definition and prevents common `this` reference errors
• This modern syntax requires ES6 JavaScript support in your environment (enable in browser developer tools if needed)
• The cleaner syntax improves readability and reduces boilerplate code compared to traditional constructor-based class patterns

FAQ

Why use arrow function methods instead of traditional function declarations in classes?

Arrow functions automatically bind `this` to the class instance, whereas traditional methods depend on how they're called. This prevents the common error where `this` becomes undefined when passing methods as callbacks or event handlers.

Do I still need a constructor when using modern class field syntax?

No, you can now assign properties directly in the class body using the shorthand syntax `propertyName = value`. The constructor is only needed if you want to accept initialization parameters or run setup logic.

What JavaScript version supports this modern syntax?

This syntax is part of ES6+ and requires modern JavaScript support. If you get an error, ensure your environment (browser console, Node.js version, or transpiler) is set to ES6 or later.