Konsep destructuring, rest parameter dan spread syntax akan sering ditemui dalam sebuah React project.

Destructuring

Destructuring adalah javascript expression yang digunakan untuk menyimpan value dari suatu array atau object ke dalam dalam variable yang berbeda.

Jika kita ingin menyimpan properties dari sebuah object ke dalam variable maka kita bisa melakukannya seperti ini:

Copy
1const blueDino = { 
2    firstName: 'brachio',
3    lastName: 'saurus',
4    address: 'Jakarta'
5};
6
7const firstName = blueDino.firstName;
8const address = blueDino.address;
9
10console.log(firstName);
11console.log(address);

Kita bisa melakukan hal yang sama dengan menggunakan object destructuring.

Copy
1const blueDino = { 
2    firstName: 'brachio',
3    lastName: 'saurus',
4    address: 'Jakarta'
5};
6
7const {firstName, address} = blueDino; // object destructuring
8
9console.log(firstName);
10console.log(address);

Jika kita ingin mengubah nama variable dengan nama yang lain kita bisa tulis seperti ini.

Copy
1const blueDino = { 
2    firstName: 'brachio',
3    lastName: 'saurus',
4    address: 'Jakarta'
5};
6
7const {firstName: name, address: city} = blueDino; 
8
9console.log(name); // brachio
10console.log(city); // Jakarta

Array Destructuring

Destructuring juga bisa digunakan untuk array.

Copy
1const dinoGroup = ['t-rex', 'brachio', 'tricera'];
2
3const [redDino, blueDino] = dinoGroup;
4
5console.log(redDino);
6console.log(blueDino);

Spread Syntax dan Rest Parameter

Keduanya sama-sama menggunakan three dots(...).

Lalu apa bedanya dan apa fungsinya?

Spread Syntax (...)

Spread syntax digunakan untuk memisahkan semua item pada iterable object seperti array menjadi item tersendiri.

Penggunaan

• Clone array / object

Copy
1const dinoGroup = ['t-rex', 'brachio', 'tricera'];
2
3const newDinoGroup = [...dinoGroup];

• Merge array / object

Copy
1const dinoGroup1 = ['t-rex', 'brachio', 'tricera'];
2const dinoGroup2 = ['allo', 'stego'];
3
4const newDinoGroup = [...dinoGroup1, ...dinoGroup2];

• Menambahkan item baru ke array

Copy
1const dinoGroup1 = ['t-rex', 'brachio', 'tricera'];
2const dinoGroup2 = ['stego', ...dinoGroup1];

Rest Parameter (...)

Rest Parameter adalah kebalikan dari Spread Syntax, Rest Parameter adalah parameter yang akan mengumpulkan item-item yang terpisah menjadi satu.

Sebagai contoh, function dibawah ini adalah function yang akan menjumlahkan semua argumen yang diterima.

Copy
1const add = (numA, numB, numC) => {
2  return numA + numB + numC;
3};
4
5const result = add(1, 2, 3); 
6
7console.log(result); // 6

Kita bisa menambahkan rest parameter pada function di atas.

Copy
1const add = (...nums) => {
2  let total = 0;
3
4  for (let num of nums) {
5    total += num;
6  }
7
8  return total;
9};
10
11add(1, 2, 3);
12
13const result = add(1, 2, 3);
14
15console.log(result); // 6

Karena semua argumen akan dijadikan ke dalam satu array maka kita bisa menambah argument sebanyak mungkin.

Copy
1add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

Yang perlu diperhatikan adalah rest parameter harus menjadi parameter yang terakhir.

Jika kita menaruh rest parameter selain di bagian akhir maka kita akan mendapatkan error.

Copy
1const add = (numA, ...nums, numB) => { // error
2    ...
3}