Lecture ini membahas Spread Operator (...). Ini sangat penting karena nanti spread operator akan sering muncul ketika bekerja dengan Array, Object, function, dan data dari API.

Kalau lecture sebelumnya tentang destructuring adalah:

“Saya ingin mengambil/membongkar data dari Array/Object.”

Maka spread operator bisa dibayangkan sebagai:

“Saya ingin membuka isi Array/Object dan menyebarkannya ke tempat lain.”

1. Apa itu Spread Operator?

Spread operator menggunakan tiga titik:

...

Contoh:

const numbers = [1, 2, 3];

console.log(...numbers);

Hasil:

1 2 3

Perhatikan perbedaannya.

Kalau:

console.log(numbers);

hasilnya:

[1, 2, 3]

Sedangkan:

console.log(...numbers);

hasilnya:

1 2 3

Jadi spread operator membuat isi Array “keluar” dari pembungkus Array.

2. Mental model sederhana

Bayangkan Array seperti sebuah kotak:

┌───────────────┐
│ 1 │ 2 │ 3     │
└───────────────┘

Tanpa spread:

numbers

kita membawa kotaknya.

Dengan spread:

...numbers

kita seperti membuka kotaknya:

1    2    3

Jadi:

numbers
   ↓
[1, 2, 3]

...numbers
   ↓
1 2 3

Catatan penting: spread tidak benar-benar “menghancurkan” Array aslinya. Ia menghasilkan nilai-nilai yang bisa ditempatkan ke konteks lain.

3. Spread Operator pada Array

Misalnya:

const originalArray = [1, 2, 3];

Kalau:

console.log(originalArray);

hasil:

[1, 2, 3]

Kalau:

console.log(...originalArray);

hasil:

1 2 3

Karena:

...originalArray

kurang lebih berarti:

ambil elemen:
1
2
3

dan sebarkan di sini

4. Kenapa disebut “spread”?

Karena nilai-nilai yang awalnya terkumpul:

[1, 2, 3]

disebarkan menjadi:

1  2  3

Makanya disebut spread.

5. Use Case #1 — Membuat Copy Array

Ini salah satu penggunaan spread yang paling penting.

Misalnya:

const originalArray = [1, 2, 3];

Kita ingin membuat copy.

Kita bisa:

const copyArray = [...originalArray];

Hasil:

console.log(copyArray);

[1, 2, 3]

6. Kenapa bukan [originalArray]?

Ini kesalahan yang sering terjadi.

Kalau kita menulis:

const copyArray = [originalArray];

hasilnya bukan:

[1, 2, 3]

melainkan:

[
    [1, 2, 3]
]

Artinya kita membuat Array yang berisi Array lain.

Visual:

copyArray
   │
   └── [1, 2, 3]

Jadi:

[originalArray]

menghasilkan nested array.

Sedangkan:

[...originalArray]

mengambil isi originalArray dan memasukkannya ke Array baru.

originalArray
     ↓
 [1, 2, 3]
     ↓ spread
 ┌─────────┐
 │ 1 2 3   │
 └─────────┘
     ↓
copyArray = [1, 2, 3]

7. Apakah copy tersebut benar-benar terpisah?

Untuk Array sederhana:

const originalArray = [1, 2, 3];

const copyArray = [...originalArray];

Kemudian:

originalArray.push(4);

hasil:

console.log(originalArray);

[1, 2, 3, 4]

Sedangkan:

console.log(copyArray);

[1, 2, 3]

Jadi Array baru tidak ikut bertambah.

8. Kenapa ini berbeda dengan =?

Bandingkan:

const originalArray = [1, 2, 3];

const copyArray = originalArray;

Ini bukan copy Array.

Keduanya menunjuk ke Array yang sama:

originalArray ──┐
                ↓
             [1,2,3]
                ↑
copyArray ──────┘

Kalau:

copyArray.push(4);

maka:

originalArray
// [1, 2, 3, 4]

