Recursion solution

JavaScript
1

Tell us what’s happening:
I got a basic solution. Then, I was staring at other solutions and I couldn’t completely get how the recursion solution works:

  1. the first time recursion is used (to call chunkArrayInGroups), arr.slice(size) is used (where size is 2, I guess) as the first new argument of; then size comes as the new second argument: it shouldn’t be 2, again? (but it should be 4, so something can be concat to the first slice, right?)

  2. when I analyzed the program in a debugger I saw that arr was [2, 3, 4, 5] at the first slice, as It would had been spliced and not sliced, so to speak… so, I missing something

Could you please help to solve this questions?

function chunkArrayInGroups(arr, size) {
  if (arr.length <= size) {
    return [arr];
  } else {
    return [arr.slice(0, size)].concat(
      chunkArrayInGroups(arr.slice(size), size)
    );
  }
}

console.log(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)); // [[0, 1], [2, 3], [4, 5]]

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 OPR/63.0.3368.107.

Challenge: Chunky Monkey

Link to the challenge:

2

Hi!

I’ll do my best.

The second argument is always 2. If you watch (see at the bottom) the value You’ll see that it never changes. The idea is to split the array in specific chunk sizes (2, in this case), hence it shouldn’t change.

That’s right. That’s the expected result :slight_smile:.

Maybe this exercise will help You:

1st Iteration:

// Remember that slice doesn't modify the array as splice does.
arr.slice(0, size) = [0, 1]

// returned value (the one that contains the chunks):
[ [ 0, 1 ] ] // The returned array is different than the arr

// call to chunkArrayInGroups:
arr = [ 2, 3, 4, 5 ]
size = 2

// 2nd iteration:

arr = [ 2, 3, 4, 5 ]
arr.slice(0, size) = [ 2, 3 ]

// returned value (the one that contains the chunks):
// The returned array is concatenated to the result of the iteration
[ [ 0, 1 ], [ 2, 3 ] ] // The returned array is different than the arr

call to chunkArrayInGroups:
arr = [ 4, 5 ]
size = 2

// 3rd iteration:

arr = [ 4, 5 ]
arr.slice(0, size) = [ 4, 5 ]

// returned value:
[ [ 0, 1 ], [ 2, 3 ], [ 4, 5 ] ]

// call to chunkArrayInGroups:
arr = []
size = 2

A watcher is used to track a variable value and its changes. You could use a console.log to track the values of a variable, but You could also track it using the developer tools debugger.

1 Like
3

I know I’m missing something… Having said that:
if arr is not modified (because we’re using slice), so it always is [0, 1, 2, 3, 4, 5 ]: why arr becomes [ 2, 3, 4, 5 ] and then [ 4, 5 ] ? …It is like we were temporally creating two arr

4

…It is like we were temporally creating two arr

Yes! That’s the thing :slight_smile:!

Instead of modifying the array, the script is passing chunks of it on each iteration, creating a temporary, smaller, array.

If array is [0, 1, 2, 3] and size is 2, then arr.slice(size) equals [2, 3], which creates a new, temporary, array.

For example, the concatenation is being passed the first size (two, in this case) elements of the array on each iteration.

Then the call to the iteration function is passed all the elements after the first size elements of it and the size parameter without modification.

If there are less than size elements, then all the remaining elements are inserted into another array and returned, which then gets concatenated to the resulting array.

Let me know if this helps :grin:

5

Yeah, It helps.
I think the following function is nearby:

function chunkArrayInGroups(arr, size) {
  let tempArray = [];
  while (arr.length) {
    tempArray.push(arr.slice(0, size));
    arr.splice(0,size); 
  }
  return tempArray;
}

but the recursion solutions takes 2 steps less.
by the way, where are you from?

6

Yes, it behaves like recursive a function, but for certain problems a loop just does not work. Recursive functions are useful, for example, when You need to iterate an array of objects that need to be sent to a server one by one, and you need to do something with each response (it’s a simplification of something I had to do). However, most of the time, a recursive function can be replaced by a simple loop.

I’m from Chile :slight_smile:.