Memecah Array Menjadi Beberapa Chunk di Typescript

Apa Itu Fungsi chunk?

Fungsi chunk adalah sebuah operasi dalam pemrograman yang membagi sebuah array menjadi beberapa sub-array atau potongan dengan ukuran tertentu.

const array = [1, 2, 3, 4, 5];
const chunked = chunk(array, 2);
console.log(chunked); // Output: [[1, 2], [3, 4], [5]]/

Fungsi ini sangat berguna dalam berbagai skenario, seperti:

• Pagination membagi data untuk tampilan per halaman
• Batch processing memproses data dalam kelompok kecil
• Parallel processing membagi tugas ke worker threads

Refleksi Pembelajaran Saya

1. Kesalahan Awal: Menggunakan splice yang Merusak Data Asli

Kode Awal Saya:

function chunk(arr: number[], size: number): number[][] {
    const result = [];
    while (arr.length > 0) {
        result.push(arr.splice(0, size)); // ❌ Masalah: arr bisa berubah!
    }
    return result;
}

Masalah:

• splice menghapus elemen dari array asli arr, sehingga data input hilang setelah operasi menyebabkan kerusakan index saat iterasi.
• Tidak idempoten hasil berbeda jika dijalankan berulang pada array yang sama.

Solusi: Gunakan slice yang karena tidak mengubah array asli.

2. Versi Lebih Baik: Menggunakan slice

function chunk(arr: number[], size: number): number[][] {
    const result = [];
    for (let i = 0; i < arr.length; i += size) {
        result.push(arr.slice(i, i + size)); // ✅
    }
    return result;
}

Kelebihan:

• Tidak mengubah array input arr jadi aman untuk di iterasi.
• Lebih mudah dipahami.

Kekurangan:

• Masih menggunakan push, yang bisa kurang optimal untuk array yang sangat besar.

3. Optimasi Lanjutan: Menghindari push dengan Pre-Alokasi Array

push bisa menyebabkan realokasi memori berulang. Untuk array besar sepeti ~1 juta elemen menggunakan pre-alokasi bisa lebih cepat.

Implementasi:

function chunk(arr: number[], size: number): number[][] {
    const chunkCount = Math.ceil(arr.length / size);
    const result = new Array(chunkCount); // Alokasi nilai awal
    for (let i = 0, j = 0; i < arr.length; i += size, j++) {
        result[j] = arr.slice(i, i + size); // Isi langsung via indeks
    }
    return result;
}

Pre-alokasi lebih cepat untuk data besar, tetapi perbedaannya kecil untuk kasus biasa. Trade-off kode jadi sedikit lebih kompleks untuk optimasi marginal.

Benchmark (1 juta elemen):

4. Edge Cases yang Perlu Diperhatikan

1. Array Kosong → Kembalikan [].
2. size = 0 → Sebaiknya throw error.
3. size > panjang array → Kembalikan 1 chunk berisi seluruh array.

function chunk(arr: number[], size: number): number[][] {
    if (size <= 0) throw new Error("Ukuran chunk harus > 0");
    if (arr.length === 0) return [];
 
    const result = new Array(Math.ceil(arr.length / size));
    for (let i = 0, j = 0; i < arr.length; i += size, j++) {
        result[j] = arr.slice(i, i + size);
    }
    return result;
}

Kesimpulan & Pelajaran yang Didapat

• Gunakan slice, bukan splice untuk operasi non-destruktif.
• Optimasi hanya jika diperlukan misal: datanya sangat besar 1 juta++.
• Selalu tes edge cases misal: array kosong, size = 0, dll.

Kode yang sederhana dan mudah dibaca seringkali lebih baik daripada optimasi berlebihan yang justru membuat kode rumit.