FlowingDev

JSON Dijelaskan: Format Data yang Diam-diam Menjalankan Web

Pelajari apa itu JSON (JavaScript Object Notation), kenapa format ini jadi format pertukaran data yang dominan, dan bagaimana struktur berbasis teksnya yang simpel bekerja.

Coba tool-nya: Editor JSON

Dalam satu kalimat

JSON adalah format berbasis teks yang ringan untuk menyusun dan bertukar data, yang gampang dibaca manusia dan gampang di-parse oleh mesin.

Masalah yang dipecahkannya

Di zaman baheula-nya web (akhir 90-an dan awal 2000-an), kalau kamu mau website-mu mengambil data baru tanpa me-reload seluruh halaman, kemungkinan besar kamu pakai teknologi bernama AJAX (Asynchronous JavaScript and XML). Dan seperti namanya, format data pilihannya adalah XML.

XML itu sakti, tapi juga... bertele-tele. Gendut. Penuh dengan tag pembuka, tag penutup, atribut, dan namespace. Mem-parsing-nya di JavaScript, bahasanya browser, itu PR banget. Kamu harus menavigasi struktur dokumen yang kaku, dan rasanya nggak native sama sekali.

<!-- Ini baru satu user. Bayangin kalau daftarnya ada ribuan. Ampun. -->
<user id="123">
  <username>coder_dave</username>
  <isActive>true</isActive>
  <roles>
    <role>admin</role>
    <role>editor</role>
  </roles>
</user>

Sekitar tahun 2001, seorang developer bernama Douglas Crockford sedang mengerjakan sebuah proyek dan butuh cara yang lebih simpel untuk mengirim data ke browser. Dia dapat pencerahan brilian: JavaScript kan sudah punya cara yang oke banget untuk merepresentasikan struktur data—sintaks object literal-nya sendiri. Gimana kalau kita kirim data sebagai string yang kelihatan seperti objek JavaScript?

Inilah kelahiran JSON (JavaScript Object Notation). Sebuah server bisa mengirim teks ini:

{
  "id": 123,
  "username": "coder_dave",
  "isActive": true,
  "roles": ["admin", "editor"]
}

...dan browser, dengan usaha minimal, bisa mengubahnya menjadi objek JavaScript native yang bisa langsung diolah. Ramping, bersih, dan pas banget dengan bahasa asli web. Kesederhanaan ini menyebabkan ledakan popularitas API web, mendorong kebangkitan aplikasi single-page yang dinamis, backend untuk mobile, dan pada dasarnya seluruh internet modern yang kita kenal sekarang. JSON tidak hanya memecahkan masalah teknis; ia melancarkan jalan bagi generasi software yang benar-benar baru.

Cara kerjanya di balik layar

Pada intinya, JSON hanyalah seperangkat aturan untuk menuliskan data sebagai teks. Aturannya simpel, dan itulah kunci kesuksesannya.

Blok Pembangun: Key dan Value

Seluruh alam semesta JSON dibangun di atas satu struktur sederhana: pasangan key-value (key-value pair).

"key": value

  • Key selalu berupa string, yang diapit oleh tanda kutip ganda. Ini harga mati.
  • Value bisa berupa salah satu dari beberapa tipe data tertentu.

Pasangan ini mendeskripsikan satu bagian informasi, seperti "name": "Luke Skywalker" atau "age": 19.

Tipe Data

JSON itu ketat soal tipe value-nya. Kamu nggak bisa sembarangan masukin apa saja. Kamu cuma dapat enam tipe dasar plus null.

Tipe Contoh Deskripsi
String "The force is strong with this one." Teks apa pun. Harus di dalam tanda kutip ganda.
Number 1138 atau 3.14 Bilangan bulat atau desimal (floating-point). Tidak ada bedanya.
Boolean true atau false Selalu huruf kecil. Merepresentasikan kondisi biner.
Array ["Tatooine", "Dagobah", "Bespin"] Daftar nilai yang berurutan, diapit oleh [].
Object { "weapon": "lightsaber", "color": "green" } Kumpulan pasangan key-value yang tidak berurutan, diapit oleh {}.
Null null Merepresentasikan ketiadaan nilai yang disengaja.

Itu saja. Perhatikan apa yang tidak ada: fungsi, tanggal (dikirim sebagai string), undefined, dan yang paling terkenal, komentar. Minimalisme ini adalah sebuah fitur, bukan bug; ini menjaga format tetap jelas dan mudah di-parse oleh bahasa pemrograman apa pun.

Menyusun Data: Object dan Array

Kekuatan sebenarnya datang dari menyusun tipe-tipe ini secara bersarang (nesting). value dalam pasangan key-value bisa berupa object lain atau array. Ini memungkinkanmu membangun struktur data yang serumit apa pun.

