Apa yang dimaksud dengan perusakan dalam JavaScript?

Destrukturisasi dalam JavaScript berarti menyalin nilai array atau properti objek ke variabel.

Destrukturisasi tidak berarti kehancuran. Hal ini tidak terjadi karena array atau objek tempat Anda dapat menyalin nilainya tidak diubah.
Ini adalah ekspresi JavaScript yang diperkenalkan di ECMAScript 2015/16.

Dalam artikel ini, Anda akan mempelajari cara mendestrukturisasi nilai dalam array, properti dalam objek, dan kegunaan destrukturisasi lainnya.

Destrukturisasi dasar dalam array

Destrukturisasi mempermudah akses terhadap nilai array.
Misalnya,
Jika Anda ingin mengakses nilai dalam array tanpa melakukan destrukturisasi,

const array = ["deer","greet","heyy"];

const arr = array[0];
const arr1 = array[1];

console.log(arr);                //deer
console.log(arr1);              //greet

Dalam contoh ini, Anda menetapkan nilai dengan menggunakan indeksnya. Namun dengan adanya destrukturisasi, hal inilah yang akan terjadi.

const array = ["deer","greet","heyy"];

const [arr,arr1,arr2] = array;

console.log(arr);                 //deer
console.log(arr1);               //greet

Jadi, Anda dapat menetapkan nilai variabel array ke variabel baru secara bersamaan.

Menukar nilai
Dalam array, Anda dapat menukar nilai dalam variabel dengan berpindah tempat. Biasanya, Anda memerlukan variabel ketiga untuk mencapai hal ini.

Berikut ini contohnya:

let arr = "deer";
let arr1 = "greet";

console.log(arr);               //deer
console.log(arr1);             //greet

let newArr = arr1;   //assigning the value
"greet" to a new variable "newArr" 

console.log(newArr);          //greet

arr1 = arr;           //assigning the value "deer" to the variable "arr1"

arr = newArr;        //assigning the value "greet" to the variable "arr"

console.log(arr1);           //deer
console.log(arr);            //greet

Namun dengan destrukturisasi, Anda dapat melakukannya tanpa variabel ketiga.

const array = ["deer","greet","heyy"];

let [arr,arr1,arr2] = array;

console.log(arr);                //deer
console.log(arr1);             //greet

[arr,arr1] = [arr1,arr];        //using destructuring to swap the values 

console.log(arr);               //greet
console.log(arr1);             //deer

Melewatkan Nilai

Anda juga bisa melewatkan nilai saat memberikan nilai ke variabel. Anda melakukannya dengan menambahkan koma ekstra ke array yang nilainya akan dirusak. Koma menunjukkan indeks nilai.

Dalam contoh ini, koma di awal tugas menunjukkan nilai pertama array.

const array = ["deer","greet","heyy"];

const [,arr1,arr2] = array;             //skipping the first value and using only the second and third

console.log(arr1);              //greet
console.log(arr2);              //heyy

Menggunakan penghancuran array dengan iterator

Penghancuran array berfungsi pada semua nilai yang dapat diubah. Anda dapat menghancurkan struktur nilai apa pun yang dapat diubah. Contoh dari iterable tersebut adalah string, set, dan sebagainya.

Misalnya, menggunakan destrukturisasi array pada sebuah string,

const [a,b] = "abc";

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

contoh penggunaan destrukturisasi array pada suatu himpunan,

const array = ["deer","greet","heyy"];

const exampleSet = new Set(array);

const [arr,arr1,arr2] = exampleSet;

console.log(arr);         //deer
console.log(arr1);        //greet
console.log(arr2);        //heyyy

Penghancuran array hanya berfungsi pada nilai yang dapat diubah. Nilai yang tidak dapat diubah akan memberikan kesalahan. Contoh non-iterable adalah null dan tidak terdefinisi.

Selain itu, javascript akan mengembalikan tidak terdefinisi jika array yang Anda hancurkan kosong.

Misalnya,

const [arr,arr1] = [];

console.log(arr);          //undefined

console.log(arr1);         //undefined

Berikut skenario lainnya:

const array = [];

const [arr,arr1] = array;

console.log(arr);          //undefined

console.log(arr1);         //undefined

Nilai default dalam array

Saat menulis kode, ada kalanya Anda mungkin tidak yakin dengan nilai yang Anda tetapkan. Jika nilainya adalah undefined, Anda memerlukan nilai default. Destrukturisasi memudahkan Anda menetapkan nilai default ke array.

Lihat contoh ini:

const array = ["deer","greet","heyy"];

const [arr,arr1,arr2,arr3] = array;

