Masukkan Password
30 Spread Operator
Di lecture ini kita masuk ke Spread Operator (...), yang memang sering bikin bingung karena bentuknya sama-sama ..., tetapi konsepnya berbeda dengan destructuring.
Kalau destructuring yang kita pelajari sebelumnya fokus pada mengambil/membongkar data ke dalam variable, maka spread operator lebih fokus pada “membuka isi” array/object lalu menyebarkannya ke tempat lain.
1. Apa itu Spread Operator?
Spread Operator ditulis dengan tiga titik:
...
Contoh:
const users = ["John", "Mark", "Mary"];
console.log(...users);
Hasilnya:
John Mark Mary
Perhatikan perbedaannya:
console.log(users);
menghasilkan:
["John", "Mark", "Mary"]
Sedangkan:
console.log(...users);
menghasilkan:
John Mark Mary
Kenapa?
Karena:
users
berarti:
“Ini adalah satu array.”
Sedangkan:
...users
berarti:
“Ambil semua isi array ini dan sebarkan satu per satu.”
2. Analogi sederhana: kotak
Bayangkan kita punya sebuah kotak:
users
┌─────────────────────────┐
│ John │ Mark │ Mary │
└─────────────────────────┘
Kalau kita menggunakan:
users
kita membawa kotaknya sekaligus.
Tetapi kalau:
...users
kita seperti membuka kotaknya dan mengeluarkan isinya:
John Mark Mary
Jadi mental model paling sederhananya:
Spread = buka isi lalu sebarkan.
3. Spread pada Array
Misalnya:
const users = ["John", "Mark", "Mary"];
Kalau:
console.log(users);
maka:
["John", "Mark", "Mary"]
users adalah satu array.
Tetapi:
console.log(...users);
spread akan mengambil:
John
Mark
Mary
dan menyebarkannya sebagai nilai individual.
Secara konsep:
users
↓
["John", "Mark", "Mary"]
...users
↓
John Mark Mary
4. Kenapa Spread Operator berguna?
Ada beberapa use case penting.
Yang paling umum:
- Membuat shallow copy array
- Menggabungkan atau memperluas array
- Menambahkan isi array ke array lain
- Menyalin/menggabungkan properties object
Mari kita bahas satu-satu.
5. Use Case 1 — Membuat Copy Array
Misalnya kita punya:
const users = ["John", "Mark", "Mary"];
Kita ingin membuat array baru:
const copyArray = users;
Sekilas kelihatannya seperti:
users → ["John", "Mark", "Mary"]
copyArray → ["John", "Mark", "Mary"]
Tetapi sebenarnya bukan membuat array baru.
Yang terjadi adalah:
Heap Memory
┌──────────────────────┐
users ──────┤ ["John","Mark","Mary"]│
└──────────────────────┘
▲
│
copyArray ──────────┘
Kedua variable menunjuk ke array yang sama.
6. Kenapa itu masalah?
Misalnya:
const users = ["John", "Mark", "Mary"];
const copyArray = users;
copyArray.push("Steve");
Sekarang:
console.log(copyArray);
hasil:
["John", "Mark", "Mary", "Steve"]
Tapi kalau:
console.log(users);
hasilnya juga:
["John", "Mark", "Mary", "Steve"]
Padahal kita hanya melakukan:
copyArray.push("Steve");
Kenapa users ikut berubah?
Karena:
const copyArray = users;
tidak membuat array baru.
Dia hanya membuat reference baru menuju array yang sama.
7. Gunakan Spread untuk membuat array baru
Kita bisa menggunakan:
const copyArray = [...users];
Perhatikan:
[...users]
Di sini ada dua hal:
[]
Membuat array baru.
...users
Mengambil semua isi users.
Jadi:
const copyArray = [...users];
secara konsep:
users
↓
["John", "Mark", "Mary"]
...users
↓
John Mark Mary
↓
[ John, Mark, Mary ]
↓
array baru
Sekarang:
Heap Memory
users ────────→ ["John", "Mark", "Mary"]
copyArray ────→ ["John", "Mark", "Mary"]
↑
array berbeda
Keduanya mempunyai isi yang sama, tetapi array-nya berbeda.
8. Buktikan dengan push()
const users = ["John", "Mark", "Mary"];
const copyArray = [...users];
copyArray.push("Steve");
Sekarang:
console.log(copyArray);
hasil:
["John", "Mark", "Mary", "Steve"]
Sedangkan:
console.log(users);
tetap:
["John", "Mark", "Mary"]
Karena:
users → Array A
copyArray → Array B
bukan:
users ──┐
├──→ Array yang sama
copyArray ──┘
9. Apa itu Shallow Copy?
Istilah ini penting.
const copyArray = [...users];
disebut membuat shallow copy.
Artinya:
Kita membuat container/array baru dan menyalin isi level terluarnya.
Untuk array sederhana seperti:
const users = ["John", "Mark", "Mary"];
ini biasanya sangat mudah dipahami.
Tapi hati-hati kalau isi array berupa object atau array lain.
Contoh:
const users = [
{ name: "John" },
{ name: "Mark" }
];
const copy = [...users];
Array-nya memang baru:
users ──→ Array A
copy ──→ Array B
tetapi object di dalamnya masih direferensikan:
Array A ──→ { name: "John" } ←── Array B
Jadi spread bukan deep copy.
Untuk sekarang cukup ingat:
[...]membuat array baru dengan shallow copy.
10. Use Case 2 — Menggabungkan Array
Misalnya kita punya:
const users = ["John", "Mark", "Mary"];
Kemudian kita ingin membuat array baru yang berisi:
Ravi
Steve
John
Mark
Mary
Kita bisa menggunakan:
const extendedUsers = ["Ravi", "Steve", ...users];
Hasilnya:
[
"Ravi",
"Steve",
"John",
"Mark",
"Mary"
]
Perhatikan:
...users
mengeluarkan:
John
Mark
Mary
Kemudian semuanya dimasukkan ke array baru.
11. Kenapa tidak langsung users?
Misalnya kita melakukan:
const extendedUsers = ["Ravi", "Steve", users];
Ini berbeda.
Hasilnya:
[
"Ravi",
"Steve",
["John", "Mark", "Mary"]
]
Perhatikan bentuknya.
Kita sekarang punya array di dalam array.
Secara visual:
extendedUsers
│
├── "Ravi"
├── "Steve"
└── ["John", "Mark", "Mary"]
↑
array
Jadi users dianggap sebagai satu element.
12. Dengan Spread
Kalau:
const extendedUsers = [
"Ravi",
"Steve",
...users
];
maka ...users menyebarkan element-nya:
...users
↓
John
Mark
Mary
sehingga:
extendedUsers
│
├── "Ravi"
├── "Steve"
├── "John"
├── "Mark"
└── "Mary"
Tidak ada nested array.
13. Ini konsep yang sangat penting
Bandingkan:
Tanpa spread
const result = ["Ravi", "Steve", users];
Hasil:
["Ravi", "Steve", ["John", "Mark", "Mary"]]
Dengan spread
const result = ["Ravi", "Steve", ...users];
Hasil:
["Ravi", "Steve", "John", "Mark", "Mary"]
Jadi:
users= masukkan array sebagai satu nilai/element
...users= sebarkan element-element dari array tersebut
14. Spread bisa ditempatkan di tengah
Spread tidak harus selalu di akhir.
Misalnya:
const users = ["John", "Mark", "Mary"];
const result = [
"Ravi",
...users,
"Steve"
];
Hasil:
[
"Ravi",
"John",
"Mark",
"Mary",
"Steve"
]
Karena JavaScript membaca dari kiri ke kanan:
"Ravi"
↓
...users
↓
John, Mark, Mary
↓
"Steve"
15. Spread juga bisa menggabungkan dua array
Misalnya:
const users = ["John", "Mark"];
const admins = ["Ravi", "Steve"];
const allUsers = [...users, ...admins];
Hasil:
["John", "Mark", "Ravi", "Steve"]
Atau:
const allUsers = [...admins, ...users];
hasilnya:
["Ravi", "Steve", "John", "Mark"]
Urutan spread menentukan urutan hasil.
16. Spread pada Object
Sekarang kita masuk ke bagian kedua.
Spread bukan hanya untuk array.
Kita juga bisa menggunakan spread pada object.
Misalnya:
const person = {
firstName: "John",
age: 28,
gender: "male"
};
Kita ingin membuat object baru bernama:
employee
yang memiliki semua data person, ditambah:
salary
company
Kita bisa melakukan:
const employee = {
...person,
salary: 1200,
company: "Google"
};
Hasilnya:
{
firstName: "John",
age: 28,
gender: "male",
salary: 1200,
company: "Google"
}
17. Apa yang terjadi pada ...person?
Misalnya:
const person = {
firstName: "John",
age: 28,
gender: "male"
};
Kemudian:
const employee = {
...person,
salary: 1200,
company: "Google"
};
Spread mengambil properties dari person:
firstName: "John"
age: 28
gender: "male"
kemudian menyebarkannya ke object baru.
Secara mental:
person
┌────────────────────────────┐
│ firstName: "John" │
│ age: 28 │
│ gender: "male" │
└────────────────────────────┘
│
│ ...person
↓
employee
┌────────────────────────────┐
│ firstName: "John" │
│ age: 28 │
│ gender: "male" │
│ salary: 1200 │
│ company: "Google" │
└────────────────────────────┘
18. Object juga bisa dibuat copy
Misalnya:
const person = {
name: "John",
age: 28
};
Kita bisa:
const copy = { ...person };
Sekarang copy adalah object baru dengan properties yang sama.
person ──→ Object A
copy ──→ Object B
Jadi kalau:
copy.age = 30;
maka:
console.log(copy.age);
hasil:
30
sedangkan:
console.log(person.age);
tetap:
28
Untuk object sederhana, ini adalah pola yang sangat umum untuk membuat shallow copy.
19. Spread Object bisa menggabungkan object
Misalnya:
const person = {
name: "John",
age: 28
};
const address = {
city: "Jakarta",
country: "Indonesia"
};
Kita bisa:
const user = {
...person,
...address
};
Hasil:
{
name: "John",
age: 28,
city: "Jakarta",
country: "Indonesia"
}
Jadi:
person + address
↓
...person
...address
↓
object baru
20. Bagaimana kalau property-nya sama?
Ini bagian penting.
Misalnya:
const user = {
name: "John",
age: 28
};
const updatedUser = {
...user,
age: 30
};
Hasilnya:
{
name: "John",
age: 30
}
Kenapa?
Karena property yang muncul belakangan akan menimpa value sebelumnya.
Secara sederhana:
{
age: 28,
age: 30
}
yang berlaku adalah:
age: 30
Jadi:
Dalam object spread, property yang datang belakangan dapat overwrite property sebelumnya.
Contoh lain:
const result = {
...person,
name: "Mark"
};
Maka name menjadi:
"Mark"
bukan "John".
21. Urutan spread object penting
Contoh:
const a = {
name: "John"
};
const b = {
name: "Mark"
};
Kalau:
const result = {
...a,
...b
};
hasil:
{
name: "Mark"
}
Tetapi kalau dibalik:
const result = {
...b,
...a
};
hasil:
{
name: "John"
}
Jadi:
...a → ...b
↑
menang
Property terakhir menang jika key sama.
22. Spread vs Destructuring
Ini bagian yang sangat penting, karena keduanya sama-sama menggunakan ... dalam konteks tertentu, tetapi fungsinya berbeda.
Destructuring
Destructuring digunakan untuk mengambil data keluar dari array/object ke variable.
Contoh:
const user = {
name: "John",
age: 28
};
const { name, age } = user;
Kita mendapatkan variable:
name → "John"
age → 28
Spread
Spread digunakan untuk menyebarkan isi array/object ke tempat lain.
const user = {
name: "John",
age: 28
};
const employee = {
...user,
salary: 1200
};
Kita menyebarkan properties user ke object baru.
23. Cara membedakan dengan mudah
Ingat dua kata:
DESTRUCTURING
↓
AMBIL
SPREAD
↓
SEBARKAN
Contoh:
const users = ["John", "Mark", "Mary"];
Destructuring
const [user1, user2, user3] = users;
Hasil:
user1 → John
user2 → Mark
user3 → Mary
Kita mengambil isi array ke variable.
Spread
const copy = [...users];
Hasil:
users
↓
John, Mark, Mary
↓
array baru
Kita menyebarkan isi array ke array baru.
24. Destructuring Object vs Spread Object
Misalnya:
const person = {
name: "John",
age: 28,
gender: "male"
};
Destructuring
const { name, age } = person;
Tujuannya:
person
↓
name
age
Kita mengambil properties tertentu.
Spread
const employee = {
...person,
salary: 1200
};
Tujuannya:
person
↓
semua properties
↓
employee
Kita menyebarkan properties ke object baru.
25. Perhatikan tanda kurungnya
Ini juga penting.
Array
[...users]
[] berarti kita sedang membuat array baru.
Object
{ ...person }
{} berarti kita sedang membuat object baru.
Jadi:
const copyArray = [...users];
berarti:
Buat array baru, lalu masukkan semua element
users.
Sedangkan:
const copyObject = { ...person };
berarti:
Buat object baru, lalu masukkan semua properties
person.
26. Contoh lengkap dari lecture
Mari kita satukan.
const users: string[] = [
"John",
"Mark",
"Mary"
];
Menyebarkan array
console.log(...users);
Output:
John Mark Mary
Membuat shallow copy
const copyArray = [...users];
copyArray.push("Steve");
Hasil:
console.log(users);
// ["John", "Mark", "Mary"]
console.log(copyArray);
// ["John", "Mark", "Mary", "Steve"]
Membuat array yang diperluas
const extendedUsers = [
"Ravi",
"Steve",
...users
];
Hasil:
[
"Ravi",
"Steve",
"John",
"Mark",
"Mary"
]
Spread object
const person = {
firstName: "John",
age: 28,
gender: "male"
};
Kemudian:
const employee = {
...person,
salary: 1200,
company: "Google"
};
Hasil:
{
firstName: "John",
age: 28,
gender: "male",
salary: 1200,
company: "Google"
}
27. Spread tidak mengubah array/object original
Ini salah satu alasan spread sangat berguna.
Misalnya:
const users = ["John", "Mark", "Mary"];
const newUsers = [...users];
newUsers.push("Steve");
Yang berubah:
newUsers
Bukan:
users
Jadi:
Original
users
["John", "Mark", "Mary"]
↓ spread
Copy
newUsers
["John", "Mark", "Mary"]
Kemudian:
newUsers.push("Steve");
menjadi:
users
["John", "Mark", "Mary"]
newUsers
["John", "Mark", "Mary", "Steve"]
Ini sangat berguna ketika kita ingin menjaga data original tetap utuh.
28. Kenapa ini banyak digunakan dalam JavaScript/TypeScript modern?
Karena kita sering ingin membuat data baru berdasarkan data lama tanpa memodifikasi data lama.
Contohnya:
const user = {
name: "John",
age: 28
};
Kemudian kita ingin mengubah age:
const updatedUser = {
...user,
age: 30
};
Daripada:
user.age = 30;
kita membuat object baru.
Hasil:
user
{
name: "John",
age: 28
}
↓
updatedUser
{
name: "John",
age: 30
}
Pola seperti ini sangat umum dalam aplikasi modern, terutama ketika mengelola state/data.
29. Jangan salah paham: Spread bukan Deep Copy
Ini penting untuk level berikutnya.
Misalnya:
const user = {
name: "John",
address: {
city: "Jakarta"
}
};
const copy = {
...user
};
Object paling luar memang berbeda:
user ──→ Object A
copy ──→ Object B
Tetapi:
user.address
↓
Address Object
↑
copy.address
address masih menunjuk object yang sama.
Jadi:
copy.address.city = "Surabaya";
bisa menyebabkan:
user.address.city
juga berubah.
Itulah mengapa disebut:
shallow copy, bukan deep copy.
Untuk sekarang, cukup ingat:
...array/object
↓
Shallow copy
30. Kesalahan paling umum
❌ Mengira users dan ...users sama
Tidak sama.
users
adalah array.
...users
adalah isi array yang sedang disebarkan.
❌ Lupa menggunakan []
Kalau ingin membuat array baru:
const copy = [...users];
bukan sekadar:
const copy = ...users; // ❌
Spread harus berada dalam konteks yang menerima element-element tersebut.
❌ Menggunakan users saat ingin menggabungkan element
const result = ["Ravi", "Steve", users];
menghasilkan nested array:
[
"Ravi",
"Steve",
["John", "Mark", "Mary"]
]
Kalau yang diinginkan adalah satu array datar:
const result = ["Ravi", "Steve", ...users];
31. Visualisasi besar: users vs ...users
Ini mungkin visualisasi yang paling penting untuk diingat.
Misalnya:
const users = ["John", "Mark", "Mary"];
Tanpa spread
users
┌─────────────────────┐
│ John │ Mark │ Mary │
└─────────────────────┘
↓
satu array
Dengan spread
...users
↓
John Mark Mary
↓ ↓ ↓
element element element
Jadi:
users = satu paket
...users = isi paket disebarkan
32. Cheat Sheet
| Syntax | Arti |
|---|---|
users | array sebagai satu value |
...users | sebarkan semua element array |
[...users] | buat array baru dari element users |
[...a, ...b] | gabungkan element dua array |
person | object sebagai satu value |
...person | sebarkan properties object |
{...person} | buat object baru dari properties person |
{...a, ...b} | gabungkan properties dua object |
33. Hubungan dengan materi sebelumnya
Sekarang kita punya tiga konsep yang mirip tetapi berbeda:
DESTRUCTURING
↓
"AMBIL"
↓
Array/Object → Variables
SPREAD
↓
"SEBARKAN"
↓
Array/Object → Array/Object lain
TYPE ALIAS
↓
"BERI NAMA TYPE"
↓
Type → nama yang reusable
Contoh semuanya:
type User = {
name: string;
age: number;
};
const user: User = {
name: "John",
age: 28
};
Destructuring
const { name, age } = user;
→ ambil data.
Spread
const updatedUser = {
...user,
age: 30
};
→ sebarkan data ke object baru, lalu override age.
34. Satu kalimat yang wajib diingat
Kalau besok lupa semuanya, ingat ini:
Spread Operator (
...) digunakan untuk membuka dan menyebarkan isi array atau properties object ke tempat lain.
Dan bedakan dengan:
Destructuring = mengambil isi menjadi variable.
Contoh paling gampang:
const users = ["John", "Mark", "Mary"];
// Destructuring → mengambil
const [first, second] = users;
// Spread → menyebarkan
const copy = [...users];
Mental modelnya:
Destructuring:
📦 → 👤 👤
"ambil isi"
Spread:
📦 → 📦📦
"sebarkan isi ke container lain"
Kunci utamanya:
`...users`
↓
"pecahkan isi users menjadi element-element individual"
`[...users]`
↓
"buat array baru dan masukkan semua element users"
`{...user}`
↓
"buat object baru dan masukkan semua properties user"