JavaScript classes can make your code cleaner and more readable. This article will help you understand concepts such as class fields, getter and setter accessors and mixins. Learn how to work with JavaScript classes like a Pro, improve your programming skills, and become a better JavaScript developer.

JavaScript Classes – A Friendly Introduction Part 1.

JavaScript classes and class fields

The more often you start using JavaScript classes the faster you will get used to the new syntax. That being said, future ECMAScript proposals may make working with JavaScript classes easier. Class fields are one example. Do you remember the class constructor? Good news is that it may no longer be required.

The goal of class fields, also called class properties, is to allow JavaScript developers create simpler constructors in JavaScript classes. Put simply, you will no longer have to declare class properties inside constructor. Instead, you could declare them directly, outside it and even omit the constructor itself.

Public fields and methods

One thing you need to know, and remember for the future, is that when you do this, all the fields you declared will become “public” fields by default. This means that all those fields will be accessible from the inside as well as the outside of the class. You will be able to examine them and change them as you want. The same applies to methods.

// ES6 class - without class fields
class SoccerPlayer {
  // Declare all class properties inside the constructor
  constructor() {
    this.assists = 0
    this.goals = 0
    this.number = null
    this.position = null
    this.team = null
  }

  addAssist() {
    this.assists++
  }

  addGoal() {
    this.goals++
  }

  addToTeam(team) {
    this.team = team
  }

  assignNumber(number) {
    this.number = number
  }

  assignPosition(position) {
    this.position = position
  }
}

// ESNext class - with public class fields
class SoccerPlayer {
  // Declare all properties directly, as public by default
  assists = 0
  goals = 0
  number = null
  position = null
  team = null

  // All these methods created as public by default
  addAssist() {
    this.assists++
  }

  addGoal() {
    this.goals++
  }

  addToTeam(team) {
    this.team = team
  }

  assignNumber(number) {
    this.number = number
  }

  assignPosition(position) {
    this.position = position
  }
}

As you can see, class fields can make working with JavaScript classes easier and your code cleaner and more readable. This is especially true if you work with React. Then, class fields can help you reduce your JavaScript code even more.

// ES6 class + React - without class fields
import * as React from 'react'

class MyComponent extends React.Component {
  // Declare class state inside the constructor
  constructor(props) {
    super(props)

    this.state = {
      firstName: '',
      lastName: '',
      age: 0
    }

    this.handleInputChange = this.handleInputChange.bind(this)
  }

  handleInputChange(event) {
    this.setState({
      [event.target.name]: [event.target.value]
    })
  }

  render() { ... }
}

// ESNext class + React - with class fields
import * as React from 'react'

class MyComponent extends React.Component {
  // Declare class state directly as public class property
  state = {
    firstName: '',
    lastName: '',
    age: 0
  }

  handleInputChange = (event) => {
    this.setState({
      [event.target.name]: [event.target.value]
    })
  }

  render() { ... }
}

The proposal for class fields is currently at TC39 stage 3. If everything goes well, it could appear in ES2019, or ES10. However, that doesn’t mean you can’t use it today. Both, TypeScript and Babel support class fields. So, if you use one of these you can also start using class fields right away.

#javascript #ecmascript #design development