Pada video sebelumnya, kita sudah pernah membahas mengenai Spread dan Destructuring untuk tipe data Array. Pada video ini, kita akan mengulangi pelajaran ini untuk digunakan pada Object.

Kita mulai dari Spread terlebih dahulu. Simbol yang digunakan oleh Spread adalah tanda titik sebanyak 3 buah. Spread digunakan untuk membuat object baru dengan property yang disalin dari object lain. Pada slide ini terdapat contoh cara menggunakan spread pada object. Misalkan kita memiliki Object dog dengan 3 properti. Kemudian kita buat Object baru chase dengan menyalin ketiga property dari object dog, dan kita tambahkan property baru name. Hasilnya kita mendapatkan object yang memiliki 4 buah property.

Perhatikan bahwa sintaks ini biasanya digunakan untuk object literal. Artinya biasanya digunakan pada object yang sederhana. Untuk object yang lebih rumit, biasanya kita menggunakan Object.Create dan prototype seperti yang telah kita pelajari pada video sebelumnya.

Kita langsung coba praktek ya. Misalkan disini kita memiliki kode seperti slide. Kita memiliki object dog dengan 3 property. Lalu ada object snake dengan 2 property. Dan kita memiliki object chase yang isinya adalah spread dari object dog ditambah dengan property name. Kita komentari dahulu object chase. Lalu kita jalankan di browser.

Pada console, kita bisa melihat bahwa kita memiliki object dog dan snake. Misalkan kita buat object baru chase. Perintahnya adalah let chase = {}. Kita gunakan cara object literal ya, dengan menggunakan simbol kurung kurawal. Lalu isinya kita gunakan sintaks spread, yaitu tiga buah titik, diikuti oleh nama variable dari object-nya, yaitu dog.

let chase = {...dog};

Artinya kita membuat object baru chase, yang property-nya disalin dari object dog. Chase memiliki 3 buah property yaitu class, legs dan isPet yang nilainya sama persis dengan dog. Perhatikan bahwa property pada chase adalah hasil salinan dari dogs dan ketiganya adalah tipe data primitif. Jadi kalau kita mengubah property pada chase, maka property dog tidak ikut berubah. Sebagai contoh, kita ubah property chase.class menjadi “abc”.

chase.class = “abc”;

Kita jalankan dan kita lihat lagi object chase. Property class-nya berubah menjadi “abc”. Kalau kita lihat ke object dog, maka nilai dari property class tetap “mamals”.

Perhatikan bahwa hal ini hanya terjadi untuk tipe data primitif ya. Kalau kita menggunakan tipe data pointer seperti Array atau Object, maka yang terjadi akan berbeda. Sebagai contoh, kita kembali ke source code. Pada object dog, kita tambahkan property baru, misalkan propert a dengan nilai array [1,2,3,4].

Kita simpan dan jalankan di browser. Kita jalankan lagi perintah untuk membuat object chase yang diambil dari spread object dog.

let chase = {...dog};

Sekarang kita memiliki object chase yang isinya ada 4 property. Termasuk property a yang merupakan array dengan isi 1, 2, 3, 4. Kita coba tambahkan angka 5 ke dalam array.

chase.a.push(5);

Sekarang perhatikan jumlah data array di dalam object chase sudah menjadi 5. Perhatikan lagi object dog. Ternyata jumlah data di dalam array-nya juga turut berubah menjadi 5. Jadi untuk tipe data pointer, property hasil salinan tetap merujuk ke data yang sama. Jadi kalau kita melakukan perubahan data pada object salinan, maka data pada object awalnya turut berubah.

Kita kembali ke source code dan kita hapus kembali property array a. Simpan dan kembali ke browser.

Nah, pada saat kita membuat object baru menggunakan spread, kita masih bisa menambahkan property lain di belakangnya. Sebagai contoh, kita buat lagi object chase dari spread dog. Kemudian dibelakangnya, kita tambahkan lagi property name dengan nilai “Chase”. Sintaksnya masih tetap sama dengan object literal biasa ya. Sebelum kita menambahkan property baru, kita berikan tanda koma.

let chase = {...dog, name: “Chase”};

Sebagai hasilnya, object chase memiliki 3 property yang berasal dari dog. Ditambahkan dengan property name yang kita buat sendiri.

Kita juga bisa menggunakan tanda spread lagi pada property berikutnya. Sebagai contoh, kita buat object chase yang property-nya diambil dari spread dog dan spread snake.

let chase = {...dog, ...snake};

Sekarang chase memiliki 3 property yang diambil dari dog, dan 2 property yang diambil dari snake. Namun berhubung keduanya memiliki property class, maka disini urutan menjadi penting. Property class akan menggunakan nilai dari property yang berada di paling belakang. Berhubung sekarang posisi paling belakang adalah snake, maka nilai class adalah reptiles.

Kalau kita coba tukas posisi dog dan snake:

let chase = {...snake, ...dog};

Maka sekarang nilai dari property class adalah “mamals”. Diambil dari object dog.

Atau kita coba lagi tambahkan sendiri property class dengan nilai “abc”.

let chase = {...snake, ...dog, class=”abc”};

Maka nilai dari property class adalah “abc”. Karena “abc” berada di posisi paling akhir. Jadi begitu ya cara Javascript mengatasi naming conflict yang terjadi pada property object. Nantinya sintaks spread ini akan sering kita gunakan kalau kita sudah menggunakan framework seperti React.

