Panduan untuk Pemula: JavaScript - JSON

Halo sana, para ahli coding masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia JSON. Jangan khawatir jika Anda belum pernah mendengar tentang itu sebelumnya - pada akhir tutorial ini, Anda akan dapat bekerja dengan JSON seperti seorang pro. Jadi, ambil minumannya yang favorit, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu JSON?

JSON, singkatan dari JavaScript Object Notation, adalah format pertukaran data yang ringan. Saya tahu itu terdengar seperti sebuah kata yang sulit, tapi pikirkan itu sebagai cara untuk komputer berbicara satu sama lain dan berbagi informasi dalam cara yang mudah dipahami oleh baik mesin maupun manusia.

Bayangkan Anda mengirim catatan di kelas (tidak bahwa saya mendukung hal itu, tentu saja!). JSON seperti sebuah standar penulisan catatan sehingga siapa saja yang membacanya dapat memahami pesan secara cepat dan mudah.

Fitur JSON

Sebelum kita masuk ke detilnya, mari kita lihat apa saja yang membuat JSON spesial:

1. Itu ringan dan mudah dibaca.
2. Itu independen terhadap bahasa (tidak hanya untuk JavaScript!).
3. Itu berdasarkan dua struktur universal: objek dan array.

Fitur ini membuat JSON menjadi pilihan yang bagus untuk penyimpanan dan transfer data, yang adalah sebabnya mengapa itu digunakan secara luas dalam aplikasi web.

Sintaks JSON

Sekarang, mari kita lihat sintaks dasar JSON. Jangan khawatir jika itu terlihat sedikit aneh pertama kali - kita akan membongkar itu langkah demi langkah.

{
"name": "John Doe",
"age": 30,
"city": "New York"
}

Ini adalah objek JSON sederhana. Mari kita bongkar itu:

• Seluruh objek diapit dalam kurung kurawal {}.
• Di dalamnya, kita memiliki pasangan key-value.
• Key selalu string, diapit dalam tanda kutip ganda.
• Value bisa string, number, boolean, array, objek, atau null.
• Pasangan key-value dipisahkan oleh koma.

Data JSON

JSON dapat mewakili berbagai jenis data. Mari kita lihat beberapa contoh:

Strings

{"message": "Hello, World!"}

Numbers

{"age": 30}

Booleans

{"isStudent": true}

Null

{"spouse": null}

Ingat, JSON tentang merepresentasikan data dalam cara yang mudah dipahami dan digunakan. Pikirkan itu sebagai membuat profil detil untuk setiap informasi.

Objek JSON

Kita sudah melihat objek JSON sederhana, tapi mari kita masuk lebih dalam. Objek JSON dapat mengandung beberapa pasangan key-value dan bahkan objek yang disusun.

{
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
}

Dalam contoh ini, kita memiliki objek utama dengan key "person". Value dari "person" adalah objek lain yang mengandung berbagai informasi. Perhatikan bagaimana kita dapat menyinggung objek dan bahkan menyertakan array (kita akan membahas tentang itu nanti).

Array JSON

Array di JSON adalah daftar yang diurutkan dari nilai. Mereka diapit dalam kurung siku [] dan dapat mengandung jenis data JSON apa pun.

{
"fruits": ["apple", "banana", "cherry"],
"numbers": [1, 2, 3, 4, 5],
"mix": [42, "answer", true, null]
}

Array sangat berguna ketika Anda ingin mewakili koleksi item yang terkait. Misalnya, daftar bahan dalam resep, atau daftar skor tinggi dalam permainan.

Mengakses Data JSON

Sekarang kita tahu bagaimana mengatur data JSON, mari kita belajar bagaimana mengaksesnya di JavaScript. Kita akan menggunakan objek person dari sebelumnya sebagai contoh.

let data = {
"person": {
"name": "Alice",
"age": 25,
"hobbies": ["reading", "cycling", "photography"],
"address": {
"street": "123 Main St",
"city": "Wonderland"
}
}
};

console.log(data.person.name); // Output: Alice
console.log(data.person.hobbies[1]); // Output: cycling
console.log(data.person.address.city); // Output: Wonderland

Seperti yang Anda lihat, kita menggunakan notasi titik untuk mengakses properti objek, dan kurung siku untuk mengakses elemen array. Itu seperti mengikuti peta untuk menemukan informasi yang tepat!

Metode JSON

JavaScript menyediakan dua metode utama untuk bekerja dengan JSON:

Metode	Deskripsi
JSON.parse()	Mengonversi string JSON ke objek JavaScript
JSON.stringify()	Mengonversi objek JavaScript ke string JSON

Mari kita lihat ini dalam aksi:

// JSON.parse()
let jsonString = '{"name": "John", "age": 30}';
let obj = JSON.parse(jsonString);
console.log(obj.name); // Output: John

// JSON.stringify()
let person = {name: "Alice", age: 25};
let json = JSON.stringify(person);
console.log(json); // Output: {"name":"Alice","age":25}

Metode ini seperti penerjemah, membantu JavaScript dan JSON berkomunikasi secara efektif.

Perbandingan JSON dan Objek JavaScript

Meskipun JSON mirip dengan objek JavaScript, ada beberapa perbedaan utama:

1. Key JSON harus string dan diapit dalam tanda kutip ganda.
2. Value JSON harus salah satu dari jenis berikut: string, number, object, array, boolean, atau null.
3. JSON tidak mendukung fungsi atau komentar.

Berikut adalah perbandingan cepat:

// Objek JavaScript yang valid
let jsObj = {
name: 'John',
age: 30,
greet: function() { console.log('Hello!'); }
};

// JSON yang setara
let jsonObj = {
"name": "John",
"age": 30
};

Perhatikan bagaimana fungsi dan key yang belum dikutip tidak ada dalam versi JSON.

Mengonversi String JSON ke Objek JavaScript

Kita sudah melihat bagaimana menggunakan JSON.parse() untuk mengonversi string JSON ke objek JavaScript, tapi mari kita lihat contoh yang lebih kompleks:

let jsonString = '{"name":"Alice","pets":[{"type":"cat","name":"Fluffy"},{"type":"dog","name":"Rover"}]}';

let obj = JSON.parse(jsonString);

console.log(obj.name); // Output: Alice
console.log(obj.pets[0].name); // Output: Fluffy

Ini sangat berguna saat menerima data dari server, yang seringkali datang dalam bentuk string JSON.

Mengonversi Objek JavaScript ke JSON

Secara similar, kita dapat menggunakan JSON.stringify() untuk mengonversi objek JavaScript ke string JSON. Ini sering diperlukan saat mengirim data ke server.

let person = {
name: "Bob",
age: 35,
hobbies: ["swimming", "painting"],
address: {
street: "456 Elm St",
city: "Dreamland"
}
};

let jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: {"name":"Bob","age":35,"hobbies":["swimming","painting"],"address":{"street":"456 Elm St","city":"Dreamland"}}

Dan itu saja! Anda telah menyelesaikan kursus crash di JSON. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba membuat dan memanipulasi data JSON. Sebelum Anda mengetahui, Anda akan menjadi ahli JSON!

Credits: Image by storyset