Benchmark: Object creation: arrow function vs. class with methods

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) }
x

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)
}

 
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>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 2 months 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

Test name	Executions per second
Create object by function	9883335.0 Ops/sec
Create object by class	1731881.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months 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:

Arrow Function: Using an arrow function (e.g., const carFactory = (brand, seats) => ({ ... })) to create an object.
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:

Constructor Functions: Using traditional constructor functions (e.g., function Car(brand, seats) { ... }).
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.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

**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**

**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**

**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:

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: 2 years ago by: Guest

Jump to the latest result

Create object by function