Benchmark: ES6 Class vs Function with float32array vs Function with Array 2

Tests:

ES6 Class
class Point { constructor(x, y){ this.x = x; this.y = y; } add(point){ return new Point(this.x + point.x, this.y + point.y); } sub(point){ return new Point(this.x - point.x, this.y - point.y); } toFloat32Array(){ return new Float32Array([this.x,this.y]) } } var p1 = new Point(10, 10); var p2 = new Point(10, -10); var sum = p1.add(p2); var dif = p1.sub(p2); var f32 = p1.toFloat32Array();
Function float32array
function create_point(x,y){ return new Float32Array([ x , y ]); } function add_points(a,b){ return new Float32Array( [ a[0] + b[0] , a[1] + b[1] ] ); } function sub_points(a,b){ return new Float32Array( [ a[0] - b[0] , a[1] - b[1] ] ); } var p1 = create_point(10,10); var p2 = create_point(10,-10); var sum = add_points(p1,p2); var dif = sub_points(p1,p2); var f32 = p1
Function array
function create_point(x,y){ return [ x , y ]; } function add_points(a,b){ return [ a[0] + b[0] , a[1] + b[1] ]; } function sub_points(a,b){ return [ a[0] - b[0] , a[1] - b[1] ]; } function to_32(a){ return new Float32Array(a); } var p1 = create_point(10,10); var p2 = create_point(10,-10); var sum = add_points(p1,p2); var dif = sub_points(p1,p2); var f32 = to_32(p1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ES6 Class
Function float32array
Function array

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 16 days ago):

LLMs can make mistakes. Check important info.

The benchmark you provided evaluates three different approaches to managing and operating on 2D points in JavaScript: using ES6 classes, using functions with `Float32Array`, and using functions with regular arrays.

### Approaches Compared

1. **ES6 Class Approach:**
   - **Test Name:** "ES6 Class"
   - **Definition:** A class named `Point` is created. It has a constructor to initialize x and y coordinates, and methods for addition and subtraction of points, as well as a method to convert the points to a `Float32Array`.
   - **Execution:** `add`, `sub`, and `toFloat32Array` methods are used to perform operations.
   - **Pros:**
     - Encapsulation: The class structure provides better organization and clarity for the code.
     - Extensible: New methods can easily be added, and the class can serve as a base for inheritance.
   - **Cons:**
     - Performance: This approach tends to be slower due to the overhead of creating object instances and method calls.
     - Verbosity: More code is needed to create and manage the class structure, which could be unnecessary for simple operations.

2. **Function with Float32Array:**
   - **Test Name:** "Function float32array"
   - **Definition:** Functions operate on `Float32Array` to create points, add, and subtract them.
   - **Execution:** Points are represented as `Float32Array` instances which are efficient for mathematical computations.
   - **Pros:**
     - Performance: Direct operations on typed arrays like `Float32Array` can be faster and more memory efficient, especially for large datasets.
     - Familiarity: Uses standard JavaScript functions which are easy to understand.
   - **Cons:**
     - Less clarity: The function-based approach is less organized compared to the class-based approach.
     - No encapsulation: There is a lack of structure, making the code harder to manage if it scales.

3. **Function with Array:**
   - **Test Name:** "Function array"
   - **Definition:** Similar to the previous function approach, but normal arrays are used instead of `Float32Array`.
   - **Execution:** Points are represented as regular arrays, and similar function operations for addition, subtraction, and conversion are defined.
   - **Pros:**
     - Simple Syntax: Easier to write and understand for those familiar with regular arrays.
     - Flexibility: Arrays in JavaScript can easily change size and structure.
   - **Cons:**
     - Performance: Operations on regular arrays might be slower compared to typed arrays, especially in heavy computations involving many elements.
     - Type System: Arrays don’t enforce a fixed type for their elements, which could lead to bugs if mixed data types are used unintentionally.

### Benchmark Results

The benchmark results indicate the number of executions per second for each method:

- **Function array:** 4,028,283.5 executions/sec
- **Function float32array:** 1,069,817.75 executions/sec
- **ES6 Class:** 287,064.71875 executions/sec

### Considerations

1. **Performance Needs:** If the application heavily relies on performance (e.g. games or large data processing), using `Float32Array` or arrays with optimization may be preferred.
2. **Code Maintainability:** If maintainability and code clarity are more important, the class approach might be beneficial despite its performance cost.
3. **Project Structure:** Assess whether the codebase would benefit more from structural organization (class-based) or functional simplicity.

### Alternatives

1. **Other Typed Arrays:** JavaScript offers other typed arrays, such as `Int32Array` or `Uint8Array`, that could be used based on the data requirements.
2. **WebGL:** For graphical applications needing high-performance point calculations, utilizing WebGL may be a superior option for handling points in a graphical context.
3. **Libraries:** Consider libraries like [math.js](https://mathjs.org/) or [gl-matrix](http://glmatrix.net/) which provide powerful abstractions and optimizations for vector and matrix mathematics, beyond the basic structures provided by JavaScript. They offer optimized performance through underlying C/C++ implementations or additional optimizations.

In summary, this benchmark compares three ways of managing 2D points using different data structures, focusing on performance, code clarity, and maintainability, allowing developers to make informed choices based on their specific use case.

Latest run results:

Run details: (Test run date: 16 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
ES6 Class	287064.7 Ops/sec
Function float32array	1069817.8 Ops/sec
Function array	4028283.5 Ops/sec

Related benchmarks:

ES6 Class vs Function with float32array vs Function with Array 2 (version: 1)

Comparing performance of: ES6 Class vs Function float32array vs Function array

Created: 16 days ago by: Guest

Jump to the latest result

ES6 Class

Function float32array

Function array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 16 days ago):