The Scenario

I was in the process of adding a new feature to our Angular-based web application. My approach involved considering the lifecycle of this feature. At the outset, I needed to make an HTTP request to fetch an array of data from one of our API endpoints. From that point, I had two critical tasks to complete with the retrieved data.

First, I needed to create a duplicate of the array and retain it for future reference. This duplicate was intended to serve as the "default" data, allowing the feature to revert to it if users chose to cancel their actions or discard changes.

Second, I had to generate another copy of the data, which would act as the "source of truth" for the feature. This copy would be the one that users interacted with, modifying it before eventually submitting it back to the server via a POST request.

It was crucial for me to ensure that these two copies of the data array were independent. I didn't want any changes made to the second copy to affect the first. While this seems straightforward, I made a simple yet significant mistake.

My initial approach was as follows:

let defaultCopy = originalArray;

let copyToUpdate = originalArray;

This seemed clear-cut, right? However, I quickly realized the flaw when I tried to modify the second copy by adding a new field to each object in the array.

I believed I was only adding the new isSelected field to the second copy, but upon checking both copies, I found that the isSelected field had inadvertently been added to both. Both copies were identical, which raised the question: how could this happen?

Understanding Pass By Reference versus Pass By Value

This situation can be explained through the concepts of pass by value and pass by reference. To clarify:

• Pass By Value means that when a variable is sent to a function, a copy of that variable's memory location and its contents are created.
• Pass By Reference means that when a variable is passed to a function, a reference to the original variable's memory address is copied, allowing changes to affect the original variable.

To summarize, pass by value ensures that modifications to the copy do not impact the original variable, while pass by reference allows changes to propagate back to the original.

Now, is JavaScript pass by value or pass by reference? The answer is somewhat nuanced.

JavaScript is primarily considered a "pass by value" language. When you pass a variable or create a copy, JavaScript generates a new copy of that variable's contents. This behavior is clear with primitive data types like strings and numbers.

For example:

let num = 42;

let copyNum = num; // copyNum is now a separate copy

copyNum = 100; // original num remains 42

However, things become more complex with objects. In JavaScript, objects are collections of related data or functionality, which can include various data types. Arrays, which are a specific kind of object, are also used to group multiple items under a single variable name.

The key takeaway is that objects hold references to their contained items. Therefore, when copying an object, JavaScript follows pass by value but essentially duplicates the references, leading to a scenario similar to pass by reference.

Back to the Scenario

Returning to my original situation, I realized my mistake stemmed from how I copied the objects.

My initial code:

let defaultCopy = originalArray;

let copyToUpdate = originalArray;

Resulted in both copies pointing to the same objects in memory, causing changes in the second array to reflect in the first.

A Better Solution

So, what’s a more effective method? Instead of using the = operator, I could use the map() method to create new objects for both copies. By applying the spread operator, I could populate these new objects with the original elements' data. Here's how to implement this:

let defaultCopy = originalArray.map(item => ({ ...item }));

let copyToUpdate = originalArray.map(item => ({ ...item, isSelected: false }));

This way, defaultCopy would remain unchanged while copyToUpdate would include the new field, achieving the desired outcome where the two copies are distinct.

One Last Note

A quick warning: Avoid simply using map() without creating new objects. Doing so will lead to unintended side effects since the original objects will be modified.

Conclusion

The takeaway here is to exercise caution when copying arrays in JavaScript. The method of copying should vary based on the array's contents, especially since JavaScript allows arrays to contain diverse data types. Additionally, it's essential to understand how JavaScript array functions operate to prevent mistakes similar to mine.

Learn more about JavaScript objects in depth with this informative video.

Quickly grasp the concept of JavaScript objects in just 7 minutes with this concise tutorial.