Reference Map

  • creates a new array from calling a function for every array element, this is a shallow copy.
  • BUT it still references the original sauce so changes made to this will be reflected in the new array.
  • This can be combatted by creating a copy without references: const newArr = [...origArr]

  • W3Schools Documentation Array Map

Example - None just see code
WDS Video on this Hook
fetch("https://jsonplaceholder.typicode.com/todos") .then((response) => response.json()) .then((todos) => { // This will mutate the original const newArr = todos.map((a, i) => { a.title = `Revised title ${i}`; return a; }); todos[1].title = "test test New"; todos.shift(); console.log(todos); console.log(newArr); // This Does Not mutate the original const newArr = todos.map((a, i) => ({...a, title: `Revised title ${i}`})); todos[1].title = "test test New"; todos.shift(); console.log(todos); console.log(newArr); });