Belajar ES6 – Spread Operator

Salah satu feature dari EcmaScript 6 yang sering digunakan adalah Spread Operator. Dengan spread operator ini kode kita menjadi lebih pendek dan mudah untuk dibaca. Beberapa tutorial React dan beberapa framework Javascript mulai banyak menggunakannya. Jadi mari kita pelajari apa itu Spread Operator pada ES6.

Mirip seperti feature dari EcmeScript 6 yaitu Rest Operator, Spread Operator memiliki fungsi mengeluarkan item menjadi sebuah argument atau parameter sehingga dapat digunakan pada kondisi tertentu.

Rest Operator sendiri mengumpulkan beberapa item array sehingga dapat digunakan oleh rest parameter atau destructuring pada artikel yang sempat saya buat sebelumnya.

Spread Operator ini bisa kita gunakan pada Array atau pada Object literal.

Spread Operator pada Array

Agar lebih jelas, saya coba membuat satu array pada terminal dan melihat apa yang terjadi jika kita menggunakan spread operator. Seperti biasa saya menggunakan NodeJS untuk testing di terminal.

adiputra@linux:~$ node
> var number_list = [1,2,3];
undefined
> number_list
[ 1, 2, 3 ]

Terlihat saya buat list number, lalu saya coba lihat isi-nya seperti kode diatas. Lalu kita coba dengan Spread Operator

> var number_list = [1,2,3]
undefined
> console.log(...number_list)
1 2 3

Nilai 1 2 dan 3 di spread / dikeluarkan menjadi element masing-masing.

Terlihat Spread Operator itu diawali dengan dot 3 kali.

Contoh lainnya adalah kita ingin mencoba menggabungkan 2 nilai array dengan spread operator.

> var number1 = [1,2,3]
undefined
> var number2 = [4,5,6]
undefined
> console.log(number2);
[ 4, 5, 6 ]
undefined
> var number2 = [number1,4,5,6]
undefined
> console.log(number2);
[ [ 1, 2, 3 ], 4, 5, 6 ]

Terdapat 2 nilai array, number1 dan number2. Ketika kita ingin menggabungkan nilai number1 dengan number2 tersebut maka hasil keluaran seperti keluran terakhir [ [ 1, 2, 3 ], 4, 5, 6 ] . Terlihat terdapat array di dalam array.


[crp]


Bagaimana jika kita ingin langsung memisahkan tanpa ada array di dalam array? Nah Spread Operator ini bisa kita gunakan seperti kode dibawah ini.

> var number1 = [1,2,3]
undefined
> var number2 = [...number1, 4,5,6]
undefined
> number2
[ 1, 2, 3, 4, 5, 6 ]

Contoh lainnya adalah ketika kita mengirimkan data Spread Operator ke salah satu fungsi. Misalnya kode ini.

> var number = [1,2,3]
undefined
> function sumNumber(a,b,c) { console.log(a+b+c); }
undefined
> sumNumber(...number);
6

Terdapat fungsi sumNumber yang terdiri dari 3 parameter. Lalu kita panggil fungsi tersebut dengan Spread Operator yang kebetulan nilainya juga ada 3 data. Jadi ketika panggil, 3 data tersebut langsung nge-map ke parameter sumNumber tersebut.

Ada yang penasaran bagaimana jika kita kasih lebih dari 3 data pada Spread Operator diatas?

> var number = [1,2,3]
undefined
> function sumNumber(a,b,c) { console.log(a+b+c); }
undefined
> sumNumber(...number);
6
undefined
> var number2 = [1,2,3,4]
undefined
> sumNumber(...number2);
6
undefined
> var number3 = [1,2]
undefined
> sumNumber(...number3);
NaN
undefined

Penasaran hasil percobaan bisa dilihat di kode atas ini 🙂

Spread Operator Pada Object Literal

Selain pada Array, Spread Operator ini juga bisa dipakai pada Object.

> var attributePerson = { name: 'adiputra', address: 'bekasi' }
undefined
> var anotherAttribute = { city: 'Bekasi', skill: 'PHP, MySQL' }
undefined
> var mergeAttribute = { ...attributePerson, ...anotherAttribute }
undefined
> mergeAttribute
{ name: 'adiputra',
  address: 'bekasi',
  city: 'Bekasi',
  skill: 'PHP, MySQL' }

Salah satu contoh menggabungkan 2 object dengan Spread Operator.

Artikel lainnya

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: