JSON di JavaScript: JSON.stringify, JSON.parse, dan Jebakan Umum

JSON Adalah Teks, Bukan Objek

JSON (JavaScript Object Notation) adalah format teks untuk bertukar data. Bentuknya mirip literal objek JavaScript, tetapi ia adalah string: deretan karakter yang bisa kamu kirim lewat jaringan, simpan ke file, atau tempel ke sebuah konfigurasi.

// A JavaScript object - a live value in memory.
const user = { name: "Rosa", age: 30 };

// JSON - a string of text that represents the same data.
const json = '{"name":"Rosa","age":30}';

Keduanya mudah tertukar karena terlihat mirip. Model mental yang menjaga kamu tetap lurus: objek hidup di dalam programmu; JSON adalah wujudnya saat keluar dari program. Kamu mengubah satu ke yang lain dengan dua fungsi: JSON.stringify (objek → string) dan JSON.parse (string → objek).

JSON.stringify: Objek ke String

Ubah nilai JavaScript apa pun menjadi representasi JSON-nya:

const user = {
  name: "Rosa",
  age: 30,
  isAdmin: false,
  tags: ["editor", "admin"],
};

const json = JSON.stringify(user);
console.log(json);
console.log(typeof json);

Hasilnya string satu baris tanpa spasi: ringkas, ideal untuk dikirim lewat jaringan. Pengecekan typeof membuktikannya: string, bukan object.

Agar mudah dibaca saat debug, berikan dua argumen tambahan. Yang kedua adalah replacer (kita bahas nanti); memberikan null berarti "sertakan semuanya". Yang ketiga adalah indentasi:

const user = {
  name: "Rosa",
  age: 30,
  tags: ["editor", "admin"],
};

console.log(JSON.stringify(user, null, 2));

Itulah bentuk pretty-print yang standar. Pakai 2 atau 4 spasi, sesuai dengan yang dihasilkan kebanyakan tools.

JSON.parse: String ke Objek

Kebalikannya: ambil string JSON, dapatkan kembali nilai JavaScript.

const json = '{"name":"Rosa","age":30,"tags":["editor","admin"]}';

const user = JSON.parse(json);
console.log(user.name);
console.log(user.tags[0]);
console.log(typeof user);

Setelah di-parse, kamu berurusan dengan objek biasa: akses dengan titik, akses dengan kurung siku, method array, semuanya bisa.

JSON.parse itu rewel. Semua ini memunculkan SyntaxError:

JSON.parse("{name: 'Rosa'}");      // unquoted key, single quotes
JSON.parse('{"name": "Rosa",}');   // trailing comma
JSON.parse("// a comment\n{}");    // comments aren't allowed
JSON.parse("");                    // empty string

Setiap kali input berasal dari luar programmu, seperti response fetch, file, atau input pengguna, bungkus parsing-nya dengan try/catch:

function safeParse(text) {
  try {
    return JSON.parse(text);
  } catch (err) {
    console.log("Invalid JSON:", err.message);
    return null;
  }
}

console.log(safeParse('{"ok":true}'));
console.log(safeParse("{ not valid }"));

Nilai yang Tidak Selamat dalam Perjalanan Bolak-Balik

JSON mendukung enam tipe nilai: string, angka, boolean, null, array, dan objek biasa. Semua yang lain di JavaScript akan dibuang, diubah, atau malah rusak.

const weird = {
  name: "Rosa",
  greet: function () { return "hi"; },   // functions dropped
  missing: undefined,                     // undefined dropped
  when: new Date("2026-01-15"),           // Date → ISO string
  big: 10n,                               // BigInt throws!
};

// Remove `big` to see the rest:
delete weird.big;
console.log(JSON.stringify(weird, null, 2));

Yang terjadi:

• Fungsi dan undefined diam-diam dihapus dari objek. Di dalam array, keduanya menjadi null, karena array di JSON tidak boleh punya celah.
• Objek Date diserialisasi menjadi string ISO lewat method toJSON miliknya. Parsing mengembalikan string-nya, bukan Date.
• BigInt memunculkan TypeError. Angka di JSON tidak punya padanannya.
• Map, Set, dan referensi melingkar juga tidak berfungsi begitu saja.

Solusi untuk Date dalam perjalanan bolak-balik adalah fungsi reviver milik JSON.parse:

const json = '{"name":"Rosa","joined":"2026-01-15T10:30:00.000Z"}';

const isoDate = /^\d{4}-\d{2}-\d{2}T/;
const user = JSON.parse(json, (key, value) => {
  if (typeof value === "string" && isoDate.test(value)) {
    return new Date(value);
  }
  return value;
});

console.log(user.joined instanceof Date);
console.log(user.joined.getFullYear());

Reviver berjalan untuk setiap pasangan key/value dan memungkinkanmu mengubah nilai saat dimasukkan.

Replacer: Menyaring Apa yang Diserialisasi

Argumen kedua JSON.stringify memungkinkanmu mengatur apa yang masuk ke output. Berikan array berisi key untuk mengizinkan hanya key tersebut:

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3...",
  age: 30,
};

// Only include safe fields.
const safe = JSON.stringify(user, ["name", "age"], 2);
console.log(safe);

Atau berikan fungsi untuk logika apa pun: membuang field, menyamarkan nilai, mengubahnya saat itu juga:

const user = {
  name: "Rosa",
  email: "rosa@example.com",
  passwordHash: "a1b2c3d4e5f6",
};

const masked = JSON.stringify(user, (key, value) => {
  if (key === "passwordHash") return undefined;       // drop the field
  if (key === "email") return value.replace(/(?<=.).(?=.*@)/g, "*");
  return value;
}, 2);

console.log(masked);

Mengembalikan undefined menghapus key-nya. Mengembalikan nilai lain akan menggantikannya.

Kustomisasi dengan toJSON

Kalau sebuah objek punya method toJSON, JSON.stringify memanggilnya dan menyerialisasi nilai kembaliannya. Begitulah Date mengatur formatnya sendiri, dan kamu bisa memakai hook yang sama:

class User {
  constructor(name, passwordHash) {
    this.name = name;
    this.passwordHash = passwordHash;
  }
  toJSON() {
    // Never expose the hash.
    return { name: this.name };
  }
}

const rosa = new User("Rosa", "a1b2c3");
console.log(JSON.stringify(rosa));

Sangat cocok untuk class yang ingin bentuk publik yang konsisten, siapa pun yang menyerialisasinya.

Deep Clone (Trik Lama, dan yang Lebih Baik)

Selama bertahun-tahun, JSON.parse(JSON.stringify(obj)) adalah jurus satu baris untuk melakukan deep clone pada objek biasa:

const original = { user: { name: "Rosa", tags: ["admin"] } };
const copy = JSON.parse(JSON.stringify(original));

copy.user.tags.push("editor");
console.log(original.user.tags);   // unchanged
console.log(copy.user.tags);

Cara itu berfungsi, selama objeknya hanya berisi nilai yang aman untuk JSON. Date, Map, dan fungsi semuanya merusaknya (lihat masalah perjalanan bolak-balik di atas).

JavaScript modern punya structuredClone, yang menangani Date, Map, Set, typed array, dan referensi melingkar:

const original = {
  user: { name: "Rosa" },
  joined: new Date(),
  tags: new Set(["admin"]),
};

const copy = structuredClone(original);
console.log(copy.joined instanceof Date);
console.log(copy.tags instanceof Set);

Pakai structuredClone kalau bisa. Simpan trik JSON.parse(JSON.stringify(...)) sebagai cadangan untuk clone cepat dan seadanya pada data biasa.

Contoh Realistis: Mengambil dan Mem-parsing Data

Tempat paling umum kamu bersentuhan dengan JSON adalah HTTP. fetch tidak mem-parsing JSON untukmu: kamu memanggil .json() pada response-nya (yang sebenarnya adalah JSON.parse pada body response):

async function loadUser(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const user = await res.json();
  return user;
}

loadUser(1).then((user) => {
  console.log(user.name, "-", user.email);
});

Mengirim JSON adalah kebalikannya: lakukan JSON.stringify pada body dan atur header Content-Type.

await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Rosa", age: 30 }),
});

Kedua pola ini mencakup sebagian besar pekerjaan JSON di dunia nyata.

Berikutnya: Optional Chaining

JSON yang sudah di-parse sering punya field opsional, seperti user.address.city yang mungkin tidak ada, atau response.data.items yang bisa saja hilang. Mengakses property yang bersarang dalam tanpa crash adalah fungsi optional chaining (?.), dan itulah topik halaman berikutnya.