copyArray
// [1, 2, 3, 4]

Sedangkan:

const copyArray = [...originalArray];

membuat Array baru:

originalArray
    ↓
 [1,2,3]

copyArray
    ↓
 [1,2,3]

Dua Array berbeda.

9. Spread untuk Menggabungkan Array

Misalnya kita punya:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

Kita ingin:

[1, 2, 3, 4, 5, 6]

Kita bisa:

const newArray = [...array1, ...array2];

Hasil:

console.log(newArray);

[1, 2, 3, 4, 5, 6]

10. Bagaimana JavaScript membacanya?

Ini:

const newArray = [...array1, ...array2];

secara konsep:

[

   ...array1
       ↓
   1, 2, 3

   ...array2
       ↓
   4, 5, 6

]

hasil:

[1, 2, 3, 4, 5, 6]

11. Bisa menambahkan nilai lain

Tidak harus hanya:

[...array1, ...array2]

Kita juga bisa:

const newArray = [
    0,
    ...array1,
    4,
    5,
    ...array2
];

Hasil:

[0, 1, 2, 3, 4, 5, 4, 5, 6]

Urutannya mengikuti posisi spread tersebut.

Visual:

0
 ↓
...array1
 ↓
1 2 3
 ↓
4 5
 ↓
...array2
 ↓
4 5 6

12. Spread pada String

Spread tidak hanya bekerja dengan Array.

String juga bisa di-spread.

Misalnya:

console.log(..."Hello");

hasil:

H e l l o

Karena String adalah iterable.

JavaScript bisa mengambil karakter-karakternya satu per satu.

13. Membuat Array dari String

Kalau kita ingin:

["H", "e", "l", "l", "o"]

kita bisa:

const chars = [..."Hello"];

Hasil:

console.log(chars);

["H", "e", "l", "l", "o"]

Perhatikan:

..."Hello"

sendiri menghasilkan nilai yang tersebar.

Sedangkan:

[..."Hello"]

memasukkan nilai-nilai tersebut ke Array baru.

14. Ini mirip dengan split("")

Kamu mungkin berpikir:

[..."Hello"]

mirip:

"Hello".split("")

Untuk kasus sederhana, memang hasilnya bisa sama:

[..."Hello"]
// ["H", "e", "l", "l", "o"]

"Hello".split("")
// ["H", "e", "l", "l", "o"]

Tetapi secara konsep keduanya berbeda.

Spread bekerja dengan konsep iterable, sedangkan split() adalah method khusus String.

Untuk sekarang, cukup pahami:

..."Hello"
→ sebar karakter

[..."Hello"]
→ buat Array dari karakter

15. Spread Operator pada Object

Sekarang bagian yang sangat penting.

Misalnya:

const obj1 = {
    a: 1,
    b: 2
};

Kita ingin membuat Object baru yang mempunyai semua property dari obj1.

Kita bisa:

const obj2 = {
    ...obj1
};

Hasil:

console.log(obj2);

{
    a: 1,
    b: 2
}

16. Cara memahami Object Spread

Misalnya:

const obj1 = {
    a: 1,
    b: 2
};

Ketika kita menulis:

{
    ...obj1
}

anggap saja JavaScript mengambil property:

a: 1
b: 2

kemudian menyebarkannya ke Object baru.

Visual:

obj1
┌─────────────┐
│ a: 1        │
│ b: 2        │
└─────────────┘
       ↓ spread
┌─────────────┐
│ a: 1        │
│ b: 2        │
└─────────────┘
     obj2

17. Menambahkan Property Baru

Kita bisa menggabungkan property lama dan property baru:

const obj2 = {
    ...obj1,
    c: 3
};

Hasil:

{
    a: 1,
    b: 2,
    c: 3
}

Ini sangat berguna.

Misalnya:

const movie = {
    name: "Interstellar",
    rating: 4.6
};

Kita ingin membuat object baru dengan data movie + property tambahan:

