{"id":3201,"date":"2020-04-18T18:08:00","date_gmt":"2020-04-18T17:08:00","guid":{"rendered":"https:\/\/www.itersdesktop.com\/?p=3201"},"modified":"2020-06-07T10:33:22","modified_gmt":"2020-06-07T09:33:22","slug":"checking-existence-of-an-element-in-an-array-with-javascript","status":"publish","type":"post","link":"https:\/\/www.itersdesktop.com\/fr\/2020\/04\/18\/checking-existence-of-an-element-in-an-array-with-javascript\/","title":{"rendered":"Checking existence of an element in an array with JavaScript"},"content":{"rendered":"

JavaScript is a loosely typed<\/em> or a dynamic<\/em> language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and reassigned) values of all types. In other words, everything in JavaScript is Object<\/a> in which we can use it to declare any collection typed data structure like in statically typed<\/em> languages such as Array, Dictionary, Map, Set, etc. In this post, I want to address how to check whether an element exists in the array, dictionary, map or not.<\/p>\r\n\r\n\r\n\r\n

Read more Data Structures in JavaScript<\/a><\/p>This is the documentation maintained by one of the oldest JavaScript alliances called Mozilla who is the founder of Netscape<\/a>.<\/cite><\/blockquote>\r\n\r\n\r\n\r\n

Traditional approaches<\/h2>\r\n\r\n\r\n\r\n

Don’t let you waste your valuable time any more. Let’s give an example:<\/p>\r\n\r\n\r\n\r\n

\r\n
let charts = {\r\n  curationstate: \"Curation State\",\r\n  modellingapproach: \"Modelling Approach\",\r\n  organism: \"Organism\",\r\n  journal: \"Journal\"\r\n};<\/pre>\r\n<\/div><\/div>\r\n\r\n\r\n\r\n
Now, to check whether charts[\"curationstate\"]<\/code> exists or not, we can do as below<\/p>\r\n\r\n\r\n\r\n
\/\/ Note: the three equal signs so that null won't be equal to undefined\r\nif (charts[\"curationstate\"] === undefined) {\r\n   \/\/ do something\r\n}<\/pre>\r\n\r\n\r\n\r\n
where undefined<\/code> is a special constant value in JavaScript. This is probably the best way to check an element exists or not in a collection. The logical expression will return true<\/code> if the key in question does exist, otherwise it will return false<\/code>.  Now, take a look at another example with array.<\/p>\r\n\r\n\r\n\r\n
var fruits = [\"Banana\", \"Orange\", \"Apple\", \"Mango\"];\r\nconsole.log(fruits instanceof Array); \/\/ the output: true\r\nconsole.log(fruits[0] === undefined); \/\/ the output: false<\/pre>\r\n\r\n\r\n\r\n
However, you might need to check the existence of a specific key rather getting the whole actual value of that element. In other words, it’s theoretically possible to check missing keys by using in<\/code> operator. Let’s look at the example below.<\/p>\r\n\r\n\r\n\r\n
\/\/ this works even if you have {\"publication\": undefined}\r\nif (\"publication\" in charts) {\r\n   \/\/ do something\r\n}<\/pre>\r\n\r\n\r\n\r\n
The former is considered the most commonly used method while the latter is presented in this post as the sake of the completeness.<\/p>\r\n\r\n\r\n\r\n
Modern approaches<\/h2>\r\n\r\n\r\n\r\n
I used to work with an awful lot of data often organised in arrays, dictionaries or maps. Therefore, looking for an effective and convenient way of checking the existence of an element in these data structures is valuable. I guess most JavaScript developers likely accept this solution<\/a>.<\/p>\r\n\r\n\r\n\r\n
vendors = [\r\n    {\r\n      Name: 'Magenic',\r\n      ID: 'ABC'\r\n     },\r\n    {\r\n      Name: 'Microsoft',\r\n      ID: 'DEF'\r\n    } \/\/and so on goes array... \r\n];\r\nif (vendors.filter(e => e.Name === 'Magenic').length > 0) {\r\n  \/* vendors contains the element we're looking for *\/\r\n}\r\n\/\/ or, better yet:\r\n\r\nif (vendors.some(e => e.Name === 'Magenic')) {\r\n  \/* vendors contains the element we're looking for *\/\r\n}\r\n\/\/ EDIT: If you need compatibility with lousy browsers then your best bet is:\r\nif (vendors.filter(function(e) { return e.Name === 'Magenic'; }).length > 0) {\r\n  \/* vendors contains the element we're looking for *\/\r\n}<\/pre>\r\n\r\n\r\n\r\n
Hopefully, this offers some additional tips\/tricks and\/or insights into how to check an element existing or not in a dictionary or an array in JavaScript\/jQuery, and how to make it fit into your need. Happy coding!<\/p>\r\n\r\n\r\n\r\n
All constructive comments are welcomed. If you are willing to contribute financial support for our website, please follow the instructions below.<\/p>","protected":false},"excerpt":{"rendered":"
JavaScript is a loosely typed or a dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and reassigned) values… <\/p>\n","protected":false},"author":2,"featured_media":3596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[348,641,133,230,4,222],"tags":[349,705],"class_list":["post-3201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-data-structures","category-javascript","category-jquery","category-programming","category-web-engineering","category-web-programming","tag-array","tag-check-an-element-in-array"],"_links":{"self":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/3201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/comments?post=3201"}],"version-history":[{"count":11,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/3201\/revisions"}],"predecessor-version":[{"id":3597,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/posts\/3201\/revisions\/3597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media\/3596"}],"wp:attachment":[{"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/media?parent=3201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/categories?post=3201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itersdesktop.com\/fr\/wp-json\/wp\/v2\/tags?post=3201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}