Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
class vs function composition
(version: 4)
Comparing performance of:
class vs function
Created:
3 years ago
by:
Registered User
Go to the latest result
Tests:
class
class A { a() { return { a: 1 }; } a1() { return { a: 1 }; } a2() { return { a: 1 }; } a3() { return { a: 1 }; } a4() { return { a: 1 }; } a5() { return { a: 1 }; } } class B { constructor(a) { this.a = new A(); } a() { return this.a.a(); } a1() { return this.a.a1(); } a2() { return this.a.a2(); } } class C { constructor(a) { this.a = new A(); } a3() { return this.a.a3(); } a4() { return this.a.a4(); } a5() { return this.a.a5(); } } // var a = new A(); var b = new B(); var c = new C(); console.log('class', b.a.a === c.a.a);
function
ar = () => ({ a() { return { a: 1 }; } }) ar1 = () => ({ a1() { return { a: 1 }; } }) ar2 = () => ({ a2() { return { a: 1 }; } }) ar3 = () => ({ a3() { return { a: 1 }; } }) ar4 = () => ({ a4() { return { a: 1 }; } }) ar5 = () => ({ a5() { return { a: 1 }; } }) function B1() { return Object.assign({}, ar(), ar1(), ar2()); } function C1() { return Object.assign({}, ar(), ar4(), ar5()); } var b = B1(); var c = C1(); console.log('function', b.a === c.a);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
class
function
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36
Browser/OS:
Chrome 125 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=529655" width="100%" height="500px"></iframe>
function
84K/s
class
50K/s
View exact numbers
Test name
Executions per second
✓
function
84,216 Ops/sec
class
49,703 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON and explain what's being tested. **Benchmark Overview** The benchmark compares two approaches to create and use objects in JavaScript: 1. **Class Composition**: This approach uses classes (inherently) to create objects and instances of those classes. The `class` keyword is used to define a blueprint for creating objects, which can then be instantiated. 2. **Function Composition**: This approach uses functions to create objects and instances of those functions. In this case, five separate functions (`ar`, `ar1`, `ar2`, `ar3`, and `ar5`) are defined, each returning an object with a specific structure. **Options Being Compared** The two options being compared are: 1. **Class Composition**: This approach creates objects using the `class` keyword, which is then instantiated to create instances. 2. **Function Composition**: This approach defines five separate functions (`ar`, `ar1`, `ar2`, `ar3`, and `ar5`) that return objects with specific structures. **Pros and Cons of Each Approach** **Class Composition:** Pros: * Easier to read and understand, especially for complex object hierarchies * Encourages encapsulation and modularity * Can be more efficient due to compiler optimizations Cons: * More verbose than function composition * May lead to over-engineering or unnecessary complexity if not used carefully **Function Composition:** Pros: * Less verbose than class composition, making it easier to write and maintain small functions * Provides more flexibility in terms of reuse and modularization Cons: * Can lead to tight coupling between functions and make the code harder to understand * May result in slower performance due to function call overhead **Other Considerations** The benchmark also includes the use of `Object.assign()` to concatenate objects. This can affect performance, as it involves creating a new object by merging multiple objects. **Library Usage (None)** There are no external libraries used in this benchmark. **Special JavaScript Features/ Syntax (None)** This benchmark does not use any special JavaScript features or syntax beyond the standard language specification. **Alternative Approaches** Other approaches to create and use objects could be considered, such as: * **Prototype-based programming**: This approach uses prototypes to define object behavior, rather than classes. * **Object literal notation**: This approach uses object literals (e.g., `{a: 1}`) to define simple objects. * **Modules and ES6 Classes**: This approach uses ES6 modules and the `class` keyword to define complex object hierarchies. Keep in mind that these alternative approaches may have different performance characteristics, readability, and maintainability trade-offs compared to class composition and function composition.
Related benchmarks
function vs class method vs new function method v2
class vs function constructor vs object literal vs __proto__ vs Object.create vs Object.setPrototypeOf
Comparison of classes vs prototypes vs object literals also including the inheritance
Comments
Confirm delete:
Do you really want to delete benchmark?