Javascript Array Object Data Transform

Definisi

Array dan Object adalah dua struktur data paling dasar di JavaScript. Keduanya dipakai hampir di semua alur aplikasi: dari menyimpan daftar data API, membentuk state UI, sampai menyiapkan payload untuk request.

• Array dipakai untuk menyimpan data berurutan.
• Object dipakai untuk menyimpan data berbasis key-value.

Walaupun keduanya sama-sama termasuk tipe referensi di JavaScript, cara pakai dan cara transformasinya berbeda. Banyak bug data di JavaScript muncul bukan karena sintaksnya salah, tapi karena struktur yang dipilih tidak sesuai dengan bentuk data yang sedang diproses.

Kenapa penting

Kalau struktur data dipilih dengan tepat, alur kode biasanya jadi lebih sederhana:

• list hasil API mudah difilter, dipetakan, dan diurutkan
• detail data satu entitas mudah dibaca lewat object
• transformasi data bisa dibuat fungsional dan lebih aman
• state aplikasi lebih mudah diprediksi

Sebaliknya, kalau array dan object diperlakukan sembarangan, bug yang sering muncul biasanya berupa:

• data berubah tanpa sengaja karena referensi dipakai ulang
• hasil map() atau filter() tidak disimpan kembali
• object bertingkat diubah langsung dari state asli
• array dipakai seperti object atau sebaliknya
• enumerasi key menghasilkan urutan yang tidak sesuai asumsi

Struktur dasar

Array

Array adalah daftar terurut. Setiap item punya indeks numerik mulai dari 0.

js

const users = ['Ayu', 'Bima', 'Citra'];
 
console.log(users[0]); // Ayu
console.log(users.length); // 3

Ciri penting array:

• urutan item dijaga
• cocok untuk koleksi data homogen atau hasil query/list
• mudah diproses dengan map(), filter(), reduce(), find(), dan sort()

Object

Object adalah kumpulan pasangan key-value.

js

const user = {
  id: 1,
  name: 'Ayu',
  role: 'admin',
};
 
console.log(user.name); // Ayu
console.log(user['role']); // admin

Ciri penting object:

• akses data berdasarkan key, bukan indeks
• cocok untuk data yang punya atribut tetap
• sering dipakai untuk entity, konfigurasi, metadata, dan hasil normalisasi data

Perbedaan praktis

Metode penting pada Array

map()

map() mengubah setiap item menjadi nilai baru dan menghasilkan array baru.

js

const prices = [1000, 2000, 3000];
const withTax = prices.map(price => price * 1.11);

Pakai map() saat:

• ingin melakukan transformasi 1-to-1
• hasilnya tetap array dengan panjang yang sama
• tiap item berubah bentuk, bukan disaring

filter()

filter() mengambil item yang lolos kondisi tertentu.

js

const activeUsers = users.filter(user => user.active);

Pakai filter() saat:

• ingin menyisihkan data yang tidak cocok
• hasilnya bisa lebih sedikit dari input
• kondisi seleksi lebih penting daripada transformasi bentuk

find()

find() mencari item pertama yang cocok.

js

const user = users.find(item => item.id === 3);

Pakai find() saat:

• hanya butuh satu hasil
• ingin berhenti di item pertama yang cocok
• data yang dicari mewakili satu entitas

reduce()

reduce() mengakumulasi array menjadi satu nilai hasil.

js

const total = prices.reduce((sum, price) => sum + price, 0);

Bentuk hasil reduce() bisa berupa:

• number
• string
• object
• array
• struktur lain yang dibentuk dari input

Pakai reduce() saat:

• ingin agregasi
• ingin membentuk object/index baru
• transformasi butuh kontrol penuh atas accumulator

sort()

sort() mengurutkan array secara in-place.

js

const sorted = [...users].sort((a, b) => a.name.localeCompare(b.name));

Catatan penting:

• sort() mengubah array asli
• selalu beri comparator untuk data numerik atau object
• untuk menjaga immutability, copy dulu sebelum sort

