How to empty an array in JavaScript

Emptying arrays is essential for resetting application state, clearing user selections, or preparing arrays for new data without breaking existing references in JavaScript applications. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented array clearing in numerous components like shopping carts, form builders, and data tables where arrays need to be reset while maintaining their reference integrity. From my extensive expertise, the most efficient and reference-preserving solution is setting the array’s length property to 0. This approach clears all elements while keeping the same array object, ensuring all variables pointing to it remain valid.

Set the array’s length property to 0 to empty the array.

const items = ['apple', 'banana', 'orange']
items.length = 0
// Result: items is now []

Setting items.length = 0 removes all elements from the array by truncating it to zero length. This method modifies the original array object, so all variables that reference this array will see the empty array. In this example, after setting the length to 0, the items array becomes empty but maintains its identity. This is more efficient than creating a new empty array because it preserves existing references and doesn’t require garbage collection of the old array.

Best Practice Note:

This is the same approach we use in CoreUI components for clearing form data and resetting component state while maintaining reactivity. Alternative methods include items.splice(0) or items = [], but setting length is fastest and preserves references. Use items = [] only when you specifically want to create a new array and break existing references.