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

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

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

Run details: (Test run date: one month 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

Test name	Executions per second
ObjToArr4	40.5 Ops/sec
Object.entries	57.9 Ops/sec
ObjToArr3	35.8 Ops/sec
ObjToArr2	36.6 Ops/sec
ObjToArr	38.0 Ops/sec

Related benchmarks:

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

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

Created: one month ago by: Guest

Jump to the latest result

ObjToArr4

Object.entries

ObjToArr3

ObjToArr2

ObjToArr

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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