Object ({...}) digunakan untuk mengelompokkan data terkait tentang satu "benda". Anggap saja seperti entri kamus atau sebuah profil.

Array ([...]) digunakan untuk daftar item yang berurutan. Item dalam sebuah array bisa dari tipe apa pun, bahkan campuran (meskipun biasanya praktik yang baik adalah menjaganya seragam).

Mari kita lihat contoh yang lebih lengkap:

{
  "squadName": "Star Wars Heroes",
  "formed": 1977,
  "active": true,
  "members": [
    {
      "name": "Luke Skywalker",
      "age": 19,
      "secretIdentity": null,
      "powers": [
        "Jedi mind tricks",
        "Piloting",
        "The Force"
      ]
    },
    {
      "name": "Han Solo",
      "age": 29,
      "secretIdentity": null,
      "powers": [
        "Blaster accuracy",
        "Sarcasm",
        "Kessel Run under 12 parsecs"
      ]
    }
  ]
}

Lihat? Kita punya object luar yang mendeskripsikan skuad. Salah satu propertinya, "members", adalah sebuah array. Setiap elemen dari array itu adalah object lain, yang mewakili satu pahlawan. Dan setiap object pahlawan punya propertinya sendiri, salah satunya ("powers") adalah array string lain. Beginilah cara membangun pohon data dengan JSON.

Dari Teks ke Object: Parsing

Trik sulapnya adalah mengubah teks ini menjadi sesuatu yang bisa digunakan oleh program.

  1. Serialization: Aplikasi di sisi server (ditulis dengan Python, Java, Go, dll.) punya data di memori. Ia menggunakan library JSON untuk men-serialize data itu menjadi string berformat JSON. Di JavaScript, ini adalah JSON.stringify().
  2. Transmission: String ini dikirim melalui jaringan, biasanya sebagai body dari respons HTTP.
  3. Parsing: Klien (seperti browser web) menerima string ini. Ia menggunakan parser JSON bawaan untuk mengubah string tersebut kembali menjadi struktur data native yang bisa dimanipulasi. Di JavaScript, ini adalah JSON.parse().

Proses dua langkah stringify-and-parse ini adalah detak jantung komunikasi web modern.

Kisah dari dunia nyata

Aplikasi Mobile yang Penuh Bug

Sebuah startup meluncurkan aplikasi pesan antar untuk jaringan restoran lokal. Suatu pagi, aplikasi itu mulai crash untuk setiap pengguna saat dibuka. Tim dev panik total. Log server menunjukkan API mengirim status 200 OK, dan datanya kelihatan baik-baik saja saat mereka lihat sekilas. Setelah berjam-jam debugging panik, mereka akhirnya memeriksa teks mentah dari respons API. Seorang developer backend, yang bermaksud baik, telah menambahkan catatan untuk rekan-rekannya langsung di kode yang menghasilkan JSON: // TODO: Confirm weekend hours. Komentar ini ikut masuk ke dalam string JSON akhir. Meskipun tidak berbahaya dalam kode, komentar membuat JSON menjadi tidak valid. Parser JSON yang ketat di aplikasi melihat // yang tidak terduga dan langsung gagal, membuat aplikasi crash bahkan sebelum sempat menampilkan pesan error.

Pelajaran: Parser JSON tidak punya rasa kasihan. Formatnya didefinisikan secara ketat karena suatu alasan: untuk menjamin interoperabilitas. Satu karakter yang tidak valid—komentar, koma di akhir, tanda kutip tunggal—akan menyebabkan parser yang valid menolak seluruh payload.

Fiasco Harga Internasional

Sebuah perusahaan e-commerce Amerika berekspansi ke Jerman. API mereka mengirim info produk sebagai JSON, termasuk field price. Untuk item seharga $19,95, JSON-nya adalah "price": 19.95. Dalam persiapan peluncuran di Jerman, seorang developer memperbarui backend untuk memformat harga sesuai dengan konvensi Jerman, di mana koma adalah pemisah desimal. API mulai mengirim "price": "19,95". Namun, kode frontend masih mengharapkan tipe data number. Di JavaScript, parseFloat("19,95") menghasilkan 19, membuang semua yang ada setelah koma. Tiba-tiba, semua produk di Jerman ditampilkan dengan diskon besar-besaran yang salah.

Pelajaran: JSON adalah untuk data mentah, bukan untuk presentasi. Tipe data itu penting. Harga adalah number, jadi kirim sebagai number (19.95). Biarkan aplikasi di sisi klien (browser atau aplikasi mobile) yang menangani tugas memformat angka itu menjadi $19.95 atau 19,95 € atau ¥19 berdasarkan lokal pengguna. Jangan campur aduk data dengan logika tampilan.

