Logo
Back

How to copy array items into another array in JavaScript?

Copying array items into another array is a fundamental task, essential for preserving the original data while creating a new version for manipulation. Whether you’re building front-end functionality, handling APIs, or preparing for coding interviews, mastering these array-copying techniques is crucial. Below, we’ll explore multiple ways to copy arrays in JavaScript, discuss performance and mutation trade-offs, and share tips to help you write clean, efficient code.

1. The Spread Operator (...)

Introduced in ES6, the spread operator provides one of the most concise ways to clone an array:

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]
  • Pros: Easy to read and widely used in modern JavaScript code (especially in frameworks like React).
  • Cons: Shallow copy only. If the array contains objects or nested arrays, those references remain shared.

2. Using slice()

Before the spread operator became popular, slice() was the go-to for making a shallow copy:

const originalArray = [1, 2, 3];
const copiedArray = originalArray.slice();
console.log(copiedArray); // [1, 2, 3]
  • Pros: Works in older JavaScript environments, no ES6 needed.
  • Cons: Same shallow-copy caveat: it duplicates the array structure but not deeply nested objects.

3. Array.from()

Array.from() can convert array-like structures into arrays, and it also works to copy:

const originalArray = [1, 2, 3];
const copiedArray = Array.from(originalArray);
console.log(copiedArray); // [1, 2, 3]
  • Pros: Makes your intent explicit—turn array-like items into real arrays.
  • Cons: Also a shallow copy.

4. Manual Loop

For ultimate control (e.g., filtering or transforming elements while copying), you can use a loop:

const originalArray = [1, 2, 3];
const copiedArray = [];

for (let i = 0; i < originalArray.length; i++) {
  copiedArray[i] = originalArray[i];
}

console.log(copiedArray); // [1, 2, 3]
  • Pros: Full control and works in all JavaScript environments.
  • Cons: More verbose.

Deep vs. Shallow Copies

All the above methods create a shallow copy—if the array contains objects or nested arrays, modifying those objects through the new array changes them in the original array as well. For a deep copy (where nested objects are also cloned), consider:

  • Structured Clone (supported in modern browsers): 
    const deepCopiedArray = structuredClone(originalArray);
  • JSON.parse(JSON.stringify(...)) hack (works but can break on circular references or certain data types like Date).

Performance Considerations

  • Spread Operator vs. slice(): In most modern engines, both are quite performant for typical use cases.
  • Large Arrays: If arrays contain tens of thousands of elements, measure performance or consider streaming approaches if copying is frequent.
  • Mutability: If you rely on immutability (e.g., in React state), copying is a must to avoid unintended side effects.

Strengthen Your JavaScript Mastery

If you’re eager to deepen your JavaScript knowledge—especially around array manipulation, data structures, and coding patterns—check out these resources from DesignGurus.io:

  1. Grokking JavaScript Fundamentals – Dive into core JS concepts, from variable scoping and async behavior to ES6 features like the spread operator and Array.from().
  2. Grokking the Coding Interview: Patterns for Coding Questions – Learn to recognize the coding patterns behind common array problems (like sliding windows, two pointers, etc.), saving you time in real interviews.

For personalized feedback from ex-FAANG engineers, consider booking a Coding Mock Interview. You can also watch tutorials and tips on the DesignGurus YouTube Channel.

Final Thoughts

Copying arrays in JavaScript can be as simple or as involved as you need it to be. For a quick shallow copy, tools like the spread operator (...), slice(), or Array.from() are both concise and effective. When you need to handle nested data, remember that extra steps (like a deep copy) are necessary. By understanding these methods—and their trade-offs—you’ll have the flexibility to keep your code efficient, maintainable, and bug-free.

CONTRIBUTOR
TechGrind