Flatten Rekursif: Cara Mengubah Object Nested Menjadi Flat Javascript

Ditulis oleh JavaScript

Cara mengubah object nested menjadi flat JavaScript paling aman adalah memakai fungsi rekursif yang menggabungkan key dengan titik. Kesalahan yang paling sering terjadi adalah tidak membedakan plain object dari array dan null, sehingga typeof null yang bernilai object ikut di-loop dan program error. Rekursi hanya boleh lanjut bila nilainya benar-benar plain object.

Misal user.address.city berisi "Bandung", maka hasil flat-nya memakai key gabungan "user.address.city". Pola ini cocok untuk query form, konfigurasi, dan normalisasi data API.

Bentuk Input Object dan Hasil Flat yang Diharapkan

Input berupa object bertingkat seperti ini:

const user = {
  name: "Rina",
  address: { city: "Bandung", zip: "40111" },
  tags: ["admin", "editor"]
};

Hasil flat yang diharapkan:

{
  "name": "Rina",
  "address.city": "Bandung",
  "address.zip": "40111",
  "tags": ["admin", "editor"]
}
  • Object murni ditelusuri lebih dalam dan key-nya digabung.
  • Array umumnya dibiarkan utuh agar urutan dan tipe datanya tidak rusak.
  • Nilai null diperlakukan sebagai nilai akhir, bukan object yang perlu di-loop.
  • Separator dot dipakai untuk object, sedangkan bracket seperti tags[0] dipakai bila array memang harus dipecah.

Kode Rekursif untuk Flatten Object Javascript

Ikuti urutan ini agar rekursi berhenti dengan benar:

  1. Siapkan object penampung kosong bernama result.
  2. Cek tipe tiap value dengan validasi plain object.
  3. Loop semua key memakai Object.entries.
  4. Panggil rekursi hanya bila value berupa plain object.
function flattenObject(obj, prefix = "", result = {}) {
  for (const [key, value] of Object.entries(obj)) {
    const newKey = prefix ? `${prefix}.${key}` : key;

    if (value !== null && typeof value === "object" && !Array.isArray(value)) {
      flattenObject(value, newKey, result);
    } else {
      result[newKey] = value;
    }
  }
  return result;
}
  • Berhenti pada nilai primitif seperti string, number, dan boolean.
  • Berhenti pada null karena tidak punya properti yang bisa ditelusuri.
  • Berhenti pada array kecuali memang ingin tiap index ikut di-flatten.

BACA JUGA:

Tabel Pilihan Metode Flatten

Metode Fungsi Catatan
Rekursi manual Menelusuri object sampai dalam Paling fleksibel untuk prefix dan array
Reduce + Object.entries Menggabungkan hasil tiap level Ringkas, tetapi kurang enak dibaca untuk nested dalam
Helper prefix Meneruskan prefix tiap panggilan Wajib dipakai agar key parent tidak hilang

Gunakan format tags[0] bila konsumen data butuh posisi index, misalnya mapping ke form dinamis. Gunakan format tags.0 bila hasil akhirnya akan diproses ulang sebagai path object biasa.

Risiko terbesar adalah key bertabrakan. Object { "a.b": 1, a: { b: 2 } } menghasilkan dua key "a.b" yang saling menimpa.

Unflatten Kembali Bila Dibutuhkan

Pecah setiap key berdasarkan titik, lalu buat object bertingkat level demi level.

function unflattenObject(flat) {
  const result = {};
  for (const [path, value] of Object.entries(flat)) {
    const keys = path.split(".");
    let current = result;
    keys.forEach((key, i) => {
      if (i === keys.length - 1) current[key] = value;
      else current = current[key] ??= {};
    });
  }
  return result;
}
  • Tolak key kosong karena "user..city" menghasilkan struktur tidak valid.
  • Tentukan perlakuan undefined, apakah dilewati atau tetap ditulis.

FAQ

Apakah array ikut di flatten?

Tidak wajib, kode di atas membiarkan array tetap utuh kecuali kamu menambahkan handling index khusus.

Bagaimana menangani key yang sudah mengandung titik?

Gunakan separator lain atau encode key tersebut dulu, karena titik bawaan key akan terbaca sebagai pemisah level.

Apakah fungsi ini deep clone?

Bukan, object dan array di hasil flat masih memakai referensi yang sama dengan object asli.

Artikel Terkait