Intermediate Algorithm Scripting - Steamroller -- Understanding the spread operator

JavaScript
1

Tell us what’s happening:

Hello everyone. First post. I’m a little confused as to why the spread operator is needed, or works the way it does in solution 1:

My code (similar to solution 1):

function steamrollArray(arr) {
  let dataFromArr = [];
  for (let x = 0; x < arr.length; x++) {
    if (Array.isArray(arr[x])) {
      dataFromArr.push(...steamrollArray(arr[x]));  // <-- here
    } else {
      dataFromArr.push(arr[x]);
    }
  }
  return dataFromArr; 
}
steamrollArray([1, [2], [3, [[4]]]]);

As far as I understand the spread operator, it will copy all elements in the object or array referenced. Okay. However, since I am recursively drilling down to the element, why does simply pushing the element into a different array take all it’s nesting with it? Shouldn’t it just be that element?

current output:
[ 1, 2, 3, 4 ]
without spread operator:
[ 1, [ 2 ], [ 3, [ [Object] ] ] ]

I guess that’s just how it is?

Thanks for any help.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0

Challenge: Intermediate Algorithm Scripting - Steamroller

Link to the challenge:

2

push takes a variable number of arguments, and adds them to the end of an array, one after another. If there is one value, it adds one. If there are two it adds two. And so on.

I’ve highlighted the key word here: it’s elements, plural. It’s the items in the array, one by one. It’s not the array itself.

const nums = [1,2,3];
const moreNums = [4,5];

nums.push(moreNums)
// Same as nums.push([4,5])

console.log(nums)
// [1,2,3,[4,5]]

versus

const nums = [1,2,3];
const moreNums = [4,5];

nums.push(...moreNums)
// Same as nums.push(4,5)

console.log(nums)
// [1,2,3,4,5]

First example pushes an array (a single value) into another array.

Second example pushes the values stored in an array into another array, one by one.

1 Like
4

Thanks for the help with understanding this. I still don’t quite get why it needs to be used in the recursive call in particular, and not with in the return, but I will try to map it out on paper and maybe it’ll make sense :).

5

What you have is [potentially] nested arrays.

So for example, this is an array containingtwo items:

[1, [2,[3,[4]]]]

You want to push any elements that are not arrays to a new array.

If an element is an array, you want to drill into it and push any element that are not arrays to that new array.

If any one of those elementsis an array…etc etc.

So you go through the array, and for every element you check if the element is an array or not:

  1. if it isn’t an array, just push the value and carry on.
  2. if it is an array, push the items in the array (this is where you use the spread operator). Then repeat the process for those items (if element isn’t an array, push as-is. If it is, spread to get the values, repeat the process).

So for input [1, [2], [3, [[4]]]].

arr == [1, [2], [3, [[4]]]]
arr.length == 3
dataFromArr == []

arr[0] == 1, not an array
dataFromArray == [1]

arr[1] == [2], is an array

    {run steamroller with this array}
    arr == [2]
    arr.length = 1
    dataFromArr == []

    arr[0] == 2, not an array
    dataFromArray == [2]

    return [2]

arr[1] == ...[2]
arr[1] == 2, not an array
dataFromArray == [1, 2]

arr[2] == [3, [[4]]], is an array

    {run steamroller with this array}
    arr == [3, [[4]]]
    arr.length = 2
    dataFromArr == []

    arr[0] == 3, not an array
    dataFromArray == [3]

    arr[1] == [[4]], is an array

      {run steamroller with this array}
      arr == [[4]]
      arr.length = 1
      dataFromArr == []

      arr[0] == [4], is an array

        {run steamroller with this array}
        arr == [4]
        arr.length = 1
        dataFromArr == []

        arr[0] == 4, not an array
        dataFromArray == [4]

        return [4]

      arr[0] == ...[4]
      arr[0] == 4, not an array
      dataFromArray == [4]
      
      return [4]

    arr[1] == ...[4]
    arr[1] == 4, not an array
    dataFromArray == [3, 4]

    return [3, 4]

  arr[2] == ...[3, 4]
  arr[2] == 3, 4, not an array
  dataFromArray == [1,2,3,4]

return [1,2,3,4]
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.