Magic three dots Pada Javascript

Gambar source code

Javascript semakin berkembang dengan fitur-fiturnya yang menarik, salah satunya `…` (three dots) alias tiga titik. Syntax ini sangat berguna untuk developer namun juga bisa membingungkan karena, Fungsi dari three dots pada javascript ini bisa sebagai Spread Operator atau sebagai Rest Parameter.

Rest Parameter: mengumpulkan semua element selanjutnya/sisanya menjadi sebuah array.

Spread Operator: membuat suatu array/object/string yang bisa diiterasi menjadi berkembang/banyak.

Mari kita lihat perbedaan selengkapnya …

Rest Parameter

Berikut contoh pengunaannya:

function multiply(a, b) {
	return a * b ;
}
console.log(multiply(2, 10, 5, 100)); // returns 20

Function di atas akan menghasilkan return 20, karena javascript membolehkan banyak argument/parameter ketika memanggil suatu function, walaupun hanya dua argument/parameter yang dihitung. Nah, dengan rest parameter kita dapat mengumpulkan banyak argument/parameter ke dalam satu array. Kita coba modifikasi function di atas menjadi seperti berikut:

function multiply( ...params) {

	for(let param or params) {
		if( result > 0  ){
			Result *= param;
		} else {
			Result = param;
		}
}
return result;
}

console.log( mutiply(1) ); //result 1
console.log( mutiply(1, 2) ); //result 2
console.log( mutiply(10, 5, 2) ); //result 100

Penting: Rest parameter biasanya ditempatkan sebagai last argument/parameter. Karena rest parameters mengambil/mengumpulkan semua excess/argument yg tersisa menjadi sebuah array.

function hobbies(name, ...hobbies){
	let result =  `halo saya ${name}, hobi saya `;
	for( let hobby of hobbies) result += ` ${hobby} `;
	return result;
}

console.log(hobbies('Sunny', 'makan bakso', 'tidur miring', 'minum kopi', 'garuk kepala', 'coding'));

//return “halo saya Sunny, hobi saya  makan bakso  tidur miring  minum kopi  garuk kepala  coding “

Karena rest parameter ini menghasilkan array, kita juga dapat menggunakan fungsi-fungsi untuk array contohnya Array.includes() dll.

Sebelum adanya rest parameter ini, untuk mendapatkan semua arguments dalam function, harus menggunakan keyword/syntax `arguments` yang mana bentuknya object `seperti array`. Penjelasannya sebagai berikut:

function allArgs() {
	return arguments;
}

console.log(allArgs('Makan', 500, true));
//return Arguments(3)[‘Makan’, 500, true];

Downside dari penggunaan keyword `arguments` di atas yaitu menghasilkan object `seperti array`, yang artinya kita tidak bisa menggunakan function atau method untuk array seperti Array.map, Array.filter , dan kita tidak dapat menggunakan `arguments` di dalam arrow functions. Karena arrow functions tidak memiliki `this` berarti juga tidak memiliki object `arguments`.

Penjelasan three dots pada javascript
Penjelasan Spread Operator dan Rest Parameter

Spread Operators

Kita dapat expand element dengan spread operator. Kalau rest operator ini mengumpulkan beberapa argument/parameter ke dalam satu array. Dengan Spread operators, kita dapat membuka element-element dalam array menjadi single atau individual argument.

Contoh skenario kegunaannya, sebagai sebagai berikut:

Menambahkan array element ke dalam array ada

const array = [‘Kinder joy’, ‘Silver Queen’, ‘Kit-Kat’];
const newArray = [...arr, ‘Cokelat Patah Hati’];

Value dari newArray = [‘Kinder joy’, ‘Silver Queen’, ‘Kit-Kat’, ‘Cokelat Patah Hati’]. Note: untuk spread operator bisa digunakan sebagai first argument, seperti contoh di atas.

Copy Array

const array = [‘Kinder joy’, ‘Silver Queen’, ‘Kit-Kat’];
const array2 = [...arr];

Hasilnya array2 memiliki isi array yang sama dengan array.

bisa digunakan untuk passing argument ke function sebagai argument/parameter terpisah

function identity(name, age, city){
	return `Hi, saya ${name}, usia saya ${age} tahun, dan asal dari kota ${city}.`;
}

const gatot = ['Gatotkaca', 150, 'Pringgondani'];
const gatotIdentity = identity(...gatot);

console.log(gatotIdentity);
//return ‘Hi, saya Gatotkaca, usia saya 150 tahun, dan asal dari kota Pringgondani.’

note : kita sudah mencoba spread operator menggunakan array, tapi tidak hanya terbatas array, semua iterable bisa. Contoh kita memiliki string,  const string = ‘Gatot’, maka […string] akan menghasilkan [‘G’, ‘a’, ‘t’, ‘o’, ‘t’]

Kesimpulannya

Tree dots pada javascript (…) bisa digunakan untuk spread operator maupun rest parameter. Lalu bagaimana membedakan hal tersebut? Hmm, tergantung bagaimana kita menggunakannya. Tergantung context di mana kita menggunakan three dots tadi, dengan begitu lebih mudah kita dapat menentukan apakah ini rest parameter ataukah spread operator. Dan semoga tulisan ini bermanfaat untuk lebih memahami kedua konsep di atas. Dan mohon maaf apabila ada kesalahan. Terima kasih sudah berkenan membaca Azuralabs Newsletter sampai selesai.

Leave a Reply

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