flat() dan flatMap()

• flat() meratakan array bertingkat
• flatMap() menggabungkan transformasi dan perataan satu level

js

const nested = [1, [2, 3], [4, [5]]];
const flatOneLevel = nested.flat();

Pakai ini saat data datang dalam bentuk nested yang memang perlu diratakan.

Metode penting pada Object

Object.keys()

Mengembalikan array key enumerable dari object.

js

const keys = Object.keys(user);

Object.values()

Mengembalikan array value enumerable.

js

const values = Object.values(user);

Object.entries()

Mengembalikan pasangan [key, value].

js

const entries = Object.entries(user);

entries() sering paling enak dipakai kalau object perlu diubah menjadi array untuk diproses dengan map() atau filter().

Object.fromEntries()

Mengubah array pasangan [key, value] menjadi object.

js

const nextUser = Object.fromEntries([
  ['name', 'Ayu'],
  ['role', 'editor'],
]);

Metode ini sangat berguna saat hasil transformasi array perlu dibentuk lagi menjadi object.

Immutability vs mutation

Mutation

Mutation berarti mengubah data yang sudah ada di tempat yang sama.

js

const list = [1, 2, 3];
list.push(4); // mutasi
list[0] = 99;  // mutasi

Mutation tidak selalu salah. Dalam konteks lokal yang terkendali, mutation bisa lebih sederhana dan kadang lebih efisien. Tapi mutation jadi berbahaya kalau data itu dibagikan ke banyak bagian program, terutama state UI.

Immutability

Immutability berarti membuat nilai baru tanpa mengubah data lama.

js

const list = [1, 2, 3];
const nextList = [...list, 4];

Keuntungan immutability:

• lebih mudah dilacak saat debugging
• perubahan state lebih jelas
• aman untuk pola referential equality di React atau state management lain
• mengurangi efek samping tersembunyi

Kapan harus hati-hati

Waspadai metode yang memodifikasi data langsung:

• array: push(), pop(), shift(), unshift(), splice(), sort(), reverse()
• object: assignment langsung ke properti nested

Contoh yang sering menjebak:

js

const state = {
  profile: {
    name: 'Ayu',
  },
};
 
const nextState = state;
nextState.profile.name = 'Bima';

Di atas, nextState dan state menunjuk ke object yang sama. Jadi perubahan pada nextState ikut mengubah state.

Cara aman membuat salinan

Shallow copy

js

const nextList = [...list];
const nextUser = { ...user };

Shallow copy hanya menyalin level terluar. Kalau ada nested object/array, referensinya masih dibagi.

Deep copy

Kalau data bertingkat dan memang perlu dipisah total, gunakan pendekatan deep copy yang sesuai konteks. Di browser modern, structuredClone() sering cukup:

js

const cloned = structuredClone(state);

Namun deep copy bukan solusi universal. Pastikan struktur datanya memang cocok dan tidak mengandung nilai yang tidak bisa di-clone dengan cara tersebut.

Alur transformasi data

Banyak pekerjaan JavaScript sebenarnya hanyalah alur transformasi dari array mentah menjadi object yang siap dipakai UI atau API.

Mermaid: pipeline transformasi

Contoh pipeline nyata

Misalnya data API berisi daftar user:

js

const users = [
  { id: 1, name: 'Ayu', active: true, role: 'admin' },
  { id: 2, name: 'Bima', active: false, role: 'editor' },
  { id: 3, name: 'Citra', active: true, role: 'editor' },
];

Transformasi yang umum:

1. ambil user aktif dengan filter()
2. ubah bentuk item dengan map()
3. kalau perlu pencarian cepat, ubah menjadi object dengan reduce() atau Object.fromEntries()

js

const activeUsers = users
  .filter(user => user.active)
  .map(user => ({
    id: user.id,
    label: `${user.name} (${user.role})`,
  }));
 
