0Pricing
JavaScript Academy · Pelajaran

Penggabungan Objek yang Aman; Pembekuan dan Penyegelan

Gabungkan objek tanpa kejutan, hindari pencemaran prototipe, dan lindungi data dengan Object.freeze serta Object.seal

Penggabungan Objek yang Aman; Pembekuan dan Penyegelan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Mengapa penggabungan aman?

Tujuan: Lakukan penggabungan dengan aman dan lindungi keadaan.

  • Lakukan penggabungan dangkal dengan operator penyebaran atau Object.assign
  • Hindari pencemaran prototipe dengan menyaring kunci
  • Gunakan Object.create(null) sebagai target yang aman
  • Gunakan freeze dan seal untuk mengunci objek
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 1

Penggabungan dangkal (penyebaran)

Gunakan operator penyebaran (atau Object.assign({}, a, b)) untuk membuat objek baru; jangan ubah input.

// Shallow merge with spread keeps sources unchanged
const a = { x: 1, y: 2 };
const b = { y: 9, z: 3 };

// Later keys win on conflicts
const merged1 = { ...a, ...b };

console.log("a:", a);
console.log("b:", b);
console.log("merged1:", merged1);
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 2

Hindari pencemaran prototipe

Saat kunci berasal dari luar, buat daftar izin/daftar penolakan kecil dan gunakan Object.create(null) sebagai target.

// Avoid prototype pollution: use a null-prototype target and skip special keys
function safeMergeUntrusted(pairs) {
  // target has no prototype
  const out = Object.create(null);

  // keys to skip
  const BLOCK = new Set(["__proto__", "prototype", "constructor"]);

  for (const [k, v] of pairs) {
    if (typeof k !== "string") continue;
    if (BLOCK.has(k)) continue;
    out[k] = v;
  }
  return out;
}

const inputPairs = [
  ["name", "Ayla"],
  ["__proto__", { hacked: true }],
  ["role", "user"]
];

const safe = safeMergeUntrusted(inputPairs);

console.log("safe.name:", safe.name);
console.log("safe.role:", safe.role);
console.log("safe.__proto__ is undefined?", safe.__proto__ === undefined);
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 3

Kloning + assign

Object.assign({}, ...) adalah pola aman yang mudah dibaca oleh pemula.

// Object.assign can also create a new object
const base = { a: 1, b: 2 };
const patch = { b: 5 };

// New object as first arg → sources untouched
const merged2 = Object.assign({}, base, patch);

console.log("base:", base);
console.log("patch:", patch);
console.log("merged2:", merged2);
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 4

Freeze vs seal

freeze memblokir semua perubahan; seal memblokir penambahan dan penghapusan, tetapi mengizinkan pembaruan properti yang sudah ada.

// Freeze: no add/remove/change
const frozen = Object.freeze({ id: 1, tag: "locked" });
// Seal: no add/remove, but you may change existing values
const sealed = Object.seal({ id: 2, tag: "open" });

// Attempts (silently fail in non-strict mode)
frozen.tag = "new";
sealed.tag = "updated";
sealed.newKey = 123;

console.log("frozen:", frozen);
console.log("sealed:", sealed);
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 5

Kebiasaan penggabungan yang aman

Kiat:

  • Utamakan objek baru: {...a, ...b} atau Object.assign({}, a, b).
  • Untuk kunci yang tidak tepercaya, gunakan Object.create(null) dan lewati __proto__, prototype, serta constructor.
  • Lindungi konfigurasi dengan Object.freeze; lindungi model dengan Object.seal.
Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 6

Kuis dasar pencemaran prototipe

Pemeriksaan singkat: Target paling aman untuk penggabungan yang tidak tepercaya.

Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 7

Ringkasan

Ringkasan: Lakukan penggabungan dengan membuat objek baru, saring kunci yang tidak tepercaya, dan gunakan freeze/seal untuk melindungi struktur data penting.

Penggabungan Objek yang Aman; Pembekuan dan Penyegelan — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penggabungan Objek yang Aman; Pembekuan dan Penyegelan” gratis?

Ya — teks lengkap “Penggabungan Objek yang Aman; Pembekuan dan Penyegelan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Penggabungan Objek yang Aman; Pembekuan dan Penyegelan”?

Gabungkan objek tanpa kejutan, hindari pencemaran prototipe, dan lindungi data dengan Object.freeze serta Object.seal Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 3.

Berapa lama pelajaran “Penggabungan Objek yang Aman; Pembekuan dan Penyegelan” 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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

  1. Validasi Masukan, Dasar-Dasar Escape
  2. Penggabungan Objek yang Aman; Pembekuan dan Penyegelan
  3. Batas Galat (Konseptual) tanpa Kerangka Kerja
← Kembali ke JavaScript Academy