1
let array = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];

I have this array, I want to copy it to another array after changing one element, but my code does not work out.

array_copy = array.map((element) => {
  if (element.id === 2) {
    element.name = "name changed";
  } 
});

console.log(array_copy);

I am getting this output--

(3) [undefined, undefined, undefined]

I am new to js and self learning it, can u pls help me understand this?

Here is the link of the question Copy javaScript array by changing one element

--I tried to answer . What is wrong with my logic/approach?

Arpan Banerjee
  • 826
  • 12
  • 25

4 Answers4

3

You need to return something from the function you are using for the map-callback

Do this instead:

array_copy = array.map((element) => {
  console.log(element.id);
  if (element.id === 2) {
    element.name = "name changed";
  } 
return element
});

As you are not returning anything from the function, you are getting undefined for each iteration

Daniel Herrero Hernando
  • 312
  • 2
  • 7
  • I was confused with how thew arrow function works in js, for single line of code in method body return statement is optional, but here I had to mention it. Pls correct me if I am wrong. – Arpan Banerjee Apr 25 '20 at 17:31
2

If you don't want to change your source array you have to copy element from the source array and return the copied and modified elements instead.

let array = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];

let array_copy = array.map((element) => {
  let copy_element = Object.assign({}, element)
  if (copy_element.id === 2) {
       copy_element.name = "name changed";
  } 
  return copy_element ;

});

console.log('array_copy', array_copy);

console.log('array',array);
Mikhail Aksenov
  • 944
  • 9
  • 23
  • var numbers = [65, 44, 12, 4]; var newarray = numbers.map((num) => num * 10); console.log(numbers); console.log(newarray); ----- here the main array remains ualtered. Pls tell me whats going on.-- what was the diff bw my code and this piece of code. Seems same. – Arpan Banerjee Apr 25 '20 at 17:43
  • 1
    But numbers are primitives. But `element` in the map function it's a reference to the original element. So you have to think about that when you modify the elements through the iterations. Sometimes it's what you want, sometimes doesn't. – Mikhail Aksenov Apr 25 '20 at 17:52
  • 1
    Hmmmm, yes I understood that. So it works same as Java in this case.I didn t want that behavior in this case. – Arpan Banerjee Apr 25 '20 at 17:53
1

You need to add the return statement otherwise it will be undefined as expected but Array map changes the main array elements so log the main array and see you'll get modified it also.

let array = [
  { id: 1, name: "One" },
  { id: 2, name: "Two" },
  { id: 3, name: "Three" },
];

array_copy = array.map((element) => {
  if (element.id === 2) {
    element.name = "name changed";
  } 
  return element;
});

console.log(array,array_copy);
A l w a y s S u n n y
  • 36,497
  • 8
  • 60
  • 103
  • yes it works, but method definition says map() does not change the original array. Pls visit the link for method description--[ https://www.w3schools.com/jsref/jsref_map.asp ] – Arpan Banerjee Apr 25 '20 at 17:26
  • Yes, i said that it works, but I want to know how, If u visit the link and see the examples there the main array remains unaltered – Arpan Banerjee Apr 25 '20 at 17:36
  • var numbers = [65, 44, 12, 4]; var newarray = numbers.map((num) => num * 10); console.log(numbers); console.log(newarray); here the main array remains ualtered. Pls tell me whats going on. – Arpan Banerjee Apr 25 '20 at 17:41
  • Does this has something to do with primitive datatypes and objects?I am from java background so I am trying to compare and learn js. Pls help me understand this. – Arpan Banerjee Apr 25 '20 at 17:49
  • 1
    @ArpanBanerjee actually you're not modifying main array with map, you're modifying internal objects of it. See https://stackoverflow.com/a/35922654/1138192 – A l w a y s S u n n y Apr 25 '20 at 17:56
1

You are missing the return statement, thats why you getting undefined.

this is the correct code

array_copy = array.map((element) => {
  console.log(element.id);
  if (element.id === 2) {
    element.name = "name changed";
  } 
return element;
});

console.log(array_copy);
Mohammad Manzoor Alam
  • 101
  • 3
  • Yes its working, But I have one doubt- as mentioned in one of the answers that the map() alters the original array, and surprsingly it is doing so, but when i look at how the `map()` works online , there main array remains unaltered. – Arpan Banerjee Apr 25 '20 at 17:35
  • 1
    Map is pure function, Its alway return a new array. here is link for more details - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map – Mohammad Manzoor Alam Apr 25 '20 at 17:39