JavaScript - Papar Objek

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan melangkah ke dalam dunia menampilkan objek dalam JavaScript. Sebagai guru komputer tetangga yang ramah, saya di sini untuk menghidahkan anda dalam petualangan ini langkah demi langkah. Jadi, pegang keyboard anda (tongkat sihir), dan mari kita buat some JavaScript magic happen!

Menampilkan Objek dalam JavaScript

Pertama-tama, apa sebenarnya objek dalam JavaScript? Well, bayangkan anda memiliki sebuah kotak ajaib yang dapat menyimpan berbagai jenis informasi tentang sesuatu. Itu sebenarnya apa yang dinamakan objek! Itu adalah wadah untuk data dan fungsi yang berkaitan.

mari mulai dengan contoh sederhana:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

Di sini, kita telah membuat objek wizard dengan properti seperti name, age, dan house. Tetapi bagaimana kita menampilkan objek ini? Jika kita mencoba mencetaknya saja:

console.log(wizard);

Kita mungkin melihat seperti ini di konsol:

{name: "Harry", age: 17, house: "Gryffindor"}

Tidak terlalu menarik, kan? Mari kita jelajahi beberapa cara yang lebih menarik untuk menampilkan objek kita!

Mengakses Properti Objek

Salah satu cara paling sederhana untuk menampilkan informasi objek adalah dengan mengakses propertinya secara langsung. Itu seperti membuka kotak ajaib kita dan melihat setiap item secara individual.

console.log("Name: " + wizard.name);
console.log("Age: " + wizard.age);
console.log("House: " + wizard.house);

Ini akan menampilkan:

Name: Harry
Age: 17
House: Gryffindor

Lebih baik! Sekarang kita dapat melihat setiap properti dengan jelas. Tetapi apa jika kita ingin menampilkan semua properti tanpa mengetiknya satu per satu? Itu di mana mantra berikutnya berguna!

Menggunakan Metode JSON.stringify()

JSON.stringify() seperti sihir revelio untuk objek. Itu mengambil objek kita dan mengubahnya menjadi string yang diatur dengan rapi.

let wizardString = JSON.stringify(wizard);
console.log(wizardString);

Ini akan menampilkan:

{"name":"Harry","age":17,"house":"Gryffindor"}

Sekarang itu mulai terlihat lebih teratur! Tetapi tunggu, itu belum selesai! Kita dapat membuatnya menjadi lebih indah:

let prettyWizard = JSON.stringify(wizard, null, 2);
console.log(prettyWizard);

Dan voila!

{
"name": "Harry",
"age": 17,
"house": "Gryffindor"
}

Angka 2 dalam mantra kita menentukan jumlah spasi untuk inden. Boleh diatur sesuai keinginan anda!

Menggunakan Metode Object.entries()

Sekarang, mari belajar mantra yang lebih tingkat lanjut: Object.entries(). Metode ini mengubah objek kita menjadi array pasangan key-value.

let wizardEntries = Object.entries(wizard);
console.log(wizardEntries);

Ini mengeluarkan:

[
["name", "Harry"],
["age", 17],
["house", "Gryffindor"]
]

Kita kemudian dapat menggunakan ini untuk membuat tampilan seperti tabel:

wizardEntries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});

Yang memberikan kita:

name: Harry
age: 17
house: Gryffindor

Menggunakan Loop for...in

Terakhir tapi bukan terkecil, mari jelajahi loop for...in. Ini seperti mantra yang memungkinkan kita untuk berjalan melalui setiap properti objek kita satu per satu.

for (let property in wizard) {
console.log(property + ": " + wizard[property]);
}

Ini akan mengeluarkan hasil yang sama seperti contoh sebelumnya:

name: Harry
age: 17
house: Gryffindor

Sekarang, mari kita masukkan semua metode ini ke dalam tabel referensi praktis:

Metode	Deskripsi	Contoh
Akses Langsung	Akses properti secara langsung	console.log(wizard.name)
JSON.stringify()	Konversi objek ke string JSON	console.log(JSON.stringify(wizard))
Object.entries()	Konversi objek ke array pasangan key-value	console.log(Object.entries(wizard))
Loop for...in	Iterasi properti objek	for (let prop in wizard) { console.log(prop) }

Ingat, para penyihir muda, latihan membuat sempurna! Cobalah metode ini dengan objek yang berbeda dan lihat bagaimana perilakunya. Sebelum anda tahu, anda akan menampilkan objek seperti seorang ahli JavaScript!

Saat kita mengakhiri pelajaran ini, saya teringat tentang insiden lucu dari salah satu kelas saya. Seorang siswa sekali mencetak console.log(lizard) instead of console.log(wizard), dan kita menghabiskan 10 menit mencari tahu mengapa seekor reptil tiba-tiba muncul dalam kode kita! Selalu ingat untuk memeriksa拼写 dalam pemrograman - itu dapat menyelamatkan anda dari beberapa bug yang benar-benar ajaib!

Itu saja untuk hari ini pelajaran tentang menampilkan objek dalam JavaScript. Terus latihan, tetap curiga, dan terutama, bersenang-senang dalam petualangan pemrograman anda. Sampaijumpa lagi, semoga kode anda bebas bug dan objek anda selalu menampilkan indah!

Credits: Image by storyset