Mengenal Object JavaScript: Membuat KTP Digital untuk Datamu
Halo Sobat Jurnal Coding! Pada beberapa tutorial sebelumnya, kita sudah berkenalan dengan fitur Array yang kita analogikan sebagai sebuah "Lemari Loker" panjang. Array sangat luar biasa jika kamu ingin menyimpan daftar barang yang jenisnya sama, misalnya daftar nama 100 siswa, atau daftar 50 nilai ujian.
Namun, bagaimana jika situasinya menjadi lebih kompleks?
Bayangkan kamu sedang ditugaskan untuk membuat aplikasi pendataan penduduk. Kamu harus menyimpan informasi lengkap tentang SATU orang spesifik, misalnya Budi. Kamu harus menyimpan Nama Lengkapnya, Umurnya, Pekerjaannya, dan Alamat Rumahnya.
Jika kamu memaksakan diri menggunakan Array, kodemu akan terlihat seperti ini:
daftarBudi = ["Budi Santoso", 25, "Programmer", "Jakarta"].
Bagi komputer, ini sah-sah saja. Tetapi bagi kamu (dan programmer lain yang membaca kodemu), ini adalah mimpi buruk! Kamu harus selalu menghafal bahwa laci nomor 0 adalah nama, laci nomor 1 adalah umur, dan laci nomor 3 adalah alamat. Bagaimana jika urutannya tidak sengaja tertukar? Data aplikasimu akan kacau balau!
Untuk menyelamatkan kewarasan kita, JavaScript menciptakan struktur data tingkat tinggi yang diberi nama: Object.
### Apa Itu Object? (Analogi KTP Digital)
Jika Array adalah lemari loker bernomor, maka Object adalah sebuah Kartu Tanda Penduduk (KTP) atau Kartu Nama.
Di dalam sebuah KTP, tidak ada nomor urut. Yang ada adalah pasangan antara "Label" dan "Isinya". Misalnya: Label Nama isinya Budi. Label Golongan Darah isinya O. Label Alamat isinya Jakarta. Di dalam pemrograman JavaScript, pasangan Label dan Isi ini disebut sebagai Key dan Value (Kunci dan Nilai).
Mari kita ubah data Budi yang berantakan tadi menjadi sebuah Object digital yang sangat rapi dan elegan:
// Membuat Object menggunakan kurung kurawal { }
let profilPengguna = {
namaLengkap: "Budi Santoso",
umur: 25,
pekerjaan: "Web Developer",
sudahMenikah: false
};
// Cara elegan memanggil datanya
console.log("Halo, nama saya " + profilPengguna.namaLengkap);
console.log("Saya bekerja sebagai " + profilPengguna.pekerjaan);
Perhatikan perbedaan yang sangat mencolok! Untuk membuat Object, kita menggunakan kurung kurawal { }. Dan untuk memanggil datanya, kita tidak lagi menggunakan angka indeks di dalam kurung siku, melainkan menggunakan sebuah TITIK (.) diikuti dengan nama labelnya. Teknik ini dinamakan Dot Notation.
Membaca profilPengguna.pekerjaan terasa persis seperti membaca bahasa manusia, bukan?
### Menyuntikkan Nyawa ke Dalam Object (Method)
Kecanggihan Object tidak berhenti pada sekadar menyimpan teks dan angka. Di dunia nyata, sebuah objek (benda atau manusia) tidak hanya memiliki "Sifat" (seperti nama dan umur), tetapi juga memiliki "Kemampuan" (bisa berjalan, bisa berbicara).
Di JavaScript, kamu bisa memasukkan sebuah Function (Fungsi koki yang sudah kita pelajari) ke dalam Object! Fungsi yang hidup di dalam Object memiliki nama khusus, yaitu Method.
let robotPintar = {
nama: "Jarvis",
versi: 2.0,
menyapa: function() {
console.log("Halo umat manusia! Saya adalah " + this.nama);
}
};
// Menyuruh robot melakukan kemampuannya
robotPintar.menyapa();
Lihatlah kata this.nama di atas. Kata "this" adalah kata ganti penunjuk ajaib di JavaScript yang artinya "milik saya sendiri". Jadi, robot itu akan memanggil namanya sendiri secara otomatis!
### Jembatan Menuju API (JSON)
Memahami Object adalah syarat mutlak bagi karir masa depanmu. Mengapa? Karena saat kamu mengambil data cuaca, data jadwal sholat, atau data harga Bitcoin dari server dunia (API), format data yang dikirimkan oleh server tersebut ke laptopmu adalah format JSON (JavaScript Object Notation).
JSON pada dasarnya hanyalah Object JavaScript yang diubah wujudnya menjadi teks biasa agar bisa terbang melewati kabel internet.
Cobalah buat Object untuk mendeskripsikan spesifikasi laptop atau komputer yang sedang kamu pakai sekarang (merek, RAM, ukuran layar). Setelah kamu lancar bermain dengan Object, di artikel selanjutnya kita akan mempelajari bagaimana membuat website-mu memiliki "Telinga Gaib" untuk mendengarkan setiap klik pengunjung!
Namun, bagaimana jika situasinya menjadi lebih kompleks?
Bayangkan kamu sedang ditugaskan untuk membuat aplikasi pendataan penduduk. Kamu harus menyimpan informasi lengkap tentang SATU orang spesifik, misalnya Budi. Kamu harus menyimpan Nama Lengkapnya, Umurnya, Pekerjaannya, dan Alamat Rumahnya.
Jika kamu memaksakan diri menggunakan Array, kodemu akan terlihat seperti ini:
daftarBudi = ["Budi Santoso", 25, "Programmer", "Jakarta"].
Bagi komputer, ini sah-sah saja. Tetapi bagi kamu (dan programmer lain yang membaca kodemu), ini adalah mimpi buruk! Kamu harus selalu menghafal bahwa laci nomor 0 adalah nama, laci nomor 1 adalah umur, dan laci nomor 3 adalah alamat. Bagaimana jika urutannya tidak sengaja tertukar? Data aplikasimu akan kacau balau!
Untuk menyelamatkan kewarasan kita, JavaScript menciptakan struktur data tingkat tinggi yang diberi nama: Object.
### Apa Itu Object? (Analogi KTP Digital)
Jika Array adalah lemari loker bernomor, maka Object adalah sebuah Kartu Tanda Penduduk (KTP) atau Kartu Nama.
Di dalam sebuah KTP, tidak ada nomor urut. Yang ada adalah pasangan antara "Label" dan "Isinya". Misalnya: Label Nama isinya Budi. Label Golongan Darah isinya O. Label Alamat isinya Jakarta. Di dalam pemrograman JavaScript, pasangan Label dan Isi ini disebut sebagai Key dan Value (Kunci dan Nilai).
Mari kita ubah data Budi yang berantakan tadi menjadi sebuah Object digital yang sangat rapi dan elegan:
// Membuat Object menggunakan kurung kurawal { }
let profilPengguna = {
namaLengkap: "Budi Santoso",
umur: 25,
pekerjaan: "Web Developer",
sudahMenikah: false
};
// Cara elegan memanggil datanya
console.log("Halo, nama saya " + profilPengguna.namaLengkap);
console.log("Saya bekerja sebagai " + profilPengguna.pekerjaan);
Perhatikan perbedaan yang sangat mencolok! Untuk membuat Object, kita menggunakan kurung kurawal { }. Dan untuk memanggil datanya, kita tidak lagi menggunakan angka indeks di dalam kurung siku, melainkan menggunakan sebuah TITIK (.) diikuti dengan nama labelnya. Teknik ini dinamakan Dot Notation.
Membaca profilPengguna.pekerjaan terasa persis seperti membaca bahasa manusia, bukan?
### Menyuntikkan Nyawa ke Dalam Object (Method)
Kecanggihan Object tidak berhenti pada sekadar menyimpan teks dan angka. Di dunia nyata, sebuah objek (benda atau manusia) tidak hanya memiliki "Sifat" (seperti nama dan umur), tetapi juga memiliki "Kemampuan" (bisa berjalan, bisa berbicara).
Di JavaScript, kamu bisa memasukkan sebuah Function (Fungsi koki yang sudah kita pelajari) ke dalam Object! Fungsi yang hidup di dalam Object memiliki nama khusus, yaitu Method.
let robotPintar = {
nama: "Jarvis",
versi: 2.0,
menyapa: function() {
console.log("Halo umat manusia! Saya adalah " + this.nama);
}
};
// Menyuruh robot melakukan kemampuannya
robotPintar.menyapa();
Lihatlah kata this.nama di atas. Kata "this" adalah kata ganti penunjuk ajaib di JavaScript yang artinya "milik saya sendiri". Jadi, robot itu akan memanggil namanya sendiri secara otomatis!
### Jembatan Menuju API (JSON)
Memahami Object adalah syarat mutlak bagi karir masa depanmu. Mengapa? Karena saat kamu mengambil data cuaca, data jadwal sholat, atau data harga Bitcoin dari server dunia (API), format data yang dikirimkan oleh server tersebut ke laptopmu adalah format JSON (JavaScript Object Notation).
JSON pada dasarnya hanyalah Object JavaScript yang diubah wujudnya menjadi teks biasa agar bisa terbang melewati kabel internet.
Cobalah buat Object untuk mendeskripsikan spesifikasi laptop atau komputer yang sedang kamu pakai sekarang (merek, RAM, ukuran layar). Setelah kamu lancar bermain dengan Object, di artikel selanjutnya kita akan mempelajari bagaimana membuat website-mu memiliki "Telinga Gaib" untuk mendengarkan setiap klik pengunjung!