Array map on arrays not updating array

Question

I have an array of arrays

[
  [1,3,5,7,8,8],
  [1,3,5,7,8,8],
  [1,3,5,7,8,8],
  [1,3,5,7,8,8],
  [1,3,5,7,8,8]
]

I am trying to insert a value between each item. So I have this:

let reelList = [
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8]
]

reelList.map(reel => {
  // Adds the separator (works)
  let v = separate(reel, '-')
  console.log(v)
  return v
})

function separate(arr, value) {
  return arr.reduce((result, element, index, array) => {
    result.push(element)
    index < array.length - 1 && result.push(value)
    return result
  }, []);
}

// Logs the new list to the console (doesn't work)
console.log(reelList)

When I log the values after I run the separate function they are separated, however, when I display reelList they are not separated. Why is that?

map doesn't alter the array, it returns a new one (like String#replace). — ibrahim mahrir
– ibrahim mahrir, Commented Nov 28, 2017 at 20:20
They are two different arrays. The one of reduce is the [] you passed as second argument to it and then added values to. — trincot
– trincot, Commented Nov 28, 2017 at 20:20

samanime · Accepted Answer · 2017-11-28 20:26:45Z

4

The map() function returns a new array. It doesn't modify the existing one.

You would need to set the results of reelList.map() to something else.

let reelList = [
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8]
]

const finalResult = reelList.map(reel => {
  // Adds the separator (works)
  let v = separate(reel, '-')
  console.log(v)
  return v
})

function separate(arr, value) {
  return arr.reduce((result, element, index, array) => {
    result.push(element)
    index < array.length - 1 && result.push(value)
    return result
  }, []);
}

// Logs the new list to the console (doesn't work)
console.log(finalResult);

If you want to edit the array in place, instead of using map(), use a forEach() with a callback that has a second and third parameter, which are index and array. Then you can update the array with the new values as you go.

let reelList = [
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8],
  [1, 3, 5, 7, 8, 8]
]

reelList.forEach((reel, index, arr) => {
  // Adds the separator (works)
  let v = separate(reel, '-')
  arr[index] = v;
  console.log(v)
})

function separate(arr, value) {
  return arr.reduce((result, element, index, array) => {
    result.push(element)
    index < array.length - 1 && result.push(value)
    return result
  }, []);
}

// Logs the new list to the console (doesn't work)
console.log(reelList);

edited Nov 28, 2017 at 20:26

answered Nov 28, 2017 at 20:21

samanime

26.8k17 gold badges99 silver badges155 bronze badges

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

1 Comment

samanime Over a year ago

While you generally want to avoid mutations of data, if your specific use-case does make sense to do it, you can use forEach(). I added an updated example.

Nina Scholz · Accepted Answer · 2017-11-28 20:30:11Z

0

You could map a new array with a calculated lenght and take the result of the calculated index ot the dash.

var array = [[1, 3, 5, 7, 8, 8], [1, 3, 5, 7, 8, 8], [1, 3, 5, 7, 8, 8], [1, 3, 5, 7, 8, 8], [1, 3, 5, 7, 8, 8]],
    result = array.map(a => Array.from({ length: a.length * 2 - 1 }, (_, i) => a[i / 2] || '-'));

console.log(result);

answered Nov 28, 2017 at 20:30

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Collectives™ on Stack Overflow

Array map on arrays not updating array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related