Contoh Spreading Operator di Javascript

Spreading operator dituliskan dengan three consecutive dots (....). Sesuai namanya “Spread”,



Inti nya spread operator adalah pelebur array menjadi beberapa elemen yang berbeda

fitur baru ES6 ini digunakan untuk membentangkan nilai array atau lebih tepatnya iterable object menjadi beberapa elements. Mari kita lihat contoh kode berikut:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(favorites);
 
/* output:
[ 'Seafood', 'Salad', 'Nugget', 'Soup' ]
*/

Pada kode tersebut hasil yang dicetak adalah sebuah array (ditunjukkan dengan tanda [ ]), karena memang kita mencetak nilai favorites itu sendiri. Nah, dengan menggunakan spread operator kita dapat membentangkan nilai – nilai dalam array tersebut.

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(...favorites);
 
/* output:
Seafood Salad Nugget Soup
*/

Terlihat kan perbedaanya? Mengapa bisa demikian? Spread operator bekerja seperti meleburkan nilai array menjadi beberapa elemen sesuai dengan panjang nilai array-nya, sehingga jika kita menuliskan kode seperti ini:

console.log(...favorites);

Sama seperti kita menuliskan kode seperti ini:

console.log(favorites[0], favorites[1], favorites[2], favorites[3]);

Spread operator ini cocok sekali digunakan sebagai nilai parameter pada variadic functions, seperti console.log() atau Math.max().

/* Math.max() -> Mencari nilai terbesar */
const numbers = [12, 32, 90, 12, 32];
 
// Sama seperti kita menuliskan
// console.log(Math.max(numbers[0], numbers[1], numbers[2], numbers[3])
 
console.log(Math.max(...numbers));
/* output
90
*/

Spread operator dapat digunakan untuk menggabungkan dua buah array dalam objek array baru. Jika tidak menggunakan spread operator ini maka hasilnya seperti ini:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];
 
const allFavorites = [favorites, others]
 
console.log(allFavorites);
 
/* output:
[[ 'Seafood', 'Salad', 'Nugget', 'Soup' ], [ 'Cake', 'Pie', 'Donut' ]]
*/

Sayang sekali, nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya, variabel allFavorite menjadi objek array baru yang menampung dua array di dalamnya. Nah lantas bagaimana jika kita mencoba menggunakan spread operator?

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];
 
const allFavorites = [...favorites, ...others]
 
console.log(allFavorites);
 
/* output:
[ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ]
*/

Yups, dengan menggunakan spread operator nilai dari dua array tersebut berhasil tergabung. 

Tweet

Postingan terkait:

— Senin, 27 April 2020 — Add Comment — Javascript