const updatedMovie = {
    ...movie,
    releaseYear: 2014
};

Hasil:

{
    name: "Interstellar",
    rating: 4.6,
    releaseYear: 2014
}

18. Spread + Override Property

Ini bagian yang sangat penting.

Misalnya:

const obj1 = {
    a: 1,
    b: 2
};

Kemudian:

const obj2 = {
    ...obj1,
    c: 3,
    a: 10
};

Hasil:

{
    a: 10,
    b: 2,
    c: 3
}

Kenapa a menjadi 10?

Karena ada dua property a:

...obj1
 ↓
a: 1

a: 10

Property yang ditulis belakangan menimpa yang sebelumnya.

Mental model:

const obj2 = {
    ...obj1,    // a = 1
    c: 3,
    a: 10       // a ditimpa
};

Hasil akhir:

a = 10
b = 2
c = 3

19. Urutan Spread Sangat Penting

Bandingkan:

const obj2 = {
    ...obj1,
    a: 10
};

hasil:

a: 10

Tetapi:

const obj2 = {
    a: 10,
    ...obj1
};

hasil:

a: 1

Karena ...obj1 datang setelah a: 10.

a: 10
   ↓
...obj1
   ↓
a: 1

Maka 1 menimpa 10.

Aturan emas:

Untuk Object Spread, property yang muncul paling belakang menang.

20. Spread vs Destructuring

Ini bagian yang sangat penting karena keduanya sama-sama menggunakan ... dalam beberapa konteks, tetapi tujuannya berbeda.

Destructuring

Membongkar data menjadi variable.

const person = {
    name: "John",
    age: 28
};

const { name, age } = person;

Artinya:

Object
  ↓
ambil data
  ↓
variable

Spread

Menyebarkan data ke tempat lain.

const person = {
    name: "John",
    age: 28
};

const copy = {
    ...person
};

Artinya:

Object
  ↓
sebar property
  ↓
Object baru

Mental model:

DESTRUCTURING
"Ambil isi untuk saya."

SPREAD
"Sebarkan isi ke sini."

21. Jangan tertukar dengan Rest Operator

Nah, ada satu hal yang nanti akan kamu pelajari:

...

juga bisa digunakan sebagai Rest Parameter / Rest Syntax.

Contoh:

const [first, ...others] = [1, 2, 3, 4];

Hasil:

first  → 1
others → [2, 3, 4]

Ini bukan spread.

Kenapa?

Karena konteksnya adalah mengumpulkan sisa data.

Sedangkan:

const newArray = [1, ...numbers];

adalah spread, karena menyebarkan isi numbers.

Jadi tiga titik ... bisa punya arti berbeda tergantung konteks.

Untuk sekarang cukup ingat:

... di sisi "menyebarkan"
→ Spread

... di sisi "mengumpulkan sisa"
→ Rest

22. Spread pada Object adalah Shallow Copy

Lecture menyebut:

Spread operator dapat digunakan untuk membuat shallow copy.

Ini penting.

Misalnya:

const movie = {
    name: "Interstellar",
    rating: 4.6
};

const copyMovie = {
    ...movie
};

Untuk property sederhana seperti String dan Number, ini biasanya terasa seperti copy yang benar-benar terpisah.

Kalau:

copyMovie.name = "Avatar";

maka:

movie.name
→ "Interstellar"

copyMovie.name
→ "Avatar"

Tidak saling mengubah.

23. Tapi bagaimana kalau ada Object/Array di dalamnya?

Nah, ini alasan disebut shallow copy.

Misalnya:

const movie = {
    name: "Interstellar",
    genre: ["sci-fi", "drama"]
};

const copyMovie = {
    ...movie
};

Array genre di dalamnya belum diduplikasi secara mendalam.

Secara sederhana:

movie
 │
 ├── name → "Interstellar"
 │
 └── genre ─────┐
                ↓
           ["sci-fi", "drama"]
                ↑
           copyMovie

