Destructuring Array dan Object di JavaScript

Jika kamu sudah mulai belajar JavaScript modern (ES6 ke atas), kamu pasti menyadari bahwa gaya penulisan kode JavaScript saat ini jauh lebih ringkas, rapi, dan mudah dibaca dibandingkan era sebelumnya. Salah satu fitur yang membuat hal itu terjadi adalah destructuring — sebuah teknik yang memungkinkan kita mengambil nilai dari array atau object dengan cara yang lebih elegan. Fitur ini bukan hanya mempercepat proses penulisan kode, tetapi juga membuat struktur program lebih mudah dipahami, terutama saat menangani data yang kompleks.

Dalam dunia development modern, kita sangat sering bekerja dengan API response, konfigurasi, data user, hingga daftar produk dalam bentuk array atau object. Tanpa destructuring, kode yang kita tulis akan panjang, penuh repetisi, dan tidak efisien. Itulah mengapa memahami destructuring array JavaScript dan destructuring object JavaScript menjadi skill wajib bagi developer masa kini—baik pemula maupun yang sudah berpengalaman.

Pada artikel panjang ini, kita akan membahas destructuring secara mendalam, dimulai dari dasar hingga level yang lebih lanjut, termasuk:

• Cara kerja destructuring di JavaScript ES6
• Contoh penggunaan pada array dan object
• Nested destructuring
• Default value
• Rest operator
• Destructuring di parameter function
• Hingga best practice dalam proyek modern

Pembahasan akan dibuat langkah demi langkah, dengan contoh kode yang menggunakan indentasi 4 spasi agar mudah dibaca. Harapannya, setelah selesai membaca artikel ini, kamu tidak hanya sekadar memahami syntax, tetapi juga benar-benar mahir mengimplementasikannya dalam berbagai situasi nyata di proyek JavaScript modern.

Baca juga: Tutorial Arrow Function di JavaScript

Apa Itu Destructuring di JavaScript?

Destructuring adalah fitur baru yang diperkenalkan sejak ES6 (ECMAScript 2015) yang memungkinkan kita mengambil nilai dari array atau object dan menyimpannya ke dalam variabel dengan cara yang lebih singkat, jelas, dan terstruktur. Dengan destructuring, kamu tidak perlu lagi menulis kode panjang hanya untuk mengambil nilai tertentu dari sebuah data kompleks.

Secara sederhana:

Destructuring = membongkar struktur data (array atau object) menjadi variabel-variabel kecil.

Fitur ini sangat berguna karena JavaScript modern banyak berinteraksi dengan data bertipe objek dan array, terutama saat mengolah:

• Response API
• Parameter function
• Konfigurasi (settings)
• Data user
• Manipulasi list atau tabel data
• Hingga proses pemetaan nilai menggunakan array method seperti map, filter, dan reduce

Tujuan Destructuring

Sebelum ES6, jika ingin mengambil beberapa nilai dari array atau object, kita harus menuliskannya seperti ini:

const user = {
    name: "Aris",
    age: 28,
    country: "Indonesia"
};

const name = user.name;
const age = user.age;
const country = user.country;Code language: JavaScript (javascript)

Dengan destructuring, kode yang sama bisa ditulis jauh lebih ringkas:

const { name, age, country } = user;Code language: JavaScript (javascript)

Satu baris sudah cukup, lebih bersih, dan mudah dibaca.

Bagaimana Destructuring Bekerja?

Destructuring bekerja berdasarkan struktur data:

• Array destructuring berdasarkan posisi (index).
• Object destructuring berdasarkan nama key (property).

Sebagai contoh:

Array Destructuring

const colors = ["red", "green", "blue"];
const [first, second, third] = colors;Code language: JavaScript (javascript)

Object Destructuring

const person = { name: "Lisa", age: 30 };
const { name, age } = person;Code language: JavaScript (javascript)

Dengan cara ini, proses pengambilan data menjadi jauh lebih intuitif dan tidak repetitif.

Kenapa Destructuring Penting dalam JavaScript Modern

Ada beberapa alasan utama kenapa destructuring menjadi fitur wajib dikuasai:

1. Membuat Kode Lebih Singkat
   Tanpa destructuring, kode cenderung lebih panjang dan penuh duplikasi nama variabel.

2. Lebih Mudah Dibaca
   Struktur pengambilan data menjadi lebih jelas dan terprediksi.

3. Cocok untuk Data Kompleks
   Banyak API modern mengembalikan data kompleks berupa objek bersarang (nested object). Destructuring sangat membantu membongkar data tersebut.

4. Dipakai di Banyak Tempat
   Mulai dari Vue, React, Node.js, Express, Next.js, hingga TypeScript — semuanya memanfaatkan destructuring secara intensif.

Contoh Sederhana Perbandingan Sebelum dan Sesudah Destructuring

Tanpa Destructuring

const data = {
    title: "Belajar JavaScript",
    author: "Aris",
    year: 2025
};

const title = data.title;
const author = data.author;
const year = data.year;Code language: JavaScript (javascript)

Dengan Destructuring

const { title, author, year } = data;Code language: JavaScript (javascript)

Perbedaannya jelas — lebih efisien, lebih teratur, dan lebih sesuai dengan gaya JavaScript modern.

Dasar Destructuring Array

Destructuring array adalah teknik untuk mengambil nilai dari sebuah array berdasarkan urutan index dan menyimpannya ke variabel dengan cara yang lebih ringkas dan mudah dibaca. Konsep ini sangat membantu ketika kamu bekerja dengan data yang disusun dalam bentuk list, hasil API, atau kumpulan nilai tertentu.

Pada dasarnya, destructuring array mengikuti posisi (bukan nama) sehingga penting untuk memahami urutan item di dalam array.

Cara Dasar Destructuring Array

Sebelum ES6, jika ingin mengambil beberapa nilai dari sebuah array, kita harus menuliskannya seperti ini:

const fruits = ["apel", "mangga", "jeruk"];

const first = fruits[0];
const second = fruits[1];
const third = fruits[2];Code language: JavaScript (javascript)

