Lodash Library .chunk() - step by step

Hi guys,

I stuck in the Re-creating the Lodash Library - .chunk() method. Can anyone explain me step by step the following piece of code? It’s the solution given by the Codecademy expert. I particulary don’t get the loop condition. I’ll be very grateful for your help!!

_ = {

chunk(array, size) {
if (size === undefined) {
size = 1;
}
let arrayChunks = ;
for (let i = 0; i < array.length; i += size) {
let arrayChunk = array.slice(i,i + size);
arrayChunks.push(arrayChunk);
}
return arrayChunks
}
};

Your code:

_ = {

    chunk(array, size) {
        if (size === undefined) {
            size = 1;
        }
        let arrayChunks = ;
        for (let i = 0; i < array.length; i += size) {
            let arrayChunk = array.slice(i, i + size);
            arrayChunks.push(arrayChunk);
        }
        return arrayChunks
    }
};

Reading the Documentation: What is this supposed to do?

From the Lodash Documentation

[.chunk()] Creates an array of elements split into groups the length of size . If array can’t be split evenly, the final chunk will be the remaining elements.

It takes arguments array and size where array is the array to process and size is the length of each chunk (with a default value of 1).

Checking Default Value

The first thing that needs to be done in our chunk() function is to check if size is defined, and if it isn’t, set it to 1 (which, per the documentation, is the default value). In the code you’ve provided, this is accomplished with the following conditional statement:

if (size === undefined) {
    size = 1;
}

By checking if size is undefined, the function is able to assign a value to it in the case it does not already exist. We can now use size as if it were defined in the function call normally: .chunk(array,1).

While this code works just fine to assign a default value, it is also possible to use JavaScript’s built-in default parameter functionality to do so in shorter form.

Actually Doing Something: The Loop

The goal of this function is to take an array of Objects and to “chunk” the values by a particular size. So; every size Objects are chunked together and pushed into our resultant array. In the code you’ve provided, the logic is as follows:

//Create an empty array to store our chunks
let arrayChunks = ;
//For each chunk of Objects in the original array...
for (let i = 0; i < array.length; i += size) {
    //This particular chunk is from the current position (i)
    //to the end of this chunk (i+size)
    let arrayChunk = array.slice(i, i + size);
    //Add this chunk to our array of chunks
    arrayChunks.push(arrayChunk);
}

In terms of “what does my loop do”, the highest level answer is: It goes through each chunk and adds it to the “master” array of chunks. It accomplishes this by slicing the original array by size number of indices (indexes) and pushing the result to the chunks array. To do this, it makes use of JavaScript’s Array.slice() function… When iterating over each chunk, it starts from i, the start of the current chunk, and ends at i+size, the end of the current chunk (regardless of chunk size).

Of concern now is handling the case when a chunk is not a full chunk (for example, the chunk size is 3, but there are only 2 items available in the chunk). Fortunately, there’s not a whole lot of thought that needs to be put into this; our function is safe to use already because, per the Array.slice() documentation:

If end is greater than the length of the sequence, slice extracts through to the end of the sequence (arr.length ).

In the case where we run out of data, the final slice will be the “remaining elements”, exactly as Lodash intended:

If array can’t be split evenly, the final chunk will be the remaining elements.

What to do with the results?

By this point in the code, there is only one statement left:

return arrayChunks;

We have already completed the task, and arrayChunks holds the chunked values from array, so it’s time to give that back to the function caller: We return the chunked array for use.

1 Like