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

Building an AI Policy for Your Company

Building an AI Policy for Your Company

Artificial Intelligence (AI) is an integral part of our present-day technology landscape. At Sourcetoad, we’ve been assisting our clients for years in leveraging this powerful tool. However, it’s become more important than ever to have an internal policy on how these...

Sourcetoad Presents: Fine-Tuning OpenAI

Sourcetoad Presents: Fine-Tuning OpenAI

Welcome to Sourcetoad’s first video in our Artificial Intelligence series! In this video, Sourcetoad’s own AI subject matter experts discuss how to fine-tune OpenAI. After watching this presentation, you’ll learn: ✅ What fine-tuning means✅ How to use fine-tuning to...

The Agile Manifesto in Practice: Part 2

The Agile Manifesto in Practice: Part 2

The Agile approach to software development first emerged in response to the inflexibility of existing project management methodologies. Unlike traditional approaches that emphasize extensive documentation at every phase of development, Agile instead values the...