With the introduction of static keyword in ES6, it is possible to define static methods inside the class definition itself. In order to make a method static, you simply need to prefix the static keyword.
// ES6class Person {
static count() {
return "I am a static method".
}
}Person.count() // => "I am a static method."
Without static you would need to do something like below to add static methods.
class Person { }
Person.count = () => "I am a static method."Person.count() // => "I am a static method."
With static your code looks neat because the definition of the static method stays inside your class definition. But soon enough you will realize apart from static methods you also need static fields. When I say static fields, I mean properties that references literals like strings, integers and JSON apart from functions. It is very common to use static fields for describing class level defaults.
If you have worked with react, you might have usedPropTypes. React allows you to assign a JSON to a static field called propTypes on your react component to describe the shape of the arguments it receives as props.
// without transform-class-properties pluginimport { React } from 'react'
import PropTypes from 'prop-types'; class PersonComponent extends React.Component {
render() {
const { firstName, lastName } = this.props;
return <div>
<p>{firstName}</p>
<p>{lastName}</p>
</div>
}
}PersonComponent.propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string
}
In the above example, PersonComponent is a react component which has a static field propTypes which describes that it receives two strings arguments firstNameand lastNameas props. In this case propTypes is not a static method, but a static property referencing a JSON.
As per the current implementation of static it is only possible to define static methods and not static properties. There is a proposal to add static properties that are not methods to ES classes. The difference you will find is the use of the assignment operator with the static keyword.
// with transform-class-properties pluginclass PersonComponent extends React.Component { static propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string
} render() {
const { firstName, lastName } = this.props;
return <div>
<p>{firstName}</p>
<p>{lastName}</p>
</div>
}
}
You can also use the assignment operator along with static to assign a function and that would also create a static method. This proposal is still in stage-2. As of now, with out the babel plugin transform-class-properties, it is not possible to use the assignment operator along with the static keyword.
Additionally, the proposal also talks about assigning defaults for instance level fields without using the constructor keyword. Suppose you have to assign defaults for your ES class instances, right now you will be doing that inside the constructor using thethis keyword.
// without transform-class-properties pluginclass Person {
constructor() {
this.firstName = "John"
this.lastName = "Doe" } ...
}const p1 = new Person;
p1.firstName // => "John"
p1.lastName // => "Deo"
In the above example, instance p1of the classPerson will have firstName initialized with “John” and lastName initialized with “Doe”. With the class-fields-proposal, you no longer have to do this inside the constructor. Instead you can do this directly just like any other assignments at the top level inside your class.
// with transform-class-properties pluginclass Person {
firstName = "John"
lastName = "Doe" ...
}const person = new Person;
person.firstName // => "John"
person.lastName // => "Deo"
All the changes combined together can make your ES classes look really neat. Below is an example how my react components look before and after.
BEFORE
// without transform-class-properties pluginclass PersonComponent extends React.Component {
constructor() {
this.state = {
isClicked: false,
isExpanded: false
}
} render() {
const { firstName, lastName } = this.props;
return <div>
<p>{firstName}</p>
<p>{lastName}</p>
</div>;
}
}PersonComponent.propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string
}
AFTER
// with transform-class-properties pluginclass PersonComponent extends React.Component {
static propTypes = {
firstName: PropTypes.string,
lastName: PropTypes.string
} state = {
isClicked: false,
isExpanded: false
}render() {
const { firstName, lastName } = this.props;
return <div>
<p>{firstName}</p>
<p>{lastName}</p>
</div>;
}
}
If you have made it till the end, a big thank you. Now you can argue that you have used static, transpiled it through babel, got generated with the same old monkey patchy version of javascript code which attaches static methods to my class object and now what? I don’t have an answer for you. Like many other features introduced in ES6, static methods are meant to provide class-specific methods for object-oriented programming in Javascript or a syntactic sugar you can call it.
