Benchmark: empty an array in JavaScript - [] vs setting length

Tests:

Set length to zero
var size = 10000; var arr2 = []; for (var i = 0; i < size; i++){ arr2.push(i); } arr2.length = 0;
New empty array
var size = 10000; var arr3 = []; for (var i = 0; i < size; i++){ arr3.push(i); } arr3 = [];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Set length to zero
New empty array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Browser/OS: Chrome 136 on Linux

View result in a separate tab

Test name	Executions per second
Set length to zero	12099.1 Ops/sec
New empty array	13431.6 Ops/sec

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**What is being tested?**

The provided JSON represents a benchmark test for two different ways of emptying an array in JavaScript: setting its `length` property to 0, versus creating a new empty array instance and assigning it to the original array variable.

**Test Case 1: Setting length to zero**

In this test case, we have an array `arr2` that is populated with 10,000 elements using a `for` loop. Then, we set its `length` property to 0. This approach modifies the existing array object in place, without creating a new instance.

**Test Case 2: Creating a new empty array**

In this test case, we again have an array `arr3` that is populated with 10,000 elements using a `for` loop. Then, instead of setting its `length` property to 0, we assign a new empty array instance (`[]`) to the original array variable. This approach creates a new array object and replaces the old one.

**Libraries and features**

No external libraries are used in these test cases. The only JavaScript feature employed is the use of an array's `length` property to modify its size, which is a standard language construct.

**Pros and cons of each approach**

* **Setting length to zero:**
	+ Pros:
		- Modifies the existing array object in place.
		- Does not create a new instance, potentially saving memory.
	+ Cons:
		- May have side effects if other parts of the code rely on the original array's properties or references.
* **Creating a new empty array:**
	+ Pros:
		- Creates a clean slate, without modifying the original array object.
		- Reduces the risk of unexpected side effects.
	+ Cons:
		- Creates a new instance, potentially wasting memory if the old one was reused elsewhere.

**Other considerations**

* **Memory management:** If the arrays are very large, creating a new empty array might be more efficient in terms of memory usage, since it avoids modifying the original object's size. However, this depends on the specific use case and the browser/JavaScript engine being used.
* **Performance:** The benchmark results show that setting length to zero is slightly faster than creating a new empty array.

**Alternatives**

Other alternatives for emptying an array in JavaScript include:

* Using `splice()` with a negative index, like `arr.splice(0, arr.length)` (not tested here).
* Using the `delete` operator with a loop or `map()`, which can be slower than setting length to zero.
* Using a library that provides more efficient array manipulation functions (not applicable in this case).

I hope this explanation helps!

Related benchmarks:

empty an array in JavaScript - [] vs setting length (version: 0)

Comparing performance of: Set length to zero vs New empty array

Created: 3 years ago by: Guest

Jump to the latest result

Set length to zero

New empty array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):