0

Following code is a working logic that receives entries which is an object from an API response. What I am currently doing is to assign entry.listedContent to entryOne.id & entryOne.name properties

I heard that this way, I will be modifying the original items from the array (this.entries). I was told that I should be assigning my final value to a different array, so the original is not touched/modified.

Anyone can advise what is the best practice to handle such cases?

 itemList() {
  return this.entries.map((entry) => {
      if (this.type === "selected") {
        entry.listedContent = entry["entryOne.id"] + " - " + entry["entryOne.name"]
      }
     return entry;
  });
},
jfr01
  • 107
  • 1
  • 11
  • does this [answer](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) help? also check out the difference between shallow versus deep copying – tom Sep 06 '22 at 16:13
  • `map` "creates a new array" https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map. Example `const newArr = this.entries.map((entry) => { //code goes here });` – Sarah Sep 06 '22 at 16:14
  • I think this is opinion-based, but I'm not sure. Is the OP asking for opinions on _if_ modifying the original array is a "best practice" (or not,) or how best to not modify it? It's not clear to me. Also, is the original array in fact immutable? Or does the OP want to treat it as immutable? – Matt Morgan Sep 06 '22 at 16:16
  • This depends on the application. Sometimes it's important not to modify the original objects, other times it doesn't matter. It depends on what you're doing with them after. – Barmar Sep 06 '22 at 16:18
  • @Barmar agreed, I feel that the context needs clarification here. – Matt Morgan Sep 06 '22 at 16:20
  • Note that it's not enough to copy the array, you also need to copy the objects, i.e. it needs to be a "deep copy". – Barmar Sep 06 '22 at 16:21
  • 2
    `this.entries.map(entry => this.type == "selected") ? {...entry, listedContent: entry["entryOne.id"] + " - " + entry["entryOne.name"] : {...entry})` – Barmar Sep 06 '22 at 16:23
  • 1
    @Sarah, you are right that map returns a new array. however, you need to be careful to not directly modify the objects passed as a parameter to the callback function. this will alter the original object as well; yap that's basically what Barmar just commented – tom Sep 06 '22 at 16:24
  • @MattMorgan i am trying to prevent modifying the original array (this.entries). I cant assign a const after the return, so looking for the best practice on how to modify the current working code that returns in a separate array, not touching the original one. – jfr01 Sep 06 '22 at 17:30

2 Answers2

1

Array map does create a new array, but the inner objects will have a unique reference,
to avoid modifying the original objects you should recreate them copying over the enumerable properties, an example with the spread operator:

const entries = [{
  listedContent: null,
  id: 1,
  name: 'Alpha'
}];
const type = 'selected';

function itemList() {
  const res = entries.map((entry) => {
    if (type === "selected") {
      return {
        ...entry,
        listedContent: entry.id + " - " + entry.name
      }
    }
    return entry;
  });
  return res;
};

console.log(itemList()); // add results in a new array.
console.log('original entries >>>', entries)
maioman
  • 18,154
  • 4
  • 36
  • 42
0

Array.map() method creates a new array instead of modifying the input array.

Live Demo :

const entries = [{
  listedContent: null,
  id: 1,
  name: 'Alpha'
}];
const type = 'selected';

function itemList() {
  const res = entries.map((entry) => {
      if (type === "selected") {
        entry.listedContent = entry.id + " - " + entry.name
      }
      return entry;
  });
  return res;
};

console.log(entries); // Original array not modified.
console.log(itemList()); // add results in a new array.
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
  • as stated in the comments below the question this solution still modifies the original array, despite returning a new array. – tom Sep 07 '22 at 07:44
  • @tom It's not modifying the original array. I am logging both `original` and `modified` in the above code snippet and you can see the differences. – Debug Diva Sep 07 '22 at 08:56
  • i don't know what SO uses to execute js snippets, maybe it logs the state of objects at a specific point in time (before `itemList()` gets called). if you copy the code to your browser console you'll see that the output of the `console.log` statements will be the same – tom Sep 07 '22 at 09:46
  • see this [SO answer](https://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value) on passing arguments by reference or value – tom Sep 07 '22 at 09:56