117

How to split an array (which has 10 items) into 4 chunks, which contain a maximum of n items.

var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
//a function splits it to four arrays.
console.log(b, c, d, e);

And it prints:

['a', 'b', 'c']
['d', 'e', 'f']
['j', 'h', 'i']
['j']

The above assumes n = 3, however, the value should be dynamic.

Thanks

4

2 Answers 2

224

It could be something like that:

var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

var arrays = [], size = 3;
    
while (a.length > 0)
  arrays.push(a.splice(0, size));

console.log(arrays);

See splice Array's method.

An alternative method that does not mutate the array, beside create a shallow copy of it before chunk it, could be done by using slice and a for…loop:

var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

var arrays = [], size = 3;
    
for (let i = 0; i < a.length; i += size)
   arrays.push(a.slice(i, i + size));

console.log(arrays);

While a more functional programming oriented approach, could be:

const chunks = (a, size) =>
    Array.from(
        new Array(Math.ceil(a.length / size)),
        (_, i) => a.slice(i * size, i * size + size)
    );

let a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];

console.log(chunks(a, 3));
console.log(chunks(a, 2));

See Array.from and how new Array(n) works, specifically.

5
  • 26
    It's worth noting that this method mutates the old array. Commented Oct 2, 2018 at 8:39
  • Can you link to a better method? Commented Jun 4, 2020 at 11:14
  • 2
    Define "better". This is the simplest way I know to do what was requested. If you don't want to mutate the original array you can a shallow copy of it.
    – ZER0
    Commented Jun 4, 2020 at 11:22
  • What is a here? Commented Jul 16, 2020 at 14:38
  • a was part of the OP question. I'll edit my answer to be a running snippet and include the original array,
    – ZER0
    Commented Jul 17, 2020 at 7:11
75

Maybe this code helps:

var chunk_size = 10;
var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17];
var groups = arr.map( function(e,i){ 
     return i%chunk_size===0 ? arr.slice(i,i+chunk_size) : null; 
}).filter(function(e){ return e; });
console.log({arr, groups})

12
  • 7
    I like your solution. I cleaned it up a bit and made it a JS Bin. Thanks! jsbin.com/dokivomuzake/1/edit?js,console
    – dbasch
    Commented Aug 24, 2014 at 16:53
  • Much better functional solution.
    – Régis
    Commented Oct 5, 2016 at 4:28
  • 6
    const partitionArray = (array, size) => array.map( (e,i) => (i % size === 0) ? array.slice(i, i + size) : null ) .filter( (e) => e )
    – ztrange
    Commented Mar 1, 2017 at 21:32
  • 2
    Within the map you can simplify it by using return i%chunk_size===0 && arr.slice(i,i+chunk_size);
    – Koen.
    Commented Apr 10, 2017 at 19:22
  • 2
    @Buts - map iterates through each element of the array.
    – David
    Commented Nov 18, 2018 at 22:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.