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?

Improve this question

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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.
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);

Improve this answer

3 Comments

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.
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.
Hmmmm, yes I understood that. So it works same as Java in this case.I didn t want that behavior in this case.
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);
Improve this answer

2 Comments

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.
Map is pure function, Its alway return a new array. here is link for more details - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
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);

Improve this answer

5 Comments

yes it works, but method definition says map() does not change the original array. Pls visit the link for method description--[ w3schools.com/jsref/jsref_map.asp ]
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
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.
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.
@ArpanBanerjee actually you're not modifying main array with map, you're modifying internal objects of it. See stackoverflow.com/a/35922654/1138192

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.