Fastest way to duplicate an array in JavaScript - slice vs. 'for' loop

Shallow vs Deep Copy: Understanding the Essence

When it comes to duplicating an array, you should understand the difference between a shallow and a deep copy. Shallow copying duplicates the structure of the array and the references to objects, not the actual objects:

• Both slice() and for loop produce shallow copies, imitating objects by reference.
• The ... spread syntax also creates a shallow copy, generally faster than using slice() or a for loop.

Deep Cloning: Handling Complexities

To accurately copy an array with nested objects or structures, a deep clone is necessary:

• JSON.parse(JSON.stringify(array)) gives you a deep clone, but beware:
  • Functions & symbols are not included in the cloning process and vanish.
  • Circular references? They'll throw errors, so stay alert!

Quick Shallow Copies

If you're dealing with shallow copying, consider these alternatives:

• Array.from(array) - creates a shallow copy, and you can throw in some data transformation if you wish.
• array.concat() - an older method and usually slower, but still does the job.
• Object.values({...array}) - somewhat of a novelty approach, but it works.

Please note:

• Array size does matter! Large arrays perform differently than smaller ones.
• Watch out for your browser's JavaScript engine: Engines such as V8 might have a favourite method.
• And finally, stay updated! The JavaScript world is always evolving.

Choosing the Ideal Copying Technique

Slice: The Photocopier

When dealing with Blink-based browsers (like Chrome or Edge), slice() is your go-to for duplicated arrays. Enhance the speed by using index 0:

// Because, why start from any other index? Slice loves 0!
const clonedArray = originalArray.slice(0);


For Loop: The Artist

For non-Blink browsers, a while loop might just outperform slice, especially in older environments. Here's how:

// Because sometimes, going backwards is actually faster. Reverse psychology, anyone?
const clonedArray = [];
let i = originalArray.length;

while (i--) {
  clonedArray[i] = originalArray[i];
}


ES6 Spread: The Modern Artist

The spread syntax (...) comes highly recommended for its efficiency and instant readability:

// Spread - because duplicating should be as easy as 1, 2, 3!
const clonedArray = [...originalArray];


Test before you rest!

To run benchmarks for your specific runtime conditions, use tools like JSBench.me. It's all about those real-world metrics.

Addressing Oddities and Exceptions

Cloning Inception (Nested Structures)

When dealing with nested structures, JSON.parse(JSON.stringify()) pulls off a good deep cloning act, if you don't mind the occasional missing function or circular reference error.

Non-Serializable Values

Arrays with functions, undefined values, or circular references? There are libraries like lodash ready to lend their cloneDeep function, or you could create a custom deep cloning function.