FlowingDev

JSON, dijelaskan: format data favoritnya internet

Pelajari dasar-dasar JSON (JavaScript Object Notation), format pertukaran data ringan yang jadi motor penggerak API dan aplikasi web modern.

Coba tool-nya: Penampil JSON

Dalam satu kalimat

JSON adalah cara berbasis teks untuk menyusun data, mirip seperti daftar (list) atau kamus (dictionary), yang membuatnya super gampang dibaca, ditulis, dan dipertukarkan baik oleh komputer maupun manusia.

Masalah yang dipecahkannya

Bayangkan web di awal tahun 2000-an. Kalau kamu mau halaman web-mu mengambil data baru tanpa harus me-reload satu halaman penuh (konsep baru yang keren bernama AJAX), kamu mungkin lagi bergulat dengan XML. XML (eXtensible Markup Language) adalah jawara pertukaran data saat itu. XML itu powerful, ketat, dan... jujur aja, agak ribet.

Sebuah dokumen XML itu boros kata. Setiap keping data dibungkus dengan tag pembuka dan penutup.

<user>
  <id>123</id>
  <name>Alex</name>
  <isAdmin>true</isAdmin>
</user>

Ini nggak jelek-jelek amat, tapi gede. Lebih penting lagi, mem-parsing-nya di JavaScript—bahasa dari browser—itu menyebalkan. Kamu harus menavigasi Document Object Model (DOM) yang kompleks, berurusan dengan node, atribut, dan konten teks. Rasanya seperti pakai palu godam buat mecahin kacang.

Masuklah Douglas Crockford, seorang developer yang bekerja di perusahaan yang nantinya menjadi Yahoo!. Dia menyadari sesuatu yang brilian: JavaScript sebenarnya sudah punya cara bawaan yang sangat bagus untuk mendefinisikan data terstruktur. Namanya "object literal notation."

// Ini cuma JavaScript biasa loh!
var user = {
  "id": 123,
  "name": "Alex",
  "isAdmin": true
};

Crockford sadar bahwa bagian dari sintaks JavaScript ini bisa jadi format data yang fantastis. Format ini ringan, mudah dibaca manusia, dan—ini dia fitur pamungkasnya—sangat sepele untuk di-parse oleh JavaScript. Kamu pada dasarnya bisa langsung eval() (meskipun karena alasan keamanan, sekarang kita pakai metode yang lebih aman seperti JSON.parse()).

Dia meresmikan format ini, memberinya nama JavaScript Object Notation (JSON), dan membuat situs web satu halaman sederhana yang menjelaskannya. JSON memecahkan masalah kebutuhan format data yang tidak segemuk XML dan terasa natural di lingkungan web. JSON menyebar dengan cepat, menjadi bahasa de facto untuk API, file konfigurasi, dan aplikasi tak terhitung lainnya. JSON menang karena sederhana, praktis, dan lahir dari bahasa yang memang dirancang untuk dilayaninya.

Cara kerjanya di balik layar

Pada dasarnya, JSON hanyalah seperangkat aturan untuk menuliskan data sebagai teks. Anggap saja seperti cetak biru universal untuk sebuah struktur data. JSON hanya punya dua cara untuk menyusun data dan enam tipe data sederhana untuk ditaruh di dalamnya.

Blok Pembangun: Tipe Data

Keanggunan JSON datang dari set tipe nilai minimalisnya. Semua yang ada di JSON adalah salah satu dari tipe ini.

Tipe Contoh Deskripsi
String "Hello, world!" Rangkaian karakter Unicode, dibungkus dengan tanda kutip ganda.
Number 42, -3.14, 2.99e8 Bilangan bulat atau desimal (floating-point). Tidak ada NaN atau Infinity.
Boolean true, false Nilai logika untuk benar dan salah, selalu huruf kecil.
Null null Merepresentasikan ketiadaan nilai yang disengaja, selalu huruf kecil.
Array [1, "two", false] Daftar nilai yang berurutan, ditutup dengan kurung siku [].
Object {"key": "value"} Kumpulan pasangan key/value yang tidak berurutan, dalam kurung kurawal {}.

Itu saja. Tidak ada tipe data tanggal, fungsi, atau tipe khusus lainnya. Kesederhanaan ini adalah sebuah fitur, bukan bug, karena ini menjamin bahwa data dapat dipahami oleh hampir semua bahasa pemrograman.

Struktur: Object dan Array

