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.

// ES6 class 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 used PropTypes . 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 plugin import { 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 firstName and lastName as 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 plugin class 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 the this keyword.

// without transform-class-properties plugin class Person {

constructor() {

this.firstName = "John"

this.lastName = "Doe" } ...

} const p1 = new Person;

p1.firstName // => "John"

p1.lastName // => "Deo"

In the above example, instance p1 of the class Person 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 plugin class 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 plugin class 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 plugin class 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>;

}

}