Rest dan Spread JavaScript: Penjelasan Operator ...

Sintaks sama, dua tugas

Tiga titik ... muncul di banyak kode JavaScript modern, dan melakukan dua hal yang berlawanan tergantung tempatnya muncul. Begitu kamu melihat polanya, setiap pemakaian ... masuk ke salah satu dari dua kelompok:

• Rest: ...name di sisi penerima mengumpulkan beberapa nilai ke dalam satu array atau object.
• Spread: ...value di sisi pemberi membentangkan array atau object menjadi bagian-bagiannya.

Itulah seluruh cara memikirkannya. Sisa halaman ini hanyalah contoh masing-masing, dan pola yang akan terus kamu pakai.

Rest parameter: mengumpulkan argumen

Rest parameter di definisi fungsi mengumpulkan argumen berapa pun banyaknya ke dalam array sungguhan:

function sum(...nums) {
  let total = 0;
  for (const n of nums) total += n;
  return total;
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40, 50));
console.log(sum());

nums adalah array biasa. Kamu bisa memakai .map padanya, .filter, mengecek .length-nya, mengirimnya ke fungsi lain, semua yang bisa dilakukan array.

Rest parameter bisa dicampur dengan parameter biasa, tapi rest parameter harus ditulis paling akhir:

function tag(label, ...items) {
  return items.map(item => `[${label}] ${item}`);
}

console.log(tag("todo", "buy milk", "call mom", "write docs"));

label mengambil argumen pertama; semua sesudahnya masuk ke items. Menulis rest parameter di mana pun selain paling akhir adalah syntax error.

Rest vs. object arguments versi lama

Kode JavaScript lama memakai variabel ajaib bernama arguments di dalam fungsi biasa. Bentuknya mirip array tapi bukan array, artinya method array tidak bisa langsung dipakai padanya. Rest parameter menggantikannya dengan rapi:

function oldStyle() {
  // arguments is array-like, not a real array
  return Array.prototype.slice.call(arguments).map(x => x * 2);
}

function newStyle(...args) {
  return args.map(x => x * 2);
}

console.log(oldStyle(1, 2, 3));
console.log(newStyle(1, 2, 3));

Arrow function bahkan tidak punya object arguments, jadi rest parameter adalah satu-satunya cara menerima argumen dengan jumlah bervariasi di arrow function. Utamakan ...args di kode baru mana pun.

Spread pada pemanggilan fungsi

Spread melakukan kebalikannya: ia mengambil array lalu membongkarnya menjadi argumen-argumen terpisah di tempat pemanggilan.

function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

const parts = ["Hello", "Ada", "!"];
console.log(greet(...parts));

const nums = [5, 2, 9, 1, 7];
console.log(Math.max(...nums));

Math.max menerima angka satu per satu, bukan array. Sebelum ada spread, kamu harus menulis Math.max.apply(null, nums). Sekarang cukup ... dan selesai.

Perhatikan bahwa ... yang persis sama adalah rest di definisi fungsi dan spread di pemanggilan fungsi: posisinya yang memberi tahu mana yang mana.

Spread pada array literal

Spread ke dalam array literal menyalin atau menggabungkan array:

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

const copy = [...a];
const joined = [...a, ...b];
const withExtra = [0, ...a, 99];

console.log(copy);
console.log(joined);
console.log(withExtra);

[...a] memberimu array baru dengan elemen yang sama, berguna saat kamu ingin mengurutkan atau mengubah tanpa menyentuh aslinya:

const scores = [42, 17, 88, 3];
const sorted = [...scores].sort((x, y) => x - y);

console.log(sorted);
console.log(scores);

scores tidak tersentuh karena .sort berjalan pada salinannya. Kebiasaan kecil, manfaat besar saat kamu menulis kode yang tidak boleh punya efek samping mengejutkan.

Spread pada object literal

Spread juga berfungsi pada object biasa, menggabungkan property-nya ke object baru:

const user = { name: "Rosa", age: 30 };
const updates = { age: 31, city: "Lisbon" };

const merged = { ...user, ...updates };
console.log(merged);

Key yang belakangan yang menang. updates.age menimpa user.age, dan city ikut terbawa. Urutan spread menentukan hasilnya, jadi ingat ini saat kamu menumpuk default dan override:

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };

const settings = { ...defaults, ...userPrefs };
console.log(settings);

Default lebih dulu, pilihan pengguna kemudian. Pengguna menang di fontSize, dan mewarisi theme.

Jebakan shallow copy

Spread menyalin sedalam satu tingkat. Object dan array bersarang tetap dipakai bersama oleh object asli dan salinannya:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const copy = { ...original };

copy.tags.push("owner");

console.log(original.tags);
console.log(copy.tags);

Kedua array menampilkan tag baru karena copy.tags dan original.tags adalah array yang sama. Spread tidak meng-clone list bersarang itu; ia hanya menyalin referensinya.

Untuk deep copy sungguhan dari data biasa, pakai structuredClone:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const deep = structuredClone(original);

deep.tags.push("owner");

console.log(original.tags);
console.log(deep.tags);

Sekarang kedua array tidak saling bergantung. structuredClone sudah tersedia di browser modern dan Node, menangani struktur bersarang, dan menjadi pilihan yang tepat setiap kali "dangkal" tidak cukup.

Rest pada destructuring

Rest juga berfungsi pada destructuring, tempat ia mengumpulkan elemen atau property yang tersisa:

const [first, second, ...others] = [10, 20, 30, 40, 50];
console.log(first);
console.log(second);
console.log(others);

const { name, ...rest } = { name: "Rosa", age: 30, city: "Lisbon" };
console.log(name);
console.log(rest);

Mengambil beberapa field lalu menyimpan sisanya dalam satu object adalah pola umum saat meneruskan props, membuang field sensitif, atau membuat versi data yang sudah diperbarui:

const user = { id: 1, name: "Rosa", password: "secret", email: "r@example.com" };
const { password, ...safe } = user;

console.log(safe);

password diambil keluar (dan diabaikan); safe menyimpan semua sisanya. Tanpa mutasi, tanpa menyalin manual.

Ringkasan singkat

• ...name di daftar parameter atau pola destructuring adalah rest: ia mengumpulkan.
• ...value di pemanggilan fungsi, array literal, atau object literal adalah spread: ia membentangkan.
• Salinan hasil spread bersifat shallow. Struktur bersarang tetap dipakai bersama. Pakai structuredClone untuk deep copy.
• Rest parameter adalah array sungguhan; pakai ini sebagai pengganti arguments.
• Pada object literal, spread yang belakangan menimpa yang sebelumnya, dan begitulah cara membuat default ditambah override.

Berikutnya: closure

Fungsi di JavaScript tidak hanya menerima input dan mengembalikan output; ia juga mengingat scope tempat ia didefinisikan. Ingatan itu disebut closure, dan itulah mekanisme di balik callback, factory, dan sebagian besar pola yang akan kamu temui di halaman berikutnya.