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

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

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

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.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

ObjToArr4

Object.entries

ObjToArr3

ObjToArr2

ObjToArr

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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