Di playlist ini, kita akan melanjutkan pembahasan ke struktur data berikutnya, yaitu Object. Namun sebelum melanjutkan, saya infokan dahulu ya, bahwa yang akan kita pelajari disini adalah sintaks lama dari Javascript, dimana Javascript masih merupakan Object Based Programming Language. Nantinya setelah Javascript diperbaharui menjadi versi ES6 keatas, Javascript memperkenalkan beberapa sintaks baru dimana Javascript telah mendukung Object Oriented Programming.

Berhubung kita masih di tingkat dasar pemograman Javascript, maka materi pelajaran kita akan dibatasi hanya di Object Based, karena cara pemogramannya lebih gampang, kita bisa langsung membuat Object dengan menggunakan sintaks Object Literals. Nantinya kalau kita sudah berada di tingkat yang lebih mahir, kita akan kembali membahas Javascript sebagai Object Oriented Programming, dimana kita harus membuat class terlebih dahulu, setelah itu barulah bisa di-instantiate menjadi object.

Kita masuk ke materi pertama kita. Mengapa kita memerlukan struktur data Object? Sedangkan kita sudah pernah belajar dari playlist sebelumnya mengenai struktur data Array, dimana kita bisa menyimpan banyak nilai di dalam satu variable. Misalkan kita membuat sebuah array pelajar, dan kita menyimpan 4 buah nilai di dalamnya, yaitu “Andi”, 18, 165, dan 55. Dan berhubung nilai array diakses dengan menggunakan index, maka secara otomatis kita mendapatkan index 0, 1, 2, dan 3 untuk data kita.

Namun setelah kita membuat array pelajar, kita akan kesulitan karena kita tidak tau maksud dari data yang kita simpan. Kita lihat nilai 18 pada index 1. Apakah arti dari 18 ini? Struktur data Array tidak bisa memberikan penjelasan. Begitu juga dengan nilai 165 dan 55. Kedepannya kita akan kesulitan untuk memproses data Array, karena kita tidak tau arti dari data tersebut. Terutama data-data yang nilainya mirip.

Kasus yang sama akan dengan gampang dipecahkan kalau kita menggunakan struktur data Object. Di dalam object, kita menggunakan yang namanya key value pair. Artinya setiap nilai yang hendak kita simpan di dalam objek, harus menggunakan kata kunci. Dan biasanya kata kunci yang digunakan akan menerangkan arti dari nilai yang hendak disimpan.

Sebagai contoh, kita lihat kembali variable pelajar yang kita simpan dalam bentuk object. Nilai-nilai yang disimpan tetap sama. Namun kita tidak lagi menggunakan nomor urut seperti index pada array, melainkan kita menggunakan kata kunci yang menerangkan arti dari nilai yang kita simpan. Sebagai contoh, “Andi” adalah namanya, lalu 18 adalah umurnya, 165 adalah tinggi badannya, dan 55 adalah berat badannya. Dengan menggunakan key value pair seperti ini, kita bisa dengan mudah mengerti mengenai nilai-nilai apa saja yang kita simpan di dalam object.

Bagaimana cara membuat objek? Ada beberapa cara. Namun khusus di video kali ini kita bahas cara Object Literal terlebih dahulu. Ini adalah cara yang paling gampang dan singkat untuk membuat objek. Kita cukup memberikan tanda kurung kurawal, dan kemudian menuliskan key value pair di dalam kurung kurawal tersebut. Bisa dilihat pada contoh.

Kita membuat variable student, yang isinya adalah kurung kurawal sebagai simbol pembuatan object. Setelah itu kita masukkan key pertama yaitu nama, diikuti oleh tanda titik dua, kemudian kita tuliskan value atau nilainya yaitu string “Andi”. Apabila kita hendak memasukkan key value kedua, maka kita pisahkan dengan tanda koma. Kita ulangi hingga kita berhasil menyimpan seluruh nilai yang kita butuhkan.

Setelah kita berhasil menyimpan data ke dalam object, pertanyaan berikutnya adalah bagaimana cara mengakses data tersebut? Ada dua cara ya. Yang pertama adalah menggunakan simbol kurung siku, seperti Array, dimana kita menuliskan key di dalam kurung siku tersebut. Sebagai contoh, apabila kita hendak mengakses nama pelajar, maka kita menuliskan

