JavaScript Chunking: Teknik Memecah Array dan Data Besar

JavaScript Chunking adalah proses memecah sebuah array atau kumpulan data besar menjadi beberapa bagian atau potongan (chunks) yang lebih kecil dengan ukuran tertentu. Teknik ini krusial dalam pengembangan web untuk mengoptimalkan performa aplikasi, mencegah pemblokiran main thread saat memproses ribuan data, serta membatasi ukuran muatan (payload) saat melakukan pengiriman data melalui API.

Secara native, JavaScript tidak menyediakan fungsi chunk() bawaan seperti pada pustaka utilitas Lodash. Namun, pemecahan data ini dapat dilakukan dengan mudah menggunakan metode bawaan seperti Array.prototype.slice(), perulangan for, fungsi generator, atau memanfaatkan pustaka eksternal pihak ketiga.

Metode 1: Menggunakan Array.prototype.slice() dan Perulangan For

Cara paling dasar dan umum tanpa dependensi eksternal adalah menggunakan perulangan untuk memotong array menggunakan metode slice() berdasarkan ukuran chunk yang diinginkan.

function chunkArray(array, size) {
  const chunked = [];
  for (let i = 0; i < array.length; i += size) {
    chunked.push(array.slice(i, i + size));
  }
  return chunked;
}

const data = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(chunkArray(data, 3)); 
// Output: [[1, 2, 3], [4, 5, 6], [7, 8]]

Metode 2: Menggunakan Lodash _.chunk()

Jika proyek Anda sudah menggunakan pustaka Lodash, fungsi _.chunk() adalah cara paling bersih dan teruji untuk melakukan operasi ini.

import _ from 'lodash';

const array = ['a', 'b', 'c', 'd'];
const result = _.chunk(array, 2);

console.log(result); 
// Output: [['a', 'b'], ['c', 'd']]

Metode 3: Menggunakan JavaScript Generators untuk Data Sangat Besar

Untuk dataset berukuran masif (misalnya ratusan ribu baris data), memuat seluruh chunk ke dalam memori sekaligus dapat menyebabkan masalah memori (out of memory). Menggunakan generator function memungkinkan pemrosesan data secara lazy evaluation.

*function* chunkGenerator(array, size) {
  for (let i = 0; i < array.length; i += size) {
    yield array.slice(i, i + size);
  }
}

const hugeData = Array.from({ length: 10000 }, (_, index) => index + 1);
const chunkIter = chunkGenerator(hugeData, 1000);

for (const chunk of chunkIter) {
  console.otak ? null : console.log(chunk.length); // Memproses per 1000 data
}

Tabel Perbandingan Pendekatan Chunking di JavaScript

Penerapan Nyata: Batching API Request

Chunking sering digunakan ketika Anda perlu mengirim ribuan data ke server melalui REST API yang memiliki batasan ukuran payload maksimum per request.

async function sendDataInChunks(items, batchSize) {
  const batches = chunkArray(items, batchSize);
  
  for (const batch of batches) {
    try {
      await fetch('https://api.example.com/batch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ data: batch })
      });
    } catch (error) {
      console.error('Gagal mengirim batch:', error);
    }
  }
}

Troubleshooting dan Tips Lapangan

• Ukuran Chunk (Chunk Size): Tentukan ukuran berdasarkan kapasitas pemrosesan. Untuk UI rendering (seperti virtualized list), ukuran 20-50 biasanya ideal. Untuk operasi jaringan, ukuran 100-500 umum digunakan tergantung batas server.
• Zero / Negative Size: Pastikan validasi parameter ukuran tidak bernilai 0 atau negatif untuk menghindariInfinite Loop pada perulangan for.