Langsung ke isi
JAVASCRIPT · 10 MENIT BACA

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

JSON adalah format teks ringan untuk menyimpan dan bertukar data. Pelajari apa itu JSON, aturan format JSON, bedanya dengan objek JavaScript, serta JSON.parse & JSON.stringify.

JavaScriptDasarTutorial
Diagram alur: object JS ke string JSON ke object JS
Daftar isi
  1. Apa Itu JSON dan Kenapa Ada?
  2. Aturan Sintaks JSON yang Wajib Kamu Tahu
  3. JSON vs Objek JavaScript: Mirip Tapi Beda
  4. JSON.parse vs JSON.stringify
  5. JSON di Dunia Nyata
  6. Kesalahan Umum yang Membuat JSON Invalid
  7. FAQ Seputar JSON
  8. Penutup

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. Seluruh aturannya bisa kamu pelajari dalam sekali duduk, dan sebagai web developer kamu akan menemuinya hampir setiap hari.

Aturan sintaks JSON sedikit tapi ketat, dan bedanya dengan objek JavaScript sering ditanyakan saat interview. Keduanya dibahas di bawah, bersama cara mengubah data bolak-balik dengan JSON.parse dan JSON.stringify serta kesalahan umum yang membuat JSON jadi invalid. Ada juga playground 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:

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

Meski namanya “JavaScript Object Notation”, JSON sekarang sudah menjadi standar yang tidak terikat ke JavaScript: ia dipakai di Python, PHP, Java, Go, dan hampir semua bahasa lain.

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.

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:

JSON
{
  "kota": "Jakarta",
  "penduduk": 10000000
}
JSON
["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:

JSON
{
  "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
JSON
{
  "nama": "Budi",
  "umur": 22,
  "aktif": true,
  "pasangan": null,
  "hobi": ["pemrograman", "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

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, lalu perhatikan pesan error yang muncul. Itulah cara tercepat menghafal aturan JSON:

Coba Sendiri

✓ JSON valid
Hasil parse (prettified)
{
  "name": "Budi Santoso",
  "age": 22,
  "isActive": true,
  "hobbies": [
    "pemrograman",
    "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:

JavaScript
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:

Aspek Objek JavaScript JSON
Bentuk Struktur data di memori Teks (string)
Key Boleh tanpa kutip / kutip satu Wajib kutip ganda
Nilai fungsi Boleh Tidak boleh
Komentar Boleh Tidak boleh
Trailing comma Boleh Tidak boleh

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:

JavaScript
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:

JavaScript
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:

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

console.log(JSON.stringify(user, null, 2))
// {
//   "name": "Budi",
//   "hobbies": [
//     "pemrograman",
//     "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

Sebagai developer, kamu paling sering bertemu JSON di tiga tempat ini.

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:

JavaScript
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:

JavaScript
// 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 Membuat JSON Invalid

Sebagian besar error JSON berasal dari segelintir kesalahan yang sama. Kenali empat kesalahan ini dan kamu sudah menghindari sebagian besar masalah:

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

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.

CEK PEMAHAMAN

Manakah dari berikut ini yang merupakan JSON VALID?

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?

JSON itu 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 tertinggal 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

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. Hampir setiap API yang akan kamu pakai berbicara dalam JSON, jadi aturan-aturan ini akan langsung terpakai sejak proyek pertamamu.

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.

LANJUT PRAKTEK

Sudah paham? Sekarang coba sendiri.

Buka materinya di Hyper Sheets: latihan interaktif, playground, dan game untuk topik ini. Gratis, langsung di browser.