const userById = Object.fromEntries(
  users.map(user => [user.id, user])
);

Hasil seperti userById sangat berguna kalau akses data lebih sering dilakukan berdasarkan ID daripada urutan.

Jebakan umum saat memproses data

1) Lupa return di map() atau filter()

js

const result = users.map(user => {
  { id: user.id };
});

Karena tidak ada return, hasilnya array berisi undefined.

Perbaikan:

js

const result = users.map(user => {
  return { id: user.id };
});

atau singkat:

js

const result = users.map(user => ({ id: user.id }));

2) Mengira map() sama dengan forEach()

• map() dipakai untuk menghasilkan array baru
• forEach() dipakai untuk efek samping

Kalau hasil array tidak dipakai, biasanya forEach() atau loop biasa lebih tepat.

3) Mutasi data asli tanpa sadar

js

const next = users;
next.push(newUser);

Ini bukan salinan. Keduanya menunjuk ke array yang sama.

4) Salah asumsi pada object bersarang

js

const next = { ...state };
next.profile.name = 'Bima';

Ini tetap memutasi nested object profile, karena copy-nya hanya shallow.

5) sort() mengubah array asal

Kalau array asal masih dipakai di tempat lain, hasilnya bisa bikin UI berubah tanpa disengaja.

Solusi umum:

js

const sorted = [...items].sort(compareFn);

6) Menggunakan object untuk data yang sebenarnya daftar

Kalau data memang urut dan sering diiterasi, array biasanya lebih cocok daripada object.

Object lebih cocok saat:

• butuh lookup by key
• struktur data punya atribut tetap
• data perlu dinormalisasi untuk akses cepat

7) Key dinamis dan akses yang tidak konsisten

js

const field = 'name';
console.log(user[field]);

Ini valid, tetapi perlu disiplin. Saat key berasal dari input user atau data eksternal, validasi tetap penting.

Catatan implementasi

Pilih struktur sesuai kebutuhan akses

• kalau akses utama adalah urutan, pakai array
• kalau akses utama adalah identitas, pakai object atau Map
• kalau data sering ditransformasi, jaga pipeline tetap pendek dan eksplisit

Hindari transformasi yang terlalu dini

Jangan langsung mengubah semua data jadi object kalau akhirnya tetap ditampilkan sebagai list. Pertahankan bentuk data yang paling dekat dengan kebutuhan langkah berikutnya.

Normalisasi kalau data makin kompleks

Kalau data bertingkat mulai sulit dirawat, pecah menjadi struktur yang lebih flat atau ter-normalisasi. Ini membuat update dan pencarian lebih stabil.

Gunakan nama variabel yang menjelaskan bentuk data

Contoh:

• users untuk array user
• userById untuk object lookup
• activeUsers untuk hasil filter
• selectedUser untuk satu entitas

Nama yang konsisten membantu pembaca tahu bentuk datanya tanpa perlu membuka isi variabel.

Referensi cepat

Metode array yang paling sering dipakai

• map() → transformasi item
• filter() → seleksi item
• find() → ambil satu item
• reduce() → agregasi / pembentukan struktur baru
• sort() → urutkan data, hati-hati karena in-place
• flat() / flatMap() → normalisasi nested array

Metode object yang paling sering dipakai

• Object.keys() → daftar key
• Object.values() → daftar value
• Object.entries() → pasangan key-value
• Object.fromEntries() → ubah pasangan menjadi object

Kesimpulan singkat

Array dan object bukan sekadar tipe data dasar. Di praktiknya, keduanya adalah alat untuk merancang alur data yang aman, mudah dibaca, dan mudah di-debug.

Kalau kamu bisa menjawab tiga hal ini dengan jelas:

• datanya bentuknya daftar atau detail?
• prosesnya butuh transformasi atau lookup?
• perubahan datanya boleh mutasi atau harus immutable?

maka sebagian besar bug manipulasi data di JavaScript sudah bisa dicegah sejak awal.