Arrow method vs Bind (version 1) - JavaScript benchmark at JSBench.me

Please login/register to save & publish tests

- by victor-homyakov 1/13/202100

Setup HTML - click to add setup HTML

Setup JavaScript

class ClassWithArrows {
    hi = () => {
        return 'Hi' + '!';
    }
    
    bye = () => {
        return 'Bye' + '!';
    }
    
    message = () => {
        return this.hi() + this.bye();
    }
}

class ClassWithArrowsTranspiled {
    constructor() {
        this.hi = () => {
            return 'Hi' + '!';
        };
        
        this.bye = () => {
            return 'Bye' + '!';
        };
        
        this.message = () => {
            return this.hi() + this.bye();
        };
    }
}


class ClassWithBindInCtor {
    constructor() {
        this.message = this.message.bind(this);
    }
    
    hi() {
        return 'Hi' + '!';
    }
    
    bye() {
        return 'Bye' + '!';
    }
    
    message() {
        return this.hi() + this.bye();
    }
}

let counter;

ready

const classWithArrows = new ClassWithArrows();
const arrowMethodRef = classWithArrows.message;
counter += arrowMethodRef().length;

DEFER

ready

const classWithArrows = new ClassWithArrowsTranspiled();
const arrowMethodRef = classWithArrows.message;
counter += arrowMethodRef().length;

DEFER

ready

const classWithBindInCtor = new ClassWithBindInCtor();
const boundMethodRef = classWithBindInCtor.message;
counter += boundMethodRef().length;

DEFER

Test Case - click to add another test case

teardown JavaScript

console.log(counter);
counter = 0;

Output (DOM) - click to monitor output (DOM) while test is running

RUN