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.
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.
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