Mengenal Fitur Destructuring Assignment pada ES2015

Belajar bahasa pemrograman akan sering berkutat dengan yang namanya memanipulasi data. memasukkan sebuah variabel ke dalam array/object atau sebaliknya.

Destructuring assignment adalah ekspresi javascript yang memungkinkan untuk membagi atau memecah nilai dari sebuah array atau objek ke dalam variabel yang berbeda. Fitur ini hampir mirip dengan fitur yang ada pada bahasa pemrograman lain seperti Perl dan Python.

Array Destructuring

var numbers = [3,6];
/* memecah array tanpa destructuring assignment */
// var a = numbers[0];
// var b = numbers[1];
/* memecah array dengan desctructuring assignment */
var [a, b] = numbers;
console.log(a, b);  // 3 6

Pada contoh pertama, kita mempunyai variabel numbers dengan tipe data array yang mempunyai nilai 3,6. Kemudian dengan destructuring assignment, kita bisa memecah variabel tersebut ke dalam variabel a & b hanya dengan satu baris kode. Jika tanpa destructuring assignment, kita perlu menuliskan dua langkah/baris kode. seperti yang tertulis juga pada kode di atas.

var a = 5;
var b = 10;
var [a, b] = [b, a];
console.log(a, b); // 10 5

Membalik atau menukar sebuah nilai antar variabel menjadi lebih mudah dan simpel menggunakan destructuring assignment.

let a = [1,2,3];
let [b,,c] = a;
console.log(b); // 1
console.log(c); // 3

Kita bisa mengabaikan(ignore) beberapa value yang tidak ingin dipecah ke variabel lain.

let numbers = [3,4,6,7];
let [firstNumber, ...otherNumber] = numbers;
console.log(firstNumber); // 3
console.log(otherNumber); // [4,6,7]

Destructuring assignment juga bisa digunakan bersama spread operator seperti pada contoh di atas. Bisa kita liat, kita memecah nilai variabel numbers kedua variabel yang berbeda yaitu firstNumber yang mengambil nilai index pertama yaitu 3 dan otherNumber mengambil nilai lain dari variabel numbers menjadi sebuah variabel array baru (otherNumbers) dengan nilai [4,6,7]

Object Destructuring

let me = {name: "Budi", age: 20};
let {name, age} = me;
console.log(name); // Budi
console.log(age); // 20

Untuk mengekstrak atau memecah variabel menggunakan destructuring assignment pada objek, berpatokan pada key objek itu. Semisal pada contoh di atas. kita ingin memecah variabel me menjadi 2 variabel berbeda yang masing-masing akan mengambil nilai dari key name dan age. maka kita menggunakan key tersebut untuk memecahnya. Jika kita hanya ingin mengambil nilai dari key age nya saja maka bisa bisa menuliskannya seperti ini.

let me = {name: "Budi", age: 20};
let {age} = me;
console.log(age); // 20

let me = {name: "Budi", age: 20};
let {name: nama, age: umur} = me;
console.log(nama); // Budi
console.log(umur); // 20

Pada contoh di atas sama seperti contoh sebelumnya, hanya saja kita memecah variabel tersebut dan memberikan nama baru untuk variabel-variabelnya. variabel nama mengambil nilai dari key “name” dan variabel umur mengambil nilai dari key “age”. output yang dihasilkan tetap sama.

let numbers = {a: 1, b: 2, c: 3, d: 4};
let {a,b,...n} = numbers;
console.log(a); //1
console.log(b); //2
console.log(n); // {c:3, d: 4}

Mengkombinasikan destructuring assignment dengan spread operator untuk memecah nilai dari sebuah objek.

let name,age;
let me = {name: "Budi", age: 20};
/**
* harus di tulis didalam blok/atau didalam tanda ()
**/
({name,age} = me); 
console.log(name); // Budi
console.log(age); // 20

Jika variabel yang akan diberi nilai dari pecahan variabel lain menggunakan destructuring assignment sudah dideklarasikan, maka untuk memecahnya kita harus menuliskannya di dalam sebuah blok atau dari contoh di atas ditulis di antara tanda kurung ().

Referensi :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment