Benchmark: Object.values() vs Array.from(Map.values())

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function generateID(length = 10) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    const charactersLength = characters.length;
    
    for (let i = 0; i < length; i++) {
        // Generate a random index based on characters length
        const randomIndex = Math.floor(Math.random() * charactersLength);
        // Append the character at the random index to the result string
        result += characters[randomIndex];
    }

    return result;
}

const obj = {};
const map = new Map();

for (let i = 0; i < 1000; i++) {
	const id = generateID();
	obj[id] = { key: id };
	map.set(id, { key: id });
}

Tests:

Object.values()
const result = Object.values(obj);
Array.from(Map.values())
const result = Array.from(map.values());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.values()
Array.from(Map.values())

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Object.values()	18862.0 Ops/sec
Array.from(Map.values())	887104.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The provided benchmark compares two methods for extracting values from an object and a Map in JavaScript: `Object.values()` and `Array.from(Map.values())`. Here's a deeper look into each of these approaches, their pros and cons, and the context of the libraries and features being used.

### Benchmark Overview

1. **Test Methods**:
   - **Object.values()**: This method retrieves the values of the properties from a standard JavaScript object.
   - **Array.from(Map.values())**: This approach takes the values from a Map object and converts them into an array using `Array.from()`.

2. **Script Preparation**: 
   - The preparation code generates a sample dataset consisting of 1000 properties in an object and their corresponding entries in a Map. Each property and entry consists of a unique identifier as the key and an object with a key-value pair as the value.

### Comparison of Options

#### 1. `Object.values()`
- **Pros**:
  - **Simplicity**: It's straightforward and easy to use for accessing values from an object.
  - **Performance**: In some cases, especially with small datasets, it may outperform more complex methods due to a lack of overhead.

- **Cons**:
  - **Type-Specific**: It only operates on plain objects, meaning it cannot be used directly with Map instances.
  - **Iteration Mechanism**: It generates an array of values directly, which may be less flexible in certain scenarios compared to working with a Map.

#### 2. `Array.from(Map.values())`
- **Pros**:
  - **Flexibility**: This method works with any iterable object, allowing you to use it with Maps, Sets, etc.
  - **Direct Access to Map Values**: The `values()` method of a Map provides a straightforward iterable collection of its values.

- **Cons**:
  - **Overhead**: Using `Array.from()` adds an additional overhead that may lead to performance drawbacks, especially with larger maps.
  - **Complexity**: Slightly more complex syntax combined with the necessity to use a Map, which can be overkill for simpler key-value pair structures.

### Benchmark Results
The benchmark results show a significant difference in performance between the two methods:
- **`Array.from(Map.values())`** achieved **446,520.81 executions per second**.
- **`Object.values()`** achieved **7,130.59 executions per second**.

This indicates that in this specific benchmark scenario, the Map implementation was significantly more efficient than using standard objects with `Object.values()`.

### General Considerations
- **Use Cases**: The choice between these two methods will largely depend on the specific use case. If working with data that involves complex key-value pairs or when you need map-specific functionalities, the Map method might be preferred. For simpler situations, standard objects with `Object.values()` might suffice.
- **Browser Variability**: Performance can vary across different browsers and versions. The test was conducted on Chrome 131, and results might differ in other environments.

### Alternatives
There are alternatives to these approaches, including:
- **Using a for...in loop**: This traditional technique allows for iterating over object properties manually, though it requires more code and is less elegant for simple value extraction.
- **Using `Object.keys()` or `Object.entries()`**: These methods can extract keys or entries (key-value pairs) from an object, providing further flexibility for data manipulation based on the requirements.
- **Using libraries**: Libraries such as Lodash provide utility functions that could enhance performance or simplify data manipulation through methods like `_.values()` for objects or `_.map()` for collections.

In summary, while both methods have their merits, the choice heavily relies on the specific application context and performance needs.

Related benchmarks:

Object.values() vs Array.from(Map.values()) (version: 1)

Comparing performance of: Object.values() vs Array.from(Map.values())

Created: 3 months ago by: Guest

Jump to the latest result

Object.values()

Array.from(Map.values())

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):