How to clone an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Cloning arrays is crucial for maintaining immutability, preventing unintended mutations, and implementing state management patterns in modern JavaScript applications. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented array cloning countless times in components like form builders, data grids, and state managers where original arrays must remain unchanged. From my extensive expertise, the most modern and efficient solution is using the ES6 spread operator, which creates a shallow copy of the array. This approach is concise, readable, and preserves the original array’s integrity.
Use the spread operator to create a shallow copy of an array.
const original = ['apple', 'banana', 'orange']
const cloned = [...original]
// Result: cloned is a new array with same elements
The spread operator ... expands all elements from the original array into a new array literal, creating an independent copy. In this example, cloned becomes a separate array with the same elements as original. Modifying cloned won’t affect original and vice versa. This method works perfectly for arrays containing primitive values (strings, numbers, booleans). For arrays containing objects, this creates a shallow copy, meaning the objects themselves are still referenced, not duplicated.
Alternative Shallow Copy Methods
The spread operator is the most common approach, but JavaScript provides other ways to create shallow copies:
const original = [1, 2, 3]
// Using Array.from()
const copy1 = Array.from(original)
// Using slice()
const copy2 = original.slice()
Both Array.from() and .slice() produce the same result as the spread operator — a new array with the same elements. The spread operator remains the preferred choice for its readability, but Array.from() is especially useful when cloning array-like objects such as NodeList or arguments.
Deep Cloning with structuredClone()
When your array contains nested objects, a shallow copy only duplicates the top-level references. To create a fully independent deep copy, use the native structuredClone() function:
const users = [
{ name: 'Alice', settings: { theme: 'dark' } },
{ name: 'Bob', settings: { theme: 'light' } }
]
const deepCloned = structuredClone(users)
deepCloned[0].settings.theme = 'light'
console.log(users[0].settings.theme) // 'dark' — original is unaffected
structuredClone() is supported in all modern browsers and Node.js 17+. It handles complex types like Date, Map, Set, and RegExp that JSON.parse(JSON.stringify()) fails on. This is the recommended deep cloning approach in 2026.
Best Practice Note:
This is the same approach we use in CoreUI components for state management and preventing prop mutations.
Use the spread operator for shallow copies of simple arrays, and structuredClone() for arrays with nested objects. For related operations, see how to merge arrays, how to filter arrays, and how to remove duplicates.