Jadi movie.genre dan copyMovie.genre masih merujuk ke Array yang sama.

Kalau:

copyMovie.genre.push("adventure");

maka movie.genre juga akan ikut berubah.

Ini adalah konsep shallow copy.

Untuk level materi sekarang, cukup pegang:

...object membuat Object baru, tetapi nested object/array di dalamnya belum otomatis dicopy secara mendalam.

24. Spread dalam Project CIN/Cinix

Ini akan sangat relevan dengan project kamu.

Misalnya ada movie:

const movie = {
    id: 1,
    name: "Interstellar",
    rating: 4.6,
    releaseYear: 2014,
    genre: ["sci-fi", "drama"]
};

Kita ingin membuat movie baru berdasarkan movie lama, tetapi rating-nya diubah.

Bisa:

const updatedMovie = {
    ...movie,
    rating: 5
};

Hasil:

{
    id: 1,
    name: "Interstellar",
    rating: 5,
    releaseYear: 2014,
    genre: ["sci-fi", "drama"]
}

Perhatikan:

...movie
   ↓
ambil semua property

rating: 5
   ↓
override rating lama

Ini pola yang sangat umum di JavaScript modern.

25. Spread untuk Menambahkan Movie ke Array

Misalnya:

const movies = [
    movie1,
    movie2,
    movie3
];

Kita ingin membuat Array baru dengan movie tambahan.

Bisa:

const newMovies = [
    ...movies,
    newMovie
];

Hasilnya:

movie1
movie2
movie3
newMovie

Ini berbeda dengan:

movies.push(newMovie);

push() mengubah Array asli.

Sedangkan:

const newMovies = [...movies, newMovie];

membuat Array baru.

26. Spread untuk Menambahkan Data di Depan

Misalnya:

const newMovies = [
    newMovie,
    ...movies
];

Maka:

newMovie
movie1
movie2
movie3

Jadi posisi spread menentukan posisi data.

27. Spread vs concat()

Kamu sudah belajar concat().

Untuk Array:

const array1 = [1, 2];
const array2 = [3, 4];

const result = array1.concat(array2);

hasil:

[1, 2, 3, 4]

Dengan spread:

const result = [...array1, ...array2];

hasilnya sama:

[1, 2, 3, 4]

Spread sering terasa lebih fleksibel dan mudah dibaca ketika kita ingin menggabungkan beberapa sumber data sekaligus.

28. Spread vs push()

Misalnya:

const numbers = [1, 2, 3];

Dengan push():

numbers.push(4);

Array asli berubah:

[1, 2, 3, 4]

Dengan spread:

const newNumbers = [...numbers, 4];

Array baru dibuat:

numbers
→ [1, 2, 3]

newNumbers
→ [1, 2, 3, 4]

Jadi:

push()
→ MUTATE array asli

spread
→ buat array baru

Ini alasan spread sangat populer dalam pola programming yang menghindari mutation.

29. Spread + Array Destructuring

Sekarang kamu sudah belajar dua materi yang berurutan:

Destructuring

const [first, second] = numbers;

Mengambil data.

Spread

const newNumbers = [...numbers];

Menyebarkan data.

Perhatikan bentuknya hampir sama:

Destructuring:
const [a, b] = array;

Spread:
const newArray = [...array];

Tetapi tujuan berlawanan:

DESTRUCTURING
Array → variable

SPREAD
Array → elemen-elemen di tempat baru

30. Spread + Object Destructuring

Begitu juga dengan Object.

Destructuring:

const { name, age } = employee;

Spread:

const copyEmployee = {
    ...employee
};

Mental model:

Destructuring
Object → variables

Spread
Object → properties di tempat baru

31. Kenapa Spread Operator Sangat Berguna?

Karena banyak pekerjaan JavaScript sebenarnya membutuhkan:

Copy

const copy = [...array];

atau:

const copy = {...object};

Merge

const merged = [...array1, ...array2];

atau:

const merged = {...object1, ...object2};

