Benchmark: Array.apply vs .from vs map vs loop

Tests:

Array.apply
Array.apply(null, new Array(10)).map(() => false);
Array.from
Array.from({ length: 10}, () => false);
map
new Array(10).map(() => false);
Loop and assign
const r = []; for (let i = 0; i < 10; i++) r[i] = false;
Loop and push
const r = []; for (let i = 0; i < 10; i++) r.push(false);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.apply
Array.from
map
Loop and assign
Loop and push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Loop and assign

69.9M/s

Loop and push

60.0M/s

map

56.1M/s

Array.apply

15.5M/s

Array.from

3.6M/s

View exact numbers

Test name	Executions per second
✓ Loop and assign	69,931,736 Ops/sec
Loop and push	59,968,476 Ops/sec
map	56,058,112 Ops/sec
Array.apply	15,546,792 Ops/sec
Array.from	3,618,127 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark measures the performance of different methods to create an array in JavaScript: `Array.apply`, `Array.from`, `map`, and two looping approaches (`Loop and assign` and `Loop and push`). The goal is to determine which method is the fastest.

**Method Comparison**

Here's a brief overview of each method:

1. **`Array.apply(null, new Array(10)).map(() => false)`**: This method uses `Array.apply` to create an array with 10 elements, then maps over it to return `false`. The resulting array is not used; it's only iterated over.
2. **`Array.from({ length: 10 }, () => false)`**: This method creates a new array using the `Array.from()` constructor, which takes an iterable as an argument and returns a new array with the same elements. In this case, it creates an array of 10 falsy values.
3. **`new Array(10).map(() => false)`**: Similar to the first method, but uses `new Array()` to create an empty array, then maps over it to return `false`.
4. **`const r = []; for (let i = 0; i < 10; i++) r[i] = false;`**: This is a looping approach that creates an array by iterating over a range of indices and assigning values to the array elements.
5. **`const r = []; for (let i = 0; i < 10; i++) r.push(false);`**: Another looping approach, but uses `push()` to add elements to the end of the array.

**Pros and Cons**

Here's a brief summary of each method:

1. **`Array.apply`**: Fast, as it avoids creating an intermediate array. However, it requires null to be used as the first argument.
2. **`Array.from`**: Creates a new array with a specified length, which can be beneficial for performance. However, it's not supported in older browsers and may incur a slight overhead due to the constructor call.
3. **`map`**: Similar to `apply`, but creates an intermediate array that needs to be iterated over.
4. **Looping approaches**:
	* `Loop and assign`: Slow, as it involves iterating over indices and assigning values to elements. However, it's a simple and widely supported approach.
	* `Loop and push`: Similar to the first looping approach, but uses `push()` instead of indexing.

**Library Usage**

There is no explicit library usage in this benchmark. However, `Array.from()` relies on the `Array` constructor and some browser-specific features (e.g., `length` property).

**Special JS Features or Syntax**

None are explicitly used in this benchmark.

**Other Considerations**

* **Browser support**: The benchmark uses a modern Chrome version, which is not representative of older browsers. If you want to test cross-browser compatibility, you may need to use different implementations.
* **Execution count**: The benchmark measures the number of executions per second (ExecutionsPerSecond), which can be affected by various factors, such as system load, memory constraints, and interpreter optimization.

**Alternatives**

If you're looking for alternatives or variations on these methods, consider:

1. Using `Array.prototype.slice()` instead of `map`.
2. Creating arrays using other methods, like `Array.prototype.concat()`, `Array.prototype.push()`, or `Set` constructors.
3. Experimenting with different iteration patterns, such as using a `for...of` loop or `reduce()`.

Array.apply vs .from vs map vs loop (version: 0)

Compare the performance of various array creation methods.

Comparing performance of: `Array.apply vs Array.from vs map vs Loop and assign vs Loop and push`

Created: 3 years ago by: Guest

Go to the latest result

Array.apply

Array.from

map

Loop and assign

Loop and push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.apply vs .from vs map vs loop (version: 0)

Compare the performance of various array creation methods.

Comparing performance of: Array.apply vs Array.from vs map vs Loop and assign vs Loop and push

Created: 3 years ago by: Guest

Go to the latest result

Array.apply

Array.from

map

Loop and assign

Loop and push

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: `Array.apply vs Array.from vs map vs Loop and assign vs Loop and push`