Advance JavaScript 15 - spread operator

Advance JavaScript 15 - spread operator

Kita akan membahas mengenali spread operator Dan rest parameter  ,keduanya di representasikan dengan karakter ... Tiga titik seperti ini ,meskipun notasinya sama Tapi kedua Hal ersebut sebenarnya berbeda,Kita sudah pernah memakai notasi 3 titik ini sebelum nya ,tetapi Kita akan lihat lebih detail terkait spread operator Dan rest parameter ini 

Kita mulai di artikel ini dengan topik yang pertama yaitu 

Spread operator

Spread operator secara definisi ia adalah operator yang memecah atau meng unpack iterables menjadi single element.

Contoh memecah iterables

const siswa = ['gimas','nur','alamsah']

console.log(...siswa)

Contoh kedua

const siswa = ['gimas','nur','alamsah']

console.log(...siswa[0])

Menggabungkan 2 array

const siswa = ['gimas','nur','alamsah'];

const guru = [ 'budi','asep','tatang'];

const orang [...siswa, ,...guru];

console.log(orang)

Atau Kita bisa memakai concat 

const siswa = ['gimas','nur','alamsah'];

const guru = [ 'budi','asep','tatang'];

const orang = siswa.concat(guru);

console.log(orang

Tapi dengan spread operator ini lebih bagus karena Kita bisa menambahkan string lagi di tengah tengah nya

const siswa = ['gimas','nur','alamsah'];

const guru = [ 'budi','asep','tatang'];

const orang [...siswa,'kepala sekolah' ,...guru];

console.log(orang)

Mengcopy array

const siswa = ['gimas','nur','alamsah'];

const siswa1 = siswa

siswa[0] = 'fajar';

console.log(mhs)

Ini kalau kalian jeli sebenarnya tidak betul betul mengcopy array nya untuk mengatasi nya Kita bisa pakai spread operator

const siswa = ['gimas','nur','alamsah'];

const siswa1 = [...siswa];

siswa1[0] = 'fajar'

console.log(mhs)

Ceritanya saya mempunyai list nama nama orang didalam html Dan saya ambil nama nama nya menggunakan Javascript Dan saya simpan kedalam array

const Linama = document.queryselectorAll(li)

const mhs = []

for (let i = 0 ; I < Linama.length; i++){

mhs.push(Linama[i].innerHTML);

}

Atau begini

const Linama = document.queryselectorAll(li)

const mhs = [...Linama].map(a => a.textContent);

console.log(mhs)

Saya akan memberikan kalian latihan untuk memastikan kalian paham latihan nya adalah buatlah html yang didalam nya terdapat nama  kalian yang dibuat dengan h1 tetapi saya ingin kalian membuat animasi membesar perhuruf nya ketika di hover.