Lecture ini melanjutkan materi Spread Operator (...) sebelumnya, tetapi sekarang membahas dua hal yang sangat mirip bentuknya:

1. Rest Pattern
2. Rest Parameter

Keduanya menggunakan tiga titik:

...

Nah, bagian yang biasanya bikin bingung adalah:

Spread dan Rest sama-sama menggunakan ..., tetapi fungsinya berlawanan.

Kalau kamu memahami satu kalimat ini, sebagian besar lecture ini akan jadi jauh lebih mudah.

1. Gambaran besar: Spread vs Rest

Bayangkan kita punya beberapa barang.

Spread

Spread seperti:

“Keluarkan semua barang dari kotak dan sebarkan.”

const numbers = [1, 2, 3];

const newNumbers = [...numbers];

Hasil:

numbers
[1, 2, 3]
   ↓ spread
1  2  3
   ↓
newNumbers
[1, 2, 3]

Rest

Rest justru kebalikannya:

“Ambil sisa barang dan kumpulkan menjadi satu kotak.”

const [a, b, ...rest] = [1, 2, 3, 4, 5];

Hasil:

a    → 1
b    → 2
rest → [3, 4, 5]

Jadi:

SPREAD
[1, 2, 3]
    ↓
1  2  3
MENYEBARKAN


REST
1  2  3  4  5
    ↓
[3, 4, 5]
MENGUMPULKAN SISA

2. Kenapa syntax-nya sama?

Baik Spread maupun Rest menggunakan:

...

Tetapi maknanya ditentukan oleh konteks penggunaannya.

Contoh Spread:

const newArray = [...oldArray];

Di sini ...oldArray menyebarkan isi Array.

Contoh Rest:

const [a, b, ...rest] = array;

Di sini ...rest mengumpulkan sisa elemen.

Jadi jangan hanya melihat:

...

Lihat apa yang sedang dilakukan oleh ....

3. Rest Pattern pada Array

Kita mulai dari contoh paling sederhana.

Misalnya:

const numbers = [1, 2, 3, 4, 5];

Kita ingin mengambil:

1 → a
2 → b
3,4,5 → rest

Kita bisa:

const [a, b, ...rest] = numbers;

Hasil:

console.log(a);
console.log(b);
console.log(rest);

Output:

1
2
[3, 4, 5]

4. Kenapa rest menjadi Array?

Perhatikan:

const [a, b, ...rest] = numbers;

Array awal:

[1, 2, 3, 4, 5]

Prosesnya:

1 → a
2 → b
3 ─┐
4  ├→ rest
5 ─┘

Karena rest mengambil sisa elemen, JavaScript mengumpulkannya menjadi Array:

rest
// [3, 4, 5]

Jadi ...rest bisa dibayangkan seperti:

“Semua elemen yang tersisa, kumpulkan ke dalam Array bernama rest.”

5. Rest bukan mengambil satu elemen

Ini penting.

Kalau:

const [a, b, rest] = [1, 2, 3, 4, 5];

maka:

a    → 1
b    → 2
rest → 3

Elemen 4 dan 5 tidak masuk ke mana-mana.

Sedangkan:

const [a, b, ...rest] = [1, 2, 3, 4, 5];

hasil:

a    → 1
b    → 2
rest → [3, 4, 5]

Perbedaannya ada di:

rest

vs:

...rest

Tiga titik berarti:

“Ambil semua sisa.”

6. Kalau tidak ada sisa?

Misalnya:

const [a, b, ...rest] = [1, 2];

Tidak ada elemen yang tersisa.

Maka:

a
// 1

b
// 2

rest
// []

Jadi Rest Pattern tetap menghasilkan Array, hanya saja Array-nya kosong.

Tidak ada sisa
      ↓
rest = []

Ini berbeda dengan destructuring biasa:

const [a, b, c] = [1, 2];

hasil:

c → undefined

Sedangkan Rest:

const [a, b, ...rest] = [1, 2];

hasil:

rest → []

7. Rest Pattern + Destructuring

Sekarang kamu bisa melihat hubungan materi sebelumnya.

