Why do empty JavaScript arrays evaluate to true in conditional structures?

Question

I was encountering a lot of bugs in my code because I expected this expression:

Boolean([]); to evaluate to false.

But this wasn't the case as it evaluated to true.

Therefore, functions that possibly returned [] like this:

// Where myCollection possibly returned [ obj1, obj2, obj3] or []
if (myCollection)
{
  // ...

} else
{
  // ...
}

did not do expected things.

Am I mistaken in assuming that [] an empty array should evaluate to false?

Also, Is this behavior consistent in all browsers? Or are there any gotchas there too? I observed this behavior in Google Chrome by the way.

Answer 1

From http://www.sitepoint.com/javascript-truthy-falsy/

The following values are always falsy:

• false
• 0 (zero)
• 0n (BigInt zero)
• "" (empty string)
• null
• undefined
• NaN (a special Number value meaning Not-a-Number!)

All other values are truthy, including "0" (zero in quotes), "false" (false in quotes), empty functions, empty arrays ([]), and empty objects ({}).

Regarding why this is so, I suspect it's because JavaScript arrays are just a particular type of object. Treating arrays specially would require extra overhead to test Array.isArray(). Also, it would probably be confusing if true arrays behaved differently from other array-like objects in this context, while making all array-like objects behave the same would be even more expensive.

Answer 2

You should be checking the .length of that array to see if it contains any elements.

if (myCollection) // always true
if (myCollection.length) // always true when array has elements
if (myCollection.length === 0) // same as is_empty(myCollection)

Answer 3

While [] equals false, it evaluates to true.

yes, this sounds bad or at least a bit confusing. Take a look at this:

const arr = [];
if (arr) console.log("[] is truethy");
if (arr == false) console.log("however, [] == false");

In practice, if you want to check if something is empty, then check the length. (The ?. operator makes sure that also null is covered.)

const arr = []; // or null;
if (!arr?.length) console.log("empty or null")

Answer 4

[]==false  // returns true

This evaluates to true, because of the Abstract Equality Algorithm as mentioned here in the ECMA Specification #Section 11.9.3

If you run through algorithm, mentioned above.

In first iteration, the condition satisfied is,

Step 7: If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).

Hence the above condition transforms to -> [] == 0

Now in second iteration, the condition satisfied on [] == 0:

Step 9: If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x) == y.

[] is an object, henceforth, on converting to primitive, it transforms to an empty string ''

Hence, the above condition transforms to -> '' == 0

In third iteration, condition satisfied, is:

Step 5: If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.

As we know, empty string, '' is a falsy value, hence transforming an empty string to number will return us a value 0.

Henceforth, our condition, will transform to -> 0 == 0

In fourth iteration, the first condition is satisfied, where the types are equal and the numbers are equal.

Henceforth, the final value of the [] == false reduces to 0 == 0 which is true.

Hope this answers your question. Otherwise, you can also refer this youtube video

Answer 5

I suspect it has something to do with discrete math and the way a conditional (if then) works. A conditional has two parts, but in the instance where the first part doesn't exist, regardless of the second part, it returns something called a vacuous truth.

Here is the example stated in the wikipedia page for vacuous truths

"The statement "all cell phones in the room are turned off" will be true when no cell phones are in the room. In this case, the statement "all cell phones in the room are turned on" would also be vacuously true"

The wikipedia even makes specific mention of JavaScript a little later.

https://en.wikipedia.org/wiki/Vacuous_truth#:~:text=In%20mathematics%20and%20logic%2C%20a,the%20antecedent%20cannot%20be%20satisfied.&text=One%20example%20of%20such%20a,Eiffel%20Tower%20is%20in%20Bolivia%22.

Answer 6

Also want to add, that all objects in JavaScript (arrays are objects too) are stored in memory as links and these links are always not null or zero, that's why Boolean({}) === true, Boolean([]) === true.

Also this is the reason why same objects (copied by value not the link) are always not equal.

{} == {} // false

let a = {};
let b = a; // copying by link
b == a // true

Answer 7

As in JavaScript, everything is an object so for falsy and empty, I use the below condition:

if(value && Object.keys(value).length){
    // Not falsy and not empty
}
else{
    // falsy or empty array/object
}

Answer 8

In JavaScript, both an empty string and an empty array are considered falsey values. They are treated as false when evaluated in a Boolean context. It seems there might be some confusion regarding this aspect.

To clarify, in JavaScript, the following values are considered falsey:

1. false: The boolean value false.
2. 0: The number zero.
3. NaN: Not-a-Number, which represents an invalid or unrepresentable value.
4. null: Represents the intentional absence of any object value.
5. undefined: Denotes a variable that has been declared but has not been assigned a value.
6. '': An empty string.
7. document.all: A historical artifact that is no longer recommended to use.

These values are coerced to false when encountered in a Boolean context, such as in an if statement or a conditional expression.

Now, it's worth noting that an empty array [] is still a valid JavaScript object and is considered a truthy value. However, when used in a Boolean context, such as in an if statement, the empty array is automatically coerced to its Boolean representation, which is false.

For example:

if ([]){
  console.log("This will not be executed.");
}

if (''){
  console.log("This will not be executed either.");
}

if (0){
  console.log("Nor this.");
}

if (null){
  console.log("Neither this.");
}

if (undefined){
  console.log("Or this.");
}

In the above code, none of the statements inside the if blocks will be executed because all the values inside the parentheses are considered falsey.

So, in JavaScript, both an empty string and an empty array are falsey values, meaning they are treated as false when evaluated in a Boolean context.