Dividir array em partes com JavaScript (chunks)

Neste artigo você vai aprender a como dividir array em partes utilizando JavaScript, estas partes são conhecidas como chunks

Fala programador(a), beleza? Bora aprender mais sobre arrays e também JavaScript!

Vamos criar um recurso para realizar as divisões de um array em array menores, os chunks

Primeiramente vamos definir o número de divisões e receber um array, o original

Utilizaremos a função reduce para resolver o problema

Em reduce vamos criar novos arrays baseados na quantidade definida anteriormente, definindo um novo índice para cada uma das divisões

Assim inserimos itens neste novo array, até a quantidade chegar ao limite e o retornamos

Veja o exemplo prático:

const qty = 3

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

const chunks = arr.reduce((array, item, index) => { 
  const chunkIndex = Math.floor(index/qty)

  if(!array[chunkIndex]) {
    array[chunkIndex] = []
  }

  array[chunkIndex].push(item)

  return array
}, [])

console.log(chunks); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Note que dividimos um array de 9 elementos em 3 arrays de 3 elementos, manipulando as variáveis iniciais

Reduce é uma ótima opção para o problema, pois ele justamente tem essa filosofia de “reduzir” algo

E ainda se a última parte não contiver elementos suficientes, não há problema o algoritmo resolve! 🙂

Conclusão

Neste artigo você aprendeu a como dividir array em partes com JavaScript

Utilizamos a função do reduce de JavaScript ES6 para resolver o nosso problema

Conseguindo assim entregar o número de chunks necessários, dividindo os elementos do array entre eles

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Dividindo array em partes com slice:

O reduce resolve, mas ele não é a única saída

Tem uma versão que muita gente acha mais fácil de ler: um laço simples com slice

A ideia aqui é outra: em vez de ir empurrando item por item, você recorta pedaços do array de tamanho fixo

Se você já usou substring em texto, o slice é bem parecido, só que em array

function dividirEmChunks(arr, tamanho) {

for (let i = 0; i < arr.length; i += tamanho) {
chunks.push(arr.slice(i, i + tamanho))
}

return chunks
}

Repare no pulo do laço: o i anda de 3 em 3, não de 1 em 1

É isso que garante que cada recorte comece exatamente onde o anterior parou 🙂

Reduce ou slice: qual usar?

Os dois entregam o mesmo resultado, então a escolha é de estilo e de contexto

O reduce é interessante quando você já está numa cadeia de métodos (map, filter, reduce) e quer manter tudo no mesmo fluxo, sem criar variável de fora

O slice dentro do laço costuma ser mais direto de bater o olho e entender, principalmente pra quem está começando, e você tem controle explícito do índice

Se o array é o resultado de uma cadeia, reduce

Se é uma função utilitária que você vai chamar de vários lugares, slice

Não existe versão "certa", existe a que o time consegue ler daqui a seis meses

Dividir em N partes iguais (não em partes de N itens):

Cuidado com essa confusão, porque as duas coisas parecem a mesma e não são

Até agora a gente disse o TAMANHO de cada pedaço

Às vezes o que você quer é o contrário: a QUANTIDADE de pedaços, tipo separar uma lista em 3 colunas na tela

Aí o tamanho vira uma conta:

function dividirEmPartes(arr, partes) {
const tamanho = Math.ceil(arr.length / partes)

return dividirEmChunks(arr, tamanho)
}

Tome cuidado! Com Math.ceil você pode acabar com MENOS partes do que pediu quando o array é pequeno

Com 5 itens divididos em 4 partes, o tamanho arredonda pra 2 e sobram 3 pedaços, não 4

Se o seu caso exige exatamente N colunas, vale distribuir o resto item a item em vez de arredondar

E quando a divisão não é exata?

Essa é a dúvida que aparece na hora que você troca os números do exemplo

Com 9 itens em pedaços de 3 fica bonitinho, mas a vida real raramente é redonda assim

Ou seja: o último pedaço vem menor e isso é o comportamento esperado, não é bug

Tanto o reduce quanto o slice se viram sozinhos nesse caso, nenhum dos dois quebra

Só lembre disso na hora de consumir o resultado: se o seu código assume que todo chunk tem o mesmo tamanho, ele vai se ferrar justamente no último

Use chunk.length em vez de chutar o tamanho e você não passa raiva depois

Pra que serve dividir um array em chunks?

Vale explicar o porquê, senão fica parecendo exercício de faculdade

Paginação no front: você tem a lista inteira em memória e quer mostrar de X em X sem ficar batendo no servidor

Requisições em lote: em vez de disparar tudo de uma vez e derrubar a API, você processa um chunk, espera, processa o próximo

Layout em colunas ou grid: cada chunk vira uma coluna da tela

Upload e processamento de arquivo grande: quebrar em pedaços evita segurar tudo de uma vez

Se liga que em todos esses casos o padrão é o mesmo: transformar uma lista gigante em pedaços que o seu código (ou o navegador) aguenta ✌️

Os chunks alteram o array original?

Pergunta boa e a resposta curta é: não

Tanto o reduce quanto o slice devolvem um array novo, o original continua intacto

Mas tem uma pegadinha: a cópia é rasa

Se o seu array é de objetos, os objetos dentro dos chunks são os MESMOS objetos do array original

Mudou uma propriedade dentro do chunk, mudou lá também

const usuarios = [{ nome: 'Ana' }, { nome: 'Bia' }, { nome: 'Caio' }]

const partes = dividirEmChunks(usuarios, 2)

Já me ferrei uma vez por causa disso, então fica o aviso

Se você precisa mexer nos itens sem afetar a origem, copie o objeto antes de alterar