Kita punya:

const [a, b, ...rest] = numbers;

Ini sebenarnya kombinasi:

Array Destructuring
        +
Rest Pattern

Array Destructuring:

1 → a
2 → b

Rest Pattern:

3,4,5 → rest

8. Rest Pattern pada Object

Rest juga bisa digunakan pada Object.

Misalnya:

const obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
};

Kita ingin:

a → variable a
b → variable b

c dan d → object lain

Kita bisa:

const {
    a,
    b,
    ...others
} = obj;

Hasil:

a       → 1
b       → 2
others  → { c: 3, d: 4 }

9. Visual Object Rest

Object awal:

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

Destructuring:

const {
    a,
    b,
    ...others
} = obj;

Proses:

a → a

b → b

c ─┐
d ─┴→ others

Kemudian others menjadi:

{
    c: 3,
    d: 4
}

Jadi Rest pada Object akan mengumpulkan property yang belum diambil menjadi Object baru.

10. Bandingkan Object Destructuring biasa

Tanpa Rest:

const {
    a,
    b
} = obj;

Maka:

a → 1
b → 2

c → tidak diambil
d → tidak diambil

Dengan Rest:

const {
    a,
    b,
    ...others
} = obj;

Maka:

a → 1
b → 2
others → { c: 3, d: 4 }

Jadi Rest memungkinkan kita mengatakan:

“Ambil beberapa property tertentu, lalu kumpulkan semua sisanya.”

11. Ini berbeda dengan Object Spread

Perhatikan dua kode berikut.

Spread

const newObj = {
    ...obj
};

Artinya:

Sebarkan semua property obj ke Object baru.

Rest

const {
    a,
    ...others
} = obj;

Artinya:

Ambil a, lalu kumpulkan property yang tersisa ke others.

Visual:

SPREAD

obj
 ↓
...obj
 ↓
sebar semua property
 ↓
object baru

Sedangkan:

REST

object
 ↓
ambil a
 ↓
kumpulkan sisanya
 ↓
others

12. Aturan praktis membedakan Spread dan Rest

Lecture memberikan aturan sederhana:

Spread biasanya menyebarkan data ke tempat lain. Rest mengumpulkan sisa data.

Contoh Spread:

const copy = [...numbers];

Contoh Rest:

const [first, ...others] = numbers;

Tapi ada sedikit koreksi teknis terhadap aturan lecture tentang “kanan/kiri assignment”.

Jangan terlalu menghafalkan:

kiri = = Rest, kanan = = Spread.

Karena ada konteks lain yang lebih tepat untuk dipahami.

Lebih aman gunakan:

... digunakan untuk MENYEBARKAN
→ Spread


... digunakan untuk MENGUMPULKAN SISA
→ Rest

Dan untuk materi yang sedang kita bahas:

const [a, ...rest] = array;

→ Rest Pattern.

const newArray = [...array];

→ Spread.

13. Sekarang masuk ke Rest Parameter

Ini bagian kedua lecture.

Rest Pattern digunakan ketika destructuring:

const [a, b, ...rest] = array;

Sedangkan Rest Parameter digunakan di parameter function:

function addNumbers(a, b, ...others) {
    ...
}

Jadi nama rest parameter berasal dari fakta bahwa ...others berada di parameter function.

14. Masalah yang ingin diselesaikan Rest Parameter

Misalnya kita punya function:

function addNumbers(a, b) {
    return a + b;
}

Kita bisa:

addNumbers(10, 20);

hasil:

30

Tetapi bagaimana kalau kita ingin:

addNumbers(10, 20, 30);

atau:

addNumbers(10, 20, 30, 40, 50);

Jumlah angka tidak selalu sama.

Kita membutuhkan cara untuk menerima berapa pun jumlah argument.

Di sinilah Rest Parameter sangat berguna.

15. Rest Parameter

Kita bisa:

function addNumbers(a, b, ...others) {
    ...
}

Misalnya dipanggil:

addNumbers(10, 20, 30, 40, 50);

Pembagiannya:

