JavaScript Decorators: True Power In ES7

Jul 6, 2016

JavaScript can be pretty annoying at times. You would think that with classes implemented in ES6, this would be solved. For me, the most annoying part of programming is typing. So every time I need to call a class member in React, I have to bind the function to “this.” However, with ES7 decorators, its possible to use a library function (autobind-decorator) to do automatic binding of “this” to all class members or individual member functions. But if you’re using Babel 6, which is the most current version, you have to use (babel-plugin-transform-decorators-legacy), since ES7 decorators have not actually been finalized.

// example without autobind:

class Toad extends Component {
    contructor(props) {
        super(props);
        this.state = {
            distance: 1,
        }
        // have to bind this context to jump function
        this.jump = this.jump.bind(this);
    }
    jump() {
        alert("jumped " + this.state.distance);
    }
    jump2() {
        alert("jumped " + this.state.distance * 2);
    }
    render() {
        return (
            <div>
                <div onClick={this.jump}></div>
                {/* bind jump2 function */}
                <div onClick={this.jump2.bind(this)}></div>
            </div>
        )
    }
}
// example without autobind:
import autobind from 'autobind-decorator'
@autobind
class Autotoad extends Component {
    contructor(props) {
        super(props);
        this.state = {
            distance: 1,
        }
    }
    jump() {
        alert("jumped " + this.state.distance);
    }
    render() {
        return (
            <div onClick={this.jump}>
            </div>
        )
    }
}

At least when using arrow function syntax, the context of “this” is preserved, so code is no longer filled with references to “this,” “in,” “that,” or “self.”

So what are decorators? Basically, functions that wrap around other functions. Decorators can be more powerful than the actual language. They can bypass the language runtime and translate into statically compiled code. For example, Numba compiles functions to machine-code based on which functions have the decorator.

Should languages be changeable by the user based on preferences? What’s interesting about transpiling is that personal preferences can be satisfied instead of strict compatibility with standards. What I don’t understand is why it is not more common around older languages like C++.

RECENT POSTS

Meet Sourcetoad, a 2023 Best Places to Work honoree

Meet Sourcetoad, a 2023 Best Places to Work honoree

Tampa Bay Business Journal — April 26, 2023 Sourcetoad has been selected as a 2023 Best Places to Work! We are thrilled to be among Tampa's top workplaces for the fourth year in a row, and we are grateful to each of our Toads for making Sourcetoad such a fantastic...

This Year in FinTech: Trends to Watch in 2023

This Year in FinTech: Trends to Watch in 2023

The financial services industry experienced rapid digitization throughout the COVID-19 pandemic, and growth of the financial technology market is expected to continue in 2023. The global fintech market grew to $158.9 billion in 2022, and projections estimate it will...

2023 Top HealthTech Trends

2023 Top HealthTech Trends

Technological innovation has played a vital role in the transformation and growth of the healthcare industry. Not only is the medical space an early adopter of emerging technologies, HealthTech is currently one of the fastest-growing industries worldwide. The global...