Dengan destructuring:

const [first, second, third] = fruits;Code language: JavaScript (javascript)

Hanya satu baris dan semua nilai langsung tertangkap ke variabel sesuai urutannya.

Melewati (Skipping) Nilai dalam Array

Destructuring tidak mengharuskan kita mengambil semua nilai. Kamu bisa melewati (skip) nilai tertentu dengan membiarkan posisi tersebut kosong.

Contoh:

const numbers = [10, 20, 30, 40];

const [first, , third] = numbers;Code language: JavaScript (javascript)

Penjelasan:

• first = 10
• posisi index ke-1 dilewati
• third = 30

Teknik ini sangat berguna saat hanya membutuhkan sebagian data saja.

Mengatur Default Value

Kadang array tidak selalu berisi data lengkap. Agar variabel tetap mendapatkan nilai, kita bisa memberikan default value.

Contoh:

const users = ["Aris"];

const [name, age = 25] = users;Code language: JavaScript (javascript)

Karena hanya ada satu elemen:

• name = "Aris"
• age tidak ada → otomatis menggunakan default 25.

Default value ini sangat bermanfaat untuk mencegah error atau nilai undefined.

Menangkap Sisa Nilai dengan Rest Operator

Rest operator (...) digunakan untuk mengumpulkan sisa nilai array ke dalam satu variabel baru.

Contoh:

const colors = ["red", "green", "blue", "yellow"];

const [primary1, primary2, ...others] = colors;Code language: JavaScript (javascript)

Hasil:

• primary1 = "red"
• primary2 = "green"
• others = ["blue", "yellow"]

Ini sangat berguna ketika:

• ingin mengambil nilai tertentu di awal
• sisanya ingin diolah kemudian

Destructuring Nested Array (Array Bersarang)

Array bisa memiliki struktur bersarang, dan destructuring tetap dapat dilakukan dengan pola yang sama.

Contoh:

const points = [10, 20, [30, 40]];

const [x, y, [z, w]] = points;Code language: JavaScript (javascript)

Hasil:

• x = 10
• y = 20
• z = 30
• w = 40

Nested destructuring sangat membantu saat bekerja dengan data seperti:

• koordinat
• matriks
• API respons berbentuk array dalam array

Contoh Real Case: Mengambil Data Respons API

Misalkan API mengembalikan data bentuk array seperti:

const response = ["success", 200, ["Aris", "Budi", "Santi"]];

const [status, code, users] = response;Code language: JavaScript (javascript)

Atau langsung nested:

const [status, code, [u1, u2, u3]] = response;Code language: JavaScript (javascript)

Dengan destructuring, kamu bisa mengambil nilai secara cepat tanpa harus menulis akses index berkali-kali.

Error Umum pada Destructuring Array

Beberapa kesalahan yang sering terjadi:

1. Mengambil index dari array kosong

const [] = [];Code language: JavaScript (javascript)

Tidak error, tetapi semua variabel akan undefined.

2. Mengambil lebih banyak variabel dari jumlah elemennya

const [a, b, c] = [1];Code language: JavaScript (javascript)

Hasil:

• a = 1
• b = undefined
• c = undefined

3. Salah paham tentang posisi

Karena destructuring array berbasis posisi, maka urutannya harus benar.

Bagian ini memberikan dasar kuat untuk memahami konsep destructuring array sebelum lanjut ke fitur lebih kompleks.

Dasar Destructuring Object

Jika destructuring array mengambil nilai berdasarkan urutan, maka destructuring object bekerja berdasarkan nama properti. Ini berarti selama nama variabel cocok dengan nama key dalam object, maka nilai akan tersimpan dengan benar — terlepas dari urutan propertinya.

Destructuring object merupakan fitur ES6 yang sangat penting untuk menulis kode JavaScript yang lebih bersih, rapi, dan mudah dikelola, khususnya ketika bekerja dengan data API, konfigurasi aplikasi, atau object yang kompleks.

Cara Dasar Destructuring Object

Sebelum ES6, mengambil nilai dari object biasanya seperti ini:

const user = {
    name: "Aris",
    age: 25,
    job: "Developer"
};

const name = user.name;
const age = user.age;
const job = user.job;Code language: JavaScript (javascript)

Dengan destructuring:

const { name, age, job } = user;Code language: JavaScript (javascript)

Lebih singkat, mudah dibaca, dan tidak repetitif.

Mengganti Nama Variabel dengan Alias

Kadang kita ingin menggunakan nama variabel yang berbeda dari nama property. Caranya menggunakan sintaks property: alias.

Contoh:

const product = {
    id: 101,
    title: "Keyboard Mechanical"
};

const { id: productId, title: productName } = product;Code language: JavaScript (javascript)

Hasil:

• productId = 101
• productName = "Keyboard Mechanical"

Alias sangat berguna dalam situasi:

• menghindari nama variabel bentrok
• membuat nama lebih deskriptif
• merapikan struktur variabel

Memberikan Default Value

Seperti pada destructuring array, kita dapat memberikan default value untuk mencegah hasil undefined.

Contoh:

const settings = {
    theme: "dark"
};

const { theme, fontSize = 14 } = settings;Code language: JavaScript (javascript)

Hasil:

• theme = "dark"
• fontSize = 14 (karena tidak ada di object)

Default value ideal digunakan untuk:

• data konfigurasi
• object dari API yang tidak lengkap
• keamanan nilai fallback

Destructuring Object Bersarang (Nested Object)

Saat bekerja dengan data API, object bersarang adalah hal umum. Destructuring dapat dilakukan secara bertingkat.

Contoh:

const user = {
    name: "Aris",
    address: {
        city: "Jakarta",
        zip: 12345
    }
};

const { name, address: { city, zip } } = user;Code language: JavaScript (javascript)

Hasil:

• name = "Aris"
• city = "Jakarta"
• zip = 12345

Catatan penting:

address tidak ikut dibuat sebagai variabel, karena kita langsung mengambil city dan zip.

Menangkap Sisa Properti dengan Rest Operator