student["name"];

Cara kedua adalah dengan menggunakan tanda titik. Jadi kita tinggal menuliskan nama variable object, diikuti oleh tanda titik, dan diikuti oleh key dari nilai yang hendak kita akses. Untuk contoh yang sama, apabila kita hendak mengakses nama pelajar, maka kita bisa menuliskan kodenya:

student.name;

Kita langsung praktek coding. Saya sudah menyediakan 2 buah file yaitu index.html dan object.js. File index.html isinya hanya boilerplate HTML. Bagian yang paling penting disini adalah tag script yang mengarah ke object.js.

Sekarang kita buka object.js dan kita buat object student seperti yang kita bahas pada slide barusan. Kita buat variable baru dengan perintah let. Nama variablenya adalah student. Kita tulis simbol sama dengan dan diikuti dengan simbol object literal yaitu kurung kurawal.

Di dalam kurung kurawal kita tuliskan key value pair untuk semua nilai yang hendak kita simpan. Pertama adalah name, diikuti oleh tanda titik dua. Lalu nilai yang hendak disimpan adalah string “Andi”. Kita beri tanda koma untuk memisahkan dengan key value pair kedua. Lalu kita hendak menyimpan age dengan nilai 18. Height dengan nilai 165. Dan yang terakhir weight dengan nilai 55. Maka kode kita menjadi:

let student = {
  name   : "Andi",
  age    : 18,
  height : 165,
  weight : 55
};

Kita simpan dan jalankan di browser. Kita buka console. Kalau kita ketikkan nama variable student, maka di console akan keluar tulisan seperti ini:

{name: 'Andi', age: 18, height: 165, weight: 55}

Perhatikan bahwa simbolnya adalah kurung kurawal yang artinya variable ini adalah sebuah object. Dan di dalam kurung kurawal kita bisa melihat key value pair untuk semua nilai yang kita simpan di dalam variable. Di sebelah kirinya ada simbol segitiga yang kalau kita klik akan menampilkan keterangan tambahan ke arah bawah. Di bagian paling bawah kita bisa melihat bahwa jenis variable ini adalah Object.

Ada 2 cara untuk mengakses nilai yang disimpan di dalam object ini. Yang paling pentingnya adalah kita harus tau key atau kunci dari nilai tersebut. Tanpa ada key, maka kita tidak bisa mengakses nilai tersebut. Kita gunakan cara pertama terlebih dahulu. Kita bisa menyebutkan nama variablenya yaitu student, diikuti oleh tanda kurung siku. Di dalam tanda kurung siku, kita bisa menyebutkan key dalam bentuk string. Sebagai contoh kita hendak mengakses nama pelajar, maka kodenya menjadi:

student[“name”];

Apabila kita menggunakan key yang benar, maka kita mendapatkan nilai “Andi”. Namun apabila kita menggunakan key yang salah, misalkan Name dengan menggunakan huruf kapital, maka hasilnya adalah undefined alias tidak ada hasil.

Cara kedua untuk mengakses data adalah kita bisa menyebutkan nama variable student, diikuti oleh tanda titik, dan kemudian diikuti lagi oleh key yaitu name.

student.name;

Apabila key-nya benar, maka kita mendapatkan nilainya “Andi”. Dan sekali lagi, apabila key-nya salah, maka hasilnya adalah undefined.

Pada Javascript, kita bisa menggunakan tipe data lain sebagai key. Nantinya sistem secara otomatis mengubah tipe data tersebut menjadi string. Sebagai contoh, kita kembali ke source code. Misalkan kita ubah kunci age menjadi angka 10. Kemudian kita ubah height menjadi null. Dan weight menjadi true.

Kita simpan dan jalankan di browser.

Kita coba akses menggunakan tanda kurung siku terlebih dahulu ya. Kita bisa akses umur dengan menggunakan angka 10 di dalam kurung siku. Namun kita juga tetap bisa mengakses umur dengan menggunakan string 10.

student[10];
student[“10”];

