Contoh Spreading Operator di Javascript - Spreading Operator Javascript

Contoh Spreading Operator di Javascript - Spreading Operator Javascript 


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

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

fitur baru ES6 ini dipergunakan untuk membentangkan nilai array atau lebih presisinya  iterable object menjadi beberapa elements. berikut ini contoh kodenya seperti dibawah:

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2.  

  3. console.log(favorites);

  4.  

  5. /* output:

  6. [ 'Seafood', 'Salad', 'Nugget', 'Soup' ]

  7. */


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

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2.  

  3. console.log(...favorites);

  4.  

  5. /* output:

  6. Seafood Salad Nugget Soup

  7. */


Terlihat bukan perbedaanya? Mengapa bisa begitu? Spread operator bekerja seperti meleburkan value array menjadi beberapa elemen sesuai dengan panjang value array-nya, sehingga jika kita menuliskan kode seperti berikut ini:

  1. console.log(...favorites);


Sama seperti kita menuliskan kode seperti berikut ini:

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


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

  1. /* Math.max() -> Mencari nilai terbesar */

  2. const numbers = [12, 32, 90, 12, 32];

  3.  

  4. // Sama seperti kita menuliskan

  5. // console.log(Math.max(numbers[0], numbers[1], numbers[2], numbers[3])

  6.  

  7. console.log(Math.max(...numbers));

  8. /* output

  9. 90

  10. */


Spread operator bisa dipergunakan guna menggabungkan dua buah array dalam objek array baru. Jika tidak menggunakan spread operator ini maka hasilnya seperti berikut ini:

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2. const others = ["Cake", "Pie", "Donut"];

  3.  

  4. const allFavorites = [favorites, others]

  5.  

  6. console.log(allFavorites);

  7.  

  8. /* output:

  9. [[ 'Seafood', 'Salad', 'Nugget', 'Soup' ], [ 'Cake', 'Pie', 'Donut' ]]

  10. */


Sayangnya, value array tidak akan tergabung. Alih-alih menyatukan atau menggabungkan nilainya, variabel allFavorite menjadi objek array baru yang menampung dua array di dalamnya. dari situ lantas bagaimana jika kita mencoba menggunakan spread operator?

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2. const others = ["Cake", "Pie", "Donut"];

  3.  

  4. const allFavorites = [...favorites, ...others]

  5.  

  6. console.log(allFavorites);

  7.  

  8. /* output:

  9. [ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ]

  10. */


Dan benar, dengan menggunakan spread operator value dari dua array tersebut berhasil tergabung. 

Komentar