Copying Arrays in TypeScript: Spread vs Deep Linking

#dev #array #hint #react

TLDR : use the spread operator for arrays of non-object items, otherwise you need to copy the array breaking the deep link of the objects using, for example, JSON.parse and JSON.stringify.

If you’re interested in knowing more keep reading!

With this post I want to remind (mostly to myself) that there are different ways of copy an array. Sometimes, the behavior can be odd, and then you suddenly realize that the problem was the way you copied the array!

I know, probably this is not an exciting article, but it might be helpful to someone.

In the worst case scenario, I will read it myself in the future!

I’ve created a sample app project using the following command:

npx create-next-app@latest

After some editing I’ve created a very ~~ugly~~ helpful example of how to copy an array and the main difference between a simple array and a complex one.

In the first example, I’ve created a number array and in the second I’ve created an object array. The buttons will copy the source array to the destination array and then update an element of the destination array.

The button Copy with spread operator, as it states, the copy will be performed using the spread operator for both the source arrays:


const tempArrayOfNumbers = [...sourceArrayOfNumbers];
tempArrayOfNumbers[2] = 100;
setDestinationArrayOfNumbers(tempArrayOfNumbers);

const tempArrayOfObjects = [...sourceArrayOfObjects];
tempArrayOfObjects[2].name = `${tempArrayOfObjects[2].name} - changed!`;
setDestinationArrayOfObjects(tempArrayOfObjects);

Using the spread operator will work fine with arrays that are not containing objects. In case the array contains objects, a deep link to the object reference is maintained so the arrays will be different but both will point to the same object reference for each item…long story short: if you update an object in the destination array also the relative object of the source array gets updated!

The button Copy without deep linking, on the other hand, creates the copy using the technique of transforming the source array in a string using JSON and then parsing it back to an array of objects. In this way every reference will be lost and the updates on an item don’t reflect on the source item.

const tempArrayOfNumbers = JSON.parse(JSON.stringify(sourceArrayOfNumbers));
tempArrayOfNumbers[3] = 42;
setDestinationArrayOfNumbers(tempArrayOfNumbers);

const tempArrayOfObjects = JSON.parse(JSON.stringify(sourceArrayOfObjects));
tempArrayOfObjects[3].name = `${tempArrayOfObjects[3].name} - changed!`;
setDestinationArrayOfObjects(tempArrayOfObjects);

The result will be like the following: