Pada video ini kita akan mempelajari beberapa sintaks baru yang diperkenalkan di Javascript versi ES6, yaitu spread, rest dan destructuring. Yang perlu diingat disini adalah berhubung ini adalah sintaks Javascript versi baru, maka sintaks ini hanya bisa dijalankan di browser versi baru. Browser lama seperti Internet Explorer tidak mendukung sintaks ini.

Kita mulai dari Spread terlebih dahulu ya. Simbol yang digunakan oleh spread adalah tiga buah titik. Spread akan mengeluarkan seluruh elemen dari array, sehingga menjadi banyak argument yang terpisah.

Kita lihat contohnya. Misalkan kita memiliki array numbers, yang berisikan 4 buah angka 200, 15, 60, dan 821. Kemudian kita ingin menggunakan data di dalam array ini untuk memanggil method Math.min. Nah, perhatikan di argumentnya kita menggunakan sintaks spread array numbers. Browser akan menerjemahkan perintah ini menjadi seperti perintah dibawahnya ini. Jadi seluruh data yang dikandung oleh array numbers, akan dikeluarkan dari array menjadi argument yang terpisah. Yang tadinya satu array mengandung 4 buah data 200, 15, 60, 821, dipisahkan menjadi 4 buah argument 200, 15, 60, 821.

Kita langsung coba praktek ya. Misalkan kita hendak memanggil method Math.min dengan argument 30, 10, 20, 40.

Math.min(30,10,20,40);

Maka method ini mengembalikan angka paling kecil dari seluruh argument yang kita berikan. Kita bisa menambahkan argument lagi sebanyak berapapun yang kita butuhkan. Method mengembalikan satu angka yang paling kecil, yaitu 10.

Namun method ini tidak bisa berfungsi kalau seluruh nilai argument ini kita bungkus menjadi sebuah array. Misalkan kita beri kurung siku di seluruh argument, sehingga argument berubah dari yang tadinya berupa 4 buah angka, menjadi satu buah array.

Math.min([30,10,20,40]);

Method mengembalikan hasil not a number, karena array dianggap bukan angka. Walaupun isinya angka ya. Jadi untuk menjalankan method Math.min, maka kita harus membuka kurung sikunya. Nah, hal ini bisa kita lakukan dengan menggunakan sintaks spread. Kita bisa menambahkan titik sebanyak tiga kali di sebelum array. Maka sintaksnya menjadi:

Math.min(...[30,10,20,40]);

Perintah ini artinya sama dengan perintah pertama kita. Jadi seluruh elemen yang dikandung oleh array akan dikeluarkan dari array, kemudian dijadikan sebagai argument-argument yang terpisah. Method pun mengembalikan nilai 10.

Sekarang kita masuk ke beberapa contoh penggunaan Spread. Pertama kita buah dahulu sebuah array dengan nama numbers yang nilainya 30, 10, 20, 40.

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

Nah, kalau variable array ini langsung kita gunakan sebagai argument pada method Math.min, maka kita mendapatkan hasil not a number.

Math.min(numbers);

Agar bisa mendapatkan hasil yang benar, maka kita harus menggunakan sintaks spread pada array numbers. Maka perintahnya menjadi:

Math.min(...numbers);

Contoh penggunaan lainnya, misalkan kita hendak membuat array kedua yang isinya diambil dari array numbers. Maka kita bisa menggunakan sintaks spread:

let array1 = [...numbers];

Perhatikan bahwa sekarang kita memiliki variable array1 yang isinya sama persis dengan numbers. Namun keduanya adalah array yang berbeda. Jadi kalau kita mengubah salah satu isi dari array1, maka yang berubah hanya array1. Nilai yang dikandung oleh numbers masih tetap sama.

Contoh penggunaan ketiga, kita bisa menggunakan sintaks spread untuk menggabungkan beberapa array. Misalkan kita buat array baru alphabet yang isinya “a”, “b”, “c”. Kemudian kita ingin membuat array baru yang isinya adalah gabungan antara numbers dengan alphabet. Maka perintahnya menjadi:

let alphabet = ["a", "b", "c"];
let array2 = [...numbers, ...alphabet];

Maka kita mendapatkan array2 yang isinya adalah gabungan antara numbers dengan alphabet. Walaupun sebenarnya kita bisa melakukan hal yang sama dengan menggunakan method concat ya. Jadi ini adalah cara alternatifnya.

Kita juga bisa menggunakan perintah spread untuk tipe data string. Spead akan memisahkan setiap huruf yang dikandung oleh string tersebut. Sebagai contoh, misalkan kita membuat array yang merupakan hasil spread dari kata “Hello”.

[..."Hello"];

Maka kita mendapatkan hasil sebuah array, yang isinya adalah 5 buah huruf.

Selanjutnya kita bahas mengenai Rest. Rest ini mirip dengan spread karena sintaksnya sama-sama menggunakan simbol tiga buah titik. Namun arti dan cara pemakaiannya berbeda. Kalau spread digunakan pada argument untuk memisahkan array menjadi nilai-nilai terpisah. Sedangkan rest digunakan pada parameter untuk mengumpulkan nilai-nilai yang terpisah menjadi satu buah array.

Agar lebih jelas, kita langsung masuk ke contoh. Misalkan kita ingin membuat fungsi sum. Fungsi ini menerima argument dalam jumlah yang tidak terbatas seperti Math.min yang barusan kita bahas. Dan fungsi ini akan mengembalikan jumlah total yang dari seluruh argument.

