JavaScript luar biasa, kita semua sudah tahu itu. Tetapi beberapa hal dalam JavaScript benar-benar aneh dan membuat kita sering menggaruk-garuk kepala. Salah satunya adalah konfrontasi dengan kesalahan ini saat Anda mencoba mengakses objek bersarang,
Tidak dapat membaca properti 'foo' dari undefined
Sering kali saat kita bekerja dengan JavaScript, kita akan berurusan dengan objek bersarang dan seringkali kita perlu mengakses nilai bersarang terdalam dengan aman
Mari ambil objek bersarang ini sebagai contoh
const user = {
id: 101,
email: 'jack@dev.com',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: 'wallas',
state: 'WX'
}
}
}
Untuk mengakses nama pengguna kami, kami akan menulis
const name = user.personalInfo.name;
const userCity = user.personalInfo.address.city;
_Ini mudah dan lurus ke depan
Tapi, entah kenapa, jika info pribadi pengguna kita tidak tersedia, struktur objeknya akan seperti ini,
const user = {
id: 101,
email: 'jack@dev.com'
}
Sekarang jika Anda mencoba mengakses nama, Anda akan dilempar Tidak dapat membaca properti 'nama' yang tidak terdefinisi
const name = user.personalInfo.name; // Cannot read property 'name' of undefined
Ini karena kami mencoba mengakses kunci name
dari objek yang tidak ada
Cara yang biasa digunakan oleh sebagian besar developer untuk menangani skenario ini adalah,
const name = user && user.personalInfo ? user.personalInfo.name : null;
// undefined error will NOT be thrown as we check for existence before access
_Tidak apa-apa jika struktur bersarang Anda sederhana, tetapi jika data Anda bersarang sedalam 5 atau 6 level, maka kode Anda akan terlihat sangat berantakan seperti ini,
let city;
if [
data && data.user && data.user.personalInfo &&
data.user.personalInfo.addressDetails &&
data.user.personalInfo.addressDetails.primaryAddress
] {
city = data.user.personalInfo.addressDetails.primaryAddress;
}
Ada beberapa trik untuk mengatasi struktur objek yang berantakan ini
Pola Akses Objek Bersarang Oliver SteeleIni adalah favorit pribadi saya karena membuat kode terlihat bersih dan sederhana. Saya memilih gaya ini dari stackoverflow beberapa waktu lalu dan cukup menarik setelah Anda memahami cara kerjanya
const name = [[user || {}].personalInfo || {}].name;
_Dengan notasi ini, Anda tidak akan pernah mengalami Tidak dapat membaca properti 'nama' yang tidak terdefinisi. Anda pada dasarnya memeriksa apakah pengguna ada, jika tidak, Anda membuat objek kosong dengan cepat. Dengan cara ini, kunci level selanjutnya akan selalu diakses dari objek yang ada atau objek kosong, tetapi tidak pernah dari undefined
Sayangnya, Anda tidak dapat mengakses array bersarang dengan trik ini
Akses Objek Bersarang Menggunakan Pengurangan ArrayMetode pengurangan array sangat kuat dan dapat digunakan untuk mengakses objek bersarang dengan aman
const getNestedObject = [nestedObj, pathArr] => {Typy
return pathArr.reduce[[obj, key] =>
[obj && obj[key] !== 'undefined'] ? obj[key] : undefined, nestedObj];
}// pass in your object structure as array elements
const name = getNestedObject[user, ['personalInfo', 'name']];// to access nested array, just pass in array index as an element the path array.
const city = getNestedObject[user, ['personalInfo', 'addresses', 0, 'city']];
// this will return the city from the first address item.
Jika menurut Anda metode di atas terlalu umum, maka Anda harus mencoba pustaka Typy yang telah saya tulis. Selain mengakses objek bersarang dengan aman, ia melakukan banyak hal yang lebih mengagumkan. 🎉
Ini tersedia sebagai paket npm — Typy
Jika Anda menggunakan Typy, kode Anda akan terlihat seperti ini,
import t from 'typy';const name = t[user, 'personalInfo.name'].safeObject;_
const city = t[user, 'personalInfo.addresses[0].city'].safeObject;
// address is an array
Ada beberapa perpustakaan lain seperti Lodash dan Ramda yang bisa melakukan ini. Namun dalam proyek front-end yang ringan, terutama jika Anda hanya memerlukan satu atau dua metode dari lib tersebut, sebaiknya pilih lib ringan alternatif, atau lebih baik, tulis sendiri
JavaScript memungkinkan Anda menyimpan data sebagai pasangan nilai kunci yang disebut objek JS. Strukturnya mirip dengan JSON dan bahkan mendukung nesting, yaitu menggunakan satu objek ke objek lainnya. Terkadang Anda mungkin perlu mendapatkan kunci dari objek di JavaScript. Pada artikel ini, kita akan belajar cara mendapatkan kunci objek bersarang di JavaScript
Cara Mendapatkan Kunci Objek Bersarang di JavaScript
Katakanlah Anda memiliki objek bersarang berikut di JavaScript
let data = [ { name: "Apple", id: 1, alt: [{ name: "fruit1", description: "tbd1" }] }, { name: "Banana", id: 2, alt: [{ name: "fruit2", description: "tbd2" }] }, { name: "Blueberry", id: 3, alt: [{ name: "fruit3", description: "tbd3" }] } ];_
Setiap objek JS mendukung fungsi keys[] yang mengembalikan array kunci yang ada di level pertama objek. Ini sintaksnya
let keys = Object.keys[yourObject];
Anda dapat mengakses objek bersarang menggunakan indeks 0, 1, 2, dll. Jadi data[0]. alt[0] akan mengakses objek bersarang alt pertama. Sekarang Anda dapat memanggil fungsi keys[] yang disebutkan di atas untuk mendapatkan daftar kuncinya
Object.keys[data[0].alt[0]]
Perintah di atas akan mengembalikan ['nama', 'deskripsi'] tidak harus dalam urutan yang sama
Jika Anda ingin mendapatkan nilai kunci tertentu, Anda bisa langsung merujuknya menggunakan nama kuncinya. Berikut adalah perintah untuk mendapatkan nilai deskripsi dari objek bersarang pertama