Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
ES6 Class vs Object Literal 100k runs
(version: 0)
Comparing performance of:
ES6 Class vs Object Literal
Created:
2 years ago
by:
Guest
Jump to the latest result
Tests:
ES6 Class
class Point { constructor(x, y, a, b, c, d, e, f, g, h){ this.x = x; this.y = y; this.a = a; this.b = b; this.c = c; this.d = d; this.e = e; this.f = f; this.g = g; this.h = h; } } for (var i = 0; i < 100000; i++) { var p1 = new Point(10, 10, 1, 2, 3, 4, 5, 6, 7, 8); p1.x = p1.x - 1; }
Object Literal
for (var i = 0; i < 100000; i++) { var p1 = { x: 10, y: 10, a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8 }; p1.x = p1.x - 1; }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
ES6 Class
Object Literal
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 17_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/135.0.7049.83 Mobile/15E148 Safari/604.1
Browser/OS:
Chrome Mobile iOS 135 on iOS 17.6.1
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
ES6 Class
165.1 Ops/sec
Object Literal
24642.9 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided JSON data and explain what's being tested, the options compared, pros and cons of each approach, and other considerations. **Benchmark Definition** The benchmark definition is a JSON object that describes the test case. In this case, there are two test cases: 1. "ES6 Class" - This test case uses the ES6 class syntax to define a `Point` class with 10 properties. 2. "Object Literal" - This test case uses an object literal to define an object with 10 properties. **Options Compared** The options compared in this benchmark are: * Using ES6 classes (`ES6 Class`) * Using object literals (`Object Literal`) **Pros and Cons of Each Approach** * **ES6 Classes**: + Pros: Encapsulation, readability, and maintainability. Classes provide a way to organize code into logical units, making it easier to understand and modify. + Cons: Overhead of creating an instance and accessing properties via the `this` keyword can be slower than object literals in some cases. * **Object Literals**: + Pros: Lightweight, fast access to properties. Object literals are often faster because they don't incur the overhead of creating an instance or accessing properties via the `this` keyword. + Cons: Less readable and maintainable compared to classes. **Library** There is no library explicitly mentioned in the benchmark definition. However, it's worth noting that the Chrome browser is used as the test environment. **Special JS Feature or Syntax** None of the provided code snippets use any special JavaScript features or syntax beyond ES6 classes. **Other Considerations** * The benchmark runs 100,000 iterations for each test case. * The `for` loop is used to create instances of the class or object literal and perform operations on them. * The `x = x - 1` operation is performed on each instance after creation, which may affect performance. **Alternatives** If you wanted to modify this benchmark, you could consider adding other options, such as: * Using constructor functions (e.g., `function Point(x, y, a, b, c, d, e, f, g, h) { ... }`) * Using destructuring assignment * Adding more complex operations or data structures However, the current benchmark is straightforward and effectively compares two popular ways to create objects in JavaScript.
Related benchmarks:
Map vs Object (real-world) Performance 2
1000 Objects in a 10000 Object Pool; Array find vs Map get
10 Objects in a 100 Object Pool; Array find vs Map get
Map vs Object (real-world) Performance - Forked
Map vs Object (real-world) Performance - Forked2
Comments
Confirm delete:
Do you really want to delete benchmark?