{"id":1441,"date":"2024-01-20T13:00:00","date_gmt":"2024-01-20T13:00:00","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=1441"},"modified":"2024-01-22T07:21:04","modified_gmt":"2024-01-22T07:21:04","slug":"check-javascript-array-empty","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/check-javascript-array-empty\/","title":{"rendered":"Check if JavaScript Array is Empty or Not (with code)"},"content":{"rendered":"\n

Arrays are the simplest linear data structures that store the same type of data. It can contain all integers, all characters, or all strings as the elements. In this article, we will look into various methods to check whether an array is empty or not in JavaScript.\u00a0<\/p>\n\n\n\n

3 Methods to Check Whether a JavaScript Array is Empty<\/strong><\/h2>\n\n\n\n

Checking if a JavaScript array is empty or not is great when dealing with user input. When we need to validate that the received array is not only present but also contains elements. Also, checking emptiness of array is useful when we need to conditional logic, only when array is not empty. Finally, in testing and debugging space, this is an important task to learn for beginners. <\/p>\n\n\n\n

Let\u2019s look at methods to check whether an array is empty or not:<\/p>\n\n\n\n

1) Using the .length Property<\/strong><\/h3>\n\n\n\n

We can use the .length property to check if a JavaScript array is empty or not. It can check the length of the array specifies the number of elements that it contains. If the length is zero, it means that the array has no elements, i.e. the array is empty.<\/strong><\/p>\n\n\n\n

Let’s see how to do it:<\/p>\n\n\n\n

\/\/declaring an empty array\nlet arr=[];\n\n\/\/checking the length\nif(arr.length==0){\n  console.log("The array is empty");\n}\nelse{\n  console.log("The array is not empty");\n}<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
The array is empty<\/code><\/pre>\n\n\n\n
In this example, we have taken an array with no elements. Hence, the length of the array is zero. As the array\u2019s length is zero, this means that the array is empty. We have obtained the desired result. <\/p>\n\n\n\n
Let us take another example:<\/p>\n\n\n\n
\/\/declaring an empty array\nlet arr=[1,2,3];\n\n\/\/checking the length\nif(arr.length==0){\n  console.log("The array is empty");\n}\nelse{\n  console.log("The array is not empty");\n}<\/pre><\/div>\n\n\n\n
Output<\/strong>:<\/p>\n\n\n\n
The array is not empty<\/code><\/pre>\n\n\n\n
In this example, we have taken an array with three elements. Hence, the length of the array is three. As the array\u2019s length is three, this means that the array is not empty. We have obtained the desired result.<\/p>\n\n\n\n
The length property is also good to get the last element of the array in JavaScript<\/a>.<\/p>\n\n\n\n
2) Using the Array.isArray() Method<\/strong><\/h3>\n\n\n\n
Another method to check if a JavaScript array is empty is to combine the Array.isArray() method and the length method. Array.isArray() method checks if the variable is an array. So, we combine both methods. If both conditions are true, i.e. the variable is an array and its length is zero then the array is empty. Otherwise, the array is not empty.\u00a0<\/p>\n\n\n\n
Let us take an example.:<\/p>\n\n\n\n
\/\/declaring an empty array\nlet arr=[];\n\n\/\/checking if the variable is an array and the length of the array\nif(Array.isArray(arr) && arr.length==0){\n  console.log("The array is empty.");\n}\nelse{\n  console.log("The array is not empty.");\n}<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
The array is empty.<\/code><\/pre>\n\n\n\n
In this example, we check both conditions. One is to check if the variable is an array and the other is to check if the length is zero. The variable arr is an array and its length is zero. Thus, we have obtained the desired result. <\/p>\n\n\n\n
Let us take another example:<\/p>\n\n\n\n
\/\/declaring a variable\nlet str="FavTutor";\n\n\/\/checking if the variable is an array and the length of the array\nif(Array.isArray(str) && str.length==0){\n  console.log("This is an array and it is empty.");\n}\nelse{\n  console.log("This is not an array or is not empty.");\n}<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
This is not an array or is not empty.<\/code><\/pre>\n\n\n\n
In this example, we have taken a string, not an array. Hence, we have got the desired output. <\/p>\n\n\n\n
3) Using the toString() Method<\/strong><\/h3>\n\n\n\n
The toString method in JavaScript converts an array to a string<\/a>. If the array is empty, the string representation would be an empty string, i.e.(\u201c\u201d).\u00a0<\/p>\n\n\n\n
The syntax of the toString() method is as follows:<\/p>\n\n\n\n
let convertedStr = arr.toString()<\/code><\/pre>\n\n\n\n
where,\u00a0‘convertedStr’ is the variable to store the string that we get from the toString() function, and ‘arr’ variable represents the array that has to be converted to a string.<\/p>\n\n\n\n
Here is an example:<\/p>\n\n\n\n
\/\/declaring an array\nlet arr=[];\n\n\/\/using the toString() method\nlet str=arr.toString();\n\n\/\/checking if array is empty or not\nif(str==""){\n  console.log("The array is empty.");\n}\nelse{\n  console.log("The array is not empty.");\n}<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
The array is empty.<\/code><\/pre>\n\n\n\n
In this example, we convert the array arr to a string. The converted string becomes \u201c \u201d, i.e. an empty string. Thus, it is proved that the array is empty. We have obtained the desired result. <\/p>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
In this article, we dive deep into various methods to check whether a JavaScript array is empty or not. We used the .length method, the Array.isArray() method, the Array.prototype.every() method and Array.prototype.every() method to check the emptiness of an array.<\/p>\n","protected":false},"excerpt":{"rendered":"
Learn how to check if a javascript array is empty or not using length property and toArray function, with examples.<\/p>\n","protected":false},"author":9,"featured_media":1443,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11],"class_list":["post-1441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=1441"}],"version-history":[{"count":3,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1441\/revisions"}],"predecessor-version":[{"id":1488,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1441\/revisions\/1488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/1443"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=1441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=1441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}