Rest operator (…) juga dapat digunakan pada object.

Contoh:

const user = {
    name: "Aris",
    age: 25,
    job: "Developer",
    country: "Indonesia"
};

const { name, age, ...others } = user;Code language: JavaScript (javascript)

Hasil:

• name = "Aris"
• age = 25
• others = { job: "Developer", country: "Indonesia" }

Ini sangat berguna saat:

• mengambil properti tertentu saja
• ingin memisahkan object besar menjadi bagian kecil
• membuat fungsi yang fleksibel dalam menangani argumen object

Mengambil Properti dengan Nama Berbeda dari Variabel yang Sama (Shorthand)

Jika nama variabel sama dengan nama property, cukup tulis sekali saja.

Contoh:

const config = {
    port: 3000,
    host: "localhost"
};

const { port, host } = config;Code language: JavaScript (javascript)

Shorthand ini membuat kode lebih bersih dan efisien.

Contoh Real Case Penggunaan Destructuring Object

1. Respons API

const response = {
    status: "success",
    code: 200,
    data: {
        username: "arisdev",
        email: "aris@example.com"
    }
};

const {
    status,
    code,
    data: { username, email }
} = response;Code language: JavaScript (javascript)

2. Parameter Function

function createUser({ name, age, job }) {
    console.log(name, age, job);
}

createUser({ name: "Aris", age: 25, job: "Developer" });Code language: JavaScript (javascript)

3. Pengambilan konfigurasi

const { mode = "production", debug = false } = options;Code language: JavaScript (javascript)

Error Umum pada Destructuring Object

1. Object kosong

const { a } = {};Code language: JavaScript (javascript)

→ hasil a = undefined.

2. Property tidak ada

const { age } = { name: "Aris" };Code language: JavaScript (javascript)

→ age = undefined (kecuali diberi default value).

3. Nested destructuring tanpa memastikan object-nya ada

const { profile: { email } } = user; // bisa error jika profile undefinedCode language: JavaScript (javascript)

Solusi:

Gunakan optional chaining:

const email = user.profile?.email;Code language: JavaScript (javascript)

Nested Destructuring

Nested destructuring adalah teknik destructuring tingkat lanjut yang memungkinkan kita mengambil nilai dari struktur data yang bersarang (nested), baik berupa array di dalam object, object di dalam array, atau kombinasi keduanya.

Fitur ini sangat berguna saat bekerja dengan data kompleks seperti respons API, data user, konfigurasi aplikasi, hingga struktur dataset yang memiliki banyak tingkatan.

Nested destructuring membantu kita menghindari penulisan panjang seperti:

const city = user.address.city;
const zip = user.address.zip;Code language: JavaScript (javascript)

Dengan destructuring bersarang, ini dapat diringkas menjadi:

const { address: { city, zip } } = user;Code language: JavaScript (javascript)

Bagian ini akan membahas penggunaan nested destructuring untuk berbagai skenario.

Nested Destructuring pada Object Bersarang

Skenario paling sering adalah object di dalam object.

Contoh dasar:

const user = {
    name: "Aris",
    contact: {
        email: "aris@example.com",
        phone: "081234567890"
        }
    };

    const { 
        name,
        contact: { email, phone }
    } = user;Code language: JavaScript (javascript)

Hasil:

• name = "Aris"
• email = "aris@example.com"
• phone = "081234567890"

Perhatikan bahwa variabel contact tidak dibuat, kecuali ditulis secara eksplisit.

Nested Destructuring pada Array Bersarang

Array juga dapat berisi array di dalamnya.

Contoh dasar:

const colors = ["red", ["green", "lightgreen"], "blue"];

const [primary, [secondary, light], tertiary] = colors;Code language: JavaScript (javascript)

Hasil:

• primary = "red"
• secondary = "green"
• light = "lightgreen"
• tertiary = "blue"

Nested destructuring array memudahkan pengambilan elemen tertentu tanpa harus melakukan akses berulang seperti colors[1][0].

Nested Destructuring pada Array of Object

Ini adalah bentuk yang sangat sering ditemui, terutama saat mengambil data API.

Contoh:

const products = [
    {
        id: 1,
        name: "Keyboard",
        price: 350000
    },
    {
        id: 2,
        name: "Mouse",
        price: 150000
    }
];

const [
    { name: firstProduct },
    { name: secondProduct }
] = products;Code language: JavaScript (javascript)

Hasil:

• firstProduct = "Keyboard"
• secondProduct = "Mouse"

Nested Destructuring pada Object of Array

Object juga bisa berisi array sebagai property.

Contoh:

const profile = {
    username: "arisdev",
    hobbies: ["coding", "gaming", "fishing"]
};

const { 
    username,
    hobbies: [hobby1, hobby2, hobby3]
} = profile;Code language: JavaScript (javascript)

Hasil:

• username = "arisdev"
• hobby1 = "coding"
• hobby2 = "gaming"
• hobby3 = "fishing"

Nested Destructuring dengan Default Value

Saat nilai bersarang tidak pasti ada, memberikan default value sangat membantu agar tidak terjadi error.

Contoh:

const response = {
    status: "success",
    data: {
        user: {
            name: "Aris"
            }
        }
};

const {
    data: {
        user: {
            name,
            email = "email@default.com"
            }
        }
    } = response;Code language: JavaScript (javascript)

Hasil:

• name = "Aris"
• email = "email@default.com"

Nested Destructuring dengan Alias

Anda juga dapat memberikan alias saat melakukan nested destructuring.

Contoh:

const company = {
    name: "Tech Corp",
    address: {
        city: "Jakarta",
        street: "Sudirman"
        }
    };

const {
    name: companyName,
    address: { city: companyCity, street: companyStreet }
} = company;Code language: JavaScript (javascript)

Hasil:

• companyName = "Tech Corp"
• companyCity = "Jakarta"
• companyStreet = "Sudirman"

Alias sangat berguna untuk:

• Memperjelas konteks
• Menghindari nama variabel konflik
• Membuat kode lebih mudah dipahami dalam data bersarang

