Spread ([...arr]) is the default shallow clone; it works on any iterable and reads as one obvious operation. Array.from does the same for arrays but generalizes to any iterable, which is why it is the right call for cloning a Set, a Map's entries, or a DOM NodeList. Both are shallow: they copy the top-level slot array but share whatever objects sit inside. For a flat array of primitives that is enough; for nested data, see accordion 3.

These are the pre-spread idioms you will still see in older codebases and in transpiled output. arr.slice() and arr.concat() both return a shallow copy when called with no arguments. They are functionally equivalent to [...arr] but slightly more typing and slightly less obvious to a reader. Prefer spread or Array.from in new code; recognize these forms when reading code written before 2017 or when working with engines that did not yet have spread.

structuredClone is the right answer for deep-cloning arrays of objects, arrays of arrays, or any tree-shaped data. It is built into Node 17+ and modern browsers, supports cyclic references, and copies most common types (Date, Map, Set, ArrayBuffer, typed arrays). It does NOT copy functions, DOM nodes, or class prototypes (the result is a plain object), which is usually what you want for data clones but can surprise you if you stored a method or class instance. For pure JSON data only, JSON.parse(JSON.stringify(arr)) is a cheaper alternative that loses Date and Map.

Objects share the same shallow-vs-deep split as arrays. { ...obj } and Object.assign({}, obj) are the two shallow-copy idioms; both share nested objects with the original. The nested-mutation gotcha is the most common shallow-copy bug: the top level looks isolated until a child object's property changes and silently propagates back. The fix is the same as for arrays: structuredClone(obj) deep-copies the whole graph in one call, no library required.