File Konfigurasi yang Tak Bisa Dijelaskan

Sebuah tim kecil sedang menyiapkan layanan baru menggunakan file config.json untuk menyimpan string koneksi database, API key, dan feature flag. Seiring konfigurasi menjadi semakin kompleks, mereka sangat perlu menambahkan komentar untuk menjelaskan fungsi setiap pengaturan misterius dan mengapa nilainya diatur seperti itu. Tapi JSON melarang komentar. "Solusi" mereka adalah membuat file config_documentation.md yang harus selalu sinkron dengan config.json. Ini dengan cepat menjadi sangat merepotkan. Akhirnya, mereka menyadari kesalahan mereka.

Pelajaran: Gunakan alat yang tepat untuk pekerjaan yang tepat. JSON adalah juara tak terbantahkan untuk pertukaran data antar mesin (seperti respons API). Tetapi untuk file konfigurasi yang dikelola manusia di mana komentar dan keterbacaan sangat penting, format lain seperti YAML atau bahkan file .js sederhana seringkali merupakan pilihan yang jauh lebih baik.

Kesalahan dan jebakan umum

  • Trailing Commas (Koma di Akhir): Menambahkan koma setelah elemen terakhir dalam object atau array ("key": "value",}) akan membuat JSON-mu tidak valid. Ini adalah kesalahan umum bagi developer yang terbiasa dengan sintaks yang lebih permisif di JavaScript.
  • Komentar: Kamu tidak bisa menambahkan komentar. // dan /* ... */ bukan bagian dari spesifikasi dan akan merusak proses parsing. Jika kamu perlu menambahkan metadata, kamu harus melakukannya di dalam struktur data itu sendiri, misal, { "_comment": "Ini catatanku", "realData": "..." }.
  • Tanda Kutip Tunggal: Semua key dan semua value string wajib menggunakan tanda kutip ganda ("). Menggunakan tanda kutip tunggal (') adalah JSON yang tidak valid, meskipun umum di JavaScript.
  • Key yang Undefined: Mengirim {"key": undefined} tidak dimungkinkan. Pasangan key-value biasanya akan dihilangkan saat serialisasi. Untuk merepresentasikan nilai yang hilang, gunakan null.
  • Menggunakan Angka sebagai String: Meskipun kamu bisa mengirim angka sebagai string (misal, "id": "123"), itu adalah praktik yang buruk. Ini memaksa aplikasi penerima melakukan pekerjaan ekstra untuk mengubahnya kembali menjadi angka dan dapat menyebabkan bug halus (misal, "10" > "9" bernilai false dalam perbandingan string).

Kenapa ini harus ada di radarmu

Jika kamu menyentuh kode dalam kapasitas apa pun, kamu akan bertemu JSON. Pertanyaannya bukan jika, tapi kapan dan seberapa sering.

  • Web Developer: Kamu akan mengonsumsi JSON dari API dan mengirimkannya dari form-mu. Seluruh state aplikasimu kemungkinan besar dikelola sebagai objek mirip JSON.
  • Backend Developer: Kamu akan membangun API yang menghasilkan JSON dan mengonsumsi JSON dari layanan lain.
  • Mobile Developer: Kamu akan berkomunikasi dengan backend-mu secara eksklusif melalui API yang berbicara dengan JSON.
  • DevOps/SRE: Alat Infrastructure-as-code, pipeline CI/CD, dan API penyedia cloud semuanya dikonfigurasi dan dikelola dengan JSON atau format serupa.
  • Data Scientist: Kamu akan menarik data dari API web, dan hampir selalu akan datang dalam bentuk JSON.
  • Non-Developer yang Penasaran: Memahami struktur key-value sederhana dari JSON dapat membuka misteri bagaimana aplikasi di ponselmu mendapatkan datanya dan bagaimana situs web memuat konten secara dinamis. Ini adalah kesempatan untuk mengintip ke bawah kap mesin dunia digital.

JSON adalah bahasa universal untuk data di internet. Mengetahui aturan dan tujuannya adalah keterampilan fundamental bagi siapa pun yang membangun atau bekerja dengan perangkat lunak modern.

Gali lebih dalam

  • JSON.org: Spesifikasi asli satu halaman oleh Douglas Crockford. Sebuah mahakarya kesederhanaan.
  • RFC 8259: "Standar" resmi IETF yang meresmikan format JSON untuk internet.
  • MDN: Working with JSON: Panduan definitif untuk developer JavaScript, menjelaskan JSON.parse() dan JSON.stringify().
  • Wikipedia: JSON: Memberikan gambaran umum yang bagus tentang sejarah, turunannya (seperti GeoJSON), dan perbandingannya dengan format lain.

Teori beres. Saatnya praktik — 100% di browser kamu.

Coba tool-nya: Editor JSON