An algorithm a day : Create a two-dimensional array from a single array in Javascript

Image source

Today’s algorithm is one of freeCodeCamp’s challenges. You can find it in the Basic Algorithm Scripting chapter. For some reason they have nicknamed it chunky monkey..?!

We have to write a function that splits an array into groups. These groups are the length of a given size. Then we have to return these split groups as a two-dimensional array. The function takes two arguments. The first argument is the given array and the second argument is the given size.

So for example these two arguments:

var array = ["My", "name", "is", "Marina", "Shemesh", "and", "I", "live", "in", "Israel"];
var size = 2;

Should give us this two-dimension array:

[ 
[ 'My', 'name' ],   [ 'is', 'Marina' ],
[ 'Shemesh', 'and' ],   [ 'I', 'live' ], 
[ 'in', 'Israel' ]
 ]

So “yalla” (as they say here in Israel). Let’s start!

Let’s first think a bit about what we know and should consider:

1. Consider it a clue that you have to create a new array, whenever you realize that your original array is going to be changed in any way. We will use this array to store the split groups that we have created.
2. And to place any kind of information inside this new empty array, we also know that at some point we are going to have to use the JavaScript push method.
3. Something else to take into account, is that we are most likely going to use a for loop to iterate over our original array to split it into the smaller groups.
4. We will use the JavaScript slice method to do the actual splitting into groups. In this case we will be using the arr.slice(begin, end) syntax. begin tells us where on the index the slice should start and end indicates where on the index the slice should stop. Note that slice cuts up to but does not include end.

So we know that our function is going to look more or less something like this:

function splitInGroups(array, size){
  const newArr = []; //new array to hold the sliced groups
  
  for( var i = 0 ; i < array.length; i+=size){//increment in size
    newArr.push(array.slice(i, size )); //push the sliced groups
    
  }
return newArr; 
  
}

Note that we are not using the regular for loop syntax that looks like this:

for( var i = 0 ; i < array.length; i++){
//do something
}

The for loop starts at zero at usual, but then we want it to increment by size and not index each time as its goes through the loop. As usual the iteration will finally stop at array.length.

To increment in size we are using i+=size.

So let’s test the function in the console or in repl.it.

var array = ["My", "name", "is", "Marina", "Shemesh", "and", "I", "live", "in", "Israel"];
var size = 2;
function splitInGroups (array, size){
  var newArr = []; 
  
  for( var i = 0 ; i < array.length; i+=size){
    newArr.push(array.slice(i, size)); 
  }
   return newArr;  
}
splitInGroups(array, size);
//////
  [ [ 'My', 'name' ], [], [], [], [] ]

We are using the loop to generate numbers that we use as indications as to where to slice the array. size will only generate one number and thus only split the array once. We will have to use i + size to continue slicing our original array.

console.log() is one of a developer’s best friends, so let’s console.log size, and i + size to compare the two options.

Remember that return signals that the function has completed and it will exit the function. Our console.log()’s will have to be placed before thereturn. We will use the syntax console.log("size: ", size); to make it easier to read.

var array = ["My", "name", "is", "Marina", "Shemesh", "and", "I", "live", "in", "Israel"];
var size = 2;
function splitInGroups (array, size){
  var newArr = []; 
  
  for( var i = 0 ; i < array.length; i+=size){
    newArr.push(array.slice(i, i + size)); 
    // console.log("size :", size);
       console.log("i + size :", i + size);
  }
return newArr;  
}
splitInGroups(array, size);
//i + size : 2
i + size : 4
i + size : 6
i + size : 8
i + size : 10
=> [ [ 'My', 'name' ],
  [ 'is', 'Marina' ],
  [ 'Shemesh', 'and' ],
  [ 'I', 'live' ],
  [ 'in', 'Israel' ] ]

Note that i + size slice the original array in continuous groups of two. And yeah, we got the two-dimensional array we were looking for! In comparison size only slice the original array once. This is how it looks when you use it:

var array = ["My", "name", "is", "Marina", "Shemesh", "and", "I", "live", "in", "Israel"];
var size = 2;
function splitInGroups (array, size){
  var newArr = []; 
  
  for( var i = 0 ; i < array.length; i+=size){
    newArr.push(array.slice(i, size)); 
    console.log("size :", size);
       // console.log("i + size :", i + size);
  }
return newArr;  
}
splitInGroups(array, size);
// size : 2
size : 2
size : 2
size : 2
size : 2
=> [ [ 'My', 'name' ], [], [], [], [] ]

Well, it looks as if we have conquered old chunky monkey, but let’s use different parameters to double check that everything does indeed works as it should.

var array = [0, 1, 2, 3, 4, 5]; and var size = 3; should return

[[0, 1, 2], [3, 4, 5]] and

var array =[0, 1, 2, 3, 4, 5, 6, 7, 8] and var size = 4;should return
[[0, 1, 2, 3], [4, 5, 6, 7], [8]]

Here are two links to some more “An algorithm a day” articles:

An algorithm a day: Palindrome check in JavaScript

An algorithm a day : Calculate the factorial of a number