Spread Operator
Spread Operator merupakan fitur JavaScript modern (ES6) yang menggunakan tiga titik (...) untuk menyebarkan elemen dari Array atau property dari Object ke dalam struktur data baru.
Spread Operator sangat berguna ketika kita ingin menyalin, menggabungkan, atau memperluas Array dan Object tanpa mengubah data aslinya.
Spread Operator pada Array
Spread Operator dapat digunakan untuk menggabungkan beberapa array.
Tanpa Spread Operator
Jika kita memasukkan array secara langsung ke dalam array lain, hasilnya akan menjadi nested array.
const hobbies = ["Sports", "Cooking"];
const newHobbies = ["Reading"];
const mergedHobbies = [hobbies, newHobbies];
console.log(mergedHobbies);
Output:
[
["Sports", "Cooking"],
["Reading"]
]
Array hobbies dan newHobbies tetap menjadi elemen di dalam array baru.
Dengan Spread Operator
Dengan Spread Operator, isi dari masing-masing array akan disebarkan menjadi elemen individual.
const hobbies = ["Sports", "Cooking"];
const newHobbies = ["Reading"];
const mergedHobbies = [...hobbies, ...newHobbies];
console.log(mergedHobbies);
Output:
["Sports", "Cooking", "Reading"]
Dengan menggunakan:
...hobbies
JavaScript akan mengambil seluruh elemen dari array hobbies.
Begitu juga:
...newHobbies
akan mengambil seluruh elemen dari newHobbies.
Menyalin Array
Spread Operator juga dapat digunakan untuk membuat salinan array.
const hobbies = ["Sports", "Cooking", "Reading"];
const copiedHobbies = [...hobbies];
console.log(copiedHobbies);
Hasilnya:
["Sports", "Cooking", "Reading"]
Sekarang copiedHobbies merupakan array baru.
console.log(hobbies === copiedHobbies);
Output:
false
Artinya, keduanya merupakan array yang berbeda.
Menambahkan Elemen ke Array
Spread Operator juga dapat digunakan untuk membuat array baru sekaligus menambahkan data.
const hobbies = ["Sports", "Cooking"];
const updatedHobbies = [...hobbies, "Reading"];
console.log(updatedHobbies);
Output:
["Sports", "Cooking", "Reading"]
Array asli tetap tidak berubah:
console.log(hobbies);
Output:
["Sports", "Cooking"]
Spread Operator pada Object
Spread Operator juga dapat digunakan pada Object.
Pada Object, Spread Operator akan mengambil seluruh pasangan key-value dan memasukkannya ke dalam Object baru.
Contoh:
const user = {
name: "Max",
age: 34
};
const extendedUser = {
isAdmin: true,
...user
};
console.log(extendedUser);
Output:
{
isAdmin: true,
name: "Max",
age: 34
}
Property dari user disebarkan ke dalam Object extendedUser.
Menyalin Object
Sama seperti Array, Spread Operator dapat digunakan untuk membuat salinan Object.
const user = {
name: "Max",
age: 34
};
const copiedUser = {
...user
};
console.log(copiedUser);
Object copiedUser merupakan Object baru.
console.log(user === copiedUser);
Output:
false
Menambahkan Property ke Object
Kita juga dapat membuat Object baru sekaligus menambahkan property.
const user = {
name: "Max",
age: 34
};
const updatedUser = {
...user,
isAdmin: true
};
console.log(updatedUser);
Output:
{
name: "Max",
age: 34,
isAdmin: true
}
Object asli tidak berubah.
Memperbarui Property Object
Spread Operator sangat berguna ketika ingin memperbarui property tertentu tanpa mengubah Object asli.
const user = {
name: "Max",
age: 34
};
const updatedUser = {
...user,
age: 35
};
console.log(updatedUser);
Output:
{
name: "Max",
age: 35
}
Object user tetap memiliki nilai:
{
name: "Max",
age: 34
}
Urutan Spread Operator
Urutan property sangat penting ketika terdapat property dengan nama yang sama.
Contoh:
const user = {
name: "Max",
age: 34
};
const updatedUser = {
...user,
age: 35
};
console.log(updatedUser);
Hasilnya:
{
name: "Max",
age: 35
}
Property age: 35 menggantikan nilai age: 34 karena ditulis setelah ...user.
Sebaliknya:
const updatedUser = {
age: 35,
...user
};
Hasilnya:
{
age: 34,
name: "Max"
}
Property dari user akan menimpa nilai sebelumnya.
Spread Operator dalam React
Spread Operator sangat penting dalam React karena React sering menggunakan konsep immutability.
Misalnya kita memiliki state berupa Object:
const [user, setUser] = useState({
name: "Max",
age: 34
});
Jika ingin mengubah age, kita tidak sebaiknya mengubah Object secara langsung.
Cara yang umum digunakan:
setUser({
...user,
age: 35
});
Dengan cara tersebut:
- Object lama disalin menggunakan
...user. - Property
agediperbarui menjadi35. - React mendapatkan Object baru.
- Object lama tetap tidak dimodifikasi.
Spread Operator pada Array State
Spread Operator juga sering digunakan ketika memperbarui state berupa Array.
Contoh:
const [hobbies, setHobbies] = useState([
"Sports",
"Cooking"
]);
Untuk menambahkan hobby baru:
setHobbies([
...hobbies,
"Reading"
]);
Hasilnya:
["Sports", "Cooking", "Reading"]
Array lama tidak dimodifikasi secara langsung.
Spread Operator vs Assignment
Perhatikan perbedaan berikut.
Assignment
const user = {
name: "Max"
};
const copiedUser = user;
Pada contoh tersebut, copiedUser dan user merujuk pada Object yang sama.
Spread Operator
const user = {
name: "Max"
};
const copiedUser = {
...user
};
Sekarang copiedUser merupakan Object baru.
Poin Penting
Beberapa hal yang perlu diingat:
- Spread Operator menggunakan tiga titik:
.... - Pada Array, spread akan menyebarkan setiap elemen.
- Pada Object, spread akan menyebarkan setiap pasangan key-value.
- Spread Operator dapat digunakan untuk membuat salinan data.
- Spread Operator dapat digunakan untuk menggabungkan data.
- Spread Operator membantu menghindari mutasi data asli.
- Spread Operator sangat sering digunakan ketika mengelola state React.
Kesimpulan
Spread Operator (...) merupakan fitur JavaScript yang sangat berguna untuk menyalin, menggabungkan, dan memperbarui Array maupun Object tanpa mengubah data asli secara langsung.
Dalam React, konsep ini sangat penting karena pengelolaan state umumnya dilakukan secara immutable.
Contoh paling umum:
// Object
const updatedUser = {
...user,
age: 35
};
dan:
// Array
const updatedHobbies = [
...hobbies,
"Reading"
];
Dengan memahami Spread Operator, kita akan lebih mudah memahami cara React mengelola dan memperbarui state pada materi berikutnya.