Misalkan kita buat dahulu fungsi sum tanpa parameter sama sekali. Dari video sebelumnya, kita sudah tau ya, ada variable ajaib bernama arguments yang berisikan semua argument yang kita kirimkan ke fungsi ini. Pertama kita panggil dahulu console.log untuk menampilkan arguments. Lalu kita panggil fungsi sum dengan argument 10, 20, 30. Maka kodenya menjadi:

function sum()
{
  console.log(arguments);
};
sum(10,20,30);

Kita simpan dan jalankan di console. Kita bisa melihat ada 3 buah nilai arguments ya, yaitu 10, 20, dan 30. Dan nilai ini bisa kita akses dengan menggunakan index.

Untuk menampilkan nilai total, kita bisa menggunakan array method reduce yang kita pelajari pada video sebelumnya ya. Jadi kode di dalam function bisa kita ubah menjadi:

console.log(arguments.reduce((t,n) => t+n));

Kita simpan dan jalankan di browser. Ternyata terjadi error. Mengapa? Karena variable arguments ini bukanlah sebuah array. Walaupun sama-sama memilik index dan length. Namun arguments tidak memiliki array method seperti push, pop, reduce dan lain-lain. Jadi kalau kita ingin menerima parameter sebagai array, maka kita harus menggunakan cara lain.

Disinilah muncul rest sebagai solusi. Jadi pada bagian parameter fungsi, kita bisa memberikan nama parameter array didahului oleh tiga buah titik. Sebagai contoh, kita beri nama params. Kemudian kita memanggil method reduce dengan menggunakan variable params. Maka kodenya menjadi:

function sum(...params)
{
  console.log(params.reduce((t,n) => t+n));
};
sum(10,20,30);

Kita simpan dan jalankan di browser. Fungsi berhasil berjalan dengan benar ya. Nilai totalnya adalah 60. Kalau tadinya kita menggunakan arguments, kita tidak bisa mengubah nama variablenya dan kita tidak bisa menggunakan array methods. Sedangkan kalau kita menggunakan rest, maka kita bisa menentukan sendiri nama variable array-nya yang di dalam contoh ini adalah params, dan kita bisa menggunakan array method.

Yang menarik dari sintaks rest adalah, kita bisa menambahkan parameter lain sebelum rest. Sebagai contoh, kita akan membuat fungsi untuk menampilkan pemenang lomba. Pertama kita ubah dahulu fungsi lama menjadi komentar. Lalu kita buat fungsi baru showWinners dengan parameter gold, silver, dan rest others. Isi fungsinya, pertama kita tampilkan dahulu tulisan “First winner : “ + gold. Kedua, kita tampilkan “Second winner: “ + silver. Dan yang terakhir kita tampilkan “Others: “ + others. Kemudian kita panggil kode kita dengan argument “a”, “b”, “c”, “d”, “e”, “f”. Maka kode kita menjadi:

function showWinners(gold, silver, ...others)
{
  console.log("First Winner: " + gold);
  console.log("Second Winner: " + silver);
  console.log("Others " + others);
};
showWinners("a","b","c","d","e","f");

Kita simpan dan jalankan di browser. Perhatikan bahwa argument pertama “a”, menjadi pemenang pertama. Sedangkan argument kedua “b”, menjadi pemenang kedua. Dan semua argument sisanya menjadi others di baris ketiga. Jadi ini adalah cara kerja dari sintaks rest ya.

Kita masuk ke sintaks terakhir yaitu Destructuring. Dengan menggunakan Destructuring, kita bisa menyalin isi array menjadi sebuah variable atau konstanta. Disini ada contoh kodenya ya. Namun agar lebih jelas, lebih baik kita langsung masuk ke praktek coding.

Misalkan kita memiliki sebuah array winners, yang isinya adalah “a”, “b”, “c”, “d”, “e”, dan “f”. Dan kita memiliki kebutuhan dimana kita akan sering menggunakan elemen pertama dan kedua dari array winners ini. Maka kita perlu menampung nilainya di variable. Dengan menggunakan pemograman dasar, maka kita bisa menuliskan kodenya menjadi:

let gold = winners[0];
let silver = winners[1];

Kalau kita simpan dan jalankan di browser. Maka kita bisa melihat bahwa isi dari variable gold adalah elemen pertama dari array, yaitu “a”. Sedangkan kalau kita melihat variable silver, maka isinya adalah elemen kedua dari array, yaitu “b”.

Kita kembali ke source code. Nah, dengan menggunakan sintaks baru destructuring, maka kedua baris kode ini bisa kita singkat menjadi let, kemudian kita langsung buka kurung siku, di dalamnya kita tulis gold, silver. Lalu kita tutup kurung dan beri tanda sama dengan winners.

let [gold, silver] = winners;

Kalau kita jalankan, hasilnya tetap sama ya. Jadi kita memiliki array winners yang isinya tidak berubah sama sekali. Kemudian kita memiliki variable gold, yang isinya adalah elemen pertama dari winners, yaitu “a”. Dan kita juga memiliki variable silver, yang isinya adalah elemen kedua dari winners, yaitu “b”. Dan kedua variable gold dan silver adalah hasil salinan dari array. Kalau kita mengubah nilai dari variable gold, maka bisa dilihat bahwa nilai dari array tidak mengalami perubahan.

Bagaimana dengan elemen ketiga dan seterusnya? Dengan menggunakan sintaks seperti ini, maka nilai ketiga dan seterusnya akan diabaikan. Namun apabila kita tetap ingin menggunakan nilai-nilai tersebut, maka kita bisa menggunakan sintaks rest di belakang silver. Misalkan kita tambahkan ...others.

let [gold, silver, ...others] = winners;

Dan sekarang kita memiliki array others, yang isinya adalah elemen ketiga dan seterusnya dari array winners.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.