Nested Destructuring + Rest Operator

Kita dapat menggabungkan nested destructuring dengan rest operator (…) untuk menangkap sisa data.

Contoh:

const user = {
    name: "Aris",
    address: {
        city: "Bandung",
        country: "Indonesia",
        postal: 40123
    }
};

const {
    address: { city, ...otherAddress }
} = user;Code language: JavaScript (javascript)

Hasil:

• city = "Bandung"
• otherAddress = { country: "Indonesia", postal: 40123 }

Nested Destructuring pada Parameter Function

Nested destructuring bisa langsung dilakukan pada parameter function untuk mempersingkat kode.

Contoh:

function printUser({
    name,
    contact: { email, phone }
}) {
    console.log(name, email, phone);
}

const user = {
    name: "Aris",
    contact: {
        email: "aris@example.com",
        phone: "081200011122"
    }
};

printUser(user);Code language: JavaScript (javascript)

Hasil:

• Aris aris@example.com 081200011122

Teknik ini sangat populer dalam:

• React component props
• Konfigurasi function
• Data API

Error Umum pada Nested Destructuring

1. Destructuring value yang undefined

const { address: { city } } = user; // error jika user.address undefinedCode language: JavaScript (javascript)

Solusi:

Gunakan optional chaining:

const city = user.address?.city;Code language: JavaScript (javascript)

2. Destructuring array bersarang yang tidak lengkap

const [a, [b, c]] = [1]; // errorCode language: JavaScript (javascript)

Solusi:

Berikan default:

const [a, [b, c] = []] = [1];Code language: JavaScript (javascript)

3. Salah alias penamaan

const { name: namaUser } = user;
console.log(name); // error, karena variabelnya 'namaUser'Code language: JavaScript (javascript)

Solusi:

const { name: namaUser } = user;
console.log(namaUser); // "Aris"Code language: JavaScript (javascript)

Nested destructuring adalah fitur yang sangat kuat, namun juga perlu kehati-hatian karena kesalahan kecil dapat menimbulkan error. Dengan memahami dasarnya, Anda dapat menulis kode yang lebih rapi, modern, dan efisien.

Default Value pada Destructuring

Dalam proses destructuring, kita dapat memberikan nilai default agar variabel tetap memiliki nilai saat data yang diambil ternyata undefined. Fitur ini sangat bermanfaat ketika kita bekerja dengan data eksternal (API), form input, atau variabel opsional.

Default value dapat digunakan pada array destructuring maupun object destructuring. Mari kita bahas satu per satu agar mudah dipahami.

Default Value pada Destructuring Array

Ketika suatu elemen array tidak tersedia, JavaScript akan mengisinya dengan undefined. Dengan default value, kita bisa menentukan nilai pengganti agar variabel tidak kosong.

Contoh tanpa default value:

const colors = ['red'];

const [primary, secondary] = colors;

console.log(primary);    // 'red'
console.log(secondary);  // undefinedCode language: JavaScript (javascript)

Agar secondary tidak undefined, kita bisa memberi nilai default.

Contoh dengan default value:

const colors = ['red'];

const [primary, secondary = 'blue'] = colors;

console.log(primary);    // 'red'
console.log(secondary);  // 'blue'Code language: JavaScript (javascript)

Hal ini sangat membantu jika kita ingin memastikan variabel memiliki nilai yang aman.

Default Value pada Destructuring Object

Pada object, default value digunakan jika property yang diambil tidak ada atau bernilai undefined.

Contoh tanpa default value:

const user = {
    name: 'Aris'
};

const { name, age } = user;

console.log(name);  // 'Aris'
console.log(age);   // undefinedCode language: JavaScript (javascript)

Contoh dengan default value:

const user = {
    name: 'Aris'
};

const { name, age = 25 } = user;

console.log(name);  // 'Aris'
console.log(age);   // 25Code language: JavaScript (javascript)

Default Value + Rename (Alias)

Default value juga bisa digabung dengan rename untuk membuat penulisan variabel lebih fleksibel.

Contoh:

const product = {
    title: 'Headset'
};

const {
    title: productTitle,
    stock: productStock = 10
} = product;

console.log(productTitle); // 'Headset'
console.log(productStock); // 10Code language: JavaScript (javascript)

Ini berguna saat kita bekerja dengan API yang memiliki struktur berbeda. Kita bisa memberi nama variabel sesuai kebutuhan.

Default Value pada Nested Destructuring

Default value juga dapat dipakai di dalam nested destructuring.

Contoh:

const user = {
    name: 'Budi',
    address: {}
};

const {
    address: {
        city = 'Kota Belum Diisi'
    }
} = user;

console.log(city);  // 'Kota Belum Diisi'Code language: JavaScript (javascript)

Tanpa default value, kode di atas bisa menghasilkan error atau nilai undefined.

Default Value pada Parameter Function (Dengan Destructuring)

Destructuring + default value sangat sering digunakan pada parameter function, khususnya untuk konfigurasi dan opsi.

Contoh penerapan:

function createUser({ name = 'Guest', isAdmin = false } = {}) {
    console.log(name, isAdmin);
}

createUser();                    // Guest false
createUser({ name: 'Aris' });    // Aris falseCode language: JavaScript (javascript)

Penjelasan:

Kita memberi default untuk object parameter: {} sehingga jika function dipanggil tanpa argumen, tetap tidak error.

Setiap property juga diberi default value masing-masing.

Ini adalah salah satu contoh best practice modern JavaScript.

Contoh:

createUser({ isAdmin: true });   // Guest trueCode language: JavaScript (javascript)

Penjelasan:

• Kita memberi default untuk object parameter: {} sehingga jika function dipanggil tanpa argumen, tetap tidak error.
• Setiap property juga diberi default value masing-masing.

Ini adalah salah satu contoh best practice modern JavaScript.

Kapan Harus Menggunakan Default Value?

Gunakan default value ketika:

• Data bersifat opsional
• Data bisa kosong / undefined
• Ingin membuat fallback value
• Ingin menulis kode lebih aman dan mudah diprediksi
• Saat membuat function yang menerima banyak opsi (configuration object)

