Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Object creation: arrow function vs. class with methods
(version: 0)
Functions create a raw object, while class instances can rely on the prototype. Which one is faster?
Comparing performance of:
Create object by function vs Create object by class
Created:
3 years ago
by:
Guest
Go to the latest result
Tests:
Create object by function
const carFactory = (brand, seats) => ({ brand, seats, sound: () => console.log("wrooom") }) for(let i = 0; i < 20; i++) { carFactory(`brand-${i}`, 5) }
Create object by class
class Car { brand; seats; constructor(brand, seats) { this.brand = brand; this.seats = seats; } sound() { return console.log("wrooom") } } for(let i = 0; i < 20; i++) { new Car(`brand-${i}`, 5) }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Create object by function
Create object by class
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6.1 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
Create object by function
9.9M/s
Create object by class
1.7M/s
View exact numbers
Test name
Executions per second
✓
Create object by function
9,883,335 Ops/sec
Create object by class
1,731,882 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided JSON represents a benchmark test created on MeasureThat.net, comparing the performance of two approaches to create objects in JavaScript: using an arrow function versus creating a class instance. **Options Compared** Two options are compared: 1. **Arrow Function**: Using an arrow function (e.g., `const carFactory = (brand, seats) => ({ ... })`) to create an object. 2. **Class Instance**: Creating a class instance using the `class` keyword (e.g., `class Car { ... } new Car(`brand-${i}`, 5)`). **Pros and Cons of Each Approach** * **Arrow Function**: + Pros: concise, efficient creation of objects without the need for explicit `this` binding. + Cons: may not provide access to the prototype chain, which can affect object inheritance behavior. * **Class Instance**: + Pros: provides access to the prototype chain, allowing for more flexible object inheritance and customization. + Cons: requires more boilerplate code and can be less concise than arrow functions. **Library Used** None of the provided benchmark definitions explicitly uses a library. However, it's worth noting that MeasureThat.net is a JavaScript benchmarking platform that may use libraries or frameworks under the hood to execute the benchmarks. **Special JS Feature or Syntax** The benchmark test utilizes ES6-style classes and arrow functions, which are part of the ECMAScript standard. The `class` keyword was introduced in ECMAScript 2015 (ES6), while arrow functions were also introduced in the same specification. **Benchmark Preparation Code** The benchmark preparation code is not provided, but it's likely that MeasureThat.net generates a script that creates an array of objects with varying properties and executes the benchmarks multiple times to gather statistics. **Other Alternatives** To create objects in JavaScript, developers may use other approaches, such as: 1. **Constructor Functions**: Using traditional constructor functions (e.g., `function Car(brand, seats) { ... }`). 2. **Object Constructors**: Creating objects using the `new` keyword with a function expression (e.g., `new Car(`brand-${i}`, 5)`). These alternatives may have different performance characteristics and trade-offs compared to arrow functions or class instances.
Related benchmarks
function vs class method vs new function method v2
ES6 Class vs Prototype vs Object Literal v2
Comparison of classes vs prototypes vs object literals also including the inheritance
Comments
Confirm delete:
Do you really want to delete benchmark?