Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

JSON: Pengertian, Fungsi dan Cara Menggunakannya

3 min read

Featured image JSON

JSON adalah turunan JavaScript yang digunakan dalam transfer dan penyimpanan data. Kekinian, bahasa ini sering dimanfaatkan dalam pembuatan aplikasi web.

Nah, di artikel ini, Anda tidak hanya diajak untuk memahami pengertiannya saja. Anda juga akan belajar tentang fungsi, syntax, dan cara menggunakannya. Yuk, simak bersama!

Apa Itu JSON?

Seperti yang tadi disebutkan, JavaScript object notation atau JSON adalah format yang digunakan untuk menyimpan dan mentransfer data.

Berbeda dengan XML (extensive markup language) dan format lainnya yang memiliki fungsi serupa, JSON memiliki struktur data yang sederhana dan mudah dipahami. Itulah mengapa JSON sering digunakan pada API.

JSON sendiri terdiri dari dua struktur, yaitu:

  • Kumpulan value yang saling berpasangan. Dalam JSON, contohnya adalah object. 
  • Daftar value yang berurutan, seperti array.

JSON juga tidak hanya dapat digunakan dengan JavaScript. Berikut ini adalah beberapa bahasa pemrograman lain yang mendukung penggunaan format tersebut:

  • PHP
  • Python
  • Ruby
  • C++
  • Perl

Baca Juga: Bahasa Pemrograman

Fungsi JSON

Fungsi JSON kurang lebih sama dengan XML. Sebelum JSON diciptakan, format bahasa markup ini sering digunakan dalam AJAX JavaScript (asynchronous JavaScript and XML) untuk penyimpanan dan perpindahan data.

Berkat gabungan keduanya, developer dapat membuat halaman website di mana informasinya dapat diperbarui tanpa harus memuat ulang halaman tersebut. Ini sudah menjadi hal yang umum, terutama dengan menjamurnya tren aplikasi web.

Nah, JSON memiliki fungsi yang sama. Bedanya, ia memiliki beberapa keunggulan yang membuatnya lebih sering digunakan daripada XML, termasuk:

  • File yang lebih ringan
  • Struktur kode yang lebih sederhana
  • Kode yang mudah dipahami oleh manusia

Agar Anda paham dengan ketiga keunggulan tersebut, mari simak contoh yang ada di poin berikutnya.

Baca juga: Perbedaan Java dan JavaScript

Perbandingan JSON dan XML

Seberapa sederhanakah kode JSON jika dibandingkan dengan kode XML? Untuk mengetahuinya, Anda dapat memperhatikan kedua contoh di bawah ini. Contoh pertama adalah kode XML.

<users>
    <user>
        <username>Anton</username> <lokasi>Bandung</lokasi>
    </user>
    <user>
        <username>Budi</username> <lokasi>Semarang</lokasi>
    </user>
    <user>
        <username>Nana</username> <lokasi>Surabaya</lokasi>
    </user>
    <user>
        <username>Jamal</username> <lokasi>Tangerang</lokasi>
    </user>
</users>

Nah, contoh kode JSON JavaScript adalah sebagai berikut:

{"users": [
  {"username" : "Anton", "lokasi" : "Bandung"},
  {"username" : "Budi", "lokasi" : "Semarang"},
  {"username" : "Nana", "lokasi" : "Surabaya"},
  {"username" : "Jamal", "lokasi" : "Tangerang"}
] }

Dapat Anda lihat bahwa kode JSON lebih ringkas karena tidak memerlukan tag pembuka dan penutup. Dengan demikian, kodenya juga lebih mudah dipahami. Di samping itu, kelebihan ini juga memberikan dua manfaat lainnya, yaitu:

  • Proses loading data yang lebih ringan karena ukuran file yang kecil.
  • Penulisan kode yang lebih cepat dengan kode yang sederhana.

Baca Juga: Cara Install Node.js dan NPM di Ubuntu 18.04

Cara Menggunakan JSON

Ada dua hal yang perlu Anda pelajari agar dapat menggunakan JSON, yaitu syntax (cara penulisan) dan jenis value-nya. Untuk memahami keduanya, simak penjelasan di bawah ini. 

Syntax JSON

Pada contoh di bagian sebelumnya memang menunjukkan bahwa JSON memiliki struktur kode yang sederhana. Namun, mari lihat contoh yang lebih simpel lagi agar Anda tahu apa saja yang ada dalam syntax-nya:

{"city":"New York", "country":"United States "}

JSON selalu dibuka dan ditutup dengan tanda {} atau kurung kurawal. Syntax-nya terdiri dari dua elemen, yaitu  key dan value. Keduanya dipisahkan oleh titik dua agar jelas.