Kesalahan Umum Default Value pada Destructuring

Mengira default value digunakan ketika nilai null

→ Padahal default value baru aktif jika nilainya undefined, bukan null.

const [value = 'default'] = [null];
console.log(value);  // null (bukan 'default')Code language: JavaScript (javascript)

Lupa memberi default pada parameter object dalam function

→ Akibatnya function error ketika dipanggil tanpa argumen.

function test({ a = 1 }){
    console.log(a);
}

test();  // TypeError: Cannot destructure property 'a' of 'undefined'Code language: JavaScript (javascript)

Solusi aman:

function test({ a = 1 } = {}){
    console.log(a);
}

test();  // 1Code language: JavaScript (javascript)

Rest Operator dalam Destructuring

Rest operator (…) merupakan salah satu fitur ES6 yang sangat berguna ketika bekerja dengan data yang jumlahnya dinamis. Dalam konteks destructuring, rest operator digunakan untuk mengambil sisa elemen dari array atau sisa properti dari object dan menggabungkannya menjadi sebuah variabel baru.

Fitur ini sangat berguna saat kamu ingin memisahkan sebagian data dan tetap menyimpan sisanya tanpa harus menuliskan semuanya satu per satu.

Pada bagian ini, kita akan membahas:

• Apa itu rest operator?
• Rest operator pada destructuring array
• Rest operator pada destructuring object
• Rest operator vs spread operator
• Aturan penting rest operator
• Kesalahan umum pemula
• Contoh penggunaan praktis

Apa Itu Rest Operator?

Rest operator adalah tanda tiga titik … yang digunakan untuk mengumpulkan sisa elemen menjadi sebuah array atau object baru.

Contoh sederhana:

const [...rest] = [1, 2, 3];
console.log(rest); // [1, 2, 3]Code language: JavaScript (javascript)

Tujuan utamanya adalah untuk mengambil “sisa” data tanpa harus menuliskannya satu per satu.

Rest Operator pada Destructuring Array

Ketika melakukan destructuring pada array, rest operator akan mengambil semua sisa elemen setelah elemen yang ditentukan sebelumnya.

Contoh Penggunaan Dasar

const numbers = [10, 20, 30, 40, 50];

const [first, second, ...others] = numbers;

console.log(first);   // 10
console.log(second);  // 20
console.log(others);  // [30, 40, 50]Code language: JavaScript (javascript)

Di sini:

• first → elemen pertama
• second → elemen kedua
• others → semua elemen setelahnya

Contoh: Mengambil item pertama dari daftar

const fruits = ['apple', 'banana', 'orange'];

const [favorite, ...others] = fruits;

console.log(favorite); // 'apple'
console.log(others);   // ['banana', 'orange']Code language: JavaScript (javascript)

Rest Operator pada Destructuring Object

Rest operator juga dapat digunakan pada object untuk mengambil sisa properti yang tidak disebutkan.

Contoh Penggunaan Dasar

const user = {
    name: 'Aris',
    age: 25,
    country: 'Indonesia',
    job: 'Developer'
};

const { name, ...details } = user;

console.log(name);     // 'Aris'
console.log(details);  // { age: 25, country: 'Indonesia', job: 'Developer' }Code language: JavaScript (javascript)

Penjelasan:

• name → diambil secara eksplisit
• details → semua properti lain digabung menjadi object baru

Contoh: Memisahkan properti penting

const config = {
    url: '/api/users',
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
};

const { url, ...options } = config;

console.log(url);     // '/api/users'
console.log(options); // { method: 'GET', headers: {...} }Code language: JavaScript (javascript)

Rest Operator vs Spread Operator (Beda Fungsi!)

Meskipun sama-sama menggunakan ..., rest operator dan spread operator memiliki fungsi yang berlawanan.

Rest Operator

• Digunakan saat destructuring
• Mengumpulkan sisa elemen
• Output: array atau object baru berisi sisa elemen

Spread Operator

• Digunakan saat menyebarkan array/object ke tempat lain
• Menyalin atau menggabungkan data

Contoh perbedaan

Rest: (mengumpulkan)

const [first, ...rest] = [1, 2, 3];
console.log(rest); // [2, 3]Code language: JavaScript (javascript)

Spread: (menyebarkan)

const nums = [1, 2, 3];
const newArr = [...nums, 4];
console.log(newArr); // [1, 2, 3, 4]Code language: JavaScript (javascript)

Aturan Penting Rest Operator

Ada beberapa aturan yang harus kamu perhatikan agar destructuring dengan rest operator tidak error:

1. Rest operator harus berada di posisi terakhir

Array:

const [a, ...rest, b] = [1, 2, 3, 4]; 
// ERROR — rest harus di akhirCode language: JavaScript (javascript)

Object:

const { a, ...rest, b } = obj;
// ERROR — rest harus paling akhirCode language: JavaScript (javascript)

2. Tidak bisa digunakan untuk mengambil elemen tengah secara langsung

Jika ingin mengambil tengah, kamu harus membuat destructuring tambahan.

3. Tidak bisa mengambil properti non-enumerable (misalnya symbol)

Rest operator hanya mengambil properti enumerable biasa.

Kesalahan Umum Pemula

Berikut beberapa kesalahan yang sering terjadi:

1. Mengira rest dan spread itu sama
   Padahal rest → mengumpulkan, spread → menyebarkan.

2. Lupa bahwa rest harus berada di akhir
   Baik pada array maupun object.

3. Menggunakan rest pada nilai primitif
   Rest hanya bekerja pada array dan object.

4. Mengira rest bisa memfilter properti tertentu otomatis
   Padahal rest hanya mengambil sisa properti yang tidak disebutkan.

Contoh Penggunaan Rest Operator dalam Kasus Nyata

Contoh 1 — Mengambil sisa parameter function

function sum(first, ...numbers) {
    console.log(numbers); // sisa angka
}

sum(1, 2, 3, 4, 5);Code language: JavaScript (javascript)

Output:

[2, 3, 4, 5]Code language: JSON / JSON with Comments (json)

Contoh 2 — Membersihkan object dari key tertentu

const { password, ...safeUser } = {
    username: 'arisdev',
    password: 'rahasia',
    role: 'admin'
};

console.log(safeUser);Code language: JavaScript (javascript)

Output:

{ username: 'arisdev', role: 'admin' }Code language: CSS (css)

Sangat berguna saat ingin menghapus data sensitif.

Rest operator adalah fitur yang sangat penting dalam destructuring karena membuat kita lebih fleksibel saat mengelola data dalam jumlah banyak. Dengan memahami cara kerjanya pada array dan object, kamu bisa menulis kode yang lebih efisien, rapih, dan modern sesuai standar ES6.

Destructuring dalam Parameter Function

Destructuring bukan hanya digunakan untuk mengambil nilai dari array atau object di luar function, tetapi juga bisa diterapkan langsung pada parameter function. Ini adalah salah satu penggunaan destructuring yang paling kuat dalam JavaScript modern, terutama dalam pengembangan aplikasi skala besar.

Pada bagian ini kita akan membahas:

• Kenapa destructuring di parameter function penting
• Destructuring pada parameter array
• Destructuring pada parameter object
• Menambahkan default value
• Destructuring pada parameter function bersarang
• Contoh kasus real-world
• Best practice

Mari kita masuk ke pembahasannya satu per satu.

Kenapa Destructuring di Parameter Function Penting?

Jika kamu sering membuat function yang menerima object konfigurasi, data user, atau array data, destructuring dapat:

• membuat function lebih bersih dan mudah dibaca
• mengurangi repetisi kode
• mencegah error akibat pemanggilan properti yang dalam
• memberikan nilai default dengan mudah

Dari gaya penulisan seperti ini:

function createUser(user) {
    console.log(user.name);
    console.log(user.age);
    console.log(user.country);
}Code language: JavaScript (javascript)

Menjadi seperti ini:

function createUser({ name, age, country }) {
    console.log(name);
    console.log(age);
    console.log(country);
}Code language: JavaScript (javascript)

Lebih ringkas, bersih, dan mudah dipahami.

Destructuring pada Parameter Array

Jika function kamu menerima sebuah array, kamu bisa langsung memecahnya menjadi variabel menggunakan array destructuring.

Contoh Dasar

function printCoordinates([x, y]) {
    console.log(`X: ${x}`);
    console.log(`Y: ${y}`);
}

printCoordinates([10, 20]);Code language: JavaScript (javascript)

Output:

X: 10
Y: 20Code language: HTTP (http)

Contoh: Mengambil data user dari array

function showUser([id, name, role]) {
    console.log(id, name, role);
}

showUser([1, 'Aris', 'admin']);Code language: JavaScript (javascript)

Destructuring pada Parameter Object

Inilah penggunaan yang paling umum dan paling membantu dalam development modern.

Contoh Dasar

function displayUser({ name, age }) {
    console.log(`Nama: ${name}`);
    console.log(`Umur: ${age}`);
}

displayUser({
    name: 'Aris',
    age: 25
});Code language: JavaScript (javascript)

Tidak perlu lagi menulis user.name, user.age, dan seterusnya.

Contoh: Parameter Banyak dengan Urutan Tidak Penting

Destructuring pada object tidak bergantung pada urutan!

function connectDB({
    host,
    port,
    username,
    password
}) {
    console.log(host, port, username, password);
}

connectDB({
    port: 3306,
    host: 'localhost',
    password: 'secret',
    username: 'root'
});Code language: JavaScript (javascript)

Menambahkan Default Value di Parameter Function

Default value bisa digunakan untuk memberi nilai fallback jika data tidak tersedia.

Default Value untuk Array

function multiply([a = 1, b = 1]) {
    return a * b;
}

console.log(multiply([5])); // 5 * 1 = 5Code language: JavaScript (javascript)

Default Value untuk Object

function greet({ name = 'Guest', message = 'Welcome' }) {
    console.log(`${message}, ${name}!`);
}

greet({ name: 'Aris' });Code language: JavaScript (javascript)

Output:

Welcome, Aris!

Nested Destructuring di Parameter Function

Jika data yang masuk memiliki struktur bersarang, destructuring bisa langsung mengambil data dalam.

Contoh: Object di Dalam Object

function showProfile({
    username,
    address: { city, country }
}) {
    console.log(username);
    console.log(city, country);
}

showProfile({
    username: 'arisdev',
    address: {
        city: 'Bandung',
        country: 'Indonesia'
    }
});Code language: JavaScript (javascript)

Contoh: Array di Dalam Object

function processOrder({
    id,
    items: [firstItem, ...others]
}) {
    console.log('Order ID:', id);
    console.log('Item pertama:', firstItem);
    console.log('Item lainnya:', others);
}

processOrder({
    id: 99,
    items: ['mouse', 'keyboard', 'monitor']
});Code language: JavaScript (javascript)

Contoh Penggunaan Destructuring dalam Real-World

1. API Response Handling

function handleResponse({ status, data: { user, token } }) {
    console.log(status);
    console.log(user);
    console.log(token);
}Code language: JavaScript (javascript)

2. Function dengan Object Config

function createServer({
    port = 3000,
    host = 'localhost'
}) {
    console.log(`Server berjalan di http://${host}:${port}`);
}

createServer({});Code language: JavaScript (javascript)

3. Event Listener di Browser

document.addEventListener('click', ({ clientX, clientY }) => {
    console.log(clientX, clientY);
});Code language: JavaScript (javascript)

4. Optimasi Penulisan Helper Function

const user = { id: 1, name: 'Aris', role: 'admin' };

function printRole({ role }) {
    console.log(role);
}

printRole(user);Code language: JavaScript (javascript)

Best Practice Destructuring Pada Parameter Function

• Gunakan destructuring untuk parameter object yang banyak
  Lebih mudah dibaca daripada daftar parameter panjang.

• Gunakan default value untuk membuat function lebih aman
  Mencegah undefined error.