console.log(arr);              //word
console.log(arr1);            //fang
console.log(arr2);           //grey
console.log(arr3);           //undefined

Untuk menetapkan nilai default ke arr3

const array = ["deer","greet","heyy"];

//To assign a default value to arr3
const [arr,arr1,arr2,arr3="mirrors"] = array;

console.log(arr3);          //mirrors

Dengan itu, Anda dapat menetapkan nilai default ke variabel saat melakukan destrukturisasi.

Menggunakan sintaks lainnya

Penghancuran dalam Javascript juga menggunakan sintaksis lainnya. Ini disebut sintaks “sisanya” karena mencakup sisa item dalam array. Sintaksnya adalah ... lalu nama array yang dibuat. Nama “istirahat” yang muncul setelah tiga titik adalah opsional. Anda bisa menggunakan nama lain setelah tiga titik.

Sintaks:
(...rest)

Saat menggunakan sintaksis sisanya, selalu pastikan sintaksis tersebut berada di urutan terakhir setelah item lainnya, karena akan memberikan kesalahan jika Anda melakukan sebaliknya.

Berikut ini contoh istirahat dalam sebuah array:

Menggunakan contoh sebelumnya,

const array = ["deer","greet","heyy"];

const [arr, …newArr] = array;

console.log(arr);               //deer
console.log(newArr);          //[ greet, heyy]

Seperti yang Anda lihat, array newArr dibuat dari array lama.

Penghancuran objek

Dengan penghancuran objek, Anda dapat mengambil nilai properti dari suatu objek. Objek mengambil sintaks yang berbeda dari array ketika memberikan nilai ke variabel.

Untuk menetapkan nilai tanpa merusak struktur adalah:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};             //example of the object

//To access the object property

const words = obj.word;              

const boolean = obj.bool;                     

console.log(words)             //dataTypes
console.log(boolean)          //true

Ini adalah cara memberikan nilai pada objek menggunakan destrukturisasi.

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //example of the object//To access the object property
const { word, bool } = obj;                   

console.log(word)       //dataTypes
console.log(bool)      //true

Hal ini membuat penetapan nilai menjadi lebih mudah.

Catatan: Urutan objek tidak menjadi masalah, dan Anda harus menggunakan nama yang sama.

Hal ini akan mengakibatkan kesalahan berikut:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};

const { words, boolean } = obj;

console.log(words)           
console.log(boolean)       

//ReferenceError: obj is not defined

Ini karena JavaScript tidak menyimpan variabel words dan boolean sebagai referensi untuk objek, sehingga terjadi kesalahan.

Namun, Anda dapat menetapkan nama yang berbeda ke nilai saat melakukan destrukturisasi.

Menetapkan nama berbeda pada properti objek

Anda dapat menetapkan nama berbeda ke properti objek untuk mengaksesnya.

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};

const { word: words, bool: boolean } = obj;

console.log(words)               //dataTypes
console.log(boolean)           //true

Menggunakan penghancuran objek pada array
Anda dapat menggunakan indeks array sebagai “properti” ketika Anda menerapkan penghancuran objek pada array.

const {0:arr, 1:arr1, 2:arr2} = ["deer","greet","heyy"];

console.log(arr);          //deer
console.log(arr2);         //heyy

Deklarasi awal variabel

Dalam objek, Anda bisa mendeklarasikan variabel terlebih dahulu sebelum Anda memberikan nilai padanya.

let word;

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999 };

({ word } = obj);

console.log(word);   //dataTypes

Catatan: selama penugasan, gunakan tanda kurung, atau JavaScript akan melihatnya sebagai fungsi blok dan mengembalikan kesalahan sintaksis.

Menggunakan sintaksis lainnya pada objek

Anda bisa menggunakan sintaks lainnya dalam suatu objek. Seperti dalam array, sintaksis lainnya berada di akhir dan mencakup properti yang tersisa dalam suatu objek.

Berikut ini contohnya:

const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};            //example of the object//To access the object property

const { word: words, ...others } = obj;                   

console.log(words);              //dataTypes
console.log(others);            //{ num:0001, bool:true, bigInt:2.99999999 }

Catatan:
Seperti dalam array, javascript akan mengembalikan undefined ketika diatur untuk merusak struktur objek kosong. Penghancuran objek akan mengembalikan kesalahan tipe ketika nilainya undefined dan null.

Nilai default pada objek

Dalam sebuah objek, Anda dapat menetapkan nilai default ke variabel saat melakukan destrukturisasi. Jika properti tidak ada dalam objek, Anda dapat membuat variabel dan menetapkan nilai default padanya.