Cara Cepat Mengambil Data dari Object dan Array di JavaScript

9 Mei 2026

Pernahkah kamu merasa lelah menulis baris kode yang berulang-ulang hanya untuk mengambil satu nilai dari dalam variabel? Bayangkan kamu punya sebuah gudang data besar berisi ribuan informasi, dan kamu hanya butuh nama pelanggan serta alamat emailnya saja. Kalau kamu masih menggunakan cara lama dengan memanggil nama variabel satu per satu, kodenya pasti akan terlihat sangat panjang dan membosankan.

Kabar baiknya, JavaScript modern (ES6 ke atas) sudah memberikan kita senjata rahasia yang bikin proses ini jadi jauh lebih elegan. Teknik ini sering disebut dengan Destructuring. Di artikel ini, kita akan bedah tuntas bagaimana cara singkat mengambil data dari object dan array supaya kode kamu lebih bersih, profesional, dan tentunya enak dibaca.

Mengapa Harus Peduli dengan Destructuring?

Sebelum kita masuk ke teknis, mari kita bicara soal efisiensi. Sebagai developer, waktu kamu sangat berharga. Menulis const nama = user.nama; mungkin terlihat simpel. Tapi bagaimana kalau ada 10 properti yang harus diambil? Kamu akan berakhir dengan 10 baris kode yang sebenarnya bisa diringkas menjadi satu baris saja.

Menggunakan teknik singkat dalam manipulasi data bukan cuma soal gaya-gayaan. Ini tentang readability (keterbacaan) dan maintainability (kemudahan pemeliharaan). Kode yang ringkas biasanya lebih mudah didebug karena struktur datanya langsung terlihat jelas di awal fungsi atau komponen.

1. Cara Mengambil Data dari Object

Object adalah struktur data yang paling sering kita temui, terutama saat berurusan dengan API. Di dalam object, data disimpan dalam pasangan key dan value.

Teknik Dasar Destructuring Object

Cara tradisional mengambil data object biasanya seperti ini:

const user = {
  id: 1,
  username: 'daffajhoni',
  email: 'daffa@example.com'
};

// Cara lama
const id = user.id;
const username = user.username;

Nah, dengan Destructuring, kamu bisa melakukannya seperti ini:

const { id, username, email } = user;
console.log(username); // Hasil: daffajhoni

Hanya dengan satu baris, kamu sudah berhasil membuat tiga variabel sekaligus (id, username, dan email) yang nilainya diambil langsung dari properti object user yang namanya sama.

Memberikan Nama Alias pada Variabel

Terkadang, nama key dari API itu aneh atau terlalu panjang. Kamu bisa mengganti namanya saat melakukan pengambilan data. Caranya cukup gunakan tanda titik dua (:).

const product = {
  product_name_id_v2: 'Laptop Gaming',
  price: 15000000
};

const { product_name_id_v2: namaProduk } = product;
console.log(namaProduk); // Hasil: Laptop Gaming

Mengatur Nilai Default (Default Values)

Pernah ambil data tapi ternyata datanya kosong atau undefined? Kamu bisa mencegah error dengan memberikan nilai default langsung saat proses pengambilan data.

const setting = { theme: 'dark' };
const { theme, fontSize = '14px' } = setting;

console.log(fontSize); // Hasil: 14px (karena di object aslinya tidak ada)

2. Cara Mengambil Data dari Array

Berbeda dengan object yang menggunakan nama properti, array menggunakan urutan (index). Destructuring array menggunakan kurung siku [].

Destructuring Array Berdasarkan Urutan

Kalau kamu punya array berisi warna, kamu bisa langsung mengambilnya seperti ini:

const colors = ['Merah', 'Hijau', 'Biru'];

// Mengambil dua elemen pertama
const [warnaUtama, warnaKedua] = colors;

console.log(warnaUtama); // Hasil: Merah

Melewati Elemen (Skipping Items)

Bagaimana kalau kamu cuma butuh elemen pertama dan ketiga? Gampang, cukup kosongkan saja tempat untuk elemen kedua dengan tanda koma.

const coordinates = [10, 20, 30];
const [x, , z] = coordinates;

console.log(z); // Hasil: 30

3. Menggunakan Rest Operator (...)

Ini adalah fitur favorit banyak developer. Kadang kamu ingin mengambil satu data spesifik, dan sisa datanya ingin kamu simpan ke dalam satu variabel lain. Di sinilah Rest Operator beraksi.

Rest Operator pada Object

const karyawan = {
  nama: 'Andi',
  posisi: 'Manager',
  gaji: 10000000,
  alamat: 'Jakarta'
};

const { nama, ...informasiLainnya } = karyawan;

