Benchmark: Object.entries vs ......

Script Preparation code:

var obj = {};
for (let i = 0; i < 100000; i++) {
  obj[i] = i;
}

var ObjToArr = (obj)=> {
  if (obj == null) return;

  const ownProps = Object.keys(obj); // 객체의 자체 열거 가능한 속성 키를 가져옵니다.
  const length = ownProps.length;
  const result = new Array(length);

  for (let i = 0; i < length; i++) {
    result[i] = [ownProps[i], obj[ownProps[i]]]; // [key, value] 쌍을 생성합니다.
  }

  return result;
}

var ObjToArr2 = (obj)=> {
  if (obj == null) return;

  const result = [];
  Object.keys(obj).forEach((key) => result.push([key, obj[key]]));
  
  return result;
}

var ObjToArr3 = (obj)=> {
  if (obj == null) return;

  const result = []
  for(const key of Object.keys(obj)) result.push([key, obj[key]]);
  
  return result;
}


var ObjToArr4 = (obj)=> {
  if (obj == null) return;

  const result = []
  for(const key in obj) result.push([key, obj[key]]);
  
  return result;
}

Tests:

ObjToArr4
ObjToArr4(obj);
Object.entries
Object.entries(obj);
ObjToArr3
ObjToArr3(obj);
ObjToArr2
ObjToArr2(obj);
ObjToArr
ObjToArr(obj);

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

ObjToArr

292/s

ObjToArr3

207/s

ObjToArr4

207/s

ObjToArr2

190/s

Object.entries

154/s

Fastest: ObjToArr (1.9x faster)

View exact numbers

✓ ObjToArr: 292 ops/sec
• ObjToArr3: 207 ops/sec
• ObjToArr4: 207 ops/sec
• ObjToArr2: 190 ops/sec
• Object.entries: 154 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ObjToArr4
Object.entries
ObjToArr3
ObjToArr2
ObjToArr

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Object.entries

58/s

ObjToArr4

40/s

ObjToArr

38/s

ObjToArr2

37/s

ObjToArr3

36/s

View exact numbers

Test name	Executions per second
✓ Object.entries	58 Ops/sec
ObjToArr4	40 Ops/sec
ObjToArr	38 Ops/sec
ObjToArr2	37 Ops/sec
ObjToArr3	36 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to iterate over an object's properties is crucial in JavaScript development.

**Benchmarked Functions:**

The benchmark measures the performance of four functions to convert an object into an array of key-value pairs:

1. `ObjToArr4(obj)`: Uses a traditional `for...in` loop with the `in` operator.
2. `Object.entries(obj)`: Uses the built-in `entries()` method on objects, which returns an iterator that produces key-value pairs as arrays.
3. `ObjToArr3(obj)`: Uses a `for...of` loop and the `keys()` method of objects (not directly applicable, as it's not a standard method).
4. `ObjToArr2(obj)`: Uses the `forEach()` method with an arrow function.

**Approaches Compared:**

The benchmark compares the performance of these four functions, which can be summarized as follows:

* **Iterating over object properties using for...in**: This approach uses the `in` operator to access the object's property names and then uses a traditional loop to iterate.
* **Using Object.entries() method**: This approach takes advantage of the built-in `entries()` method on objects, which provides an efficient way to iterate over key-value pairs as arrays.
* **Using for...of loop with keys() (non-standard)**: This approach is not applicable in standard JavaScript and would likely have performance implications due to its non-standard nature.
* **Using forEach() method**: This approach uses the `forEach()` method, which executes a provided function once for each element in an array-like or iterable object.

**Pros and Cons of Each Approach:**

1. **for...in loop with in operator**:
	* Pros: Simple to implement, works across different browsers.
	* Cons: May not be as efficient as other approaches due to potential issues with inheritance and prototype chaining.
2. **Object.entries() method**:
	* Pros: Fast and modern way to iterate over key-value pairs on objects.
	* Cons: Limited browser support (Chrome 128 in this case) may limit its utility in older environments.
3. **for...of loop with non-standard keys()**: **Not applicable due to non-standard nature**
4. **forEach() method**:
	* Pros: Simple and widely supported, suitable for array-like objects or iterables.
	* Cons: May have performance implications if used on large datasets.

**Library Used:**

None explicitly mentioned in the benchmark definition. The `Object.keys()` and `entries()` methods are part of the JavaScript standard library.

**Special JS Features/Syntax:**

No special features or syntax (e.g., ES6+ features, Promises) are used in this benchmark.

**Alternatives:**

If you need to iterate over an object's properties in a different context:

* **Use `Object.keys()` and traditional loops**: Suitable for environments with limited browser support.
* **Utilize the `for...in` loop**: Another widely supported option, although potentially slower than modern approaches like `Object.entries()`.
* **Consider using a library or framework**: Depending on your project's requirements and constraints.

Note: This analysis focuses on the provided benchmark definition and test cases. The results may vary depending on specific use cases and implementation details not covered in this explanation.

Object.entries vs ...... (version: 0)

Comparing performance of: `ObjToArr4 vs Object.entries vs ObjToArr3 vs ObjToArr2 vs ObjToArr`

Created: one year ago by: Guest

Go to the latest result

ObjToArr4

Object.entries

ObjToArr3

ObjToArr2

ObjToArr

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Object.entries vs ...... (version: 0)

Comparing performance of: ObjToArr4 vs Object.entries vs ObjToArr3 vs ObjToArr2 vs ObjToArr

Created: one year ago by: Guest

Go to the latest result

ObjToArr4

Object.entries

ObjToArr3

ObjToArr2

ObjToArr

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Chrome 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `ObjToArr4 vs Object.entries vs ObjToArr3 vs ObjToArr2 vs ObjToArr`