Keajaiban sesungguhnya terjadi saat kamu menggabungkan blok-blok pembangun ini.

  • Object digunakan saat kamu punya kumpulan hal-hal yang memiliki nama. "Key" (namanya) harus berupa string dalam tanda kutip ganda. "Value"-nya bisa berupa salah satu dari enam tipe data, termasuk object atau array lain. Beginilah cara kamu membuat hierarki.

  • Array digunakan saat kamu punya daftar hal-hal yang berurutan. Urutannya penting, dan kamu mengakses item berdasarkan posisinya (indeks), dimulai dari nol.

Mari kita buat profil pengguna sederhana. Ini adalah sebuah object karena memiliki properti bernama seperti name dan email. Salah satu properti itu, skills, adalah sebuah daftar, jadi kita gunakan array.

{
  "userId": "u-9a8b7c",
  "username": "CodeWizard",
  "isActive": true,
  "lastLogin": null,
  "profile": {
    "realName": "Dana Scully",
    "location": "Washington, D.C."
  },
  "skills": [
    "Forensic Pathology",
    "Firearms",
    "Rational Skepticism"
  ]
}

Lihat susunannya? Sebuah object (profile) adalah sebuah value di dalam object utama. Sebuah array (skills) adalah value lainnya. Struktur seperti pohon ini bisa dibuat sedalam yang kamu butuhkan, memungkinkan kamu untuk memodelkan data yang sangat kompleks.

Di JavaScript, mengakses data ini jadi sangat intuitif: data.username akan memberimu "CodeWizard". data.profile.realName akan memberimu "Dana Scully". data.skills[0] akan memberimu "Forensic Pathology".

Pemetaan langsung ke struktur bahasa asli inilah yang membuat para developer menyukainya.

Aturan Main: Sintaks

