Benchmark: Array Fill comparison

HTML Preparation code:

<div id=''></div>

Script Preparation code:

var ARRAY_SIZE = 250;

var createSampleObject = function() {
    return {
        "id": 538,
        "uid": "9b14d2b5-a0c5-409d-a8bf-4b569a5ce10b",
        "vin": "54A1LF7KKBT858198",
        "make_and_model": "Honda Odyssey",
        "color": "Violet",
        "transmission": "Automatic",
        "drive_type": "RWD",
        "fuel_type": "Ethanol",
        "car_type": "Regular Cab Pickup",
        "car_options": [
            "Rear Window Defroster",
            "MP3 (Single Disc)",
            "Airbag: Driver",
            "CD (Multi Disc)",
            "Alloy Wheels",
            "Cruise Control",
            "Rear Window Wiper",
            "MP3 (Multi Disc)",
            "Power Locks"
        ],
        "specs": [
            "Bright pedals",
            "Immobilizer system",
            "Pwr accessory delay",
            "Enhanced accident response system unlocks the doors, shuts off the fuel pump and turns on interior lights after airbag deploys",
            "Carpeted cargo area",
            "Floor carpeting",
            "Black windshield molding",
            "Optitron electroluminescent instrumentation"
        ],
        "doors": 2,
        "mileage": 16246,
        "kilometrage": 86360,
        "license_plate": "DQX-9667"
    }
};

Tests:

Array fill (has reference issues)
new Array(ARRAY_SIZE).fill(createSampleObject());
Array from
Array.from({ length: ARRAY_SIZE }, createSampleObject);
Array map
new Array(ARRAY_SIZE).fill().map(() => createSampleObject() );
For and push
const arr = []; for (let i = 0; i < ARRAY_SIZE; i++) { arr.push(createSampleObject()); }
Array spread operator
[...new Array(ARRAY_SIZE)].map(() => createSampleObject());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array fill (has reference issues)
Array from
Array map
For and push
Array spread operator

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
Array fill (has reference issues)	1323734.5 Ops/sec
Array from	61194.2 Ops/sec
Array map	50682.3 Ops/sec
For and push	27774.6 Ops/sec
Array spread operator	50730.7 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 on MeasureThat.net.

**Benchmark Overview**

The benchmark compares four different methods for filling an array with objects in JavaScript:

1. `new Array(ARRAY_SIZE).fill(createSampleObject());`
2. `Array.from({ length: ARRAY_SIZE }, createSampleObject);`
3. `new Array(ARRAY_SIZE).fill().map(() => createSampleObject() );`
4. `const arr = [];\r\n\r\nfor (let i = 0; i < ARRAY_SIZE; i++) {\r\n   arr.push(createSampleObject());\r\n}`

**Method Comparison**

1. **`new Array(ARRAY_SIZE).fill(createSampleObject());`**: This method uses the `fill()` method to populate an array with objects. It's a simple and efficient way to create an array of objects.
2. **`Array.from({ length: ARRAY_SIZE }, createSampleObject);`**: This method uses the `Array.from()` method to create a new array from an iterable. In this case, it's used to create an array of objects using the `createSampleObject()` function.
3. **`new Array(ARRAY_SIZE).fill().map(() => createSampleObject() );`**: This method is similar to the first one, but it adds an extra step by calling the `map()` method on the resulting array. This creates a new array with the objects repeated `ARRAY_SIZE` times.
4. **`const arr = [];\r\n\r\nfor (let i = 0; i < ARRAY_SIZE; i++) {\r\n   arr.push(createSampleObject());\r\n}`**: This method uses a traditional `for` loop to push objects onto an array.

**Pros and Cons**

1. **`new Array(ARRAY_SIZE).fill(createSampleObject());`**:
	* Pros: Simple, efficient, and doesn't create unnecessary intermediate arrays.
	* Cons: May not be as flexible or reusable as other methods.
2. **`Array.from({ length: ARRAY_SIZE }, createSampleObject);`**:
	* Pros: Flexible and reusable, can be used to create arrays of objects with different lengths.
	* Cons: May be slower due to the overhead of creating an iterable object.
3. **`new Array(ARRAY_SIZE).fill().map(() => createSampleObject() );`**:
	* Pros: Creates a new array with repeated objects, which can be useful for some use cases.
	* Cons: Adds unnecessary complexity and creates multiple intermediate arrays.
4. **`const arr = [];\r\n\r\nfor (let i = 0; i < ARRAY_SIZE; i++) {\r\n   arr.push(createSampleObject());\r\n}`**:
	* Pros: Simple and flexible, can be used to create arrays of objects with different lengths.
	* Cons: May not be as efficient as other methods due to the use of a traditional `for` loop.

**Library Usage**

None of the benchmark tests explicitly use any external libraries. However, it's worth noting that some JavaScript engines may have built-in optimizations or features that can affect the performance of these tests.

**Special JS Features or Syntax**

This benchmark does not explicitly test any special JavaScript features or syntax. However, it does rely on the `fill()` and `Array.from()` methods, which are relatively modern and widely supported.

**Conclusion**

The choice of method depends on the specific use case and requirements. If simplicity and efficiency are important, `new Array(ARRAY_SIZE).fill(createSampleObject());` may be the best choice. However, if flexibility and reusability are more important, `Array.from({ length: ARRAY_SIZE }, createSampleObject);` could be a better option.

Related benchmarks:

Array Fill comparison (version: 0)

Comparison with different methods of Array Fill, to avoid object reference.

Comparing performance of: Array fill (has reference issues) vs Array from vs Array map vs For and push vs Array spread operator

Created: 4 years ago by: Guest

Jump to the latest result

Array fill (has reference issues)

Array from

Array map

For and push

Array spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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