console.log(nama); // Andi
console.log(informasiLainnya); // { posisi: 'Manager', gaji: 10000000, alamat: 'Jakarta' }

Rest Operator pada Array

const skor = [100, 90, 80, 70, 60];
const [juaraSatu, ...pesertaLain] = skor;

console.log(juaraSatu); // 100
console.log(pesertaLain); // [90, 80, 70, 60]

4. Mengambil Data dari Nested Object

Dalam dunia nyata, data jarang sekali sederhana. Seringkali kamu akan bertemu dengan data yang berlapis-lapis. Destructuring tetap bisa menangani ini dengan sangat rapi.

const profile = {
  username: 'traveler_01',
  location: {
    city: 'Bandung',
    province: 'Jawa Barat'
  }
};

// Cara langsung mengambil city
const { location: { city } } = profile;

console.log(city); // Hasil: Bandung

Catatan Penting: Berhati-hatilah saat melakukan ini. Jika properti location ternyata tidak ada (null/undefined), kodenya akan error. Pastikan datanya ada atau gunakan optional chaining jika perlu.

5. Destructuring Langsung di Parameter Fungsi

Ini adalah teknik yang sangat umum digunakan di framework seperti React atau Vue. Daripada mengirim satu object besar ke fungsi lalu mengambil datanya di dalam fungsi, kamu bisa langsung "membedah" object tersebut di bagian parameter.

// Tanpa Destructuring
function cetakProfil(user) {
  console.log(`Halo, ${user.nama}`);
}

// Dengan Destructuring (Lebih Singkat)
function cetakProfilSingkat({ nama, pekerjaan = 'Freelancer' }) {
  console.log(`Halo, ${nama}. Pekerjaan kamu adalah ${pekerjaan}.`);
}

const data = { nama: 'Budi' };
cetakProfilSingkat(data);

Kelebihannya? Kamu langsung tahu data apa saja yang dibutuhkan oleh fungsi tersebut tanpa harus membaca isi fungsinya sampai selesai.

6. Tips Mengambil Data dari Array of Objects

Seringkali kita punya daftar user dalam bentuk array, dan kita ingin mengambil data dari salah satu user tersebut. Kamu bisa mengombinasikan method array seperti .find() atau .filter() dengan destructuring.

const users = [
  { id: 1, nama: 'Alice' },
  { id: 2, nama: 'Bob' },
  { id: 3, nama: 'Charlie' }
];

// Mencari user dengan id 2 dan langsung ambil namanya
const { nama } = users.find(u => u.id === 2) || {};

console.log(nama); // Hasil: Bob

Penggunaan || {} di atas sangat penting untuk menghindari error seandainya .find() tidak menemukan data (kembaliannya undefined).

Kapan Harus Menghindari Cara Singkat Ini?

Meskipun sangat membantu, bukan berarti kamu harus menggunakan destructuring di setiap tempat. Ada beberapa kondisi di mana cara ini justru bikin bingung:

Terlalu Dalam: Jika object kamu punya kedalaman lebih dari 3-4 lapis, destructuring akan terlihat sangat rumit dan sulit dibaca. Lebih baik ambil secara bertahap.
Variabel Sudah Ada: Jika kamu sudah memiliki variabel dengan nama yang sama di lingkup (scope) yang sama, destructuring bisa menyebabkan konflik kecuali kamu menggunakan alias (:).
Koleksi Data yang Dinamis: Jika kamu tidak tahu pasti key apa yang akan datang dari API, menggunakan cara akses dinamis data[key] jauh lebih aman.

Kesimpulan

Mengambil data dengan cara singkat menggunakan destructuring, rest operator, dan penentuan nilai default adalah skill wajib bagi web developer zaman sekarang. Selain membuat kode kamu terlihat lebih bersih, teknik ini juga mengurangi potensi kesalahan penulisan (typo) karena kamu mendeklarasikan variabel dengan nama yang sudah ada di dalam sumber data.

Ringkasan Cepat:

Gunakan { nama } = object untuk mengambil properti object.
Gunakan [pertama] = array untuk mengambil elemen array.
Gunakan : untuk mengganti nama variabel (alias).
Gunakan = untuk memberikan nilai default jika data kosong.
Gunakan ... untuk membungkus sisa data yang tidak diambil.

Sekarang giliran kamu! Coba buka editor kodenya dan mulai ubah cara lama kamu mengambil data dengan teknik-teknik singkat di atas. Dijamin, koding jadi terasa lebih ringan dan menyenangkan. Selamat mencoba!

Aurealisa ID

Fakta Gambar (Science Fact), Kutipan (Quote Of The Day), Ulasan (Science Review), Tips, Artikel.

Ruang Debug