How to Clone an Array Without Reference in JavaScript

Clone an Array Without Reference in JavaScript

In JavaScript, arrays are reference types. That means when you assign one array to another variable, you're not actually copying the array—you’re linking both variables to the same underlying data. So if you make changes to one, it reflects in the other. That’s rarely what we want when we think of “copying” or “cloning” an array.

Fortunately, JavaScript offers several clean and reliable ways to create a true copy—an entirely new array that shares no reference with the original. Let’s look at some beginner-friendly methods to clone an array without reference, each with its own purpose and tone.

Method 1: Using the Spread Operator [...array]

This is by far the most modern, readable, and widely used approach. The spread operator ... takes each element from the original array and packs them into a new one.

const fruits = ['apple', 'banana', 'cherry'];
const copiedFruits = [...fruits];

fruits.push('dragonfruit');

console.log("Original array:", fruits);
console.log("Cloned array:", copiedFruits);

Original array: [ 'apple', 'banana', 'cherry', 'dragonfruit' ]
Cloned array: [ 'apple', 'banana', 'cherry' ]

Method 2: Using slice() Method

The slice() method is an older but reliable way to clone an array. Calling slice() without arguments returns a shallow copy of the array.

const scores = [80, 90, 100];
const clonedScores = scores.slice();

scores.pop();

console.log("Original scores:", scores);
console.log("Cloned scores:", clonedScores);

Original scores: [ 80, 90 ]
Cloned scores: [ 80, 90, 100 ]

Method 3: Using Array.from()

Array.from() is another elegant way to copy arrays. It creates a new array instance from an iterable or array-like object, making it perfect for cloning arrays.

const colors = ['red', 'green', 'blue'];
const copiedColors = Array.from(colors);

colors.push('yellow');

console.log("Original colors:", colors);
console.log("Copied colors:", copiedColors);

Original colors: [ 'red', 'green', 'blue', 'yellow' ]
Copied colors: [ 'red', 'green', 'blue' ]

Method 4: Using concat() with an Empty Array

If you want to use something a bit retro but still effective, the concat() method works well. You merge the original array into an empty one to achieve a shallow copy.

const numbers = [1, 2, 3];
const clonedNumbers = [].concat(numbers);

numbers.push(4);

console.log("Original numbers:", numbers);
console.log("Cloned numbers:", clonedNumbers);

Original numbers: [ 1, 2, 3, 4 ]
Cloned numbers: [ 1, 2, 3 ]

Bonus Insight: Shallow vs. Deep Copy

All of the methods shown above create a shallow copy—which means nested objects or arrays inside the original are still shared between the two. If your array has objects or arrays inside it and you want to clone them fully, you'll need a deep copy method like using JSON.parse(JSON.stringify(array)) or a custom deep clone function.

Conclusion

Cloning an array without sharing its reference is a vital part of writing predictable, bug-free code. Whether you choose the modern spread operator, the functional Array.from(), or even the classic slice() or concat()—the important part is understanding the concept of references and ensuring your clone behaves independently. Start with simple arrays and test changes. As your experience grows, these patterns will become second nature.