Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Spread Operators Pada ES2015
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.
23 Mei 2018

ES2015 memperkenalkan cara baru untuk memanipulasi array atau object menggunakan spread operators. Spread operator menjadikan syntax menjadi lebih clean, dinamis dan menyenangkan.

Penggunaan spread operator memakai simbol tiga dot atau titik (…). Coba kita lihat dan praktekkan beberapa penggunaan spread operators di bawah ini :

1.Sebagai Pengganti Prototype.function.apply

function addition(x, y, z) {
  console.log(x + y + z);  // output : 6
}
var numbers = [1, 2, 3];
//old way
/**
* memecah satu per satu nilai dari array untuk diparsing menjadi param function
**/
//addition(numbers[1], numbers[2], numbers[3]);
/**
* menggunakan Function.prototype.apply
**/
//addition.apply(null, args) ;
//new way
/**
* menggunakan spread operators
**/
addition(...numbers);

Dengan spread operators, kita bisa secara otomatis memecah nilai sebuah array menjadi argumen yang dimasukkan ke dalam parameter dari function tersebut. dari contoh di atas. sebuah array dengan nilai integer 1,2,3 akan secara otomatis diparsing menjadi parameter x,y,z pada function addition yang selanjutnya dijumlahkan dengan hasil nya adalah 6.

function checkLength(...numbers) {
  console.log(numbers.length)
}
checkLength(3,6,9,12); //output : 4

Berbeda dengan sebelumnya yang memecah nilai array menjadi argumen-argumen, pada contoh ini dari beberapa nilai yang diparsing sebagai argumen pada function checkLength akan secara otomatis berubah menjadi satu nilai array karena pada function checkLength kita menggunakan spread operators utk mendefinisikan parameternya. jadi dari kode di atas akan menghasilkan output 4 karena terdapat 4 angka yaitu 3,6,9 dan 12.

2.Kombinasi Array

Memasukkan array ke dalam array lain

var  a = ["banana","cherry"];
var fruits = ["apple",...a,"durian"];
console.log(fruits); // output : ["apple","banana","cherry","durian"]

Mengcopy array

var a = [1, 2, 3];
var b = [...arr];
b.push(4);
console.log(b); // output : [1,2,3,4];

Menggabungkan 2 array

var a = [1,2,3];
var b = [4,5,6];
var c = [...a, ...b];
console.log(c); // output : [1,2,3,4,5,6]

3.Kombinasi Objek

Mengcopy/mengclone objek

var myObj = {id: 1,name:"Budi"};
var myIdentity = {...myObj};
console.log(myIdentity); //output : {id: 1, name: "Budi"};

Menggabungkan objek

var obj1 = {grade: "C", pass : false};
var obj2 = {grade: "A", pass: true, cumlaude: true};
var mergedObj = {...obj1,...obj2};
console.log(mergedObj); // output : {grade: "A", pass: true, cumlaude: true}

pada penggabungan 2 objek, jika ada key yang sama, maka value dari key tersebut akan diambil dari objek yang terakhir.

Semoga bermanfaat ulasan tentang Spread operators di atas. happy coding :)

Referensi : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Blog ini telah dibaca sebanyak 273 kali
javascript es2015 spread operators

Sekilas Tentang Penulis

Rizqi Maulana
Seorang web programmer yang bekerja secara remote dan saat ini tinggal di kota Pekalongan. Tertarik belajar apa saja tentang Javascript.

KOMENTAR

blog comments powered by Disqus