Kita lanjutkan materi pelajaran kita ke Destructuring. Kita sudah pernah belajar Destructuring pada Array dan sekarang kita gunakan pada Object. Fungsi Destructuring masih tetap sama, yaitu untuk menyalin nilai Object menjadi sebuah variable. Dan sintaksnya juga mirip dengan Array ya. Hanya saja di Array kita menggunakan tanda kurung siku, dan urutan variable menjadi penting. Sedangkan di Object, kita menggunakan tanda kurung kurawal, dan urutan variable tidak penting. Yang penting adalah nama variablenya harus sama dengan nama property.

Kita langsung praktek coding ya. Disini kita sudah memiliki salinan object dog dan snake. Namun nama property class sudah saya ganti menjadi classes. Mengapa diganti? Karena class adalah reserved word dan tidak boleh digunakan sebagai nama variable. Kalau kita menggunakan class, nantinya sintaks destructuring kita akan menjadi error.

Nah, misalkan kita akan sering menggunakan nilai dari property dog.classes. Jadi untuk mempermudah kita menuliskan kode, kita ingin menyimpan nilainya menjadi variable dengan nama classes. Kalau menggunakan pemograman dasar, maka kita menuliskan kodenya seperti ini.

let classes = dog.classes;

Kalau kita jalankan di browser, maka kita memiliki variable classes yang isinya disalin dari property dog.classes, yaitu “mamals”. Nah, kalau kita ingin mengambil property lainnya, maka kita harus membuat kode seperti ini lagi. Setiap property satu baris. Misalkan kalau kita ingin mengambil property dog.legs, maka kita tulis lagi

let legs = dog.legs;

Dan kita pun memiliki variable legs.

Kalau jumlah property yang hendak kita ambil banyak, dengan menggunakan cara ini, kita harus menuliskan banyak baris kode. Makanya muncul sintaks destructuring. Kode seperti ini bisa kita singkat menjadi:

let {classes, legs} = dog;

Kita komentari dahulu kode sebelumnya ya, agar tidak double. Sekarang kita sudah memiliki variable classes dan legs yang disalin dari property object dog. Dan berhubung nilai yang disimpan adalah salinan, maka kalau kita mengubah nilai di dalam variable, maka nilai pada property tidak berubah.

classes = “abc”;
dog.classes; // “mamals”

Ada beberapa fitur tambahan yang bisa kita manfaatkan dari Destructuring. Yang pertama adalah kita bisa mengganti nama variable. Misalkan nama property classes ini mau kita ganti menjadi kelas dalam bahasa indonesia. Maka setelah menyebutkan nama property classes, kita bisa menambahkan tanda titik dua diikuti oleh nama variable kita yaitu “kelas”.

let {classes : kelas, legs} = dog;

Kalau kita simpan dan jalankan di browser. Sekarang sudah tidak ada lagi variable classes. Karena telah kita ganti menjadi kelas.

Selanjutnya, kalau kita ganti object dog menjadi snake. Maka nilai variable kelas menjadi “reptiles”. Sedangkan nilai dari variable legs menjadi undefined. Mengapa undefined? Karena kalau kita ketik snake.legs, hasilnya adalah undefined, karena browser tidak menemukan property legs pada object snake.

Nah, kita bisa menggunakan fitur default value untuk mengisikan nilai legs apabila object tidak memilki property tersebut. Caranya adalah dengan menambahkan tanda sama dengan, diikuti dengan nilai default-nya, misalkan nilai 0.

let {classes : kelas, legs = 0} = snake;

Kalau kita jalankan di browser. Maka nilai dari legs adalah 0 karena snake tidak memiliki property legs. Kalau kita ganti kembali ke object dog. Makanya nilainya berubah menjadi 4 karena dog memiliki property legs denga nilai 4. Jadi nilai default ini hanya digunakan apabila object tidak memiliki property tersebut.

Selanjutnya sintaks destructuring ini juga bisa kita gunakan pada parameter function. Sebagai contoh, misalkan kita membuat function showInfo yang bertujuan untuk menuliskan informasi mengenai suatu object. Kita gunakan satu parameter yaitu object. Di dalamnya kita panggil console.log dengan argument string template.

function showInfo(obj)
{
  console.log(`${obj.classes} has ${obj.legs} legs`);
}

Kita simpan dan kita panggil fungsinya di dalam console.

showInfo(dog);
mamals has 4 legs
showInfo(snake);
reptiles has undefined legs

Perhatikan bahwa kita bisa menggunakan destructuring pada parameter. Jadi parameter object bisa kita ganti, pertama kita gunakan kurung kurawal dahulu. Kemudian kita tuliskan nama property yang kita gunakan, yaitu classes dan legs. Khusus untuk legs kita tambahkan default value 0 agar nilai undefined diganti menjadi 0. Dan kemudian di dalam function, kita sudah tidak perlu menyebutkan nama object.

function showInfo({classes, legs = 0})
{
  console.log(`${classes} has ${legs} legs`);
}

Kita simpan dan panggil lagi fungsi-nya di browser. Hasilnya tetap sama ya. Namun untuk argument snake, nilai undefined diganti menjadi 0.

showInfo(dog);
mamals has 4 legs
showInfo(snake);
reptiles has 0 legs

Jadi ini adalah contoh penggunaan destructuring pada parameter. Kelebihannya adalah kita lebih gampang menggunakan nilai property karena tidak perlu mengetikkan nama object, dan kita bisa memberikan default value bagi object yang tidak memiliki property tersebut.

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.