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.

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.

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

Aspek	Array	Object
Bentuk utama	urutan item	key-value
Cara akses	indeks	key
Cocok untuk	daftar, koleksi, sequence	detail, konfigurasi, entity
Metode umum	`map`, `filter`, `reduce`	`Object.keys`, `Object.values`, `Object.entries`

Metode penting pada Array

`map()`

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

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.

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.

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.

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.

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

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.

const keys = Object.keys(user);

`Object.values()`

Mengembalikan array value enumerable.

const values = Object.values(user);

`Object.entries()`

Mengembalikan pasangan [key, value].

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.

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.

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.

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:

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

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:

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

Loading diagram...

Contoh pipeline nyata

Misalnya data API berisi daftar user:

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:

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

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

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()`

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

Karena tidak ada return, hasilnya array berisi undefined.

Perbaikan:

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

atau singkat:

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

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

Ini bukan salinan. Keduanya menunjuk ke array yang sama.

4) Salah asumsi pada object bersarang

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:

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

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.

Javascript Array Object Data Transform | Rujukan Pemrograman | Mahir.dev Academy

Selesai membaca dokumentasi ini?