• Hindari destructuring yang terlalu dalam
  Jika terlalu kompleks, buat variabel terpisah untuk meningkatkan keterbacaan.

• Gunakan object destructuring untuk parameter opsional
  Flexible dan mudah dipahami.

• Hindari destructuring pada function yang dipanggil ribuan kali dalam loop berat
  Karena destructuring menambah sedikit overhead.

Destructuring dalam parameter function adalah teknik yang sangat membantu dalam menulis kode JavaScript yang lebih bersih, modern, dan mudah dirawat. Dengan teknik ini, kamu tidak hanya mempercepat proses coding tetapi juga meningkatkan kejelasan struktur data yang digunakan dalam sebuah function.

Jika dipahami dan diterapkan dengan tepat, destructuring dapat meningkatkan kualitas kode secara signifikan, terutama pada aplikasi besar berbasis JavaScript modern.

Destructuring pada Array Method (map, filter, reduce)

Salah satu penggunaan destructuring paling praktis dan sering dijumpai dalam JavaScript modern adalah pada array method seperti map, filter, dan reduce. Metode-metode ini sering dipakai untuk mengolah data dalam bentuk array, terutama dalam aplikasi frontend (React, Vue, Svelte), backend (Node.js), maupun dalam proses manipulasi data secara umum.

Dengan destructuring, kita bisa mengambil nilai tertentu dari item array atau object yang berada di dalam array — tanpa harus mengaksesnya satu per satu menggunakan titik (.) atau indeks ([]) secara manual.

Pada bagian ini, kita akan membahas:

• Manfaat destructuring pada array method
• Destructuring pada map()
• Destructuring pada filter()
• Destructuring pada reduce()
• Contoh kasus nyata dalam aplikasi
• Best practice

Mari kita mulai.

Kenapa Destructuring di Array Method Penting?

Array method sering berisi callback yang menerima parameter seperti:

(item) => { ... }Code language: PHP (php)

Jika item adalah object, destructuring memungkinkan kita langsung mengambil properti yang dibutuhkan:

Tanpa destructuring:

users.map(user => user.name)Code language: JavaScript (javascript)

Dengan destructuring:

users.map(({ name }) => name)Code language: JavaScript (javascript)

Lebih pendek, lebih bersih, lebih mudah dibaca.

Destructuring pada map()

Metode map() digunakan untuk membuat array baru dari hasil transformasi setiap item.

Contoh 1 — Destructuring Object di map()

const users = [
    { id: 1, name: 'Aris', age: 25 },
    { id: 2, name: 'Budi', age: 30 },
    { id: 3, name: 'Citra', age: 28 }
];

const names = users.map(({ name }) => name);

console.log(names);Code language: JavaScript (javascript)

Output:

['Aris', 'Budi', 'Citra']Code language: JSON / JSON with Comments (json)

Contoh 2 — Mengambil Banyak Properti

const userSummaries = users.map(({ name, age }) => {
    return `${name} berumur ${age} tahun`;
});Code language: JavaScript (javascript)

Contoh 3 — Destructuring Array dalam map()

const coordinates = [
    [10, 20],
    [5, 15],
    [7, 30]
];

const formatted = coordinates.map(([x, y]) => `X=${x}, Y=${y}`);

console.log(formatted);Code language: JavaScript (javascript)

Destructuring pada filter()

Metode filter() digunakan untuk memilih item yang memenuhi kondisi tertentu.

Contoh 1 — Filter Berdasarkan Properti Object

Tanpa destructuring:

users.filter(user => user.age > 25)Code language: JavaScript (javascript)

Dengan destructuring:

const adults = users.filter(({ age }) => age > 25);Code language: JavaScript (javascript)

Contoh 2 — Filter Berdasarkan Beberapa Properti

const selected = users.filter(({ age, name }) => {
    return age > 20 && name.startsWith('A');
});Code language: JavaScript (javascript)

Contoh 3 — Filter Data Array

const scores = [
    [1, 90],
    [2, 70],
    [3, 85]
];

const highScores = scores.filter(([id, score]) => score >= 85);

console.log(highScores);Code language: JavaScript (javascript)

Destructuring pada reduce()

Metode reduce() adalah array method paling fleksibel karena bisa digunakan untuk apa pun, mulai dari menjumlahkan angka, mengelompokkan data, hingga membuat struktur baru.

Destructuring menjadikannya lebih mudah dibaca.

Contoh 1 — Menjumlahkan Properti Tertentu

Tanpa destructuring:

scores.reduce((acc, item) => acc + item.score, 0)Code language: JavaScript (javascript)

Dengan destructuring:

const players = [
    { name: 'Aris', score: 80 },
    { name: 'Budi', score: 95 },
    { name: 'Citra', score: 75 }
];

const totalScore = players.reduce((acc, { score }) => acc + score, 0);

console.log(totalScore);Code language: JavaScript (javascript)

Contoh 2 — Mengelompokkan Data (Grouping)

const orders = [
    { id: 1, status: 'pending' },
    { id: 2, status: 'success' },
    { id: 3, status: 'pending' },
    { id: 4, status: 'success' }
];

const grouped = orders.reduce((acc, { status }) => {
    acc[status] = (acc[status] || 0) + 1;
    return acc;
}, {});

console.log(grouped);Code language: JavaScript (javascript)

Output:

{ pending: 2, success: 2 }Code language: CSS (css)

Contoh 3 — Destructuring Array dalam reduce()

const numbers = [10, 20, 30];

const sum = numbers.reduce((acc, value) => acc + value, 0);

console.log(sum);Code language: JavaScript (javascript)

Contoh 4 — Complex reduce dengan Nested Destructuring

const products = [
    { id: 1, detail: { price: 20000 } },
    { id: 2, detail: { price: 50000 } },
    { id: 3, detail: { price: 15000 } }
];

const total = products.reduce((acc, { detail: { price } }) => acc + price, 0);

console.log(total);Code language: JavaScript (javascript)

Contoh Kasus Nyata Destructuring pada Array Method

1. Memproses data API

