Chunky Monkey Challenge: Splitting Arrays in JavaScript

Introduction

Chunky Monkey is a coding challenge. It may seem a bit complex at first, but don’t worry, you will understand everything after reading this article. In this challenge, you are given a function with two arguments: the first one is an Array (e.g., ['a', 'b', 'c', 'd']), and the second one is a Number (e.g., 2). Our task is to solve this challenge by returning a larger array split into smaller arrays based on the given number (e.g., split the array like [['a', 'b'], ['c', 'd']], since the number is 2, so each split array has 2 elements). You can check these examples:

Examples:

 let array = ['a', 'b', 'c', 'd'];
 let num = 2;
 // output = [['a', 'b'], ['c', 'd']]
                
 let array = [1, 2, 3, 4, 5, 6, 7, 8];
 let num = 3;
 // output = [[1, 2, 3], [4, 5, 6], [7, 8]]

As seen in the examples above, our task is to keep each array element equal to the Number as much as possible. In the second example, the array ([1, 2, 3, 4, 5, 6, 7, 8]) has elements, while the Number (3) is three. The output array has 3 smaller arrays ([[1, 2, 3], [4, 5, 6], [7, 8]]) the first two arrays have 3 elements while the last array has 2. The reason is that there were two values left unmatched. Hopefully, this clears up any doubts and helps you understand the challenge better. If you are still confused, don’t worry; you will get everything once we start coding.

As we know, there are countless ways to solve each coding challenge in every programming language, you can choose the one you find most convenient.

Solution:

 function chunkArrayInGroups(arr, size) {
 let newArr = [];
                
 for(let i = 0; i < arr.length; i+= size) {
   newArr.push(arr.slice(i, i + size))
 }
                
 return newArr;
 }
                
 console.log(chunkArrayInGroups(["a", "b", "c", "d"], 2));
 // output = [ [ 'a', 'b' ], [ 'c', 'd' ] ];

Breaking Up Solution:

Let's break down this entire function for better clarity. The solution requires a clear and concise explanation to avoid confusion

As you can see above, there is a function called chunkArrayInGroups with two arguments: arr and size. In the first argument, our array will be passed, while in the second argument, size will be an integer (number). It's a simple function, Now, let's move on to the solution.

First, we declare a new array and leave it empty for now. Later on, we will push values to it for the final output. Then, we need to start a for loop to access the elements of the array. We initialize the loop with let i = 0 (so the loop starts from the first element of the array where the index is 0), and i < array.length (this sets the loop's stopping point; it will stop after iterating through all of the array's elements). Lastly, we use i += size to control the loop's iteration steps. For example, if the size is 2, the loop iterates in increments of 2 (e.g., 0, 2, 4). Normally, we use i++ to iterate one step at a time (like 0, 1, 2, 3, 4).

Finally, we pushed smaller arrays into newArr using the push method. Within the push method, we utilized the slice() function to split our given array. slice() takes two arguments to complete its operation: the first argument indicates where the splitting will start, and the second argument indicates where the splitting should stop. This method is used both in arrays and strings for splitting purposes. You can observe this in our code: newArr.push(arr.slice(i, i + size)). Lastly, we returned newArr to provide the final output. It's a simple process.