Seperti yang kita ketahui dari bab Tipe Data, ada delapan tipe data dalam JavaScript. Beberapa di antaranya disebut "primitif", karena nilainya hanya berisi satu hal (baik string atau angka atau apa pun)
Sebaliknya, objek digunakan untuk menyimpan koleksi terkunci dari berbagai data dan entitas kompleks lainnya. Dalam JavaScript, objek menembus hampir setiap aspek bahasa. Jadi kita harus memahaminya terlebih dahulu sebelum masuk lebih dalam
Setiap objek dapat dibuat dengan tanda kurung // ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 309 dengan daftar properti opsional. Properti adalah sepasang “kunci. nilai", di mana user.isAdmin = true;0 string (juga disebut "nama properti"), dan user.isAdmin = true;1 dapat berupa apa saja
Kita bisa membayangkan objek tersebut sebagai lemari dengan file yang ditandai. Setiap potongan data disimpan dalam filenya dengan kuncinya. Mencari file dengan mudah berdasarkan nama atau menambah/menghapus file
Objek kosong ("kabinet kosong") dapat dibuat menggunakan salah satu dari dua sintaks
let user = new Object(); // syntax "konstruktor objek" let user = {}; // syntax "literal objek"
Biasanya, tanda kurung user.isAdmin = true;_2 digunakan. Deklarasi itu disebut literal objek
Kami dapat langsung memasukkan beberapa properti ke user.isAdmin = true;_2 sebagai pasangan "kunci". nilai"
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_
Properti memiliki kunci (juga disebut "nama" atau "pengidentifikasi") sebelum tanda titik dua user.isAdmin = true;4 dan nilai di sebelah kanan
Di objek user.isAdmin = true;_5, ada dua properti
- Properti pertama memiliki nama user.isAdmin = true;_6 dan nilai user.isAdmin = true;7
- Yang kedua memiliki nama user.isAdmin = true;_8 dan nilai user.isAdmin = true;9
Hasil objek user.isAdmin = true;5 dapat dibayangkan sebagai lemari dengan dua file yang ditandai dengan label "nama" dan "umur"
Kami dapat menambah, menghapus, dan membaca file darinya kapan saja
Nilai properti dapat diakses menggunakan notasi titik
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30
Nilainya bisa tipe apa saja. Mari tambahkan nilai boolean
user.isAdmin = true;_
Untuk menghapus properti, kita dapat menggunakan operator delete user.age;1
delete user.age;
Kami juga dapat menggunakan nama properti multi-kata, tetapi harus dikutip
let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };
Properti terakhir dalam daftar dapat diakhiri dengan koma
let user = { name: "John", age: 30, }
Itu disebut koma "ekor" atau "menggantung". Memudahkan kita untuk menambah/menghapus/memindahkan properti, karena semuanya sekarang akan serupa
Untuk properti multi-kata, akses dot tidak berfungsi
// ini akan memberi galat syntax user.likes birds = true
Javascript tidak akan mengerti itu dan akan mengira kita sedang mencoba mengakses delete user.age;2, kemudian akan memberikan kesalahan sintaks ketika sampai ke bagian yang tidak terduga delete user.age;3
Titik membutuhkan kunci untuk menjadi pengidentifikasi yang valid. Arti. tidak ada spasi, tidak dimulai dengan angka dan tidak mengandung karakter khusus (delete user.age;4 dan delete user.age;5 diperbolehkan)
Ada alternatif "notasi braket kotak" yang berfungsi dengan string apa pun
let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];
Sekarang semuanya baik-baik saja. Harap perhatikan bahwa string dalam tanda kurung dikutip dengan benar (dapat berupa semua jenis kutipan)
Kurung kotak juga menyediakan cara untuk mendapatkan nama properti sebagai hasil ekspresi - berlawanan dengan string literal - seperti dari variabel berikut
let key = "likes birds"; // sama dengan user["likes birds"] = true; user[key] = true;
Di sini, variabel user.isAdmin = true;0 dapat dihitung pada saat run-time atau bergantung pada input pengguna. Kemudian kami menggunakannya untuk mengakses properti. Ini memberi kami fleksibilitas yang luar biasa
Sebagai contoh
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_0
Notasi titik tidak dapat digunakan dengan cara yang sama
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_1
Kita bisa menggunakan tanda kurung siku di dalam objek literal, saat kita membuat objek. Dipanggil dengan properti yang dihitung
Sebagai contoh
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_2
Arti dari properti yang dihitung itu sederhana. delete user.age;_7 berarti nama properti harus diambil dari delete user.age;8
Jadi, jika pengunjung memasukkan delete user.age;_9, let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };0 akan menjadi let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };1
Pada dasarnya, ini bekerja mirip dengan
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_3
… Tapi lebih manis
Kita dapat menggunakan ekspresi kompleks dalam tanda kurung kotak
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_4
Kurung kotak jauh lebih kuat daripada notasi titik. Mereka mengizinkan nama variabel dan properti apa pun. Tetapi mereka juga lebih rumit untuk ditulis
Seringkali, ketika nama properti dikenal dan sederhana, dot digunakan. Dan jika kita membutuhkan sesuatu yang rumit, maka kita ubah menjadi braket kotak
Dalam kode nyata kita sering menggunakan variabel sebagai nilai untuk nama properti
Sebagai contoh
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_5
Pada contoh di atas, properti memiliki nama yang sama dengan variabel. Kasus penggunaan menggunakan properti dari variabel sangat umum, bahwa ada singkatan nilai properti khusus yang mempersingkatnya
Alih-alih let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };_2 kita bisa menulis let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };3, seperti ini
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_6
Kita dapat menggunakan singkatan dan properti normal secara bersamaan dalam satu objek
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_7
Seperti yang sudah kita ketahui, sebuah variabel tidak boleh memiliki nama yang sama dengan salah satu “kata yang sudah dimiliki oleh bahasa pemrograman” seperti “for”, “let”, “return” dan lain-lain.
Tapi dari properti objek, tidak ada batasan seperti itu
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_8
Singkatnya, tidak ada batasan dalam penamaan properti. String atau simbol apa pun dapat digunakan (untuk jenis pengenal khusus, akan dibahas nanti)
Untuk tipe lainnya, secara otomatis akan diubah menjadi string
Misalnya, angka let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };4 menjadi string let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };5 saat digunakan sebagai kunci properti
let user = { // objek name: "John", // dengan kunci "name" menyimpan nilai "John" age: 30 // dengan kunci "age" menyimpan nilai 30 };_9
Ada hal kecil dengan properti khusus yang disebut let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };6. Kami tidak dapat menetapkan nilai non-objek ke dalamnya
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 300
Seperti yang kita lihat di kode, memasukkan nilai primitif let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };7 akan diabaikan
Kami akan membahas sifat let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };6 di bab berikutnya, dan menyarankan cara untuk membenarkan sifatnya
Fitur yang dapat direkam dalam objek Javascript, dibandingkan dengan bahasa lain, adalah memungkinkannya mengakses properti apa pun. Tidak akan ada kesalahan jika properti tidak ada
Membaca properti yang tidak ada akan mengembalikan let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };9. Jadi kita akan dengan mudah menguji apakah properti itu ada atau tidak
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_1
Ada juga operator khusus let user = { name: "John", age: 30, }0 untuk memeriksa keberadaan properti
Sintaks
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_2
Sebagai contoh
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_3
Harap diingat bahwa di sisi kiri let user = { name: "John", age: 30, }1 harus ada nama properti. Itu biasanya string yang dikutip
Jika tanda kutip kita hilangkan, artinya variabel, harus berisi nama yang akan diuji. Contoh
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_4
Lalu kenapa ada operator let user = { name: "John", age: 30, }1?
Yah, sebagian besar waktu perbandingan dengan let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };9 bekerja dengan baik. Tetapi ada kasus khusus di mana itu akan gagal, tetapi dengan let user = { name: "John", age: 30, }0 itu akan berjalan dengan baik
Yaitu ketika ada properti objek, tetapi menyimpan let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };9
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 305
Dalam contoh kode di atas, properti let user = { name: "John", age: 30, }_7 secara teknis ada. Tapi operator let user = { name: "John", age: 30, }_1 bekerja dengan baik
Situasi seperti ini jarang terjadi, karena let user = { name: "John", age: 30, "likes birds": true // nama properti multi-kata harus diquotasi };9 biasanya tidak diatur. Kami sering menggunakan // ini akan memberi galat syntax user.likes birds = true0 untuk nilai "tidak diketahui" atau "kosong". Jadi operator let user = { name: "John", age: 30, }_1 adalah tamu eksotis dalam kode
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_6
...Sebaliknya, jika kuncinya bukan bilangan bulat, maka kunci tersebut didaftarkan dalam urutan pembuatan, misalnya
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_7
Nah, untuk mengatasi masalah kode telepon, kita bisa melakukan "cheat" dengan membuat kode tersebut menjadi non-integer. Cukup tambahkan tanda tambah // ini akan memberi galat syntax user.likes birds = true_2 sebelum setiap kode
Seperti ini
// ambil nilai properti objek: alert( user.name ); // John alert( user.age ); // 30_8
Sekarang berfungsi sebagaimana dimaksud
Objek adalah array asosiatif dengan beberapa fitur khusus
Objek menyimpan properti (pasangan kunci-nilai), di mana
- kunci properti harus berupa string atau simbol (biasanya string)
- Nilainya bisa tipe apa saja
Untuk mengakses properti, kita dapat menggunakan
- Notasi titik. // ini akan memberi galat syntax user.likes birds = true3
- Notasi tanda kurung // ini akan memberi galat syntax user.likes birds = true4. Tanda kurung memungkinkan mengambil kunci dari variabel, seperti // ini akan memberi galat syntax user.likes birds = true5
Operator tambahan
- Untuk menghapus properti. // ini akan memberi galat syntax user.likes birds = true6
- Untuk memeriksa apakah ada properti dengan nilai yang diberikan. // ini akan memberi galat syntax user.likes birds = true7
- Untuk mengulang objek. // ini akan memberi galat syntax user.likes birds = true8 putaran
Dalam bab ini kita telah mempelajari apa yang disebut "objek biasa" atau "Objek sederhana" atau // ini akan memberi galat syntax user.likes birds = true9
Ada banyak hal tentang objek di Javascript
- let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_0 untuk menyimpan kumpulan data,
- let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_1 untuk menyimpan informasi tentang tanggal dan waktu,
- let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_2 untuk menyimpan informasi tentang kesalahan
- ...Dan lain-lain
Mereka memiliki fitur khusus lainnya yang akan kita pelajari nanti. Kadang-kadang orang mengatakan hal-hal seperti "tipe array" atau "tipe tanggal/waktu", tetapi secara formal mereka bukan tipe mereka sendiri, tetapi milik tipe data "objek" tunggal. dan mereka dapat meluas ke berbagai arah
Objek dalam Javascript sangat kuat. Kami baru belajar sedikit tentang topik yang sebenarnya sangat luas. Kita akan belajar lebih banyak tentang objek dan belajar tentang objek di bagian selanjutnya