JSON Adalah: Pengertian, Format, dan Cara Menggunakannya (untuk Pemula)

JSON (JavaScript Object Notation) adalah format teks ringan untuk menyimpan dan bertukar data, mudah dibaca manusia sekaligus mudah diproses mesin, dan dipakai oleh hampir semua API di internet. Setiap kali sebuah aplikasi mengambil data dari server, mengirim form, atau menyimpan pengaturan, kemungkinan besar data itu berbentuk JSON. Formatnya begitu sederhana sehingga kamu bisa mempelajari seluruh aturannya dalam sekali duduk, tapi begitu penting sehingga kamu akan menemuinya setiap hari sebagai web developer.

Di panduan ini kamu akan belajar JSON benar-benar dari nol: apa itu JSON dan kenapa ia ada, aturan sintaksnya yang wajib dipatuhi, bedanya JSON dengan objek JavaScript (pertanyaan yang sering muncul saat interview), cara mengubah data bolak-balik dengan JSON.parse dan JSON.stringify, sampai kesalahan-kesalahan umum yang bikin JSON jadi invalid. Ada juga playground interaktif supaya kamu bisa menguji sendiri mana JSON yang valid dan mana yang bermasalah.

Apa Itu JSON dan Kenapa Ada?

JSON adalah cara standar untuk menuliskan data terstruktur sebagai teks biasa. Bayangkan dua aplikasi berbeda yang ingin bertukar informasi, misalnya aplikasi cuaca di HP-mu yang meminta data suhu dari server BMKG. Kedua aplikasi ini mungkin ditulis dengan bahasa pemrograman yang berbeda (satu pakai JavaScript, satu pakai Python), tapi mereka tetap perlu “berbicara” dalam bahasa yang sama-sama dimengerti. Bahasa perantara itulah JSON.

Kenapa JSON begitu populer? Karena tiga alasan: ia ringan (tidak banyak simbol tambahan yang membebani), mudah dibaca manusia (kamu bisa langsung mengerti isinya tanpa alat khusus), dan mudah diproses mesin (hampir semua bahasa pemrograman punya fungsi bawaan untuk membaca dan menulis JSON). Sebelum JSON populer, orang banyak memakai format bernama XML yang jauh lebih bertele-tele. JSON menang karena jauh lebih ringkas.

Contoh sederhananya, data seorang user bisa ditulis seperti ini:

{
  "name": "Budi Santoso",
  "age": 22,
  "isActive": true
}

Meski namanya “JavaScript Object Notation”, JSON sekarang sudah menjadi standar universal yang independen, dipakai di Python, PHP, Java, Go, dan hampir semua bahasa lain, bukan cuma JavaScript.

Aturan Sintaks JSON yang Wajib Kamu Tahu

JSON punya aturan yang ketat tapi sedikit. Kalau kamu melanggar salah satunya, seluruh JSON dianggap invalid dan tidak bisa diproses. Mari kita bedah satu per satu.

1. Data dibungkus dalam objek {} atau array []. Objek adalah kumpulan pasangan key: value di dalam kurung kurawal. Array adalah daftar nilai berurutan di dalam kurung siku:

{
  "kota": "Jakarta",
  "penduduk": 10000000
}

["HTML", "CSS", "JavaScript"]

