JSON (singkatan dari JavaScript Object Notation) adalah format teks buat menyimpan dan mengirim data. Bentuknya mirip object JavaScript, tapi wujudnya cuma teks, jadi bisa dikirim ke server, disimpan di browser, dan dibaca bahasa pemrograman lain. JavaScript punya dua alat buat itu: JSON.stringify mengubah object jadi teks JSON, dan JSON.parse mengubah teks JSON jadi object lagi.
🧪 Tebakan cepat: sesudah object diubah pakai
JSON.stringify, apa kamu masih bisa membaca.namedari hasilnya? Tebak dulu, jawabannya ada di bagian "Object jadi teks, teks jadi object".
Object jadi teks, teks jadi object
const student = {
name: 'Budi',
age: 17,
hobbies: ['coding', 'baca'],
}
const json = JSON.stringify(student)
console.log(json)
console.log('typeof json:', typeof json)
console.log('json.name:', json.name)
const back = JSON.parse(json)
console.log('back.name:', back.name)
JSON.stringify(student)mengubah object jadi teks JSON. Baris pertama mencetak{"name":"Budi","age":17,"hobbies":["coding","baca"]}.typeof jsonadalahstring. Isinya kelihatan kayak object, tapi cuma teks.- Karena itu
json.namehasilnyaundefined: teks gak punya propertiname. Jadi jawaban tebakan: gak bisa. JSON.parse(json)membaca teks itu dan bikin object baru, jadiback.namekembali jadiBudi.
Dua method ini gak mengubah nilai aslinya, tapi memberi nilai baru. Simpan hasilnya ke variabel, atau langsung return JSON.stringify(obj) dari fungsi. Jangan ketik teks JSON-nya sendiri: JSON.stringify bisa mengubah object apa pun, bukan cuma satu contoh.
Aturan menulis JSON
JSON lebih ketat dari object JavaScript:
{
"nama": "Budi",
"umur": 17,
"aktif": true,
"hobi": ["membaca", "coding"],
"alamat": null
}
- Nama properti selalu pakai tanda kutip dua:
"nama", bukannamaatau'nama'. Teks juga pakai kutip dua:"Budi". - Nilai yang boleh cuma string, number, boolean (
true/false),null, array, dan object. - Gak boleh ada koma sesudah item terakhir, dan gak boleh ada komentar.
Teks yang melanggar aturan ini bikin JSON.parse melempar SyntaxError.
Yang hilang dan berubah waktu stringify
const data = {
nama: 'Budi',
sapa() { return 'Halo' },
panggilan: undefined,
lahir: new Date('2008-05-17'),
}
JSON.stringify(data)
// '{"nama":"Budi","lahir":"2008-05-17T00:00:00.000Z"}'
- Fungsi (
sapa) danundefined(panggilan) dibuang diam-diam, tanpa error, karena JSON gak punya dua jenis nilai itu. Di dalam array, mereka jadinull. Dateberubah jadi teks tanggal. SesudahJSON.parse, dia tetap teks. Butuh tanggal lagi? Bikin ulang:new Date(back.lahir).
⚠️ Jebakan yang sering ketemu
- Lupa
JSON.parsesesudah mengambil data. Data dari server atau localStorage datang sebagai teks.data.namahasilnyaundefinedsampai teksnya kamuJSON.parsedulu. - Teks dari luar yang rusak. Satu kutip yang salah bikin
JSON.parsemelempar error dan menghentikan program. Bungkus dengantry...catchkalau datanya bukan buatan kamu sendiri. - Menyusun JSON pakai
+.'{"nama":"' + nama + '"}'gampang salah kutip. Bikin object-nya, lalu biarkanJSON.stringifyyang menyusun teksnya.
TL;DR: JSON (JavaScript Object Notation) adalah format teks buat data. JSON.stringify(obj) mengubah object jadi teks, JSON.parse(teks) mengubah teks jadi object lagi. Hasil stringify cuma string, jadi properti-nya baru bisa dibaca sesudah di-parse. Di JSON, nama properti dan teks pakai kutip dua, tanpa koma di akhir. Fungsi dan undefined dibuang diam-diam, dan Date jadi teks.
