Destrukturisasi Data di JavaScript
Destrukturisasi (destructuring) adalah proses mengembalikan data struktur yang sebelumnya terstruktur menjadi tidak lagi terstruktur atau dipisah pada tiap-tiap elemen.
Cara ini biasa sering dipraktikkan untuk mengambil nilai-nilai dari elemen tertentu pada data yang bentuknya sudah terstruktur sebelumnya, seperti pada array atau objek di JavaScript.
Berikut cara-cara melakukan destrukturisasi data struktur pada JavaScript.
Destrukturisasi Array di JavaScript
Sebelum ES6, kita harus mengekstrak nilai dari sebuah array secara manual dengan menggunakan sintaks array indexing.
Berikut adalah contoh bagaimana kita dapat mengekstrak nilai dari sebuah array menggunakan sintaks array indexing di ES5:
// ES5
const arr = [‘Yaumil’, 26];
const name = arr[0];
const age = arr[1];
console.log(name);
console.log(age);
Pada ES6 ada destrukturisasi pada array, sehingga penulisan bisa lebih singkat dan mudah seperti contoh kode berikut.
// ES6
const arr = [‘Yaumil’, 26]; const [name, age] = arr; console.log(name); console.log(age);
Destrukturisasi Object di JavaScript
Sama seperti array ES6, sebelumnya kita harus mengekstraknya secara manual menggunakan sintaks objek.
Berikut adalah contoh bagaimana kita dapat mengekstrak nilai dari objek menggunakan sintaks objek di ES6:
// ES5
const obj = {
firstName: ‘Yaumil’,
lastName: ‘Ikhsan’
};
var firstName = obj.firstName;
var lastName = obj.lastName;
console.log(firstName);
console.log(lastName);
Destructuring object pada javascript ES6 dapat kita lihat pada contoh dibawah ini.
// ES6
const obj = { firstName: ‘Yaumil’, lastName: ‘Ikhsan’ }; const {firstName, lastName} = obj; console.log(firstName); console.log(lastName);
atau
const {firstName : a, lastName: b} = obj; console.log(a); console.log(b);
Contoh Penggunaan Destrukturisasi di JavaScript
function calcRetirement(year) { const age = new Date().getFullYear() - year; return [age, 65 – age]; } const [age, retirement] = calcRetirement(1998); console.log(age); console.log(retirement);