How to check if array is empty in javascript

In this tutorial, you’ll be going to learn how to check if an array is empty in javascript. Using Array.isArray() you can ensure value is an array type and array.length check that array is empty or not.

Javascript array is a collection of different types of value like string, number, object even array also. So whenever any element adds to javascript array it’s size increase. So if array length is zero that means javascript array is empty.

To check if an array is empty in javascript there are multiple ways you can do that which we are going to discuss in this post so stick to the end so you don’t miss anything.

You can also check :

  1. How to convert PHP array to JavaScript array
  2. Phone Number Validation in HTML5
  3. How to check if object is empty in javascript
Check If Array Is Empty In JavaScript
JavaScript: Check If Array Is Empty

But why we need to check empty array because as a developer. we need to loop through an array in javascript but if the value if not an array and it’s also an empty array which leads a runtime error.

Check If Array Is Empty In JavaScript

Table Of Content:

  • Using Array.isArray() and Array.length
  • Create Own Prototype To Check Empty Array
  • Using Lodash Library
  • Using UnderScore.js Library

We are going to discuss all the above point in detail step by step.

Using Array.isArray() method and Array.length

So we have to check the value is an array or not first, because directly checking the length of the array causes an issue and it creates a runtime error. To check value is array, we use Array.isArray() method.

Let’s see it with an example.

// create empty array in javascript
let empty_array = []

// check empty is Array and then check array length
if(Array.isArray(empty_array) && empty_array.length){

  // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")
 // iterate an array

} else {
  // either empty_array is empty
   console.log("Empty Array")
}
// result => Empty Array

In the above example first, we create an empty array in javascript or we can also empty an array in javascript. Then using Array.isArray() method first we check that value is an array or not.

After it confirms that value is array then we check it’s length. If array length is zero then it means the array is empty. But if javascript array is not empty then you iterate javascript array to get and use it’s value.

Let’s look for another example in which we use array.consturctor.

// create empty array in javascript
let empty_array = []

// check empty is Array and then check array length
if(empty_array && empty_array.constructor === Array && empty_array.length == 0){
  
  // either empty_array is empty
   console.log("Empty Array")

} else {

  // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")

}

So the developer can handle the condition like we handle the situation in our above example.

you can also optimize above and make it reusable by converting it into the javascript function.

Now move to our code section.

// create empty array in javascript
let empty_array = ["js", "array"]

// check empty_array is Array and then check empty_array length
if(isArrayEmpty(empty_array)){
  // either empty_array is empty
   console.log("Empty Array")
} else {
   // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")
}

// function hoisting works here
function isArrayEmpty(array){
        return !Array.isArray(array) || !array.length
}

// result => Array is not empty

So isArrayEmpty is a javascript function which we create to check if an array is empty or not and it can use just passing an array to function it makes it easy to maintain and modify at ease.

Creating a JavaScript Prototype Function

So you’ll also check if array is empty in javascript by creating Array prototype in javascript. After creating a prototype you can easily check for empty array by just attaching a method to the array.

Now, look at the below example.

// isEmpty array prototype
Array.prototype.isEmpty = function(){
        return !Array.isArray(this) || !this.length
}

// create empty array in javascript
let empty_array = []

// check empty_array is Array and then check empty_array length
if(empty_array.isEmpty()){
  // either empty_array is empty
   console.log("Empty Array")
} else {
   // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")
}

// result => Empty Array

In the above example, we create a prototype like Array.isArray() and Array.length which can easily be implemented.

There is some js library which can reduce the development time of the developer. Which have certain functions which can check if array is empty in javascript

Check If Array is Empty In JavaScript Using Lodash _.isEmpty()

Lodash library contains a lot of good utility helper function. Lodash uses _ (underscore) as their reference to use lodash, you need include or import its a library like below code where we include in HTML Page.

you can also read: Remove Duplicates From Array Using Lodash

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
</head>

Now let’s implement lodash _.isArray() and _.isEmpty() function to check if array is empty.

// create empty array in javascript
let empty_array = []

// check empty is Array and then check isEmpty
if(_.isArray(empty_array) && _.isEmpty(empty_array)){

 // either empty_array is empty
   console.log("Empty Array")

} else {

 // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")
 // iterate an array
  
}
// result => Empty Array

So it’s easy to use a library to perform such a simple task using lodash library.

Using Underscore.js

Like lodash, we also have another library which is undercore.js it also uses _ as a reference. In order to use underscore.js, we need to include in an HTML header tag.

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>

Its an example is same as lodash because underscore also has same function _.isArray() and _.isEmpty()

// create empty array in javascript
let empty_array = []

// check empty is Array and then check isEmpty
if(_.isArray(empty_array) && _.isEmpty(empty_array)){

 // either empty_array is empty
   console.log("Empty Array")

} else {

 // if empty_array is a array and empty_array has a length
  console.log("Array is not empty")
 // iterate an array
  
}
// result => Empty Array

So there are a lot of useful libraries which are rich in a utility helper function. Which you can found out on the internet.

Conclusion :

As you can see there are many ways you can implement for how to check if array is empty in javascript

We have used only functions and functionality provide by JavaScript only like an Array.isArray() and Array.length and more.

And we have also used a library like lodash and underscore to get the same result.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

Leave a Reply

Your email address will not be published. Required fields are marked *