const response = [
    { user: { name: 'Aris', age: 25 } },
    { user: { name: 'Budi', age: 30 } }
];

const names = response.map(({ user: { name } }) => name);Code language: JavaScript (javascript)

2. Membersihkan data sebelum dikirim ke server

const cleanData = users.map(({ id, name }) => ({ id, name }));Code language: JavaScript (javascript)

3. Mengubah array object menjadi key-value map

const userMap = users.reduce((acc, { id, name }) => {
    acc[id] = name;
    return acc;
}, {});Code language: JavaScript (javascript)

Best Practice Destructuring di Array Method

• Gunakan destructuring hanya ketika properti yang dibutuhkan jelas
  Callback tetap harus mudah dibaca.

• Hindari nested destructuring yang terlalu dalam
  Jika callback menjadi terlalu rumit → pisahkan dulu.

• Gunakan default value jika data tidak pasti
  Menghindari error undefined.

const users = data.map(({ name = 'Guest' }) => name);Code language: JavaScript (javascript)

• Untuk transformasi kompleks, gunakan reduce + destructuring dengan hati-hati
  Jaga readability.

• Destructuring sangat cocok untuk data API
  Terutama jika format respons kompleks

Destructuring dalam array method seperti map, filter, dan reduce merupakan kemampuan penting dalam JavaScript modern. Teknik ini membuat kode lebih bersih, efisien, dan mudah dibaca, terutama saat menangani data dalam bentuk array object—sebuah kebutuhan yang hampir selalu muncul di dunia development saat ini.

Destructuring bukan hanya membuat kode lebih pendek, tetapi juga mengurangi potensi error akibat akses properti berulang dan mempermudah proses transformasi data.

Perbedaan Destructuring Array vs Object

Destructuring pada JavaScript dapat dilakukan pada array maupun object, namun keduanya memiliki karakteristik serta aturan yang berbeda. Memahami perbedaan ini sangat penting agar tidak terjadi error atau perilaku yang tidak sesuai harapan saat mengekstrak data dari struktur kompleks.

Perbedaan Dasar Destructuring Array dan Object

Destructuring Array

• Digunakan untuk mengambil nilai berdasarkan urutan/index.
• Struktur penulisan menggunakan tanda kurung siku [ ].

Contoh:

const colors = ["red", "green", "blue"];
const [first, second, third] = colors;

console.log(first);  // red
console.log(second); // green
console.log(third);  // blueCode language: JavaScript (javascript)

Destructuring Object

• Digunakan untuk mengambil nilai berdasarkan nama property (key).
• Struktur penulisan menggunakan tanda kurung kurawal { }.

Contoh:

const user = {
  name: "Aris",
  age: 25
};

const { name, age } = user;

console.log(name); // Aris
console.log(age);  // 25Code language: JavaScript (javascript)

Berdasarkan Urutan vs Berdasarkan Nama

Array → berdasarkan posisi

Jika urutannya salah, maka hasilnya juga salah.

const arr = [10, 20, 30];
const [b, a] = arr;

console.log(b); // 10
console.log(a); // 20   (bukan 30)Code language: JavaScript (javascript)

Object → berdasarkan nama

Meski posisinya diacak, hasil tetap sama selama nama key cocok.

const obj = { x: 1, y: 2 };

const { y, x } = obj;

console.log(y); // 2
console.log(x); // 1Code language: JavaScript (javascript)

Default Value pada Array vs Object

Array default:

Bekerja berdasarkan urutan index.

const arr = [100];
const [a, b = 200] = arr;

console.log(a); // 100
console.log(b); // 200Code language: JavaScript (javascript)

Object default:

Bekerja berdasarkan nama property.

const user = { name: "Aris" };
const { name, age = 30 } = user;

console.log(name); // Aris
console.log(age);  // 30Code language: JavaScript (javascript)

Mengganti Nama Variable Saat Destructuring

Array

Tidak bisa mengganti nama seperti object (karena berbasis posisi), namun kamu bisa memilih nama variabel sesukamu:

const arr = [1, 2];
const [foo, bar] = arr;

console.log(foo, bar); // 1 2Code language: JavaScript (javascript)

Object

Bisa mengganti nama variabel menggunakan :

const user = { name: "Aris", age: 25 };

const { name: username, age: userAge } = user;

console.log(username); // Aris
console.log(userAge);  // 25Code language: JavaScript (javascript)

Ini salah satu perbedaan paling penting.

Kasus Umum yang Sering Membingungkan

1. Destructuring array dengan skip value

const arr = ["a", "b", "c"];
const [ , second] = arr;

console.log(second); // bCode language: JavaScript (javascript)

2. Destructuring object dengan property tidak ada

const obj = { title: "Book" };
const { title, price } = obj;

console.log(price); // undefinedCode language: JavaScript (javascript)

3. Nama variable tidak boleh sama dengan nama property saat destructuring object (kecuali rename)

const person = { name: "Aris" };

// Error jika ingin memisahkan namanya namun variabel sudah ada
const { name: username } = person;Code language: JavaScript (javascript)

Tabel Perbandingan Lengkap

Fitur	Array Destructuring	Object Destructuring
Berdasarkan	Urutan/index	Nama property (key)
Sintaks	[ ]	{ }
Boleh skip?	Ya ([ , second])	Tidak bernilai jika key tidak ada
Default value	Berdasarkan urutan	Berdasarkan nama key
Rename variable	Tidak pakai format khusus	Menggunakan :
Harus match dengan?	Posisi	Nama property
Cocok untuk	List, hasil API berbentuk array, koordinat	Object data, konfigurasi, profile user

Kesimpulan

Destructuring adalah salah satu fitur modern JavaScript yang memberikan cara lebih ringkas, bersih, dan efisien dalam mengekstrak data dari array maupun object. Fitur ini bukan lagi sekadar sintaks “pemanis”, tetapi sudah menjadi standar dalam penulisan kode JavaScript modern, terutama ketika bekerja dengan API, data kompleks, modularisasi, serta pengembangan berbasis framework seperti React, Vue, Svelte, dan Node.js.