10 → a
20 → b
30 ─┐
40  ├→ others
50 ─┘

Sehingga:

a
// 10

b
// 20

others
// [30, 40, 50]

Perhatikan bahwa others adalah Array.

16. Kenapa disebut Rest Parameter?

Karena:

function addNumbers(a, b, ...others)

berarti:

a
↓
argument pertama

b
↓
argument kedua

...others
↓
semua argument yang tersisa

Jadi:

Rest Parameter = parameter yang mengumpulkan semua argument yang tersisa ke dalam Array.

17. Kalau hanya mengirim 2 argument?

Misalnya:

function addNumbers(a, b, ...others) {
    console.log(a);
    console.log(b);
    console.log(others);
}

addNumbers(10, 20);

Hasil:

10
20
[]

Karena tidak ada argument yang tersisa.

18. Kalau mengirim 3 argument?

addNumbers(10, 20, 30);

Hasil:

a       → 10
b       → 20
others  → [30]

19. Kalau mengirim 5 argument?

addNumbers(10, 20, 30, 40, 50);

Hasil:

a       → 10
b       → 20
others  → [30, 40, 50]

Jadi Rest Parameter sangat cocok ketika jumlah argument tidak diketahui sebelumnya.

20. Membuat addNumbers() benar-benar bisa menjumlahkan semuanya

Misalnya:

function addNumbers(a, b, ...others) {
    let sum = a + b;

    for (let i = 0; i < others.length; i++) {
        sum += others[i];
    }

    return sum;
}

Sekarang:

console.log(addNumbers(10, 20));

hasil:

30

console.log(addNumbers(10, 20, 30));

hasil:

60

console.log(addNumbers(10, 20, 30, 40, 50));

hasil:

150

21. Mari bedah function tersebut

