Chunking Iterables | JavaScript Techniques

Introduction

In this lab, we will explore the concept of chunking an iterable into smaller arrays of a specified size using JavaScript. We will implement a function that takes in an iterable and a size parameter and returns an iterable of smaller arrays that contain a maximum of size elements each. This technique can be useful for various applications, such as breaking down large datasets into smaller chunks for processing or optimizing network requests by reducing the amount of data transferred at once.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/loops("`Loops`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/data_types -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/arith_ops -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/comp_ops -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/cond_stmts -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/loops -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/obj_manip -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} javascript/spread_rest -.-> lab-28195{{"`Chunking Iterables into Smaller Arrays`"}} end

Chunk Iterable

To chunk an iterable into smaller arrays of a specified size, follow these steps:

Open the Terminal/SSH and type node to start practicing coding.
Use a for...of loop over the given iterable, using Array.prototype.push() to add each new value to the current chunk.
Check if the current chunk is of the desired size using Array.prototype.length and yield the value if it is.
Check the final chunk using Array.prototype.length and yield it if it's non-empty.
Use the following code:

const chunkify = function* (itr, size) {
  let chunk = [];
  for (const v of itr) {
    chunk.push(v);
    if (chunk.length === size) {
      yield chunk;
      chunk = [];
    }
  }
  if (chunk.length) yield chunk;
};

Use this code to test the function:

const x = new Set([1, 2, 1, 3, 4, 1, 2, 5]);
[...chunkify(x, 2)]; // [[1, 2], [3, 4], [5]]

Summary

Congratulations! You have completed the Chunk Iterable lab. You can practice more labs in LabEx to improve your skills.

Chunking Iterables into Smaller Arrays

Introduction

Skills Graph

Chunk Iterable

Summary

Other JavaScript Tutorials you may like