Bagaimana Cara Memeriksa Apakah Suatu Objek Kosong Atau Tidak Dalam JavaScript

 

 

Dalam artikel singkat ini, saya akan menunjukkan kepada kalian bagaimana kalian bisa memeriksa apakah suatu objek kosong dalam JavaScript.

Dalam pengembangan JavaScript sehari-hari, kalian mungkin perlu memeriksa apakah suatu objek kosong atau tidak. Dan jika kalian harus melakukan ini, kalian mungkin tahu bahwa tidak ada solusi langsung. Namun, ada beberapa teknik berbeda yang bisa kalian gunakan untuk membuat solusi khusus untuk kasus penggunaan kalian sendiri. Selain itu, jika kalian menggunakan pustaka utilitas JavaScript (JavaScript utility library) di proyek kalian, ada kemungkinan ia sudah menyediakan metode bawaan untuk memeriksa apakah suatu objek kosong atau tidak.

Cara Pra-ES5

Di bagian ini, kita akan membahas solusi yang akan bekerja bahkan dengan browser lama. Ini sering digunakan hingga era JavaScript ES5, ketika tidak ada metode bawaan yang tersedia untuk memeriksa apakah suatu objek kosong atau tidak.

Mari kita lihat contoh berikut.

 

1:  function isEmptyObject(obj) {  
2:    for (var property in obj) {  
3:      if (obj.hasOwnProperty(property)) {  
4:        return false;  
5:      }  
6:    }  
7:    return true;  
8:  }  
9:  console.log(isEmptyObject({})); // output: true  
10:  console.log(isEmptyObject({"foo":"1"})); // output: false  

 

Dalam contoh di atas, kita telah membangun fungsi khusus yang bisa kalian panggil untuk memeriksa apakah suatu objek kosong. Dibutuhkan satu argumen, dan kalian harus melewati objek yang ingin kalian uji. Dalam isEmptyObject fungsi tersebut, kita mencoba untuk mengulangi properti objek. Jika objek memiliki properti apa pun, kita akan mengembalikannya FALSE, jika tidak, kita akan mengembalikannya TRUE.

Kalian bisa melanjutkan dan menguji fungsi isEmptyObject dengan nilai yang berbeda. Seperti yang ditunjukkan pada contoh di atas, kita telah memanggilnya dengan nilai yang berbeda dan mencatat output dengan fungsi console.log tersebut.

Baca Juga :  Pengenalan AJAX Untuk Front-end Designer

 

Jadi begitulah cara kalian bisa memeriksa apakah suatu objek kosong di browser yang tidak mendukung edisi ES5. Di bagian selanjutnya, kita akan membahasnya dalam konteks browser modern.

Cara ES5+

Di bagian ini, kita akan membahas berbagai metode yang bisa kalian gunakan di browser modern yang mendukung edisi ES5.

1. Object.keys()

Metode Object.keys() mengembalikan array nama properti enumerable (enumerable property names) dari objek tertentu. Dan dengan demikian, kita dapat menggunakannya untuk memeriksa apakah suatu objek memiliki properti dengan menghitung panjang array ini.

Mari kita lihat contoh berikut. 

1:  function isEmptyObject(obj) {  
2:    return Object.keys(obj).length === 0;  
3:  }  
4:  console.log(isEmptyObject({})); // output: true  
5:  var bar = {"foo": "1"};  
6:  console.log(Object.keys(bar).length); // output: 1  
7:  console.log(isEmptyObject(bar)); // output: false  

 

Seperti yang kalian lihat pada contoh di atas, bar objek memiliki foo properti yang melekat padanya, dan dengan demikian bar.keys(obj).length expression akan mengembalikan nilai yang lebih besar dari nol. Jadi isEmptyObject fungsinya akan kembali FALSE dalam kasus ini.

Silakan dan uji fungsi isEmptyObject dengan nilai yang berbeda.

2. Object.getOwnPropertyNames()