Agar dianggap sebagai JSON yang valid, kamu harus mengikuti beberapa aturan ketat. Keketatan inilah yang membuatnya bisa di-parse oleh mesin dengan sangat andal.

  1. Hanya Tanda Kutip Ganda: Semua key dan semua value string HARUS diapit oleh tanda kutip ganda ("). Tanda kutip tunggal (') adalah kesalahan sintaks.
  2. Tidak Boleh Ada Koma di Akhir: Koma digunakan untuk memisahkan elemen dalam array atau pasangan dalam object. Kamu tidak boleh menaruh koma setelah item terakhir.
    // SALAH! Ada koma lebih setelah `true`
{
  "key1": "value1",
  "key2": true, 
}
  3. Object dan Array: Data disusun dalam object ({}) atau array ([]). Dokumen JSON yang valid bisa saja hanya satu nilai tunggal (seperti string "hello"), tetapi hampir selalu berupa object atau array sebagai wadah tingkat atas.
  4. Whitespace Fleksibel: Spasi, tab, dan baris baru di luar string tidak berpengaruh. Ini memungkinkan format "cantik" dengan inden untuk dibaca manusia, dan format "minified" satu baris untuk transfer jaringan yang efisien.

Kisah di dunia nyata

Feed Media Sosial

Seorang developer front-end, Maya, ditugaskan untuk membangun feed infinite-scroll untuk sebuah jejaring sosial baru. Setiap kali pengguna menggulir ke dekat bagian bawah, kode JavaScript-nya perlu meminta lebih banyak postingan dari server. Server merespons bukan dengan HTML, tetapi dengan data murni. Server mengirimkan sebuah array JSON, di mana setiap item adalah sebuah object yang merepresentasikan sebuah postingan. Object ini berisi teks postingan, username penulis, link ke foto profilnya, jumlah suka, dan bahkan array bersarang dari beberapa komentar pertama. Kode Maya menerima JSON yang bersih ini, melakukan loop melalui array, dan secara dinamis membuat HTML untuk setiap postingan, lalu menambahkannya ke halaman.

Pelajaran: JSON adalah urat nadi aplikasi web dinamis modern, bertindak sebagai pembawa pesan ringan antara otak server dan presentasi di browser.

Konfigurasi Game

Seorang developer game indie, Leo, sedang membuat sebuah game RPG. Dia perlu mengelola ratusan item: pedang, ramuan, baju zirah, dll. Melakukan hard-code untuk setiap properti item (nama, damage, berat, harga) langsung ke dalam kode C++ game akan menjadi mimpi buruk untuk di-balance dan di-update. Sebaliknya, dia membuat file items.json. File ini adalah object JSON raksasa di mana setiap key adalah ID item (seperti "longsword") dan value-nya adalah object lain yang berisi semua statistiknya. Saat game dimulai, ia membaca file ini dan memuat semua data item ke dalam memori. Untuk menyeimbangkan kembali game, dia hanya perlu mengedit file teks tersebut, tidak perlu kompilasi ulang.

Pelajaran: JSON adalah format yang sangat baik untuk file konfigurasi, memisahkan data aplikasi dari logikanya dan membuatnya mudah diedit oleh manusia.

Orkestra Microservice

Seorang backend engineer, Fatima, bekerja pada sistem yang terdiri dari puluhan microservice. Sebuah "layanan pengguna" mengelola akun pengguna, "layanan pesanan" mengelola pembelian, dan "layanan notifikasi" mengirim email. Ketika seorang pengguna melakukan pemesanan, layanan pesanan perlu mengkonfirmasi alamat pengiriman pengguna. Ia tidak langsung menanyakan ke database; sebaliknya, ia membuat permintaan HTTP ke endpoint API layanan pengguna, seperti GET /api/users/123/address. Layanan pengguna merespons dengan object JSON sederhana: {"street": "123 Main St", "city": "Anytown"}. Layanan pesanan mem-parsing ini, memvalidasi pesanan, dan kemudian mengirim permintaan ke layanan notifikasi (juga dengan payload JSON) untuk mengirimkan struk melalui email.

Pelajaran: Dalam sistem terdistribusi, JSON berfungsi sebagai kontrak universal yang agnostik terhadap bahasa pemrograman, memungkinkan layanan yang ditulis dalam Go, Python, dan Node.js untuk berkomunikasi satu sama lain dengan mulus.

Kesalahan dan jebakan umum

  • Koma di Akhir (Trailing Commas): Ini adalah kesalahan validasi paling umum. Array dan object JavaScript seringkali lebih permisif, tetapi JSON sangat ketat: tidak boleh ada koma setelah elemen terakhir dalam sebuah koleksi.
  • Komentar: JSON tidak punya komentar. Titik. Developer yang terbiasa dengan // atau /* */ sering mencoba menambahkannya, yang langsung membuat JSON tidak valid. "Trik" resminya adalah menambahkan key seperti "_comment": "Catatanmu di sini", yang oleh parser hanya akan dianggap sebagai data lain.
  • Kutip Tunggal vs. Kutip Ganda: Semua key dan semua string harus menggunakan tanda kutip ganda ("). Jika kamu datang dari dunia dictionary Python atau beberapa panduan gaya JavaScript, kamu mungkin terbiasa dengan kutip tunggal, tetapi itu dilarang di JSON.
  • Undefined Itu Tidak Ada: Di JavaScript, properti object yang hilang bernilai undefined. JSON tidak punya konsep ini. Untuk merepresentasikan nilai yang hilang atau kosong, kamu harus secara eksplisit menggunakan null.
  • Kutip yang Tidak di-escape: Jika value string-mu perlu mengandung tanda kutip ganda, kamu harus men-escape-nya dengan backslash (\). Lupa melakukan ini ({"quote": "She said "Hello""}) akan merusak struktur. Cara yang benar adalah {"quote": "She said \"Hello\""}.

Kenapa ini harus ada di radarmu

Dalam pengembangan perangkat lunak modern, JSON bukan hanya "ada di radar"; dialah radarnya. JSON adalah format default untuk begitu banyak tugas penting sehingga tidak familiar dengannya ibarat koki yang nggak tahu apa itu garam.

Kamu harus memikirkan JSON setiap kali:

  • Kamu sedang membangun atau menggunakan API web.
  • Kamu butuh file konfigurasi untuk sebuah aplikasi.
  • Kamu perlu menyimpan data terstruktur dalam file teks sederhana atau database NoSQL seperti MongoDB.
  • Kamu mengirim data dari proses sisi server ke aplikasi JavaScript sisi klien.
  • Kamu butuh format yang sederhana dan dapat dibaca manusia untuk melakukan serialisasi sebuah object untuk dikirim melalui jaringan atau disimpan ke disk.

Intinya, jika kamu butuh dua program berbeda untuk saling berbicara, atau jika kamu perlu memisahkan datamu dari kodemu, JSON hampir selalu menjadi jawaban pertamamu yang terbaik.

Pelajari lebih dalam

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

Coba tool-nya: Penampil JSON