Contoh key adalah “city”, sedangkan “New York” adalah contoh value. Keduanya selalu dibuka dan ditutup dengan tanda kutip ganda. Perlu Anda ingat bahwa kedua tidak ada spasi di antara kedua elemen tersebut.

Apabila ada lebih dari satu pasang key dan value, Anda perlu memisahkannya dengan tanda koma yang diikuti spasi. Ini dapat Anda lihat pada contoh di atas.

Nah, meskipun key harus berupa string, Anda dapat menggunakan beberapa jenis data sebagai value-nya. Apa saja itu? Mari kita bahas di bagian selanjutnya.

Baca Juga: Cara Membuat JavaScript di HTML

Jenis-Jenis Value JSON

Setidaknya ada enam jenis data yang dapat digunakan sebagai value JSON, yaitu:

  • String
  • Object
  • Array
  • Boolean
  • Number
  • Null

String

String adalah data yang terdiri dari karakter unicode, seperti “Anton” pada contoh di bawah ini.

“nama”:”Anton”

Baca juga: Custom JavaScript dan CSS di WordPress

Object

Object adalah sepasang key dan value. Seperti pada contoh syntax tadi, object dibuka dan ditutup dengan kurung kurawal. Jika ada lebih dari satu object, masing-masing dipisahkan oleh koma dan spasi.

“karyawan”: {“nama”:”Anton”, “asal”:”Bandung”}

Pada contoh di atas, semua yang ada di dalam kurung kurawal adalah object yang merupakan value dari “karyawan”.

Baca juga: Membuat Countdown Timer dengan JavaScript

Array

Array adalah kumpulan object. Kumpulan ini dibuka dan ditutup dengan kurung siku [].

"karyawan":[      
{"nama":"Anton", "asal":"Bandung"},
{"nama":"Nana", "asal":"Surabaya"},
{"nama":"Jamal", "asal":"Tangerang"}
]

Baca juga: JQuery Adalah

Boolean

Boolean adalah jenis data yang hanya berisikan pernyataan benar atau salah. Anda hanya tinggal memasukkan true atau false, seperti pada contoh berikut ini:

“karyawan tetap”:”false”

Baca juga: Framework JavaScript

Number

Seperti namanya, jenis data ini berupa angka saja. Dengan catatan, angkanya harus merupakan integer atau angka bulat. Artinya, 21,8 atau √2 tidak dapat dijadikan sebagai value . Contoh penggunaannya seperti di bawah ini:

“usia”:“29”

Baca juga: Apa itu DOM

Null

Jika sebuah key tidak memiliki value, Anda dapat mengetikkan null. Contohnya seperti pada kode berikut:

“golonganDarah”:”null”

Baca juga: Mengenal Express.js: Pengertian, Cara Kerja, Keunggulan, Tutorial

Membuat Nested Objects dan Nested Arrays

Anda dapat membuat nested object dan nested array dalam kode JSON. Untuk memahami penggunaannya, amati kedua contoh yang dibahas pada bagian ini.

Pertama, mari perhatikan contoh nested object berikut:

“karyawan”: {
	“nama”:“Anton”,
	“asal”:“Bandung”.
	“hobi”: {
		“hobi1”:“berenang”,
		“hobi2”:“melukis”,
		“hobi3”:“jogging”
	}
}

Pada contoh tersebut, “hobi1”, “hobi2”, dan “hobi3” merupakan value dari key “hobi”. Perhatikan bahwa ketiga value tersebut ada di dalam kurung kurawal. Dengan demikian, “hobi” beserta ketiga value-nya merupakan object di dalam object.

Penggunaan nested array tidak jauh berbeda. Perhatikan contoh di bawah ini:

“karyawan”: {
	“nama”:“Anton”,
	“asal”:“Bandung”.
	“hobi”: [ “berenang”, “melukis”, “jogging” ]
}

Pada contoh di atas, “berenang”, “melukis”, dan “jogging adalah array yang merupakan value dari “hobi”.

Mudah, bukan?

Baca Juga : Next.js: Pengertian, Cara Kerja, dan Tutorial Project Next.js

Siap Mencoba Menggunakan JSON?

JSON adalah format yang digunakan dalam penyimpanan dan transfer data, terutama dalam aplikasi web. Format ini makin sering digunakan karena struktur kode yang lebih ringkas dan mudah dipahami daripada XML.

Nah, tadi Anda telah diajak untuk mengenali syntax dasar, jenis-jenis value, serta cara menggunakan nested object dan array dengan JSON.

Kami harap artikel ini dapat membantu Anda untuk belajar JSON. Apabila ada pertanyaan, jangan sungkan untuk meninggalkan komentar pada kolom yang tersedia di bawah artikel ini.

Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Leave a Reply

Your email address will not be published. Required fields are marked *