DEV Community

loading...
Cover image for Javascript : Rest Parameter && Spread Operator

Javascript : Rest Parameter && Spread Operator

Aldi Pranata
・2 min read

Rest parameter

Rest parameter ("...") [baca: dot-dot-dot] merupakan fitur baru yang diperkenalkan ES6 — yang digunakan dalam dua konsep berbeda; spread operator dan rest parameter. rest parameter mengkoleksi semua elemen yang tersisa ke dalam array, sedangkan spread operator memungkinkan iterasi (array / object / string) untuk diperluas menjadi argument atau elemen tunggal.

function add(x, y) {
  return x + y
}

add(1, 2, 3, 4, 5) // returns 3
Enter fullscreen mode Exit fullscreen mode

Hasil dari function di atas adalah 3 karena hanya dua angka pertama saja yang di jumlahkan.

Pada versi Javascript sebelumnya, untuk menghitung jumlah total nilai dari kumpulan beberapa angka — misalnya…

sum(1, 2, 3, 4, 5)
sum(234, 546, 2, 6959)
sum(13, -6, 121212)
Enter fullscreen mode Exit fullscreen mode

umumnya kita buat function seperti ini:

function sum() {
  var total = 0
  for (var argument of arguments) {
    total += argument
  }
  return total
}
Enter fullscreen mode Exit fullscreen mode

Dengan menggunakan rest parameter kita dapat menuliskan function serupa…

function sum(...nums) {
  let total = 0
  for (const num of nums) {
    total += num
  }
  return total
}
Enter fullscreen mode Exit fullscreen mode

dengan kode penulisan yang jauh lebih mudah dibaca sekaligus ringkas.

Spread Operator

Kita boleh anggap spread operator sebagai kebalikan dari rest parameter. Jika rest parameter memungkinkan kita untuk menggabungkan elemen-elemen tunggal ke dalam sebuah array, spread operator memperluas array menjadi elemen-elemen tunggal.

const numbers = new Set([1, 4, 5, 7])
console.log(...numbers) // 1 4 5 7
Enter fullscreen mode Exit fullscreen mode

Biasanya kita menggunakan concat method untuk menggabungkan dua array:

// Vanilla JavaScript
var cebongers = ['abu janda', 'ruhut sitompul', 'ngabalin']
var kampretos = ['ahmad dhani', 'ratna sarumpaet', 'bahar bin smith']

var chaos = cebongers.concat(kampretos)
console.log(chaos)
Enter fullscreen mode Exit fullscreen mode
🔴 OUTPUT:
 ["abu janda", "ruhut sitompul", "ngabalin", "ahmad dhani", "ratna sarumpaet", "bahar bin smith"]
Enter fullscreen mode Exit fullscreen mode

spread operator menawarkan semacam shortcut yang menjadikan penulisan kode di atas lebih mudah di baca:

// ES6
const chaos = [...cebongers, ...kampretos]
console.log(chaos) // same result as above
Enter fullscreen mode Exit fullscreen mode

Demikian pengenalan singkat rest parameter dan spread operator.

Discussion (0)

Forem Open with the Forem app