Metode Object.getOwnPropertyNames() mengembalikan array ke semua sifat-sifat suatu objek tertentu. Meskipun mungkin terlihat identik metodenya dengan Object.keys(), ada perbedaannya. Metode Object.getOwnPropertyNames() juga mempertimbangkan sifat non-enumerable, sementara Object.keys() hanya mempertimbangkan sifat enumerable. Sebagian besar waktu ini akan setara, tetapi ada risiko yang Object.keys() dapatkan, yaitu akan kehilangan properti tertentu yang telah dinyatakan tidak dapat dihitung.

Mari kita lihat contoh berikut. 

1:  function isEmptyObject(obj) {  
2:    return Object.getOwnPropertyNames(obj).length === 0;  
3:  }  
4:  console.log(isEmptyObject({})); // output: true  
5:  var bar = {"foo": "1"};  
6:  console.log(Object.getOwnPropertyNames(bar).length); // output: 1  
7:  console.log(isEmptyObject(bar)); // output: false  

 

Seperti yang kalian lihat, menguji kekosongan dengan Object.getOwnPropertyNames() bekerja mirip dengan menggunakan Object.keys().

3. JSON.stringify

Metode JSON.stringify yang digunakan untuk mengkonversi objek JavaScript untuk string JSON. Jadi kita bisa menggunakannya untuk mengonversi objek menjadi string, dan kita bisa membandingkan hasilnya dengan {} untuk memeriksa apakah objek yang diberikan kosong.

Mari kita lihat contoh berikut. 

1:  function isEmptyObject(obj){  
2:    return JSON.stringify(obj) === '{}';  
3:  }  
4:  console.log(isEmptyObject({})); // output: true  
5:  var bar = {"foo":"1"};  
6:  console.log(JSON.stringify(bar)); // output: {"foo":"1"}  
7:  console.log(isEmptyObject(bar)); // output: false  

 

4. Object.entries()

Metode Object.entries() mengembalikan array dari array, dengan setiap elemen menjadi array pasangan kunci-nilai (key-value pairs) properti obyek.

Mari kita lihat contoh berikut untuk memahami cara kerjanya dengan tepat. 

 

1:  function isEmptyObject(obj) {  
2:    return Object.entries(obj).length === 0;  
3:  }  
4:  console.log(isEmptyObject({})); // output: true  
5:  var bar = {"foo":"1"};  
6:  console.log(Object.entries(bar)); // output: [['foo', '1']]  
7:  console.log(Object.entries(bar).length); // output: 1  
8:  console.log(isEmptyObject(bar)); // output: false  

Seperti yang kalian lihat, Object.entries() metode ini mengubah objek menjadi array, dan kita dapat menghitung panjang array tersebut untuk memeriksa apakah objek tersebut kosong.

Baca Juga : Memahami Algoritma Binary Search Di JavaScript

 

Silakan dan uji fungsi isEmptyObject dengan nilai yang berbeda.

Cara jQuery

Jika kalian sudah menggunakan library jQuery di proyek kalian, sangat mudah bagi kalian untuk memeriksa apakah suatu objek kosong, karena library jQuery sudah menyediakan metodenya isEmptyObject, yang memungkinkan kalian untuk memeriksa apakah suatu objek kosong.

Mari kita cepat melalui contoh berikut.

1:  jQuery.isEmptyObject({}); // true  
2:  jQuery.isEmptyObject({"foo":"1"}); // false  

Seperti yang kalian lihat, cukup mudah untuk menggunakan metode isEmptyObject dengan jQuery.

Demikian pula, library Lodash dan Underscore.js memiliki _.isEmpty() .

Kesimpulan

Pada artikel kali ini, kita membahas sejumlah cara berbeda untuk memeriksa apakah suatu objek kosong atau tidak dalam JavaScript.

Jangan lupa ihat beberapa tutorial kami yang lain tentang pemrograman JavaScript!