Replacing Javascript Array elements with element from other array

Question

I have the following simple code, working with Java Array

  var fruits = [["Banana", "Orange", "Apple", "Mango"]];
  var names  =  ["Adam", "Emma", "Joe", "David"];                
  var newArray=[];

  for (var i = 0 ; i < 4 ; i++){      
    newArray[i] = fruits[0];    // Copy fruits[] into newArray[] 
    newArray[i][1] = names[i];  // Then replace the 2nd element with names[]    
  }

The desire outcome is this...

newArray[0] = ["Banana", "Adam" , "Apple", "Mango"]
newArray[1] = ["Banana", "Emma" , "Apple", "Mango"]
newArray[2] = ["Banana", "Joe"  , "Apple", "Mango"]
newArray[3] = ["Banana", "David", "Apple", "Mango"]

However I get this final result and can't work out why...

newArray[0] = ["Banana", "David" , "Apple", "Mango"]
newArray[1] = ["Banana", "David" , "Apple", "Mango"]
newArray[2] = ["Banana", "David" , "Apple", "Mango"]
newArray[3] = ["Banana", "David" , "Apple", "Mango"]

I'm only very new to JS so figure this could be down to something simple but at stage it's a brick wall that can't be pass. Your help would be greatly appreciated.

Java is not JavaScript - it's important to be clear about the distinction. — zfrisch
– zfrisch, Commented Nov 26, 2018 at 0:19

CertainPerformance · Accepted Answer · 2018-11-26 01:36:20Z

1

The problem is:

newArray[i] = fruits[0];    // Copy fruits[] into newArray[]

newArray[i] is not a copy of the first item in fruits - rather, it's just another reference to the same object in memory. So, when you change newArray[i], you also change fruits[0], and you also change any other variables which hold the same reference to fruits[0] - that is, every item in newArray.

Explicitly clone fruits[0] on each iteration instead:

var fruits = [
  ["Banana", "Orange", "Apple", "Mango"]
];
var names = ["Adam", "Emma", "Joe", "David"];
var newArray = [];

for (var i = 0; i < 4; i++) {
  newArray[i] = [...fruits[0]];
  newArray[i][1] = names[i];
}
console.log(newArray);

[...fruits[0]] is spread syntax - it creates a shallow copy of fruits[0].

You might consider using .map instead though, .map is a bit more appropriate when you're creating a new array from every element of another:

var fruits = [
  ["Banana", "Orange", "Apple", "Mango"]
];
var names = ["Adam", "Emma", "Joe", "David"];

const newArray = names.map((name) => {
  const arr = [...fruits[0]];
  arr[1] = name;
  return arr;
});
console.log(newArray);

Alternatively, without spread, use slice:

var fruits = [
  ["Banana", "Orange", "Apple", "Mango"]
];
var names = ["Adam", "Emma", "Joe", "David"];

const newArray = names.map((name) => {
  const arr = fruits[0].slice();
  arr[1] = name;
  return arr;
});
console.log(newArray);

edited Nov 26, 2018 at 1:36

answered Nov 26, 2018 at 0:18

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

3 Comments

user1488934 Over a year ago

Thanks for that, unfortunately [...fruits[0]] gives off syntax error at my, I should note I'm running this through Google Apps JavaScript so perhaps spread syntax is not yet supported.

CertainPerformance Over a year ago

You should make it clear what limitations you have in your question. You can use slice instead of spread syntax, see edit (or you can use Babel to transpile down to ES5 automatically, allowing you to write in the latest and greatest version of the language, it's great with larger projects)

user1488934 Over a year ago

I ended up using your example but fruits[0].slice() instead of [...fruits[0]]

Collectives™ on Stack Overflow

Replacing Javascript Array elements with element from other array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related