Benchmark: hasOwnProperty vs Object.entries

Tests:

for in with hasOwnProperty
const props = { color: 'red', value: 'abc', fill: 'outline', button: true, redirect: 10, other: 'hello', object: { test: true }}; let result = {}; for (const prop in props) { if (props.hasOwnProperty(prop)) { result[prop] = props[prop]; } }
for of with Object.entries
const props = { color: 'red', value: 'abc', fill: 'outline', button: true, redirect: 10, other: 'hello', object: { test: true }}; let result = {}; for (const [prop, value] of Object.entries(props)) { result[prop] = value; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for in with hasOwnProperty
for of with Object.entries

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
for in with hasOwnProperty	10871671.0 Ops/sec
for of with Object.entries	4500234.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Overview**

The benchmark tests two approaches for iterating over an object: using `for...in` with `hasOwnProperty` and using `for...of` with `Object.entries`.

**Approaches Compared**

1. **For-in with hasOwnProperty**: This approach iterates over the object's properties using a traditional `for...in` loop, which includes inherited properties. The `hasOwnProperty` method is used to filter out inherited properties that are not directly owned by the object.
2. **For-of with Object.entries**: This approach uses a modern `for...of` loop and the `Object.entries()` method to iterate over the object's own enumerable property pairs (key-value pairs).

**Pros and Cons**

1. **For-in with hasOwnProperty**:
	* Pros: widely supported, easy to understand.
	* Cons: includes inherited properties, may perform slower due to additional iteration.
2. **For-of with Object.entries**:
	* Pros: modern, efficient, includes only enumerable own properties.
	* Cons: requires support for modern JavaScript features (ES6+), not all browsers support it.

**Library and Purpose**

There is no specific library mentioned in the benchmark definition or test cases. However, `Object.entries()` is a built-in method on objects introduced in ECMAScript 2015 (ES6).

**Special JS Features/Syntax**

The benchmark uses modern JavaScript features:

* `for...of` loop: introduced in ECMAScript 2015 (ES6).
* `Object.entries()`: also introduced in ECMAScript 2015 (ES6).

These features are widely supported in modern browsers, but may not be available in older browsers.

**Other Alternatives**

If you want to avoid using `for...of` and `Object.entries`, you can use a traditional `for...in` loop with additional filtering:

```javascript
for (const prop in props) {
  if (props.hasOwnProperty(prop)) {
    result[prop] = props[prop];
  }
}
```

Alternatively, you can use the `Reflect.ownKeys()` method to get only own enumerable property keys:

```javascript
for (const key of Reflect.ownKeys(props)) {
  result[key] = props[key];
}
```

Keep in mind that these alternatives may not be as efficient or modern as the original approaches used in the benchmark.

Related benchmarks:

hasOwnProperty vs Object.entries (version: 0)

Testing performance of a loop with hasOwnProperty vs a loop with Object.entries

Comparing performance of: for in with hasOwnProperty vs for of with Object.entries

Created: 4 years ago by: Guest

Jump to the latest result

for in with hasOwnProperty

for of with Object.entries

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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