Check if an array is empty or exists

Check if an array is empty or exists

When the page is loading for the first time, I need to check if there is an image in image_array and load the last image.
Otherwise, I disable the preview buttons, alert the user to push new image button and create an empty array to put the images;
The problem is that image_array in the else fires all time. If an array exists – it just overrides it, but alert doesn’t work.
if(image_array.length > 0)
$(‘#images’).append(‘‘);
else{
$(‘#prev_image’).attr(‘disabled’, ‘true’);
$(‘#next_image’).attr(‘disabled’, ‘true’);
alert(‘Please get new image’);
var image_array = [];
}

UPDATE
Before loading html, I have something like this:


Solutions/Answers:

Solution 1:

if (typeof image_array !== 'undefined' && image_array.length > 0) {
    // the array is defined and has at least one element
}

Your problem may be happening due to a mix of implicit global variables and variable hoisting. Make sure you use var whenever declaring a variable:

<?php echo "var image_array = ".json_encode($images);?>
// add var  ^^^ here

And then make sure you never accidently redeclare that variable later:

else {
    ...
    image_array = []; // no var here
}

Solution 2:

To check if an array is either empty or not

A modern way, ES5+:

if (Array.isArray(array) && array.length) {
    // array exists and is not empty
}

An old-school way:

typeof array != "undefined"
    && array != null
    && array.length != null
    && array.length > 0

A compact way:

if (typeof array != "undefined" && array != null && array.length != null && array.length > 0) {
    // array exists and is not empty
}

A CoffeeScript way:

if array?.length > 0

Why?

Case Undefined
Undefined variable is a variable that you haven’t assigned anything to it yet.

let array = new Array();     // "array" !== "array"
typeof array == "undefined"; // => true

Case Null
Generally speaking, null is state of lacking a value. For example a variable is null when you missed or failed to retrieve some data.

array = searchData();  // can't find anything
array == null;         // => true

Case Not an Array
Javascript has a dynamic type system. This means we can’t guarantee what type of object a variable holds. There is a chance that we’re not talking to an instance of Array.

supposedToBeArray =  new SomeObject();
typeof supposedToBeArray.length;       // => "undefined"

array = new Array();
typeof array.length;                   // => "number"

Case Empty Array
Now since we tested all other possibilities, we’re talking to an instance of Array. In order to make sure it’s not empty, we ask about number of elements it’s holding, and making sure it has more than zero elements.

firstArray = [];
firstArray.length > 0;  // => false

secondArray = [1,2,3];
secondArray.length > 0; // => true

Solution 3:

How about (ECMA 5.1):

if(Array.isArray(image_array) && image_array.length){
  // array exists and is not empty
}

Solution 4:

This is what I use. The first condition covers truthy, which has both null and undefined. Second condition checks for an empty array.

if(arrayName && arrayName.length > 0){
    //do something.
}

or thanks to tsemer’s comment I added a second version

if(arrayName && arrayName.length)

Then I made a test for the second condition, using Scratchpad in Firefox:

var array1;
var array2 = [];
var array3 = ["one", "two", "three"];
var array4 = null;

console.log(array1);
console.log(array2);
console.log(array3);
console.log(array4);

if(array1 && array1.length){
  console.log("array1! has a value!");
}

if(array2 && array2.length){
  console.log("array2! has a value!");
}

if(array3 && array3.length){
  console.log("array3! has a value!");
}

if(array4 && array4.length){
  console.log("array4! has a value!");
}

Then the results:

undefined

[]

[“one”, “two”, “three”]

null

and the final test that shows

if(array2 && array2.length){

is the same as

if(array2 && array2.length > 0){

array3! has a value!

Solution 5:

You should use:

  if (image_array !== undefined && image_array.length > 0)

Solution 6:

If you want to test whether the image array variable had been defined you can do it like this

if(typeof image_array === 'undefined') {
    // it is not defined yet
} else if (image_array.length > 0) {
    // you have a greater than zero length array
}