function addNumbers(a, b, ...others) {

Artinya:

a       → argument pertama
b       → argument kedua
others  → semua argument sisanya

Kemudian:

let sum = a + b;

Misalnya:

a = 10
b = 20

sum = 30

Kemudian:

for (let i = 0; i < others.length; i++) {
    sum += others[i];
}

Kalau:

others = [30, 40, 50]

maka loop melakukan:

sum = 30

+ 30 → 60
+ 40 → 100
+ 50 → 150

Akhirnya:

return sum;

menghasilkan:

150

22. Kenapa Rest Parameter harus berada paling belakang?

Ini aturan penting.

Yang benar:

function addNumbers(a, b, ...others) {
}

Yang salah:

function addNumbers(...others, a, b) {
}

Kenapa?

Karena Rest berarti:

“Ambil semua argument yang tersisa.”

Kalau dia berada di tengah:

function test(a, ...others, b) {
}

JavaScript akan bingung:

a → argument pertama

others → semua sisa argument?

lalu b → harus mengambil yang mana?

Kalau others sudah mengambil semua sisanya, tidak ada yang tersisa untuk b.

Karena itu JavaScript melarangnya.

23. Analogi Rest Parameter

Bayangkan function sebagai petugas penerima barang.

function(a, b, ...others)

Petugas berkata:

Barang pertama → A
Barang kedua   → B
Barang lainnya → masukkan ke kotak OTHERS

Misalnya ada 5 barang:

📦1 → A
📦2 → B
📦3 ─┐
📦4  ├→ OTHERS
📦5 ─┘

Kalau kamu mengatakan:

Barang lainnya masuk OTHERS,
tetapi setelah itu barang ke-3 harus masuk B.

Tidak masuk akal.

Makanya Rest Parameter harus terakhir.

24. Rest Parameter vs arguments

Ini bagian yang bagus untuk menghubungkan dengan materi sebelumnya.

Sebelumnya kamu sudah belajar arguments.

Misalnya:

function addNumbers() {
    console.log(arguments);
}

Kalau:

addNumbers(10, 20, 30);

arguments berisi:

{
    0: 10,
    1: 20,
    2: 30,
    length: 3
}

Tetapi arguments bukan Array sungguhan.

Rest Parameter:

function addNumbers(...numbers) {
    console.log(numbers);
}

hasil:

[10, 20, 30]

Ini adalah Array sungguhan.

25. Rest Parameter lebih modern

Karena arguments adalah fitur lama, dalam JavaScript modern kita sering menggunakan:

function addNumbers(...numbers) {
}

Keuntungannya:

arguments
→ array-like object

rest parameter
→ real Array

Karena numbers adalah Array, kita bisa langsung menggunakan method Array:

numbers.map(...)
numbers.filter(...)
numbers.reduce(...)
numbers.forEach(...)

Ini salah satu alasan Rest Parameter sangat berguna.

26. Contoh Rest Parameter yang lebih sederhana

Misalnya kita ingin function yang menerima banyak nama:

function printNames(...names) {
    names.forEach((name) => {
        console.log(name);
    });
}

Kemudian:

printNames("John", "Mark", "Steve");

Rest Parameter menghasilkan:

names
// ["John", "Mark", "Steve"]

Kemudian forEach() memproses semuanya.

27. Rest Parameter + reduce()

Karena Rest Parameter menghasilkan Array, kita bisa melakukan:

function addNumbers(...numbers) {
    return numbers.reduce((sum, number) => {
        return sum + number;
    }, 0);
}

Kemudian:

addNumbers(10, 20, 30, 40);

hasil:

100

Ini versi modern yang lebih ringkas dari loop manual tadi.

Kalau reduce() belum kamu pelajari, tidak perlu dipaksakan sekarang. Yang penting pahami:

...numbers
      ↓
Array
      ↓
bisa diproses dengan Array methods

28. Rest Pattern vs Rest Parameter

Sekarang kita bedakan secara jelas.

Rest Pattern

Digunakan dalam destructuring.

const [a, b, ...rest] = numbers;

atau Object:

const { a, b, ...others } = obj;

Fungsinya:

Mengumpulkan sisa data ketika melakukan destructuring.

Rest Parameter

Digunakan dalam function parameter.

function addNumbers(a, b, ...others) {
}

Fungsinya:

Mengumpulkan sisa argument yang dikirim ke function.

29. Jadi sebenarnya konsepnya sama

Keduanya mempunyai ide dasar:

“Ambil semua yang tersisa dan kumpulkan.”

Bedanya hanya tempat penggunaannya.

REST PATTERN
↓
destructuring


REST PARAMETER
↓
function parameter

30. Spread vs Rest vs Destructuring

Sekarang kita gabungkan semua materi yang baru saja kamu pelajari.

Destructuring

const [a, b] = numbers;

→ mengambil data.

Rest

const [a, b, ...others] = numbers;

→ mengambil data + mengumpulkan sisanya.

Spread

const newNumbers = [...numbers];

→ menyebarkan data.

31. Visualisasi yang sangat penting

Misalnya:

const numbers = [1, 2, 3, 4, 5];

Destructuring

const [a, b] = numbers;

[1, 2, 3, 4, 5]
 ↓  ↓
 a  b

Rest

const [a, b, ...others] = numbers;

[1, 2, 3, 4, 5]
 ↓  ↓  └──────┘
 a  b    others
          ↓
       [3,4,5]

Spread

const newNumbers = [...numbers];

[1,2,3,4,5]
     ↓
  spread
     ↓
[1,2,3,4,5]

Spread menyebarkan.

Rest mengumpulkan sisa.

32. Contoh kombinasi Spread dan Rest

Keduanya bisa muncul dalam kode yang sama.

Misalnya:

const numbers = [1, 2, 3, 4, 5];

const [first, ...others] = numbers;

const copy = [...others];

Proses:

numbers
[1,2,3,4,5]
    ↓
    Rest
    ↓
first = 1
others = [2,3,4,5]
    ↓
   Spread
    ↓
copy = [2,3,4,5]

Di sini:

...others saat destructuring
→ REST

...others saat membuat Array baru
→ SPREAD

Ini contoh bagus untuk melihat bahwa konteks menentukan makna ....

33. Hubungan dengan project CIN/Cinix

Rest Parameter juga bisa berguna ketika membuat function yang menerima banyak data.

Misalnya kita punya:

function printGenres(...genres) {
    console.log(genres);
}

Kita bisa:

printGenres("action", "drama", "comedy");

Maka:

genres
// ["action", "drama", "comedy"]

Kemudian kita bisa menggunakan:

genres.forEach(...)

Karena genres adalah Array.

34. Contoh Object Rest yang berguna di project

Misalnya movie:

const movie = {
    id: 1,
    name: "Interstellar",
    rating: 4.6,
    description: "A science fiction movie",
    releaseYear: 2014
};

Kita ingin mengambil id, tetapi property lainnya dikumpulkan:

const {
    id,
    ...movieDetails
} = movie;

Hasil:

id → 1

movieDetails →
{
    name: "Interstellar",
    rating: 4.6,
    description: "A science fiction movie",
    releaseYear: 2014
}

Ini sangat berguna ketika kita ingin memisahkan satu property dari object dan menyimpan sisanya sebagai object baru.

35. Kesalahan paling umum

❌ Menganggap ... selalu Spread

Salah.

const [a, ...rest] = numbers;

Ini Rest.

Sedangkan:

const copy = [...numbers];

Ini Spread.

❌ Mengira Rest menghasilkan satu nilai

Tidak.

const [a, ...rest] = [1, 2, 3, 4];

rest adalah:

[2, 3, 4]

Array.

❌ Menaruh Rest Parameter di tengah

Tidak boleh:

function test(a, ...rest, b) {
}

Harus:

function test(a, b, ...rest) {
}

36. Cheat Sheet

SPREAD
...array
...object

→ MENYEBARKAN

Contoh:

const copy = [...array];

const copy = {...object};

REST PATTERN
const [a, ...rest] = array;

const {a, ...others} = object;

→ MENGUMPULKAN SISA

REST PARAMETER
function test(a, b, ...others) {}

→ MENGUMPULKAN SISA ARGUMENT

37. Tabel perbandingan

🧠 38. Cara tercepat mengingatnya

Bayangkan kotak.

Spread = buka kotak

[1,2,3]
   ↓
  ...
   ↓
1 2 3

SPREAD = menyebarkan isi.

Rest = kumpulkan sisa ke kotak

1 2 3 4 5
    ↓
  ...rest
    ↓
 [3,4,5]

REST = mengumpulkan sisanya.

39. Satu aturan emas

Kalau melihat ..., jangan langsung berpikir “ini spread”.

Tanyakan:

Pertanyaan 1

Apakah ... sedang menyebarkan isi?

const copy = [...numbers];

✅ Spread

Pertanyaan 2

Apakah ... sedang mengumpulkan sisa?

const [a, ...rest] = numbers;

✅ Rest Pattern

Pertanyaan 3

Apakah ... mengumpulkan argument function?

function add(...numbers) {
}

✅ Rest Parameter

🎯 Kesimpulan akhir

Materi ini sebenarnya hanya memiliki satu konsep inti:

Spread menyebarkan, Rest mengumpulkan.

              ...
              │
       ┌──────┴──────┐
       │             │
       ▼             ▼
    SPREAD          REST
       │             │
       ▼             ▼
  menyebarkan    mengumpulkan
       │           yang tersisa
       │             │
       ▼             ▼
  [...array]    [...rest] saat
                 destructuring

Dan Rest punya dua bentuk utama:

// Rest Pattern
const [first, ...others] = numbers;

// Rest Parameter
function addNumbers(first, ...others) {
}

Rest Pattern → digunakan saat destructuring untuk mengumpulkan sisa data.

Rest Parameter → digunakan pada parameter function untuk mengumpulkan sisa argument.

Sedangkan:

const copy = [...numbers];

adalah Spread, karena kita sedang menyebarkan isi numbers ke Array baru.

Kalau kamu sudah menguasai tiga konsep ini:

Destructuring → AMBIL
Rest          → KUMPULKAN SISA
Spread        → SEBARKAN

maka materi ... di JavaScript akan jauh lebih mudah dipahami.