2. Key WAJIB memakai kutip ganda ("). Ini aturan paling sering dilanggar. Nama key harus dibungkus tanda kutip ganda, bukan kutip satu, dan tidak boleh tanpa kutip sama sekali:

{
  "email": "[email protected]"
}

3. Tipe nilai yang diizinkan terbatas. Nilai (value) di JSON hanya boleh berupa salah satu dari enam tipe berikut:

• String, teks di dalam kutip ganda, misalnya "Budi"
• Number, angka, bulat atau desimal, misalnya 22 atau 3.14
• Boolean, hanya true atau false
• null, nilai kosong yang disengaja
• Object, objek lain di dalamnya (bersarang)
• Array, daftar nilai

{
  "nama": "Budi",
  "umur": 22,
  "aktif": true,
  "pasangan": null,
  "hobi": ["ngoding", "futsal"],
  "alamat": { "kota": "Bandung" }
}

4. Yang TIDAK boleh ada di JSON. Ini bagian yang paling sering menjebak pemula:

• TIDAK ada komentar. Kamu tidak bisa menulis // atau /* */ di dalam JSON.
• TIDAK boleh trailing comma, yaitu koma di belakang elemen terakhir, seperti {"a": 1,}.
• TIDAK boleh function atau undefined sebagai nilai. JSON hanya menyimpan data, bukan kode.
• TIDAK boleh kutip satu ('). Semua string dan key wajib kutip ganda.

Coba Sendiri: Cek JSON Valid vs Invalid

Teori saja tidak cukup. Coba edit JSON di editor bawah ini dan lihat langsung apakah valid (hijau) atau invalid (merah). Klik tombol preset untuk memuat contoh-contoh yang sengaja dibuat salah, perhatikan pesan error yang muncul, karena itulah cara tercepat menghafal aturan JSON:

{
  "name": "Budi Santoso",
  "age": 22,
  "isActive": true,
  "hobbies": [
    "ngoding",
    "membaca",
    "futsal"
  ],
  "address": {
    "city": "Bandung",
    "zip": "40123"
  }
}

Kalau kamu ingin latihan yang lebih terstruktur dengan penjelasan bertahap, ada pelajaran JSON interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup apa pun.

JSON vs Objek JavaScript: Mirip Tapi Beda

Ini salah satu pertanyaan yang paling sering muncul saat belajar maupun interview. Karena sintaksnya sangat mirip, banyak orang mengira JSON dan objek JavaScript itu sama. Padahal berbeda.

Objek JavaScript adalah struktur data hidup di dalam kode yang berjalan, kamu bisa mengakses propertinya, mengubahnya, dan memanggil method-nya. Objek JavaScript ini:

const user = {
  name: 'Budi',        // key boleh tanpa kutip
  greet() {            // boleh berisi fungsi
    return 'Halo!'
  },
}

JSON, sebaliknya, adalah string/teks. Ia hanya deretan karakter yang kebetulan mengikuti format tertentu. Perbedaan intinya:

JSON.parse vs JSON.stringify

Karena JSON itu teks sedangkan kode kita bekerja dengan objek, kita butuh dua fungsi untuk mengubah bolak-balik antara keduanya. Keduanya adalah bagian bawaan JavaScript.

JSON.parse() mengubah string JSON menjadi objek JavaScript. Kamu memakainya saat menerima data (misalnya dari API atau localStorage) dan ingin menggunakannya di kode:

const teks = '{"name": "Budi", "age": 22}'  // ini string

const objek = JSON.parse(teks)              // sekarang objek asli
console.log(objek.name)                     // "Budi"
console.log(objek.age + 1)                  // 23

JSON.stringify() mengubah objek JavaScript menjadi string JSON. Kamu memakainya saat ingin mengirim data ke server atau menyimpannya:

const user = { name: 'Budi', age: 22 }

const teks = JSON.stringify(user)
console.log(teks)  // '{"name":"Budi","age":22}'

JSON.stringify juga bisa membuat output yang rapi dengan indentasi, berguna untuk menampilkan JSON agar mudah dibaca. Argumen ketiga menentukan jumlah spasi indentasi:

const user = { name: 'Budi', hobbies: ['ngoding', 'futsal'] }

console.log(JSON.stringify(user, null, 2))
// {
//   "name": "Budi",
//   "hobbies": [
//     "ngoding",
//     "futsal"
//   ]
// }

Ingat hubungannya seperti ini: stringify = objek → teks (untuk dikirim/disimpan), parse = teks → objek (untuk dipakai). Keduanya adalah kebalikan satu sama lain.

JSON di Dunia Nyata

Setelah paham teorinya, mari lihat di mana kamu benar-benar akan bertemu JSON sebagai developer.

1. Response dari API. Ini penggunaan paling umum. Saat kamu memanggil sebuah API dengan fetch, servernya membalas dengan JSON. Method .json() di bawah ini sebenarnya menjalankan JSON.parse di balik layar:

const response = await fetch('https://api.example.com/users')
const data = await response.json()  // JSON teks → objek otomatis
console.log(data)

2. File konfigurasi. Banyak tool development menyimpan pengaturannya dalam file JSON. Contoh paling terkenal adalah package.json di setiap proyek Node.js/JavaScript, yang mencatat nama proyek, versi, dan daftar dependensi.

3. Menyimpan data di localStorage. Browser hanya bisa menyimpan teks di localStorage, jadi kalau kamu ingin menyimpan objek, kamu harus meng-stringify dulu saat menyimpan dan mem-parse saat mengambil:

// Simpan
localStorage.setItem('user', JSON.stringify({ name: 'Budi', theme: 'dark' }))

// Ambil kembali
const user = JSON.parse(localStorage.getItem('user'))
console.log(user.theme)  // "dark"

Kesalahan Umum yang Bikin JSON Invalid

Sebagian besar error JSON berasal dari segelintir kesalahan yang sama. Kenali keempat ini dan kamu sudah menghindari 90% masalah:

1. Trailing comma. Koma nyangkut setelah elemen terakhir. Legal di JavaScript, dilarang di JSON:

{
  "a": 1,
  "b": 2
}

Versi salahnya menaruh koma setelah "b": 2.

2. Kutip satu. JSON hanya menerima kutip ganda. {'name': 'Budi'} salah; {"name": "Budi"} benar.

3. Key tanpa kutip. Di objek JavaScript kamu boleh menulis { name: "Budi" }, tapi di JSON key name wajib dikutip: { "name": "Budi" }.

4. Koma yang kurang. Setiap pasangan key: value harus dipisah koma. Lupa satu koma antar baris juga membuat JSON invalid.

Kabar baiknya, pesan error dari JSON.parse biasanya cukup jelas menunjukkan lokasi masalah (misalnya “Unexpected token” atau menyebutkan posisi karakter). Coba picu error-error ini di playground di atas untuk membiasakan diri membaca pesannya.

FAQ Seputar JSON

JSON adalah apa?

JSON adalah format teks ringan untuk menyimpan dan bertukar data. Kepanjangannya JavaScript Object Notation. Ia menuliskan data sebagai pasangan key dan value di dalam objek {} atau daftar [], dengan format yang mudah dibaca manusia sekaligus mudah diproses hampir semua bahasa pemrograman. JSON adalah “bahasa perantara” standar yang dipakai aplikasi untuk saling bertukar data.

Apa itu JSON dengan bahasa sederhana?

Bayangkan JSON sebagai cara rapi menulis data agar dua program berbeda bisa saling mengerti. Misalnya server ingin memberitahu aplikasimu bahwa ada user bernama Budi berumur 22 tahun, server menuliskannya sebagai teks JSON, aplikasimu membacanya, selesai. Ia seperti formulir standar yang formatnya disepakati semua orang.

Apa bedanya JSON dan objek JavaScript?

JSON adalah string/teks, sedangkan objek JavaScript adalah struktur data hidup di dalam kode. JSON punya aturan lebih ketat: key wajib pakai kutip ganda, tidak boleh ada fungsi, komentar, atau trailing comma. Objek JavaScript lebih longgar dan bisa berisi method. Untuk berpindah dari JSON ke objek, pakai JSON.parse; sebaliknya pakai JSON.stringify.

JSON.parse itu apa?

JSON.parse() adalah fungsi bawaan JavaScript yang mengubah string JSON menjadi objek JavaScript yang bisa kamu pakai. Contoh: JSON.parse('{"a": 1}') menghasilkan objek { a: 1 } sehingga kamu bisa mengakses .a. Kebalikannya adalah JSON.stringify yang mengubah objek kembali menjadi teks JSON.

Apakah JSON bahasa pemrograman?

Bukan. JSON hanyalah format data, cara menuliskan informasi sebagai teks. Kamu tidak bisa menulis logika, perhitungan, atau perulangan di dalamnya. JSON sekelas dengan format seperti CSV atau XML, bukan bahasa pemrograman seperti JavaScript atau Python.

Kenapa JSON saya invalid padahal terlihat benar?

Penyebab tersering adalah empat hal: trailing comma (koma nyangkut di akhir), key atau string memakai kutip satu alih-alih kutip ganda, key tanpa kutip sama sekali, atau ada koma yang kurang antar elemen. Coba tempel JSON-mu ke playground di artikel ini atau bungkus dengan try/catch untuk melihat pesan error yang menunjukkan lokasi masalahnya.

Penutup

JSON adalah salah satu fondasi paling penting sekaligus paling mudah dipelajari di dunia web development. Intinya cukup diingat dalam beberapa kalimat: JSON adalah format teks untuk bertukar data; key wajib kutip ganda; tidak boleh komentar, trailing comma, atau kutip satu; dan kamu berpindah antara teks dan objek dengan JSON.parse serta JSON.stringify. Karena hampir setiap API yang akan kamu pakai berbicara dalam JSON, menguasainya sejak awal akan sangat mempermudah perjalananmu.

Langkah berikutnya, karena JSON begitu erat dengan JavaScript, pastikan dasar bahasanya juga kuat, kalau kamu masih baru, mulai dari apa itu JavaScript untuk memahami objek, array, dan async yang akan sering berdampingan dengan JSON. Lalu perdalam JSON secara interaktif lewat pelajaran JSON di Hyper Sheets. Selamat belajar!