Add data tanpa mengubah source

const newArray = [...oldArray, newValue];

Update property Object

const updated = {
    ...oldObject,
    rating: 5
};

Ini pola yang akan sering kamu lihat ketika nanti belajar React, state management, API data, dan modern JavaScript.

32. Ringkasan syntax

Array copy

const copy = [...original];

Array merge

const merged = [...array1, ...array2];

Tambah item ke belakang

const newArray = [...array, newItem];

Tambah item ke depan

const newArray = [newItem, ...array];

String → Array

const chars = [..."Hello"];

hasil:

["H", "e", "l", "l", "o"]

Object copy

const copy = {...original};

Object + property baru

const newObject = {
    ...original,
    newProperty: value
};

Object + override

const newObject = {
    ...original,
    rating: 5
};

Property yang ditulis belakangan akan menang.

33. Cheat Sheet: Method yang sudah kamu pelajari

Sekarang kamu sudah punya cukup banyak tools untuk mengolah Array.

┌────────────────────────────────────┐
│ Array & Object Tools               │
├────────────────────────────────────┤
│ forEach()    → proses semua        │
│ map()        → ubah setiap item    │
│ filter()     → pilih item          │
│ find()       → cari satu item      │
│ findIndex()  → cari posisi         │
│ includes()   → cek apakah ada      │
│ sort()       → urutkan             │
│ splice()     → ubah/hapus          │
│ groupBy()    → kelompokkan         │
│                                    │
│ destructuring → bongkar data       │
│ spread       → sebarkan data       │
└────────────────────────────────────┘

34. Mental Model Paling Penting

Kalau melihat:

const copy = [...movies];

pikir:

“Buka isi movies, lalu masukkan semua elemennya ke Array baru.”

Kalau:

const merged = [...movies, newMovie];

pikir:

“Ambil semua movie lama, lalu tambahkan movie baru ke Array baru.”

Kalau:

const updatedMovie = {
    ...movie,
    rating: 5
};

pikir:

“Copy semua property movie, lalu ganti rating menjadi 5.”

Kalau:

const chars = [..."Hello"];

pikir:

“Sebarkan karakter-karakter Hello ke dalam Array.”

35. Satu hal yang wajib kamu ingat

Ada pola yang sangat bagus untuk membedakan destructuring dan spread:

              DATA
               │
       ┌───────┴────────┐
       │                │
       ▼                ▼
 DESTRUCTURING        SPREAD
       │                │
       ▼                ▼
   mengambil        menyebarkan
       │                │
       ▼                ▼
 variables          tempat baru

Contoh:

const { name, age } = employee;

→ ambil property.

Sedangkan:

const copy = {
    ...employee
};

→ sebarkan/copy property.

🧠 Kesimpulan

Spread Operator = ...

Fungsi utamanya adalah menyebarkan isi iterable atau property Object ke tempat lain.

Pada Array:

const copy = [...array];

→ membuat shallow copy.

const merged = [...array1, ...array2];

→ menggabungkan Array.

const chars = [..."Hello"];

→ menyebarkan karakter String menjadi elemen Array.

Pada Object:

const copy = {...object};

→ membuat shallow copy.

const newObject = {
    ...object,
    newProperty: 123
};

→ copy + tambah property.

const updated = {
    ...object,
    age: 30
};

→ copy + override property.

Dan satu aturan yang sangat penting:

Kalau Object memiliki property yang sama, property yang ditulis paling belakang akan menimpa property sebelumnya.

Jadi kalau nanti kamu melihat:

const updatedMovie = {
    ...movie,
    rating: 5
};

langsung pahami:

movie
  ↓
ambil semua property
  ↓
buat object baru
  ↓
rating diganti 5

Sedangkan kalau kamu melihat:

const { name, rating } = movie;

langsung pahami:

movie
  ↓
ambil property
  ↓
masukkan ke variables

Destructuring = mengambil/membongkar. Spread = menyebarkan/menggabungkan/copy.