Benchmark: Extract data from array - map() vs JSON.stringify() vs for loop

Script Preparation code:

var data = [
    {name: "anonystick", sex:1, age: 42, phone: 03543214564},
    {name: "medium", sex:0, age: 45, phone: 0321452145},
    {name: "subrss", sex:1, age: 41, phone: 03789456785}
]

Tests:

map()
data.map(el => { return {name: el.name, sex: el.sex} })
JSON.stringify()
JSON.parse(JSON.stringify(data, ["name","sex"]))
ForLoop
var new_data = []; for (var i=0, new_data=[]; i<data.length; i++) { new_data.push({ name: data[i].name, sex: data[i].age }); }

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 42 runs

map()

15.2M/s

ForLoop

2.1M/s

JSON.stringify()

668K/s

Fastest: map() (22.7x faster)

View exact numbers

✓ map(): 15,184,276 ops/sec
• ForLoop: 2,060,297 ops/sec
• JSON.stringify(): 667,799 ops/sec

Firefox 6 runs

map()

23.2M/s

ForLoop

20.8M/s

JSON.stringify()

701K/s

Fastest: map() (33.0x faster)

View exact numbers

✓ map(): 23,159,902 ops/sec
• ForLoop: 20,806,914 ops/sec
• JSON.stringify(): 701,388 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
map()
JSON.stringify()
ForLoop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/29.0 Chrome/136.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 136 on Android

View result in a separate tab

map()

27.1M/s

ForLoop

14.4M/s

JSON.stringify()

661K/s

View exact numbers

Test name	Executions per second
✓ map()	27,054,288 Ops/sec
ForLoop	14,369,555 Ops/sec
JSON.stringify()	660,882 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze what's being tested.

**Benchmark Overview**

The benchmark compares three approaches for extracting data from an array:

1. Using the `map()` method
2. Serializing the array to a string using `JSON.stringify()`
3. Iterating over the array using a traditional `for` loop

**Options Comparison**

Each option has its pros and cons:

* **`map()`**: Pros:
	+ Efficient and concise way to transform data.
	+ Creates a new array with transformed elements, leaving the original array unchanged.
	+ Can be faster than other approaches for large datasets.
* Cons:
	+ Requires modern JavaScript engines that support `map()`.
	+ May not work as expected in older browsers or environments.
* **`JSON.stringify()`**: Pros:
	+ Simple and widely supported way to serialize data.
	+ Works across most modern browsers and environments.
* Cons:
	+ Converts the entire array to a string, which may be slower than other approaches for large datasets.
	+ Can lead to loss of precision or data types when parsing back the JSON string.
* **`For Loop`**: Pros:
	+ Widely supported and works across most modern browsers and environments.
	+ Can be more intuitive for developers familiar with traditional `for` loops.
* Cons:
	+ Often slower than other approaches, especially for large datasets.
	+ More verbose code can lead to errors or performance issues.

**Library Used**

In this benchmark, the `JSON` library is used implicitly through the `JSON.stringify()` method. This library provides a way to parse and generate JSON data in JavaScript.

**Special JS Feature/Syntax**

None of the test cases explicitly use special JavaScript features or syntax beyond what's standard for modern browsers. However, it's worth noting that some JavaScript engines may have differences in how they execute certain code paths, which could affect benchmark results.

**Benchmark Preparation Code**

The script preparation code defines an array `data` with three objects, each containing `name`, `sex`, and `age` properties. This data is used as input for the benchmark tests.

**Other Alternatives**

If you're looking for alternative approaches to extract data from an array, consider these options:

* Using `forEach()` instead of `map()`: While similar to `map()`, `forEach()` doesn't return a new array but rather executes a callback function on each element.
* Using `reduce()` instead of `for` loop: Like `map()`, `reduce()` transforms data in an array, but it's often more concise and expressive than a traditional `for` loop.
* Using modern JavaScript features like `Array.prototype.flatMap()` (supported since ES6): This method can simplify the transformation process compared to `map()` or `forEach()`.

Extract data from array - map() vs JSON.stringify() vs for loop (version: 1) Benchmark.js

Comparing performance of: `map() vs JSON.stringify() vs ForLoop`

Created: 5 years ago by: Registered User

Go to the latest result

map()

JSON.stringify()

ForLoop

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 42 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Extract data from array - map() vs JSON.stringify() vs for loop (version: 1) Benchmark.js

Comparing performance of: map() vs JSON.stringify() vs ForLoop

Created: 5 years ago by: Registered User

Go to the latest result

map()

JSON.stringify()

ForLoop

Historical Performance Data aggregated from 48 community runs

Desktop Results:

Chrome 42 runs

Firefox 6 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: `map() vs JSON.stringify() vs ForLoop`