Arrays

How to Split Array into Chunks

Use slice in a loop to create array chunks

Quick Answer (2024 ES6+ Way)

javascript

const chunk = (arr, size) => {
  return Array.from(
    { length: Math.ceil(arr.length / size) },
    (_, i) => arr.slice(i * size, i * size + size)
  );
};
const chunked = chunk([1, 2, 3, 4, 5], 2);
console.log(chunked); // [[1, 2], [3, 4], [5]]

Live Example

javascript

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Create chunks of 3
const chunks = [];
for (let i = 0; i < items.length; i += 3) {
  chunks.push(items.slice(i, i + 3));
}
console.log(chunks);

// Functional approach
const chunk = (arr, size) => 
  Array.from(
    { length: Math.ceil(arr.length / size) },
    (_, i) => arr.slice(i * size, i * size + size)
  );

console.log(chunk(items, 4));

Common Variations

Using Reduce

javascript

const chunked = arr.reduce((acc, item, i) => {
  const idx = Math.floor(i / size);
  acc[idx] = [...(acc[idx] || []), item];
  return acc;
}, []);

Paginate Results

javascript

const page = (arr, pageNum, pageSize) =>
  arr.slice(pageNum * pageSize, (pageNum + 1) * pageSize);

❌ Don't Do This (Outdated Way)

Avoid mutating original array

javascript

// DON'T DO THIS
while (arr.length) {
  chunks.push(arr.splice(0, size)); // Mutates original
}

Browser Support

✓ Works in all modern browsers (ES2015+)

#array#chunk#split