The Reference Assignment Problem

Consider a scenaroi where a source array is assigned to a temporary variable for filtering. A common mistake is assuming that the temporary variable is an independent copy.

function filterData() {
    // 'masterRecords' acts as the source of truth
    let masterRecords = this.masterRecords; 
    
    // ERROR: 'filterBuffer' points to the exact same array as 'masterRecords'
    let filterBuffer = masterRecords; 

    let searchKey = this.searchInput;
    
    for (let i = 0; i < filterBuffer.length; i++) {
        if (filterBuffer[i].name !== searchKey) {
            // Removing elements here also deletes them from 'masterRecords'
            filterBuffer.splice(i, 1); 
            i--; 
        }
    }
    
    // By this point, 'masterRecords' has been permanently mutated
    this.displayList = filterBuffer;
}

In this example, the intention might be to filter the data repeatedly based on different criteria. However, because filterBuffer is merely a pointer to masterRecords, the splice operaiton permanently deletes data from the source. Subsequent calls to this function will operate on an already modified (and likely corrupted) dataset.

Solutions for Creating Independent Copies

To prevent unintended mutation of the source data, you must create a shallow copy of the array. This ensures that the new variable holds a reference to a new array structure, leaving the original untouched. Below are several standard approaches to achieve this.

1. Manual Iteration

You can explicitly iterate over the source array and push elements into a new array container. This method is verbose but clearly expresses the intent of copying.

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

2. Using the Concat Method

The concat() method is traditionally used to merge arrays. However, calling it with no arguments returns a new array containing the elements of the original array.

let copiedArray = sourceArray.concat();

3. JSON Serialization

For a deep copy—where nested objects inside the array are also copied rather than referenced—you can serialize the array to a JSON string and then parse it back into an object. Note that this approach is slower and will fail if the array contains functions or undefined properties.

let deepCopiedArray = JSON.parse(JSON.stringify(sourceArray));

4. ES6 Spread Syntax

The spread syntax introduced in ES6 provides a concise way to create a shallow copy of an array. It expands the iterable elements into a new array literal.

let copiedArray = [...sourceArray];