TypeScript Academy · Pelajaran

Spread dalam Array dan Objek

Sebarkan nilai sambil mempertahankan jenis yang akurat.

Spread dalam Array dan Objek adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Menyebarkan Nilai

Operator penyebaran ... menyalin elemen larik atau properti objek ke dalam objek baru. TypeScript melacak tipe hasilnya secara tepat, yang sangat penting untuk pembaruan yang tidak dapat diubah.

Penyebaran Larik

Sebarkan dua larik ke dalam larik baru untuk menggabungkannya. Tipe elemen hasilnya merupakan gabungan dari tipe elemen kedua sumber.

const a = [1, 2]
const b = [3, 4]
const all = [...a, ...b]
console.log(all) // [1, 2, 3, 4]

Mencampur Penyebaran dan Literal

Anda dapat menyisipkan elemen penyebaran di antara nilai-nilai individual. Urutannya dipertahankan persis seperti yang ditulis.

const middle = [2, 3]
const nums = [1, ...middle, 4]
console.log(nums) // [1, 2, 3, 4]

Tipe Elemen Hasil Penyebaran

Ketika sumber penyebaran memiliki tipe elemen yang berbeda, hasilnya adalah larik dengan tipe gabungan keduanya. Berikan anotasi atau biarkan inferensi menyelesaikannya.

const ns: number[] = [1, 2]
const ss: string[] = ["a"]
const mixed = [...ns, ...ss] // (number | string)[]
console.log(mixed)

Penyebaran Objek

Penyebaran objek menyalin properti milik sendiri yang dapat dihitung ke dalam objek baru. Tipe hasilnya menggabungkan bentuk sumber.

const base = { id: 1, name: "Ada" }
const extended = { ...base, active: true }
console.log(extended) // { id: 1, name: 'Ada', active: true }

Penyebaran yang Menimpa Properti

Ketika kunci bertabrakan, kunci yang terakhir akan menang. Sebarkan objek, lalu timpa bidang tertentu — inilah dasar pembaruan yang tidak dapat diubah.

const user = { name: "Ada", age: 36 }
const older = { ...user, age: 37 }
console.log(older.age) // 37

Urutan Menentukan Pemenang

Prioritas properti mengikuti urutan sumber. Letakkan penimpaan setelah penyebaran agar menang; jika diletakkan sebelumnya, penyebaran akan menimpanya.

const defaults = { theme: "light", size: "m" }
const result = { theme: "dark", ...defaults }
console.log(result.theme) // light — spread came last

Tipe Properti yang Ditimpa

Jika penimpaan mengubah tipe suatu properti, tipe hasilnya mencerminkan tipe baru tersebut. TypeScript mempersempit tipe ke kemunculan yang paling akhir.

const obj = { value: 1 as number }
const updated = { ...obj, value: "now a string" }
// updated.value is string
console.log(updated.value.toUpperCase())

Penyebaran Merupakan Salinan Dangkal

Penyebaran menyalin hingga satu tingkat. Objek bertingkat dibagikan melalui referensi, sehingga perubahan pada bidang bertingkat memengaruhi kedua salinan. Sebarkan juga objek bertingkat tersebut untuk mendapatkan salinan yang lebih dalam.

const a = { nested: { x: 1 } }
const b = { ...a }
b.nested.x = 99
console.log(a.nested.x) // 99 — shared reference

Penyebaran dan Sifat Hanya-Baca

Menyebarkan larik atau objek readonly menghasilkan salinan baru yang dapat diubah. Pengubah readonly tidak ikut terbawa saat penyebaran karena Anda sedang membuat nilai baru.

const frozen: readonly number[] = [1, 2, 3]
const copy = [...frozen] // number[], mutable
copy.push(4)
console.log(copy.length) // 4

Pola Pembaruan Tanpa Mutasi

Penyebaran adalah cara idiomatis untuk memperbarui keadaan tanpa mutasi: salin objek lama, timpa bidang yang berubah, lalu kembalikan objek baru.

interface State { count: number; name: string }
function increment(s: State): State {
  return { ...s, count: s.count + 1 }
}
console.log(increment({ count: 1, name: "x" }))

Pemeriksaan Singkat

Uji pemahaman Anda tentang tipe dan prioritas penyebaran.

Rangkuman

Penyebaran menyalin elemen larik atau properti objek ke dalam nilai baru. Penyebaran larik menggabungkan elemen dengan tipe elemen gabungan; penyebaran objek menggabungkan struktur, dan jika terjadi tabrakan kunci, kemunculan terakhir diutamakan. Penyebaran adalah salinan dangkal — objek bertingkat tetap dibagikan — dan menghasilkan nilai baru yang dapat diubah, bahkan dari sumber readonly. Ini merupakan pola pembaruan tanpa mutasi yang idiomatis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Spread dalam Array dan Objek” gratis?

Ya — teks lengkap “Spread dalam Array dan Objek” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Spread dalam Array dan Objek”?

Sebarkan nilai sambil mempertahankan jenis yang akurat. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Spread dalam Array dan Objek” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy