Dalam tutorial ini, Anda akan belajar tentang operator penyebaran JavaScript dengan bantuan contoh.
Operator penyebaran adalah tambahan baru untuk fitur yang tersedia dalam versi JavaScript ES6 .
Operator Spread
Operator sebaran … digunakan untuk memperluas atau menyebarkan iterable atau array. Sebagai contoh,
const arrValue = ('My', 'name', 'is', 'Jack'); console.log(arrValue); // ("My", "name", "is", "Jack") console.log(… arrValue); // My name is Jack
Dalam hal ini, kode:
console.log(… arrValue)
setara dengan:
console.log('My', 'name', 'is', 'Jack');
Salin Array Menggunakan Operator Spread
Anda juga dapat menggunakan sintaks penyebaran … untuk menyalin item ke dalam satu larik. Sebagai contoh,
const arr1 = ('one', 'two'); const arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // Output: // ("one", "two", "three", "four", "five")
Clone Array Menggunakan Operator Spread
Dalam JavaScript, objek ditetapkan dengan referensi dan bukan dengan nilai. Sebagai contoh,
let arr1 = ( 1, 2, 3); let arr2 = arr1; console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3, 4)
Di sini, kedua variabel arr1 dan arr2 mengacu pada array yang sama. Oleh karena itu perubahan dalam satu variabel menghasilkan perubahan pada kedua variabel tersebut.
Namun, jika Anda ingin menyalin larik agar tidak merujuk ke larik yang sama, Anda dapat menggunakan operator sebaran. Dengan cara ini, perubahan dalam satu larik tidak tercermin di larik lainnya. Sebagai contoh,
let arr1 = ( 1, 2, 3); // copy using spread syntax let arr2 = (… arr1); console.log(arr1); // (1, 2, 3) console.log(arr2); // (1, 2, 3) // append an item to the array arr1.push(4); console.log(arr1); // (1, 2, 3, 4) console.log(arr2); // (1, 2, 3)
Sebarkan Operator dengan Objek
Anda juga dapat menggunakan operator penyebaran dengan literal objek. Sebagai contoh,
const obj1 = ( x : 1, y : 2 ); const obj2 = ( z : 3 ); // add members obj1 and obj2 to obj3 const obj3 = (… obj1,… obj2); console.log(obj3); // (x: 1, y: 2, z: 3)
Di sini, keduanya obj1dan obj2properti ditambahkan untuk obj3menggunakan operator penyebaran.
Parameter Istirahat
Ketika operator penyebaran digunakan sebagai parameter, ini dikenal sebagai parameter sisanya.
Anda juga dapat menerima beberapa argumen dalam panggilan fungsi menggunakan parameter rest. Sebagai contoh,
let func = function(… args) ( console.log(args); ) func(3); // (3) func(4, 5, 6); // (4, 5, 6)
Sini,
- Ketika satu argumen dilewatkan ke
func()fungsi, parameter sisanya hanya mengambil satu parameter. - Ketika tiga argumen dilewatkan, parameter rest mengambil ketiga parameter tersebut.
Catatan : Menggunakan parameter rest akan meneruskan argumen sebagai elemen array.
Anda juga dapat meneruskan beberapa argumen ke suatu fungsi menggunakan operator penyebaran. Sebagai contoh,
function sum(x, y ,z) ( console.log(x + y + z); ) const num1 = (1, 3, 4, 5); sum(… num1); // 8
Jika Anda meneruskan beberapa argumen menggunakan operator penyebaran, fungsi tersebut mengambil argumen yang diperlukan dan mengabaikan sisanya.
Catatan : Operator Spread diperkenalkan di ES6 . Beberapa browser mungkin tidak mendukung penggunaan sintaks menyebar. Kunjungi dukungan JavaScript Spread Operator untuk mempelajari lebih lanjut.
