Destructuring Assignment pada Javascript

Salah satu fitur baru Javascript yang diperkenalkan oleh ECMAScript 2015 (ES6) adalah destructuring assignment. Fitur ini memungkinkan kita 'membongkar' isi array dan objek untuk disimpan pada beberapa variabel. Dengan menggunakan fitur ini, kita dapat menghemat kode secara signifikan.

Array Destructuring

Misalkan kita punya array seperti berikut ini:

const arr = [0, 1, 2, 3];

Jika kita ingin menempatkan masing-masing nilainya ke dalam variabel a sampai d, kita akan melakukan:

var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];

Keseluruhan kode penempatan isi arr ke dalam masing-masing variabel memakan 4 baris kode. Dengan destructuring, kita dapat menulisnya hanya dalam 1 baris.

var [a, b, c, d] = arr;

console.log(a); //0
console.log(b); //1
console.log(c); //2
console.log(d); //3

Kita juga bisa memisahkan deklarasi variabel dari assignment-nya.

var a, b, c, d;

[a, b, c, d] = arr;

Array dalam Javascript akan mengembalikan undefined ketika kita mencoba mengakses nilai di luar batasnya (index out of bounds). Konsekuensinya, jika panjang array yang kita deklarasikan melebihi panjang array sumbernya, kita dapat temukan variabel yang kita assign memiliki nilai undefined. Untuk menanggulanginya, kita dapat memberikan nilai default bagi variabel yang akan di-assign melalui destructuring.

var a, b, c, d, e;

[a, b, c, d, e=4] = arr;

console.log(e); //4

Sebaliknya, jika terdapat elemen pada array yang ingin kita abaikan, kita tinggal mengosongkan nama variabel pada tempat yang kita inginkan.

var a, b;

[a, , b] = arr;

console.log(a); //0
console.log(b); //2

Jika array yang akan kita 'bongkar' tidak diketahui panjangnya, dan kita ingin mengekstraksi beberapa elemen terdepannya dan sisa elemennya, kita dapat menggabungkan array destructuring dengan rest operator.

const arr2 = [0, 1, 3, 4, 5, 6];
var [a, b, ...rest] = arr2;

console.log(a); //0
console.log(b); //1
console.log(rest); //[3, 4, 5, 6]

Object Destructuring

Destructuring juga dapat dilakukan terhadap objek, dan cukup powerful. Mari kita lihat praktik standarnya.

const person = { name: 'Faisal', age: 17 };

const { name, age } = person;

console.log(name); //'Faisal'
console.log(age); //17

Seperti array destructuring, kita juga dapat melakukan destructuring terhadap objek tanpa melakukan deklarasi pada baris yang sama. Perbedaannya adalah kita harus membungkusnya dengan sepasang tanda kurung agar pernyataan pada sisi kiri ({ name, age }) tidak dianggap sebagai blok;

let name, age;
const person = { name: 'Faisal', age: 17 };

({ name, age } = person);

Dalam object destructuring, nama key pada sisi kiri pernyataan harus match dengan nama key pada objek sumber. Namun, kita dapat memasang hasil destructuring ke dalam variabel dengan nama berbeda dengan cara berikut.

let nama, umur;
const person = { person: 'Faisal', age: 17 };

({name: nama, age: umur} = person);

console.log(nama); //'Faisal'
console.log(umur); //17

Seperti array destructuring juga, kita dapat memberikan nilai default pada key objek hasil destructuring kita.

let name, age, website;
const person = { name: 'Faisal', age: 17 };

({ name, age, website = 'icalrn.id' } = person);

console.log(website); //'icalrn.id'

Sekali lagi, seperti array destructuring juga, kita dapat menggunakan rest operator dalam object destructuring.

const obj = { a: 0, b: 1, c: 2, d: 3 };

const { a, b, ..rest } = obj;

console.log(a); //0
console.log(b); //1
console.log(c); //{ c: 2, d: 3 }

Object Destructuring dan Fungsi

Penggunaan praktis object destructuring sangat bermanfaat terutama dalam penulisan fungsi. Berikut adalah beberapa contoh kasusnya.

Membongkar Objek yang Dikirim sebagai Parameter Fungsi

Object destructuring bisa sangat membantu memperingkas dan meningkatkan keterbacaan kode fungsi yang membutuhkan objek sebagai parameternya. Perhatikan contoh berikut.

function printAddress(address) {
  var streetName = address.streetName;
  var houseNumber = address.houseNumber;
  var city = address.city;

  return `${streetName} No. ${houseNumber}, ${city}`;
}

var address = printAddress({ streetName: 'Jalan Kasuari', houseNumber: '2A', city: 'Kab. Bogor' });

console.log(address); //Jalan Kasuari No. 2A, Kab. Bogor

Sekarang kita gunakan object destructuring pada parameter fungsi tersebut.

function printAddress({ streetName, houseNumber, city }) {
  return `${streetName} No. ${houseNumber}, ${city}`;
}

var address = printAddress({ streetName: 'Jalan Kasuari', houseNumber: '2A', city: 'Kab. Bogor' });

console.log(address); //Jalan Kasuari No. 2A, Kab. Bogor

Dari sebuah fungsi yang memakan 7 baris kode menjadi hanya 3 baris kode. Sangat membantu, bukan? Selain itu, dengan membaca parameternya saja kita sudah mengetahui data apa saja yang dibutuhkan fungsi tersebut beserta nama key-nya.

Mengatur Nilai Default dari Parameter Sebuah Fungsi

Dalam penulisan fungsi dengan parameter berupa objek, penentuan default value menjadi sangat panjang.

function printAddress(address) {
  address = address === undefined ? {} : address;
  var streetName = address.streetName === undefined ? 'Jalan X' : address.streetName;
  var houseNumber = address.houseNumber === undefined ? '0' : address.houseNumber;
  var city = address.city === undefined ? 'Kota Y' : address.city;

  return `${streetName} No. ${houseNumber}, ${city}`;
}

var address = printAddress({ streetName: 'Jalan Kasuari', city: 'Kab. Bogor' });

console.log(address); //'Jalan Kasuari No. 0, Kab. Bogor'

Karena kita mengetahui bahwa parameter fungsi tersebut disepakati adalah sebuah objek, kita dapat melakukan object destructuring dengan default value untuk membongkar parameter yang dioper ke fungsi tersebut.

function printAddress({ streetName = 'Jalan X', houseNumber = '0', city = 'Kota Y' }) {
  return `${streetName} No. ${houseNumber}, ${city}`;
}

var address = printAddress({ streetName: 'Jalan Kasuari', city: 'Kab. Bogor' });

console.log(address); //'Jalan Kasuari No. 0, Kab. Bogor'

Dari contoh tersebut, terlihat bagaimana penggunaan object destructuring untuk menentukan nilai default parameter fungsi sangat meningkatkan keterbacaan kode kita.

Scoping Variabel-variabel Global dalam Modul IIFE

Kembali lagi membahas IIFE alias immediately-invoked function expression. Ketika kita membuat sebuah modul IIFE yang mengakses banyak variabel global, kita dapat mempergunakan object destructuring untuk mengoper variabel global sebagai parameter. Tujuannya adalah agar engine Javascript tidak perlu mencari ke atas hingga global scope untuk sebuah variabel global yang kita gunakan di dalam IIFE. Selain itu, jika digunakan dengan disiplin, secara eksplisit kita dapat melihat variabel-variabel global yang digunakan suatu IIFE, meningkatkan keterbacaan dan maintainability kode kita.

(function someIIFE({ $, someHelper, anotherHelper: someOtherHelper }) {
  //...
  // dalam IIFE ini, window.$ (jQuery) tersedia sebagai $
  // window.someHelper tersedia sebagai someHelper
  // window.anotherHelper tersedia sebagai someOtherHelper
})(window); // oper objek window sebagai global scope