Chunking arrays use case0:39
and you need to chunk it into sets of two. And by that, I mean something along these lines. So we'd have an array of arrays where each item is a set of two. And as for a use case, there's plenty. But one that immediately jumps to my mind is on the Laracash home page. If we scroll down to this FeaturedSeries carousel here, those are actually chunked into sets of two. And that's how I get those to line up. So I basically say, give me all of the series, which is a traditional Laravel collection. And then I group them into sets of two. And for each one, I display them like this. And then I just move one to the left a little bit. That's how I handle that. Anyways, if we wanted to implement this, well, of course, you may know that in Laravel, you can reference the chunk method on the collection object. However, with VanillaPHP, you could also reach for array_chunk. So we're going to chunk these items into sets of two.
Manual loop chunking1:19
Laravel, you can reference the chunk method on the collection object. However, with VanillaPHP, you could also reach for array_chunk. So we're going to chunk these items into sets of two. And if I give this all a run in TinkerWell, you'll see, sure enough, I have an array where each item is in sets of two. So now, referring back to the guitar example at the beginning of the video, let's figure out how to become more fluent. Let's try to reproduce this end result in other areas of the fretboard, so to speak, so that we can better understand the language. Now, often our first pass is to reach for a standard loop, something like that, where we ultimately build up a new array, something like results. Okay, so for each item, we're going to build this first array. So we'd say results, but I don't want to hard code 0 because that needs to be dynamic. So we'll call it instead the currentChunkIndex, something like that. And
build this first array. So we'd say results, but I don't want to hard code 0 because that needs to be dynamic. So we'll call it instead the currentChunkIndex, something like that. And each item itself, of course, is an array that we will push to. So we'd have something like this. Okay, but now, yeah, that's not right. So if we were to give this a run, we do have a single item there, but of course it contains all of the letters there because we never increment chunkIndex. Okay, so that's the next step. We need to keep track of the current index, and we could grab it here, but we might also just keep something up here that we increment. After we perform each loop, index goes up by 1. But then you could have a check where you say, well, if the currentIndex is now equal to the number of items we want in each chunk, so now that will be something like chunkCount, and we've decided we want 2 items per chunk. Well, if that now equals the chunkCount,
index is now equal to the number of items we want in each chunk, so now that will be something like chunkCount, and we've decided we want two items per chunk. Well, if that now equals the chunkCount, then we need to move on to the next item. But be a little careful here because your index is zero-based. So if you're dealing with a count, you'd want to subtract by one, which I'm sure you are familiar with. Okay, so now if we've reached the total number of items that we want in this array, well, let's increment chunkIndex to the next one. Then we bring index back to zero because we're starting over for the new array, and then we continue. Okay, so it's not pretty, but I think this will work, and it does. So now we have the exact same thing as we had before. All right, but let's keep playing with this. Let's figure out a different place on the fretboard that we might play this piece of code. Another way that we might calculate the chunkIndex is to take an approach like this.
Reusable chunk function5:39
Now, while we are at it, I think we can inline this. That didn't look horrid to me. Run it once again to be safe, and that works as well. Okay, let's now turn this into a reusable function. php already has array_chunk, so ours will be called chunk. That will accept an array, and then the chunkCount. And I'll paste all of that in. So let's see. This needs to be updated to array. We will ultimately return the results, and now the chunkCount is being passed in. So let's see how that looks. I'll now chunk my items into sets of two, cross our fingers, and that works as well. Let's make sure we can do other sets. How about a set of three? All right, a, b, c, d, e, f. Perfect. So that's cool, but now let's figure out another way we can play this, another position. What if we use, how about array_reduce? array_reduce allows us to reduce an array to a single value, and that single value could be another array. So we could give it the items,
Chunking with array_reduce6:30
another position. What if we use, how about array_reduce? array_reduce allows us to reduce an array to a single value, and that single value could be another array. So we could give it the items, a callback function that will accept the $carry and the $currentValue in that item, and then you can initialize $carry to anything you want. So I know I want to build up an array, so I will initialize that with an array, which means on the first iteration, $carry will be that array, and I can then push to it however I want. So I could say push foo to it every time, and ultimately, if we var_dump the results, and I'll run this in Tinkerwell, oh, spoke too soon. Return the $carry. There we go. We effectively replaced each value with foo, and then we returned that as a new array. So now let's see, what if we took a similar approach, where we save floor, but we need an index, don't we? So maybe we could initialize one, at least that's our first step,
array. So now let's see, what if we took a similar approach, where we save floor, but we need an index, don't we? So maybe we could initialize one, at least that's our first step, and we'll pass that through. Then we could say index divided by the chunkCount. So once again, we're going to do this in the long form and then clean it up. Like so. Just like we did in the previous example. And we'll push the value to it, we'll increment the index, oh, we might need to tweak that, let's see, and then return the carry. Okay, so if I give that a run, yeah, so it's all being pushed here, because even though we increment carry, yeah, you can see, well, if I var_dump the index, and we give this a run, I bet it says zero every single time, even though we're incrementing it. And this is kind of a common trap. Be careful, we're passing index by value, which means you get a new variable each time. Instead, we want to pass by reference, which means,
incrementing it. And this is kind of a common trap. Be careful, we're passing index by value, which means you get a new variable each time. Instead, we want to pass by reference, which means, um, how do I phrase this? You want to point to the same location in memory as what was defined here. And if that's confusing, there's actually a helpful GIF that people often reference. So notice pass by reference versus pass by value. When you pass it by value, you get a new version, and that will be manipulated independently of the original cup. But notice with pass by reference, when you modify one, it's still pointing to the same address or location, and that's kind of what we want here. So we accept the index as a reference, and now you'll notice it increments the way we'd expect. Okay, so if we check our output, we get the exact same thing as before. So if we yet again wrap this in a function, function chunk, chunkCount. And in fact, if we have a function chunk,
expect. Okay, so if we check our output, we get the exact same thing as before. So if we yet again wrap this in a function, chunk, chunkCount. And in fact, if we have a function chunk, the count is more self-explanatory. And I'll place that in, get rid of this. Once again, update this to array, pass through the count, and then ultimately return that. Chunk items into sets of three again, and that works as well. Yeah, and I think maybe that's the best we can do in this example. You know, you could do some cheating, things like that. If we had a tap function, we could probably clean this up and bring this to an arrow function, but we're not going to introduce that. Now, one other thought you might have is, well, can't you use array_map? But probably, let's see. We're going to accept our value, and then we're going to pass through the set of items. That will give us results. So here's our final example that we'll pass through to
Attempting array_map slicing9:53
But probably, let's see. We're going to accept our value, and then we're going to pass through the set of items. That will give us results. So here's our final example that we'll pass through to php artisan tinker there. Now, the problem with array_map is it's going to return a new value for each item in the array that you supply it. But really, we want to build up something like this, where each item is some combination of the full array. So maybe if we took this approach, we could use something like slice, array_slice. We're going to take a slice of those items, and let's start at the beginning and take a total of two. Let's see what you get. Yeah, so notice each item does have a set of two, but it's the exact same two, which is what you'd expect because we hardcoded it. So let's do this yet again. chunk_count is two, and let's pass that through. We can then reference that instead. So we'll still get sets of two, but I could bump that to sets of three. All right, that gets us
would start at the very beginning. But then for the next item in the loop, we would want to start at the second item, which would be the third value in the array because we already got the first two items. And if we go to the next one, you get the idea. We'd start at the fourth. So let's give that a run. A, B, C, D, E, F. So it's right, but we do have some leftover arrays. And if you think about it, that would make sense because we have, what do we have here, six items in this array. And we're using array_map, so it's going to return a new array of six items. One, two, three, four, five, six. So that would be an issue with using array_map. Or at the very least, you would then have to pass it to array_filter. And if you just pass the array, it will filter out falsy values. So that should work, and it does. Again, not necessarily better at all. It's just a different way to solve the problem. So yet again, we wrap this in our chunk function. So notice it's sort
So that should work, and it does. Again, not necessarily better at all. It's just a different way to solve the problem. So yet again, we wrap this in our chunk function. So notice it's sort of like a kata. We're just doing it over and over. We're practicing our keystrokes. We're practicing our workflow. We're practicing moving up and down the programming neck. Yet again, we'll bump this and replace this with the array variable. Whoops. And then finally, we return that. And let's see if that was right. So we run it again with this new shape, and we get sets of three. Now, why don't we inline this as well? It's just going to add one extra array_filter. So I don't think this is necessarily better at all, but it is a different way to solve the problem. But one thing it would allow us to do — let's try this out. Let's inline this index. That'll give us the same output. Yeah. I could then swap this out with a short closure,
But one thing it would allow us to do — let's try this out. Let's inline this index. That'll give us the same output. Yeah. I could then swap this out with a short closure, or an arrow function. There's a lot going on there. One thing we could do is bring this inline like that. Anyways, that solves the problem as well. So I wouldn't keep this particular approach, but notice by playing around with it, it actually made us fluent in four different php array functions: array_filter, array_map, array_slice, array_search. So again, it's sort of like a kata in that regard. And then finally, I'll leave you with the side effect that when you play around with these approaches and you understand better how you would go about chunking items rather than just referencing php's array_chunk function or one of Laravel's chunk methods on the collection instance, once you figure out what exactly is going on there, you can then pretty easily migrate.
Porting chunking to JavaScript14:17
just referencing php's array_chunk function or one of Laravel's chunk methods on the Collection instance, once you figure out what exactly is going on there, you can then pretty easily migrate it to a different language. So for example, let's create a new file here, index.js, and imagine we need to do the exact same thing. I want a function called chunk that accepts some items as well as a chunkCount, and that should return what we expect. Okay, so chunk, and we'll need to set up an array here of items. So A, B, C, D, E, F. All right, so we're going to chunk those items into sets of two, but now we're going to do it with JavaScript. And luckily, we already understand how to solve this problem, so it won't take very far at all. In JavaScript, I could say rather than things like array_filter or array_map, we can use a more object-oriented approach. So we have an array of items. I could map over them. So let's use, we'll start with this approach here. So we'll map
things like array_filter or array_map, we can use a more object-oriented approach. So we have an array of items. I could map over them. So let's use, we'll start with this approach here. So we'll map over them, and that'll give us the item. And with JavaScript, we do get the index when we call map. So that will clean this up a little bit. And then let's see what we did here. Well, we no longer have to do this because we have the index, but we're just going to slice it out. So we'll pass that in for reference, and it's going to be items.slice. We will start with the index times the chunkCount, or I'm sorry, count. And then we want to take the count, although I don't think in JavaScript that's quite right. Let's see. We can return that, and I will, let's do this, console.log, so I can run it here. Okay, so we got the first part, but yeah, all of the remaining ones aren't quite right. And that's actually because with JavaScript, it's a little different.
it gets returned. So that will filter out empty arrays, like you see there. And that solves the problem as well, using effectively the exact same approach that we used in our php example. Mostly the same. And the same would be true if we reached for the reduce example. These solutions are usually portable across languages. Now finally, in JavaScript, I don't want to leave this hanging because somebody will bring it up. Rather than calling filter to filter out the falsy values, which feels kind of hacky, like we're missing something, you could instead use Array.from. So you could do something like return Array.from. How many items do we want in this new array? Well, let's figure it out dynamically. It will be the total number of items, in this case six, divided by the chunk count. So if there's six items divided by the chunk count, then you'll have a total of three items in this array. But what about situations where it's seven
