Table of Contents
This tutorial simplifies a check if JavaScript array is empty or exists by explaining critical concepts like primitives vs references, Boolean logic, and falsiness vs truthiness. It then walks you through practical examples to check if an array is empty or exists.
Let's get started.
Understand the key concepts to ease the check if JavaScript array is empty or exists
Primitives vs Objects
At a high level, we can classify JavaScript data types into primitives and references.
Primitives are the simplest, immutable data types like numbers, strings, and booleans. On the other hand, references pack multiple primitives.
For example, an array, a function, or an object could house a string, boolean, or number.
// An array
const array = [59, "FivetyNine", true]
// An object
const object = { age: 59, quote: "FivetyNine", lovesTenis: true }
At an intermediate level, all primitives are objects because they store key-value pairs.
For example, an array stores values referenced by indices (keys). As a result, we can conclude that an array is a special type of object that organizes primitives with indices.
More excitingly, the typeof
operator recognizes an array as an object.
const a = 3
const b = 'S'
const c = true
const d = {a: 3, b: 'S', c: true}
const e = [a, b, c, d]
console.log(typeof a) // number
console.log(typeof b) // string
console.log(typeof c) // boolean
console.log(typeof d) // object
console.log(typeof e) // object
On a lower level, everything in JavaScript is an object; your custom variables get piped into an object: an instance of a class or constructor function.
For instance, a string
is a descendant object of the String()
constructor function. Likewise, true
is an object linked to the Boolean()
constructor.
Knowing how effectively apply the Boolean()
constructor is a massive step toward a check if JavaScript array is empty or exists.
The Boolean Logic
The Boolean logic states that something either exists or not. Existence is represented by true
, while nonexistence is denoted by false
. Therefore, we can store a variable as either true
or false
.
const c = true // equates to true
const isGreaterThan = 5 < 2 // equates to false
We can explicitly or implicitly check a condition in a control flow.
// explicit comparison
if (isGreaterThan === true) console.log("Yes") // Yes
// implicit comparison
if (isGreaterThan) console.log("Yes") // Yes
Boolean logic extends into falsy and truthy values.
Falsy vs Truthy values
A falsy value is associated with emptiness or false in the Boolean logic.
null
, undefined
, NaN
, false
, zero (0
, -0
, or 0n
), an empty string (""
) or an empty array ([]
) expresses emptiness.
We can confirm an expression's emptiness by piping its value into the Boolean()
constructor.
const a = null
const b = undefined
const c = 0
const d = -0
const e = ""
const f = []
const g = NaN
const h = 0n
const isFalsy0 = Boolean(h) // false
const isFalsy1 = Boolean(h) // false
const isFalsy2 = Boolean(h) // false
const isFalsy3 = Boolean(h) // false
const isFalsy4 = Boolean(h) // false
const isFalsy5 = Boolean(h) // false
const isFalsy6 = Boolean(h) // false
const isFalsy7 = Boolean(h) // false
const isFalsy8 = Boolean(h) // false
Any value that is not falsy is truthy. For example, an array with elements is truthy.
const thisArray = [19, 29, 59, 79, 89]
const isNotEmpty = Boolean(thisArray)
console.log(isNotEmpty) // true
Now that you understand the concepts to verify the emptiness and existence of an array, let's see how to check if JavaScript array is empty or exists.
Setup Lab Environment
Launch the terminal and create the project directory with four .js
files.
mkdir project_directory && cd project_directory
touch example1.js example2.js example3.js example4.js
We will the files as follows;
example1.js
: Check if an array exists
example2.js
: Check whether the given variable is an array
example3.js
: Check if an array is empty
example4.js
: check if JavaScript array is empty or exists using one expression
In the following section, you can open each of the files using a preferred code editor like Visual Studio Code.
Practical examples of check if JavaScript array is empty or exists
Example~1: Check if an JS array exists
It would be best to check if the target array exists before verifying if it is empty. We can check the existence of an array by comparing it to booleans.
Input
const array = []
const arrayExists = array ? true : false
console.log(arrayExists)
Using the ternary operator, we check the existence of the array
variable. We then store the result in the arrayExists
variable before logging it on the console.
Output
true
It is true true
we have defined the array
variable. So, the array array
exists.
Example~2: Check whether the given variable is an array
Apart from knowing whether the array whose emptiness we want to check exists, we may want to know if the given variable is exactly an array, not another type of object.
We can use the isArray()
method of the Array()
constructor function's instance.
Input
const areYouAnArray = []
const areYouAnArray1 = {}
const existsAndOfArrayDataStructureType = Array.isArray(areYouAnArray)
const existsAndOfArrayDataStructureType1 = Array.isArray(areYouAnArray1)
console.log(existsAndOfArrayDataStructureType, existsAndOfArrayDataStructureType1)
Output
true false
Although both areYouAnArray
and areYouAnArray1
are objects, areYouAnArray
is an array, whereas areYouAnArray1
is not.
Example~3: Check if an JS array is empty
The length
property plays a massive role in checking if an array is empty.
Input
const array = []
const isNotEmpty = array.length ? true : false
console.log(isNotEmpty)
const isNotEmpty1 = array.length > 0 ? true : false
console.log(isNotEmpty1)
const isNotEmpty2 = Boolean(array?.length);
console.log(isNotEmpty2)
isNotEmpty
, isNotEmpty1
, and isNotEmpty2
check the falsiness in the respective array.length
's expression.
Output
false
false
false
array.length
equals zero (0
), which is a falsy value. array.length > 0
is an explicit comparison checking whether the array.length
(0
) is greater than zero (0
). Definitely, that is false false
!
Lastly, we check the truthiness or falsiness of the outcome of the optional chaining (array?.length
) piped into the Boolean()
constructor, which is zero (0
). And zero (0
) is a falsy value.
Example~4: Check if JavaScript array is empty or not using one expression
Instead of separately checking whether an array exists or is empty, we can combine the two checks into a giant expression.
The check is possible via comparison operators like ||
(or) and &&
(and). Here, we use the left-hand side of the equation to check for existence, while the right-hand side checks whether the array is empty.
Besides, we can use the optional chaining ?.
operator.
Input
const array = []
const existsAndNotEmpty = array && array.length > 0 ? true : false
console.log(existsAndNotEmpty)
const existsAndNotEmpty1 = array === undefined && array.length === 0 ? true : false
console.log(existsAndNotEmpty1)
const existsAndNotEmpty2 = array?.length ? true : false
console.log(existsAndNotEmpty2)
Output
false
false
false
Hint: Negative has higher precedence than positive.
In existsAndNotEmpty
, the array exists BUT its length (array.length
) is not greater than zero (0
).
In existsAndNotEmpty1
, the array exists, so the array === undefined
expression is NOT true false
. However, it is true true
that the array's length equates to zero (array.length === 0
).
In existsAndNotEmpty2
, the output of array?.length
is falsy.
Conclusion
The first step toward check if JavaScript array is empty or exists is understanding the roots of arrays. You should then comprehend the Boolean logic and falsiness.
Lastly, as shown in this tutorial, you can separately check for an array's existence and emptiness or create one expression accommodating both checks.
Related Keywords: javascript array is empty, array isempty javascript, array isempty js, js array isempty, js check if array is empty, javascript check if array is empty, check if array is empty javascript