Not sure how this steamroller solution works. (Recursion)

JavaScript
1

This is just solution 2 provided. Its very simple and uses recursion but even after carefully going through the explanation I still don’t understand it.
Can someone give me a step by step run through of an example?


function steamrollArray(arr) {
var flat = [].concat(...arr);
return flat.some(Array.isArray) ? steamrollArray(flat) : flat;
}

console.log(steamrollArray([1, [2], [3, [[4]]]]));

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36.

Challenge: Steamroller

Link to the challenge:

2

Just because the solution is small doesn’t mean it is simple. There is a lot of information packed into that function!

function steamrollArray(arr) {
  let flat = [].concat(...arr); // This is the magic here
  if (flat.some(Array.isArray)) {
    return steamrollArray(flat);
  } else {
    return flat;
  }
}

console.log(steamrollArray([1, [2], [3, [[4]]]]));

// What does this do?
console.log([].concat([1], [2], [3]);

// And how about this
console.log(...[[1], [2], [3]]);
1 Like
3

I guess simple wasn’t the right word. I really meant concise.

So when you recursively call the function again on “flat” does it copy the outermost array element into the new array? Like it will copy 1, then 2, then 3, etc?
This is the part I don’t understand.

4

Do you understand what this concat part is doing?

1 Like
5 
console.log([].concat([1], [2], [3]));
[ 1, 2, 3 ]

console.log(...[[1], [2], [3]]);
[ 1 ] [ 2 ] [ 3 ]

It is removing the outer array and once there is just one layer it can add the element to the other array?
Not sure if I explained that right.

6

Sort of. The concat method takes one or more arrays or values and adds their entries to the base array ([] in this function).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

So

console.log([].concat([1, [2], [3, [[4]]]]));
// [1, [2], [3, [[4]]]]

just copies the second array into the first (empty) array, but

console.log([].concat(...[1, [2], [3, [[4]]]]));
// [1, 2, 3, [[4]]]

copies the top level entries of sub-arrays into the first array.
Basically the combo of spread + concat removes one level of depth from nested arrays.

1 Like
7

Okay that is starting to make more sense.
The spread operator + concat copies the top level subarrays?

I also think I was getting confused with this particular example array cause the first element was just a digit, the second element is a single element array and then the third element is a nested array. It kind of threw me off!

8

Yeah, the mixed levels of nesting make this challenge tricky. This approach lifts everything up to the top level by peeling away levels, one by one.

1 Like
9

Just to double check…
When the array is recursively called after the first check:

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

and is passed through the steamrollArray function a second time would it look like this?

[1, 2, 3, [4]]

and then it would get called again and finally look like this?

[1, 2, 3, 4]
10

Yep, I believe that’s what will happen.

1 Like
11

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