Скачать или смотреть How to Prevent Duplicated Values When Pushing Objects in JavaScript

Discover why you are seeing duplicated values when pushing objects in a JavaScript for loop and learn how to solve this problem effectively.
---
This video is based on the question https://stackoverflow.com/q/67500551/ asked by the user 'B.T' ( https://stackoverflow.com/u/5164915/ ) and on the answer https://stackoverflow.com/a/67500655/ provided by the user 'Felix Kling' ( https://stackoverflow.com/u/218196/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Javascript, pushing object in for loop result in duplicated value

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Prevent Duplicated Values When Pushing Objects in JavaScript

When coding in JavaScript, especially when working with objects within loops, developers often encounter unexpected behavior, such as duplicated values being pushed into an array. One common scenario arises when iterating over an array of names and attempting to assign these names to objects. In this guide, we will delve into the problem of how a single object reference can lead to duplicated values and provide a clear solution.

The Problem

Imagine you have an array of controller names and you want to create an array of objects that hold additional information, such as prices and comments, based on those names. A naive approach can lead to issues due to how objects are referenced in JavaScript. Let's look at the original code snippet:

[[See Video to Reveal this Text or Code Snippet]]

Console Output

Executing this code would surprisingly yield:

[[See Video to Reveal this Text or Code Snippet]]

Why Does This Happen?

The root cause of the problem lies in the way objects are referenced in JavaScript. In the original code, you are defining a single object steval and reusing this reference throughout the loop. When you change the name property of eval (which is pointing to steval), it changes for all instances since they're all actually referring to the same object. Consequently, when you push eval into evals, they're all the same object with the last assigned name.

The Solution

To avoid duplicating values, you need to create a new object for each iteration of the loop instead of reusing the same reference. Here’s how to correctly implement it:

Creating a New Object Inside the Loop

Here’s a revised version of the loop that correctly creates new objects:

[[See Video to Reveal this Text or Code Snippet]]

Using Array.prototype.map for Efficiency

Alternatively, you can further simplify your code using the map function, which creates a new array by applying a function to each element of the original array:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By creating new objects in each iteration, you ensure that each entry in the evals array is unique, thereby preventing duplicated values. Both the loop and map approach clearly articulate how to avoid the pitfalls of object references in JavaScript, ensuring your code behaves as expected.

Now next time you're pushing objects in a loop, you'll avoid the frustrating issue of duplicated values! Happy coding!