Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
For... in vs Spread
(version: 0)
Comparing performance of:
for in vs spread vs for of
Created:
3 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
function makeSpreadable(obj) { const proto = Object.getPrototypeOf(obj); const methods = Object.getOwnPropertyNames(proto); for (const method of methods) { if (method === "constructor") continue; obj[method] = proto[method]; } } class Foo { constructor() { this.a = ""; this.b = ""; this.c = ""; this.d = ""; this.e = ""; this.f = ""; this.g = ""; this.h = ""; this.i = ""; makeSpreadable(this); } doA() {} doB() {} doC() {} doD() {} doE() {} doF() {} doG() {} doH() {} } const foo = new Foo(); const bar = {}; for (const key in foo) { bar[key] = foo[key]; }
Tests:
for in
class Foo { constructor() { this.a = ""; this.b = ""; this.c = ""; this.d = ""; this.e = ""; this.f = ""; this.g = ""; this.h = ""; this.i = ""; } doA() {} doB() {} doC() {} doD() {} doE() {} doF() {} doG() {} doH() {} } const foo = new Foo(); const bar = {}; for (const key in foo){ bar[key] = foo[key]; }
spread
function makeSpreadable(obj) { const proto = Object.getPrototypeOf(obj); const methods = Object.getOwnPropertyNames(proto); for (const method of methods) { if (method === "constructor") continue; obj[method] = proto[method]; } } class Foo { constructor() { this.a = ""; this.b = ""; this.c = ""; this.d = ""; this.e = ""; this.f = ""; this.g = ""; this.h = ""; this.i = ""; makeSpreadable(this); } doA() {} doB() {} doC() {} doD() {} doE() {} doF() {} doG() {} doH() {} } const foo = new Foo(); const bar = {...foo};
for of
class Foo { constructor() { this.a = ""; this.b = ""; this.c = ""; this.d = ""; this.e = ""; this.f = ""; this.g = ""; this.h = ""; this.i = ""; } doA() {} doB() {} doC() {} doD() {} doE() {} doF() {} doG() {} doH() {} } const foo = new Foo(); const bar = {}; const props = Object.getOwnPropertyNames(foo); const proto = Object.getPrototypeOf(foo); const methods = Object.getOwnPropertyNames(proto); for (const key of props){ bar[key] = foo[key]; } for (const key of methods){ if (key === "constructor") continue; bar[key] = proto[key] }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
for in
spread
for of
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its results. **What is tested?** The benchmark tests three different approaches to iterate over an object: 1. `for in`: This approach uses the `in` keyword to iterate over the object's own enumerable properties (i.e., keys). 2. Spread (`...foo`): This approach uses the spread operator to create a new object with the same properties as the original object. 3. `for of`: This approach uses the `of` keyword to iterate over an iterator returned by `Object.getOwnPropertyNames()`. **Options compared** The benchmark compares the execution speed of each approach: * `for in` * Spread (`...foo`) * `for of` **Pros and Cons of each approach:** 1. **`for in`**: * Pros: + Simple to use. + Fast iteration over properties. * Cons: + Does not iterate over inherited properties (using `Object.getPrototypeOf()`). 2. **Spread (`...foo`)** * Pros: + Easy to use. + Iterates over all properties, including inherited ones. * Cons: + May be slower due to the creation of a new object. 3. **`for of`**: * Pros: + Fast iteration over properties (similar to `for in`). + More explicit and readable than spread syntax. * Cons: + Less common usage compared to `in` keyword. **Library or special JS feature used:** The benchmark uses the following JavaScript features: 1. **Spread operator (`...foo`)**: Used to create a new object with the same properties as the original object. 2. **Object.getPrototypeOf()**: Used to get the prototype of an object and iterate over its own enumerable properties. **Other considerations:** * The benchmark measures execution speed, which may not be the only relevant metric for this scenario (e.g., memory usage, code readability). * The tests are run on Chrome 110 browser, so the results might not generalize to other browsers or environments. * The benchmark uses a fixed object (`foo`) with a known number of properties, so the results might not hold true for objects with different sizes. **Benchmark results:** The latest benchmark results show that: 1. `for in` is the fastest approach (268617.34375 executions per second). 2. Spread (`...foo`) is slower than `for in` but faster than `for of` (229378.671875 executions per second). 3. `for of` is the slowest approach (140812.578125 executions per second). Keep in mind that these results are specific to Chrome 110 on a Mac OS X 10.15.7 environment and may not be representative of other scenarios or environments.
Related benchmarks:
JavaScript spread operator vs Object.assign performance 22
JavaScript spread operator vs Object.assign performance 224
JavaScript spread operator vs Object.assign performance 22476
class vs function constructor vs object literal vs __proto__ vs Object.create vs Object.setPrototypeOf
Comments
Confirm delete:
Do you really want to delete benchmark?