Begitu juga kalau kita mengakses nilai dengan menggunakan kunci null. Dan kunci “null”. Kita coba lagi ya menggunakan kunci true, dan kunci “true”. Semuanya benar ya. Jadi kita bisa menggunakan tipe data primitif selain string untuk menjadi kunci, namun tipe data tersebut akhirnya akan diubah menjadi string.

Sekarang kita coba cara kedua untuk mengakses nilai. Perhatikan disini bahwa student.10 akan menghasilkan error. Hal ini disebabkan karena nama key disini terbentur dengan aturan penamaan variable, dimana nama variable tidak boleh didahului oleh angka. Namun kode student.null dan student.true dapat berfungsi dengan baik. Jadi dari contoh disini, sebaiknya kita tidak menggunakan angka sebagai key, karena dapat menyebabkan error.

Kita kembali ke source code Javascript dan kita kembalikan dahulu seluruh key-nya ke kode semula. Kita simpan dan refresh browser. Dan kita cek variable student udah kembali normal ya.

Nah, sekarang ada satu perbedaan mendasar dari cara mengakses nilai menggunakan kurung siku, dengan cara mengakses nilai menggunakan tanda titik. Apabila kita menggunakan kurung siku, maka kita bisa menyimpan key dalam bentuk variable. Sebagai contoh, kita buat dahulu variable key dengan nilai “name”.

let key = "name";

Kemudian kalau kita mengakses nilai yang disimpan student dengan menggunakan kurung siku key, maka bisa menghasilkan nilai yang benar.

student[key];

Namun kalau kita menggunakan sintaks student.key, maka hasilnya adalah undefined.

Contoh lainnya adalah kita bisa menggunakan simbol operasi untuk menuliskan key dalam tanda kurung siku. Sebagai contoh:

student["a"+"g"+"e"];

Browser akan menjalankan dahulu operasi penggabungan string sehingga menghasilkan kunci “age”, dan kemudian mengembalikan hasilnya.

Namun cara ini tidak bisa dilakukan dengan menggunakan tanda titik ya. Hasilnya pasti error.

Jadi beberapa contoh terakhir menunjukkan bahwa cara mengakses data di dalam objek dengan menggunakan tanda kurung siku lebih flesible dibandingkan dengan menggunakan simbol titik. Namun saya pribadi akan lebih sering menggunakan simbol titik, karena simbol titik ini lebih menunjukkan bahwa variable student ini adalah sebuah objek. Apabila saya menggunakan simbol tanda kurung siku, maka terjadi ambiguitas, dimana saya bisa kepikiran bahwa variable student ini adalah sebuah array. Dan hal ini bisa menyebabkan error apabila saya secara tidak sengaja menggunakan array method pada variable student.

Sekarang kita masuk ke materi terakhir yang dibahas dalam video ini. Bagaimana bila kita perlu mengubah atau menambahkan data yang dikandung oleh object student? Pertama kita coba ubah data terlebih dahulu ya. Bagaimana kalau misalkan kita perlu mengubah umur pelajar dari 18 menjadi 20? Sintaksnya gampang ya. Kita tinggal mengakses umur pelajar dengan menggunakan salah satu cara yang telah kita pelajari barusan, misalkan disini saya menggunakan cara student.age. Kemudian kita tinggal gunakan saja operator assignment sama dengan dan diikuti oleh nilai barunya, yaitu 20.

Setelah kode kita jalankan. Kita lihat lagi nilai yang disimpan oleh student. Maka umurnya sudah berubah menjadi 20.

Bagaimana kalau kita perlu menyimpan nilai baru? Misalkan Andi menjadi ketua kelas. Maka kita ingin menyimpan kunci isClassLeader dengan nilai true. Maka kita bisa menggunakan cara yang sama ya.

student.isClassLeader = true;

Kita mengakses key isClassLeader di dalam object student dan mengisikannya dengan nilai true. Berhubung key isClassLeader belum ada di dalam object, maka browser akan menambahkan key baru. Jadi kalau kita melihat kembali isi dari variable student, adalah 5 buah nilai yang disimpan di dalamnya. Dan nilai paling barunya adalah key isClassLeader dengan nilai true.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.