Benchmark: literals vs classes

Tests:

classes

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

const points = [];
for(var i = 0; i < 1000; ++i) {
  points.push(new Point(i,i));
}

​x
 
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);    }}​const points = [];for(var i = 0; i < 1000; ++i) {  points.push(new Point(i,i));}

literals

function Point(x, y){
	return {
      	x, 
      	y, 
      	add: (point)=>Point(this.x + point.x, this.y + point.y),
	 	sub: (point)=>Point(this.x - point.x, this.y - point.y)
    }  
}

const points = [];
for(var i = 0; i < 1000; ++i) {
  points.push(Point(i,i));
}

 
function Point(x, y){    return {        x,         y,         add: (point)=>Point(this.x + point.x, this.y + point.y),        sub: (point)=>Point(this.x - point.x, this.y - point.y)    }  }​const points = [];for(var i = 0; i < 1000; ++i) {  points.push(Point(i,i));}

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
classes
literals

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 117 on Android

View result in a separate tab

Test name	Executions per second
classes	4768.9 Ops/sec
literals	4336.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Let's dive into the provided benchmark JSON.

Benchmark Definition The benchmark is designed to compare two approaches: using classes and using literals (objects) with methods.

Options Compared

Using Classes: This approach uses JavaScript classes to define the Point object, which encapsulates its properties (x, y) and methods (add, sub).
Using Literals (Objects): This approach defines an object literal with properties (x, y) and method references (add, sub).

Pros and Cons of Each Approach

Using Classes

Pros:

Encapsulation: classes provide a natural way to bundle data and behavior together.
Code organization: classes can organize related code in a logical structure.

Cons:

Overhead: class creation, property access, and method invocation can incur some overhead due to the complexity of the syntax.

Using Literals (Objects)

Pros:

Lightweight: object literals are simpler and more lightweight than classes.
Flexibility: objects can be easily extended or modified by adding new properties or methods.

Cons:

Less readable: object literals can make code harder to read, especially when dealing with complex structures.
More verbose: using method references (add, sub) requires more code than defining them directly in the class (in this case).

Library Usage In both test cases, no libraries are used. The focus is on comparing the two approaches.

Special JS Features or Syntax None of the provided test cases use any special JavaScript features or syntax.

Benchmark Preparation Code The preparation code is minimal and simply initializes an array points with 1000 elements, each containing a Point object (in one of the two tested approaches).

Latest Benchmark Result The benchmark result shows that Chrome Mobile 117 browser executes the class-based approach approximately 10% faster than the literal-based approach.

Now, let's consider other alternatives:

Using Prototypes: Instead of classes, you could use prototypes to achieve similar behavior.
Functional Programming: You could rewrite the test cases using functional programming concepts (e.g., currying, higher-order functions).
Object-Oriented Alternatives: Depending on your specific needs, you might consider using other object-oriented alternatives, such as ES6 modules or even a different programming language.

Keep in mind that these alternatives might not directly compare to the class-based and literal approaches tested here, but they could provide interesting variations on the theme.

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark JSON.

**Benchmark Definition**
The benchmark is designed to compare two approaches: using classes and using literals (objects) with methods.

**Options Compared**

1. **Using Classes**: This approach uses JavaScript classes to define the `Point` object, which encapsulates its properties (`x`, `y`) and methods (`add`, `sub`).
2. **Using Literals (Objects)**: This approach defines an object literal with properties (`x`, `y`) and method references (`add`, `sub`).

**Pros and Cons of Each Approach**

**Using Classes**

Pros:

* Encapsulation: classes provide a natural way to bundle data and behavior together.
* Code organization: classes can organize related code in a logical structure.

Cons:

* Overhead: class creation, property access, and method invocation can incur some overhead due to the complexity of the syntax.

**Using Literals (Objects)**

Pros:

* Lightweight: object literals are simpler and more lightweight than classes.
* Flexibility: objects can be easily extended or modified by adding new properties or methods.

Cons:

* Less readable: object literals can make code harder to read, especially when dealing with complex structures.
* More verbose: using method references (`add`, `sub`) requires more code than defining them directly in the class (in this case).

**Library Usage**
In both test cases, no libraries are used. The focus is on comparing the two approaches.

**Special JS Features or Syntax**
None of the provided test cases use any special JavaScript features or syntax.

**Benchmark Preparation Code**
The preparation code is minimal and simply initializes an array `points` with 1000 elements, each containing a `Point` object (in one of the two tested approaches).

**Latest Benchmark Result**
The benchmark result shows that Chrome Mobile 117 browser executes the class-based approach approximately 10% faster than the literal-based approach.

Now, let's consider other alternatives:

1. **Using Prototypes**: Instead of classes, you could use prototypes to achieve similar behavior.
2. **Functional Programming**: You could rewrite the test cases using functional programming concepts (e.g., currying, higher-order functions).
3. **Object-Oriented Alternatives**: Depending on your specific needs, you might consider using other object-oriented alternatives, such as ES6 modules or even a different programming language.

Keep in mind that these alternatives might not directly compare to the class-based and literal approaches tested here, but they could provide interesting variations on the theme.

Related benchmarks:

literals vs classes (version: 0)

Comparing performance of: classes vs literals

Created: 2 years ago by: Guest

Jump to the latest result

classes

literals

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):