The Vanitas of Andy Warhol — 1976
The Vanitas of Andy Warhol — 1976

JS Arrays: To Be Empty, Or Not To Be Empty, That Is The Question

Checking whether an array is empty or not sounds like a simple task in any programming language…it is, but only if you understand the fundamentals

I am preparing for the first written assessment in Launch School and one of the topics in the study guide is array elements and how to determine if an array is empty. You might be wondering why is this an important question? Well, understanding that will help you to know what types of elements can exist in an array, how these elements can be accessed and also, how they can be added. These things are fundamental in writing from small to complex programs. Moreover, this knowledge will support you in identifying hidden bugs and in making decisions about how you can write your code.

There are several ways to recognise if an array is empty. However, we will focus on two of these options:

  1. using the property value — e.g. evaluates to true. We can access the value of the property and check if this value equals to .
  2. using the built-in method — e.g. evaluates to true. We can call this method and verify if any property keys are returned. If no property keys are returned, then the method return value is an empty array.

However, before going to more complicated examples. Let’s get started with some basics.

Arrays

Arrays in JavaScript are also objects. What are objects? According to MDN documentation are data types used to store keyed collections and more complex entities. In this array of strings what are the keys? The keys are the properties of the object, in this case, the indexes are the properties after translation to a string value — . However, it is important to notice that not all properties or keys are array indexes translated into a string value. The properties or keys can be non-unsigned integers as well, such as:

  • Non-numeric values e.g. , , .
  • Signed integer values e.g. , , .
  • Other objects e.g. — to make things a little more complicated.

The take away from these examples is that arrays in JavaScript are and therefore store data as key-value pairs. The data key can be the index of the array element which is implicitly converted to a string or it can be other non-unsigned integers. This behaviour results in something interesting: not all properties are elements in an array and this has important consequences on how both built-in methods and other properties interact with arrays — setting or accessing the array properties and their values.

length property

The fact that not all properties in an array are elements have interesting consequences. For example, the array can include keyed collection and still return when accessing its property .

The function is called on and passed the array as argument. On is used to add the key property with the integer as its value, since the property only returns the number of elements in that array, this example demonstrates that not all properties in an array are elements in JavaScript. The string is not an element, remember that only unsigned integers can be elements.

If we are interested in the number of elements in the array, then we can use the property to determine whether or not the array is empty. However, if the focus is to access the non-elements in the array - keys which are not an unsigned integer - we need to use to achieve that.

On the function is passed as argument, since the return value of is a new array with all the properties — including non-elements — of the argument , is what is output.

As per MDN documentation the built-in method only returns an array of a given object's own enumerable property names, and are not identified as enumerable. For this reason, an array can include elements and still return when calling the build-in method . Let’s have a look at this example:

On the global variable is initialised and assigned an empty array . On the property is assigned as value. This will add 3 empty items, which are omitted elements to . If you jump into the terminal and try to access any of these elements by typing ; or the return value is — sounds crazy, but these elements do not exist.

This example demonstrates that not everything — such, as these empty items — in an array is accessible to built-in methods, such as . This applies to the other built-in methods as well — ; and to quote a few. In doubt consult the documentation.

Moreover, it elucidates that the number of elements in the array does not necessarily reflect the of that array. Normally, the value of the length property determines the number of elements in the array. For example, if we call the property on the value will be returned — . However, when the array is "sparse" - and contains holes or empty items - the value of the length property is greater than the number of elements in the array.

If we are interested in the number of “gaps” as well as in the number of elements in the array, we can use to determine that answer. However, if we want to ignore these gaps and are only interested in the properties in the array - both elements and non-elements - we should use a built-in method such as to see whether the array is empty.

Final Thoughts

The level of abstraction required to master this subject is fascinating because complexity is hidden in the simplest ideas. Answering questions about fundamental concepts can sometimes feel like reasoning on a Shakespearean problem, where there are several layers of abstraction to reach the core. This is the case when going a layer down and trying to answer what is an array element in JavaScript or attempting to determine whether the array is empty or not. The answer to these questions is not always that obvious.

Software Engineer in tireless pursuit of improving my craft and in a journey to learn by sharing with the community.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store