Run results for: Property assignment vs Variable assignment

Run details:

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0

Browser: Firefox 117

Operating system: Ubuntu

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Function approach	4674214.0 Ops/sec
Object approach	4625951.0 Ops/sec

Script Preparation code:

function createFunctionBench() {
    let value = null;

    return function closure(val) {
        if (val) {
            value = val;
        }

        return value;
    };
}

class ClassBench {
    update(val) {
        if (val) {
            this.value = val;
        }

        return this.value;
    }
}

bench = {
    fn: createFunctionBench(),
    cls: new ClassBench()
};

​x
 
function createFunctionBench() {    let value = null;​    return function closure(val) {        if (val) {            value = val;        }​        return value;    };}​class ClassBench {    update(val) {        if (val) {            this.value = val;        }​        return this.value;    }}​bench = {    fn: createFunctionBench(),    cls: new ClassBench()};

Tests:

Function approach
bench.fn(performance.now());
bench.fn(performance.now());
Object approach
bench.cls.update(performance.now());
bench.cls.update(performance.now());

Run results for: Property assignment vs Variable assignment

The significance is function oriented vs object orient approach to building UI

Function approach

Object approach