Seperti yang kita ketahui dari bab Tipe data, ada delapan tipe data dalam JavaScript. Tujuh di antaranya disebut "primitif", karena nilainya hanya berisi satu hal (baik itu string atau angka atau apa pun)
Sebaliknya, objek digunakan untuk menyimpan kumpulan kunci dari berbagai data dan entitas yang lebih kompleks. Dalam JavaScript, objek menembus hampir setiap aspek bahasa. Jadi kita harus memahaminya terlebih dahulu sebelum mendalaminya di tempat lain
Objek dapat dibuat dengan tanda kurung gambar user.isAdmin = true;2 dengan daftar properti opsional. Properti adalah “kunci. nilai", di mana user.isAdmin = true;3 adalah string (juga disebut "nama properti"), dan user.isAdmin = true;4 bisa apa saja
Kita dapat membayangkan sebuah objek sebagai lemari dengan file yang ditandatangani. Setiap potongan data disimpan dalam filenya dengan kunci. Sangat mudah untuk menemukan file dengan namanya atau menambah/menghapus file
Objek kosong ("kabinet kosong") dapat dibuat menggunakan salah satu dari dua sintaks
let user = new Object(); // "object constructor" syntax let user = {}; // "object literal" syntax
Biasanya, tanda kurung gambar user.isAdmin = true;5 digunakan. Deklarasi itu disebut literal objek
Kami dapat segera memasukkan beberapa properti ke user.isAdmin = true;5 sebagai “key. pasangan nilai”.
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_
Properti memiliki kunci (juga dikenal sebagai "nama" atau "pengidentifikasi") sebelum tanda titik dua user.isAdmin = true;7 dan nilai di sebelah kanannya
Di objek user.isAdmin = true;_8, ada dua properti
- Properti pertama memiliki nama user.isAdmin = true;_9 dan nilai delete user.age;0
- Yang kedua memiliki nama delete user.age;_1 dan nilai delete user.age;2
Objek user.isAdmin = true;_8 yang dihasilkan dapat dibayangkan sebagai kabinet dengan dua file bertanda tangan berlabel "nama" dan "umur"
Kami dapat menambah, menghapus, dan membaca file darinya kapan saja
Nilai properti dapat diakses menggunakan notasi titik
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30
Nilainya bisa dari jenis apa saja. Mari tambahkan yang boolean
user.isAdmin = true;
Untuk menghapus properti, kita dapat menggunakan operator delete user.age;_4
delete user.age;
Kami juga dapat menggunakan nama properti multi-kata, tetapi kemudian harus dikutip
let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };
Properti terakhir dalam daftar dapat diakhiri dengan koma
let user = { name: "John", age: 30, }
Itu disebut koma "di belakang" atau "menggantung". Memudahkan penambahan/penghapusan/pemindahan properti, karena semua baris menjadi sama
Untuk properti banyak kata, akses titik tidak berfungsi
// this would give a syntax error user.likes birds = true
JavaScript tidak mengerti itu. Ia berpikir bahwa kita mengatasi delete user.age;_5, dan kemudian memberikan kesalahan sintaksis saat menemukan delete user.age;6 yang tidak terduga
Titik membutuhkan kunci untuk menjadi pengidentifikasi variabel yang valid. Itu menyiratkan. tidak mengandung spasi, tidak dimulai dengan angka, dan tidak menyertakan karakter khusus (delete user.age;7 dan delete user.age;8 diperbolehkan)
Ada alternatif "notasi braket persegi" 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 dicatat bahwa string di dalam tanda kurung dikutip dengan benar (semua jenis kutipan akan dilakukan)
Tanda kurung siku juga menyediakan cara untuk mendapatkan nama properti sebagai hasil dari ekspresi apa pun – berlawanan dengan string literal – seperti dari variabel sebagai berikut
let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;
Di sini, variabel user.isAdmin = true;3 dapat dihitung pada saat run-time atau bergantung pada masukan pengguna. Dan kemudian kami menggunakannya untuk mengakses properti. Itu memberi kami banyak fleksibilitas
Contohnya
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_0
Notasi titik tidak dapat digunakan dengan cara yang sama
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_1
Kita bisa menggunakan tanda kurung siku dalam literal objek, saat membuat objek. Itu disebut properti yang dihitung
Contohnya
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_2
Arti dari properti yang dihitung sederhana. let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };0 artinya nama properti harus diambil dari let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };1
Jadi, jika pengunjung memasukkan let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };_2, let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };3 akan menjadi let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };4
Pada dasarnya, itu bekerja sama dengan
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_3
… Tapi terlihat lebih bagus
Kita dapat menggunakan ekspresi yang lebih kompleks di dalam tanda kurung siku
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_4
Kurung persegi jauh lebih kuat daripada notasi titik. Mereka mengizinkan nama dan variabel properti apa pun. Tetapi mereka juga lebih rumit untuk ditulis
Jadi sering kali, ketika nama properti diketahui dan sederhana, titik digunakan. Dan jika kita membutuhkan sesuatu yang lebih kompleks, maka kita beralih ke tanda kurung siku
Dalam kode nyata, kita sering menggunakan variabel yang ada sebagai nilai untuk nama properti
Contohnya
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_5
Pada contoh di atas, properti memiliki nama yang sama dengan variabel. Kasus penggunaan membuat properti dari variabel sangat umum, sehingga ada singkatan nilai properti khusus untuk membuatnya lebih pendek
Alih-alih let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };_5 kita bisa menulis let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };6, seperti ini
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_6
Kita dapat menggunakan properti normal dan singkatan dalam objek yang sama
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_7
Seperti yang telah kita ketahui, sebuah variabel tidak boleh memiliki nama yang sama dengan salah satu kata yang dilindungi bahasa seperti "untuk", "biarkan", "kembalikan", dll.
Tapi untuk properti objek, tidak ada batasan seperti itu
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_8
Singkatnya, tidak ada batasan pada nama properti. Itu bisa berupa string atau simbol apa pun (tipe khusus untuk pengidentifikasi, yang akan dibahas nanti)
Jenis lain secara otomatis dikonversi menjadi string
Misalnya, angka let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };_7 menjadi string let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };8 saat digunakan sebagai kunci properti
let user = { // an object name: "John", // by key "name" store value "John" age: 30 // by key "age" store value 30 };_9
Ada gotcha kecil dengan properti khusus bernama let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };9. Kami tidak dapat mengaturnya ke nilai non-objek
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_0
Seperti yang kita lihat dari kode, penetapan ke let user = { name: "John", age: 30, }0 primitif diabaikan
Kami akan membahas sifat khusus let user = { name: "John", age: 30, "likes birds": true // multiword property name must be quoted };9 di bab selanjutnya, dan menyarankan cara untuk memperbaiki perilaku tersebut
Fitur penting dari objek dalam JavaScript, dibandingkan dengan banyak bahasa lain, adalah memungkinkan untuk mengakses properti apa pun. Tidak akan ada kesalahan jika properti tidak ada
Membaca properti yang tidak ada hanya mengembalikan let user = { name: "John", age: 30, }2. Jadi kita dapat dengan mudah menguji apakah properti itu ada
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_1
Ada juga operator khusus let user = { name: "John", age: 30, }3 untuk itu
Sintaksnya adalah
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_2
Contohnya
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_3
Harap dicatat bahwa di sisi kiri let user = { name: "John", age: 30, }4 harus ada nama properti. Itu biasanya string yang dikutip
Jika kita menghilangkan tanda kutip, itu berarti sebuah variabel harus berisi nama sebenarnya yang akan diuji. Contohnya
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_4
Mengapa operator let user = { name: "John", age: 30, }_4 ada?
Yah, sebagian besar waktu perbandingan dengan let user = { name: "John", age: 30, }2 bekerja dengan baik. Tapi ada kasus khusus ketika gagal, tapi let user = { name: "John", age: 30, }3 bekerja dengan benar
Saat itulah properti objek ada, tetapi menyimpan let user = { name: "John", age: 30, }2
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_5
Dalam kode di atas, properti // this would give a syntax error user.likes birds = true0 secara teknis ada. Jadi operator let user = { name: "John", age: 30, }_4 bekerja dengan benar
Situasi seperti ini sangat jarang terjadi, karena let user = { name: "John", age: 30, }2 tidak boleh ditetapkan secara eksplisit. Kami kebanyakan menggunakan // this would give a syntax error user.likes birds = true_3 untuk nilai "tidak diketahui" atau "kosong". Jadi operator let user = { name: "John", age: 30, }_4 adalah tamu eksotis dalam kode
Untuk berjalan di atas semua kunci suatu objek, ada bentuk khusus dari loop. // this would give a syntax error user.likes birds = true5. Ini adalah hal yang sama sekali berbeda dari konstruksi // this would give a syntax error user.likes birds = true6 yang kita pelajari sebelumnya
Sintaks
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_6
Misalnya, mari tampilkan semua properti user.isAdmin = true;8
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_7
Perhatikan bahwa semua konstruksi "untuk" memungkinkan kita untuk mendeklarasikan variabel perulangan di dalam perulangan, seperti // this would give a syntax error user.likes birds = true8 di sini
Juga, kita bisa menggunakan nama variabel lain di sini, bukan user.isAdmin = true;3. Misalnya, let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_0 juga banyak digunakan
Apakah objek dipesan?
Jawaban singkatnya adalah. “dipesan dengan cara khusus”. properti bilangan bulat diurutkan, yang lain muncul dalam urutan pembuatan. Detailnya menyusul
Sebagai contoh, mari pertimbangkan objek dengan kode telepon
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_8
Objek dapat digunakan untuk menyarankan daftar opsi kepada pengguna. Jika kami membuat situs terutama untuk pemirsa Jerman, kami mungkin ingin let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];1 menjadi yang pertama
Tetapi jika kita menjalankan kodenya, kita melihat gambaran yang sama sekali berbeda
- AS (1) lebih dulu
- lalu Swiss (41) dan seterusnya
Kode telepon masuk dalam urutan terurut menaik, karena merupakan bilangan bulat. Jadi kita melihat let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];2
Properti bilangan bulat?
Istilah "properti bilangan bulat" di sini berarti string yang dapat dikonversi ke-dan-dari bilangan bulat tanpa perubahan
Jadi, let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_3 adalah nama properti bilangan bulat, karena ketika diubah menjadi bilangan bulat dan sebaliknya, masih tetap sama. Tapi let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];4 dan let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];5 tidak
// get property values of the object: alert( user.name ); // John alert( user.age ); // 30_9
…Sebaliknya, jika kunci bukan bilangan bulat, maka kunci tersebut dicantumkan dalam urutan pembuatan, misalnya
user.isAdmin = true;0
Jadi, untuk memperbaiki masalah kode telepon, kita bisa "menipu" dengan membuat kode non-integer. Menambahkan tanda tambah let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_6 sebelum setiap kode sudah cukup
Seperti ini
user.isAdmin = true;_1
Sekarang berfungsi sebagaimana dimaksud
Objek adalah array asosiatif dengan beberapa fitur khusus
Mereka menyimpan properti (pasangan kunci-nilai), di mana
- Kunci properti harus berupa string atau simbol (biasanya string)
- Nilai bisa dari jenis apa pun
Untuk mengakses sebuah properti, kita dapat menggunakan
- Notasi titik. let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];_7
- Notasi tanda kurung siku let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];8. Tanda kurung siku memungkinkan mengambil kunci dari variabel, seperti let user = {}; // set user["likes birds"] = true; // get alert(user["likes birds"]); // true // delete delete user["likes birds"];9
Operator tambahan
- Untuk menghapus properti. let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;0
- Untuk memeriksa apakah ada properti dengan kunci yang diberikan. let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;1
- Untuk mengulang objek. let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;2 putaran
Apa yang telah kita pelajari dalam bab ini disebut "objek biasa", atau hanya let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;3
Ada banyak jenis objek lain di JavaScript
- let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;4 untuk menyimpan koleksi data yang dipesan,
- let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;5 untuk menyimpan informasi tentang tanggal dan waktu,
- let key = "likes birds"; // same as user["likes birds"] = true; user[key] = true;6 untuk menyimpan informasi tentang kesalahan
- …Dan seterusnya
Mereka memiliki fitur khusus yang akan kita pelajari nanti. Kadang-kadang orang mengatakan sesuatu seperti "tipe Array" atau "tipe Tanggal", tetapi secara formal mereka bukan tipe mereka sendiri, tetapi milik tipe data "objek" tunggal. Dan mereka memperluasnya dengan berbagai cara
Objek dalam JavaScript sangat kuat. Di sini kami baru saja menggores permukaan topik yang sangat besar. Kita akan bekerja erat dengan objek dan mempelajari lebih lanjut tentangnya di bagian selanjutnya dari tutorial ini