How to Split an Array Into Smaller Arrays in JavaScript

Split an Array Into Smaller Arrays in JavaScript

Splitting an array into smaller chunks is a common task in JavaScript, especially when dealing with pagination, batching data, or chunk processing. Whether you're slicing a list of fruits like ["apple", "banana", "cherry", "date"] into parts or dividing records for API calls, JavaScript gives you multiple tools to break things down.

In this tutorial, we’ll explore three beginner-friendly ways to split an array into smaller arrays (or "chunks") using simple and readable code. Each method will include a full program and its output so you can understand how it works from top to bottom.

Method 1: Using a Loop with slice()

This method uses a for loop in combination with the slice() method to create smaller arrays of a specified size. It’s one of the most intuitive ways for beginners to split arrays and works for any array length.

const fruits = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape"];
const chunkSize = 3;
const result = [];

for (let i = 0; i < fruits.length; i += chunkSize) {
  const chunk = fruits.slice(i, i + chunkSize);
  result.push(chunk);
}

console.log(result);

[ [ 'apple', 'banana', 'cherry' ], [ 'date', 'elderberry', 'fig' ], [ 'grape' ] ]

Method 2: Using a While Loop

A while loop achieves the same goal as a for loop, but offers a slightly different flow. It’s helpful for learners who are more comfortable managing loop control manually.

const items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
const size = 2;
const chunks = [];
let index = 0;

while (index < items.length) {
  chunks.push(items.slice(index, index + size));
  index += size;
}

console.log(chunks);

[ [ 'Item 1', 'Item 2' ], [ 'Item 3', 'Item 4' ], [ 'Item 5' ] ]

Method 3: Using a Reusable Function

You can write a reusable function that takes any array and chunk size, and returns a new array made of smaller arrays. This method is great when you're building tools or utility libraries.

function splitIntoChunks(array, chunkSize) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}

const letters = ["A", "B", "C", "D", "E", "F"];
const output = splitIntoChunks(letters, 2);
console.log(output);

[ [ 'A', 'B' ], [ 'C', 'D' ], [ 'E', 'F' ] ]

When to Use These Methods

Use the loop + slice approach when you want simple and clean logic without external dependencies. It’s great for inline solutions and quick manipulations. The while loop version works well when you need more granular control over index flow. The reusable function is ideal for production code or utilities shared across projects.