Menurut
mozila developer expert, Destructuring assignment adalah expression pada JavaScript
yang membuat kita dapat membongkar nilai dari sebuah array /
properti dari object kedalam variabel yang terpisah.
Contoh
sederhana dari Destructuring assignment adalah seperti dibawah ini
let siswa = ["Rifki", "Romadhan", "Kimak"]
let [a, b, c] = siswa
console.log(a); //Rifki
console.log(b); //Romadhan
console.log(c); //Kimak
diatas,
saya punya array yang bernama siswa yang berisi Rifki, Romadhan, dan Kimak.
Selanjutnya saya melakukan Destructuring assignment dengan cara memberikan
tanda kurung siku untuk array dan kurung kurawal untuk objek.
const siswa = {
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
}
const {
nama,
kelas
} = siswa
console.log(nama);
console.log(kelas);
Pertama
kita bahas tentang Destructuring assignment untuk array. Ada bermacam-macam fungsi
Destructuring assignment untuk array, diantaranya adalah :
A. Destructuring Array Sederhana.
B. Skip Item.
C. Swap Item.
D. Return value pada function.
E. Rest Parameter.
F. Memberikan default value.
Contoh
codenya adalah :
Destructuring
Array Sederhana.
const perkenalan = ['hallo', 'nama', 'saya', 'Rifki']
const [hallo, nama, saya, Rifki] = perkenalan
console.log(hallo); //hallo
console.log(Rifki); //Rifki
Skip
Item
const [
hallo, , ,
Rifki]
= perkenalan
console.log(hallo);
console.log(Rifki);
swap
item.
let a = 1
let b = 2
console.log(a); //1
console.log(b); //2
[a, b] = [b, a]
console.log(b); //2
console.log(a); //1
return
value pada function.
function coba() {
return [1, 2]
}
let [a, b] = coba()
console.log(a) //1
console.log(b) //2
Rest
Parameter.
let [a, ...value] = [1, 23, 4]
console.log(a) //1
console.log(value) //23,4
Memberikan
default value
let [a, b = "kimak", ...value] = [1, , 4]
console.log(a) //a
console.log(b) //kimak
console.log(value) //4
Itulah
tipe-tipe dan contoh code sederhana dari fungsi Destructuring assignment untuk
array. Selanjutnya kita akan membahas fungsi dari Destructuring assignment
untuk objek. Fungsi Destructuring assignment untuk objek diantaranya adalah :
A. Destructuring Objek sederhana.
B. Assignment tanpa deklarasi objek.
C. Assignment ke variabel baru.
D. Memberikan default value.
E. Rest Parameter.
F. Mengambil field pada objek, setelah dikirim sebagai parameter untuk
function.
Contoh
codenya adalah :
Destructuring
Objek sederhana
const siswa = {
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
}
const {
nama,
kelas
} = siswa
console.log(nama);
console.log(kelas);
Assignment
tanpa deklarasi objek
({
nama,
kelas
} = {
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
})
console.log(nama);
console.log(kelas);
Assignment
ke variabel baru
const siswa = {
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
}
const {
nama: n,
kelas: k
} = siswa
console.log(n);
console.log(k);
Memberikan
default value
const siswa = {
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
}
const {
nama: n,
kelas: k,
email: e = "rifkivamaus@gmail.com"
} = siswa
console.log(n);
console.log(k);
console.log(e);
Rest
Parameter
const siswa = {
nama: "Rifki Romadhan",
umur: 16,
kelas: "12 RPL 1",
email: "rifkivamaus@gmail.com",
}
const {
nama: n,
umur: u,
...values
} = siswa
console.log(n);
console.log(u);
console.log(values);
Mengambil
field pada objek, setelah dikirim sebagai parameter untuk function.
const siswa = {
id: 1000,
nama: "Rifki Romadhan",
kelas: "12 RPL 1"
}
function getIdSiswa({
id,
nama
}) {
return `Id siswa dengan nama ${nama} adalah ${id}`
}
console.log(getIdSiswa(siswa));
0 Response to "Destructuring assignment"
Post a Comment