Let's solve freeCodeCamp's basic algorithm scripting challenge, 'Chunky Monkey'.
Starter Code
function chunkArrayInGroups(arr, size) {
return arr;
}
chunkArrayInGroups(["a", "b", "c", "d"], 2);
Instructions
Write a function that splits an array (first argument) into groups the length of size
(second argument) and returns them as a two-dimensional array.
Tests
chunkArrayInGroups(["a", "b", "c", "d"], 2) should return [["a", "b"], ["c", "d"]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3) should return [[0, 1, 2], [3, 4, 5]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2) should return [[0, 1], [2, 3], [4, 5]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4) should return [[0, 1, 2, 3], [4, 5]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3) should return [[0, 1, 2], [3, 4, 5], [6]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4) should return [[0, 1, 2, 3], [4, 5, 6, 7], [8]].
chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2) should return [[0, 1], [2, 3], [4, 5], [6, 7], [8]].
Our Approach
Read everything first. Read the instructions clearly, read the starter code we're given, and read the tests and understand what has to be returned.
- The function takes two arguments,
arr
being an array andsize
being a number. - We need to evaluate
size
and create sub-arrays with a length ofsize
. - We need to return a two-dimensional array.
Now that we understand what we are given and what we want to output, let's see how we can solve this.
Our plan of action will definitely involving a loop of arr
. We need to figure out how and when to split into a sub-array.
From previous challenges, we know that splice()
method can alter our arr
and return a new array.
Just a quick reminder of how splice()
works:
"The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place."
// Let's delete 3, 4
[1, 2, 3, 4].splice(2, 2)
Going to 2nd index and removing 2 items
[3, 4]
Since splice()
returns an array, we can save it with a variable, then insert it back into arr
.
We have a better idea on slicing now, we can create our for loop but how should we call slice()
?
for (let i = 0; i < arr.length; i++) {
let toSplice = arr.splice(i, size)
...
}
We will call splice with splice(i, size)
as size is the value of how big our new arrays should be.
Taking a test case for example:
chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3) should return [[0, 1, 2], [3, 4, 5]
for (let i = 0; i < arr.length; i++) {
let toSplice = arr.splice(i, size)
...
}
First loop:
i = 0
size = 3
toSplice = [0, 1, 2]
arr = [3, 4, 5]
Second loop:
i = 1
size = 3
toSplice = [4, 5]
arr = [3]
So, we are on the right track but on the second loop, it starts to take the wrong direction.
Another Array method will be of much use now, unshift()
.
"The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array."
We want to splice, then unshift.
arr.unshift(toSplice);
It will add the new array to the front of arr
.
Once we add unshift()
, our first loop will look like the following:
chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3) should return [[0, 1, 2], [3, 4, 5]
for (let i = 0; i < arr.length; i++) {
let toSplice = arr.splice(i, size);
arr.unshift(toSplice);
}
First loop:
i = 0
size = 3
toSplice = [0, 1, 2]
arr = [[0, 1, 2], 3, 4, 5]
I would call this sucessful. We are slowly creating out desired 2D array.
Our second loop would look like:
Second loop:
i = 1
size = 3
toSplice = [3, 4, 5]
arr = [ [ 3, 4, 5 ], [ 0, 1, 2 ] ]
The only issue is the sub-arrays are in reverse order.
We have another method we can use, reverse()
.
[[ 3, 4, 5 ], [ 0, 1, 2 ] ].reverse()
Result: [[0, 1, 2], [3, 4, 5]]
Always make sure to return!
Our Solution [SPOILER: CONTAINS ANSWER]
function chunkArrayInGroups(arr, size) {
for (let i = 0; i < arr.length; i++) {
let toSplice = arr.splice(i, size);
arr.unshift(toSplice);
}
return arr.reverse();
}
Links & Resources
'Chunky Monkey' Challenge on fCC
Thank you for reading!
Top comments (2)
Another way:
Nice, more modern approach!