JSON — stringify dan parse

Saat kamu menyimpan settings atau isi cart di browser, atau mengirimnya ke server, object mentahnya tidak bisa dioper begitu saja — yang bisa disimpan maupun dikirim cuma string.

Kalau datanya kamu ubah jadi JSON (format data untuk merepresentasikan pasangan key dan value dalam bentuk string), maka data itu bisa langsung disimpan, dan sisi penerima bisa mengubahnya kembali jadi object aslinya. Artikel ini membahas JSON.stringify, yang mengonversi ke bentuk itu, dan JSON.parse, yang mengonversinya kembali.

Mengubah Object Jadi String — JSON.stringify

Untuk dipakai menyimpan atau mengirim data, object perlu diubah jadi string dulu. Kalau kamu merakitnya sendiri dengan cara seperti "{" + key + ":" + value + "}", hasilnya langsung rusak begitu ada value yang mengandung tanda kutip. Jadi lebih aman memakai function yang mengonversinya ke format baku.

Kalau kamu menulis JSON.stringify(settings), maka object-nya dikonversi jadi string 1 baris yang mengikuti format JSON. Yang kembali berupa string, jadi typeof mengembalikan "string", dan method string seperti length dan includes bisa langsung dipakai.

JSON terlihat mirip cara penulisan JavaScript, tapi keduanya tidak sama. Key wajib dibungkus tanda kutip ganda, dan value bertipe string juga cuma boleh memakai tanda kutip ganda.

Koma trailing tidak boleh ada, dan comment juga tidak bisa ditulis di dalamnya. Perbedaan inilah yang jadi penyebab SyntaxError yang dibahas nanti.

const product = { name: "Drip Coffee", price: 780, inStock: true };

const productJson = JSON.stringify(product);
console.log(productJson);
// {"name":"Drip Coffee","price":780,"inStock":true}

// Yang kembali berupa string, jadi method string bisa langsung dipakai
console.log(typeof productJson);            // string
console.log(productJson.includes("price")); // true

// Array dikonversi dengan cara yang sama
console.log(JSON.stringify(["Dapur", "Alat Tulis"]));  // ["Dapur","Alat Tulis"]

Konversikan settings sebuah app jadi string yang bisa disimpan. settings sudah dideklarasikan.

① Konversikan settings jadi JSON string, lalu tampilkan.

② Tampilkan type dari hasil ①.

③ Tampilkan jumlah karakter dari hasil ①.

④ Tampilkan apakah hasil ① mengandung kata theme.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Membuatnya Terbaca — Indentasi lewat Argument ke-3

JSON string yang dipadatkan jadi 1 baris cocok untuk pengiriman data, tapi susah dibaca kalau isinya mau kamu periksa langsung. Saat menulis config file, atau saat mengembangkan sambil mengecek hasilnya, bentuk yang punya line break dan indentasi jauh lebih enak dipakai.

Kalau kamu memberikan sebuah number sebagai argument ke-3, misalnya JSON.stringify(order, null, 2), maka yang kembali adalah string multi-baris dengan indentasi sebanyak angka itu. Argument ke-2 dipakai untuk memilih key mana yang diambil; berikan null kalau semuanya mau dikeluarkan apa adanya.

Meski sudah diformat, yang kembali tetap berupa string, jadi isinya bisa dipecah jadi baris dengan split("\n"). "\n" adalah cara menulis 1 line break.

const product = { name: "Drip Coffee", price: 780 };

// Berikan 2 sebagai argument ke-3 untuk indentasi 2 spasi
const pretty = JSON.stringify(product, null, 2);
console.log(pretty);
// {
//   "name": "Drip Coffee",
//   "price": 780
// }

// Meski sudah diformat, yang kembali tetap string
console.log(typeof pretty);              // string
console.log(pretty.split("\n").length);  // 4

Tulis data order dalam bentuk yang cukup rapi untuk langsung ditempel ke config file. order sudah dideklarasikan.

① Tampilkan jumlah karakternya saat dikonversi tanpa indentasi.

② Konversikan ke bentuk dengan indentasi 2 spasi, lalu tampilkan apa adanya.

③ Tampilkan jumlah baris hasil ②.

④ Tampilkan hanya baris ke-2 dari hasil ②.

Mengubah String Kembali Jadi Object — JSON.parse

String yang sudah tersimpan, atau yang baru diterima dari server, tidak bisa langsung dibaca dengan cara seperti order.total. Untuk mengambil value-nya atau menghitungnya, string itu perlu dikembalikan dulu jadi object.

Kalau kamu menulis JSON.parse(savedJson), maka JSON string-nya dibaca, lalu sebuah object dibuat dan dikembalikan. Number kembali sebagai number dan boolean kembali sebagai boolean, jadi perhitungan seperti order.total + 1000 bisa langsung dilakukan.

Array juga kembali sebagai array, jadi jumlah entrinya bisa dihitung dengan length.

Kalau string yang kamu berikan tidak mengikuti format JSON, maka SyntaxError muncul dan eksekusi berhenti di baris itu. Penyebabnya bisa koma trailing yang tertinggal, key yang tidak dibungkus tanda kutip, atau string yang terpotong di tengah.

const savedJson = '{"name":"Drip Coffee","price":780,"tags":["Dapur"]}';

const product = JSON.parse(savedJson);
console.log(product.name);           // Drip Coffee

// Number kembali sebagai number, jadi bisa langsung dihitung
console.log(product.price * 2);      // 1560

// Array kembali sebagai array
console.log(product.tags.length);    // 1
console.log(typeof product);         // object

// Kalau dibolak-balik, isinya kembali sama seperti semula
console.log(JSON.stringify(product) === savedJson);  // true

Ubah string order yang tersimpan kembali jadi object yang bisa kamu olah. savedJson sudah dideklarasikan.

① Ubah string-nya kembali jadi object, lalu tampilkan order number-nya.

② Tampilkan total-nya setelah ditambah 1000.

③ Tampilkan jumlah item-nya.

④ Tampilkan type dari object hasil pengubahan tadi.

String yang Diterima Bisa Rusak

Koneksi yang putus di tengah jalan, atau config file yang diedit manual dan menyisakan koma berlebih, membuat JSON.parse melempar SyntaxError dan berhenti di baris itu. Begitu berhenti, semua proses setelahnya sama sekali tidak berjalan, jadi anggap proses mengubah string dari luar menjadi object sebagai proses yang bisa saja gagal.

Cara menulis kode yang tetap berjalan meski prosesnya gagal dibahas di artikel exception handling.

Kode yang disediakan mencoba mengubah string dengan koma trailing berlebih kembali jadi object. Jalankan apa adanya, lalu cek sampai mana kodenya berjalan dan message apa yang menghentikannya.

Apa yang Hilang dalam Round Trip — undefined dan Date

JSON cuma bisa merepresentasikan string, number, boolean, null, array, dan object. Kalau object yang kamu konversi menyimpan jenis value lain, maka value itu diam-diam hilang atau berubah jadi bentuk lain.

Dari sinilah muncul ketidakcocokan: data yang kamu simpan ternyata kembali dengan field yang lebih sedikit daripada sebelumnya.

Saat konversi, property yang value-nya undefined dibuang bersama key-nya. Property yang value-nya berupa function juga dibuang dengan cara yang sama. Sementara itu, undefined yang ada di dalam array diganti jadi null, supaya posisinya tetap terjaga.

Date (value bawaan yang merepresentasikan tanggal dan waktu; tidak dibahas di kursus ini) dikonversi jadi string. Setelah JSON.parse pun nilainya tetap berupa string, jadi tidak kembali dalam bentuk yang bisa dipakai sebagai tanggal.

Kalau setelah itu kamu tetap perlu memakainya sebagai tanggal, buat ulang sendiri dengan new Date(string).

const record = {
  orderId: "ORD-1477",
  couponCode: undefined,
  orderedAt: new Date("2026-09-02T09:00:00Z"),
  tags: ["Dapur", undefined],
};

const json = JSON.stringify(record);
console.log(json);
// {"orderId":"ORD-1477","orderedAt":"2026-09-02T09:00:00.000Z","tags":["Dapur",null]}

const restored = JSON.parse(json);
console.log("couponCode" in restored);   // false (dibuang bersama key-nya)
console.log(typeof restored.orderedAt);  // string (tidak kembali sebagai Date)
console.log(restored.tags[1]);           // null (di dalam array jadi null)