Behavior of "Greater than" (and another inequality comparison operators) on arrays

Question

I couldn't find any description or any mention about how >, <, <= and >= operators behave while comparing two arrays in javascript.

The only trivial thing I could think of is that the two arrays are compared by both elements for each relative indexes, but after testing it - I didn't got the result I expected.

So how arrays are being compared?

Few test cases:

console.log([1] > [2]); // FALSE - ok
console.log([2] > [1]); // TRUE - ok
console.log([2] > [2]); // FALSE - ok
console.log([1,2] > [2,3]); // FALSE - In case two elements in each index are compared, and the answer is "If all >" - ok  
console.log([2,2] > [1,1]); // TRUE - In case two elements in each index are compared, and the answer is "If all >" - ok
console.log([1,2] > [1,1]); // TRUE - In case two elements in each index are compared, and the answer is "If all >" - Unexpected
// More cases with 3 elements:
console.log([1,2,1] > [1,2,2]); // FALSE
console.log([1,1,1] > [1,1,2]); // FALSE
console.log([1,3,1] > [1,3,0]); // TRUE
console.log([1,1,1] > [1,1,2]); // FALSE

The operands of `>` are converted to strings if they're not either strings or numbers. — Pointy, Jul 03 '20 at 14:27
Does this answer your question? [How to compare arrays in JavaScript?](https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript) — Mohammad Usman, Jul 03 '20 at 14:28
@MohammadUsman Hi man, the question you referred is talking about equality only. — SomoKRoceS, Jul 03 '20 at 14:45

Unmitigated · Answer 1 · 2020-07-03T14:54:13.703

4

The arrays are converted to strings by calling the Array#toString method before comparing, which acts the same as Array#join with no arguments.

String comparison works by comparing the code points of each character of both strings sequentially.

edited Jul 03 '20 at 14:54

answered Jul 03 '20 at 14:28

Unmitigated

76,500
11
62
80

2

Really it is the internal `toString()` method and `join()` is similar but allows arguments – charlietfl Jul 03 '20 at 14:31
Oh ok.. And then they are compared as normal two strings (based on the values of the Unicode code points they contain) ? Does it work the same with every other JS object? – SomoKRoceS Jul 03 '20 at 14:44
Because I would expect `{"a":"b"}>{"a":"a"}` to return true, but it results false. – SomoKRoceS Jul 03 '20 at 14:49
1

@SomoKRoceS Your question is about arrays, not objects. In any case, all objects become "[object Object]" when `toString` is called on them. – Unmitigated Jul 03 '20 at 14:56
@SomoKRoceS No problem. – Unmitigated Jul 03 '20 at 14:57

Yousaf · Accepted Answer · 2022-02-16T05:09:05.890

To understand the results of your test cases, you need to understand what happens when you compare arrays or any other object using any relational operator.

Long story short, objects are converted to strings before they are compared using any of the relational operator.

(skip to the end of the answer if you don't want to read about object-to-primitive conversion.)

ToPrimitive abstract operation

To convert objects to primitive values, javascript performs toPrimitive abstract operation that takes two arguments:

input: object that should be converted to a primitive value
preferredType: optional second argument that specifies the type that should be favoured when converting an object to a primitive value

For object to primitive conversion, toPrimitive abstract operation invokes another abstract operation known as OrdinaryToPrimitive

OrdinaryToPrimitive abstract operation

For object to primitive conversion, toPrimitive abstract operation invokes OrdinaryToPrimitive abstract operation with two arguments:

O: object that should be converted to a primitive value
hint: type that should be favored when converting the object to a primitive value

toPrimitive abstract operation sets the hint as following:

If the preferredType is a string, set hint to string
If the preferredType is a number, set hint to number
If preferredType is not specified, set hint to number

OrdinaryToPrimitive abstract operation uses following three algorithms to convert the object to a primitive value:

prefer-string: If hint is string, return a primitive value, preferring a string value, if conversion to string is possible
prefer-number: If hint is number, return a primitive value, preferring a number value, if conversion to number is possible
no-preference: This algorithm expresses no preference about what type of primitive value should be returned and lets the objects define what type of primitive value should be returned. If hint is default or there is no hint, this algorithm is used to convert an object to a primitive value.

It allows objects to override the default ToPrimitive behavior. Among the built-in objects, only Date and Symbol objects override the default ToPrimitive behavior. Date and Symbol objects implement this algorithm as prefer-string whereas all the other built-in objects implement this algorithm as prefer-number (Objects can override the default ToPrimitive behavior by implementing Symbol.toPrimitive method.)

All objects inherit two methods that are used to convert objects to primitive values. These two methods are:

.valueOf()
.toString()

object to primitive conversion involves calling above mentioned methods and the object to primitive conversion algorithms mentioned above, call these two methods in different order.

prefer-string

This algorithm first calls the .toString() method and if the resulting value is a primitive value, javascript uses the returned primitive value, even if it's not a string.

If the .toString() method doesn't exists or it returns an object, then .valueOf() method is called. If .valueOf() method returns a primitive value, then that value is used otherwise TypeError is thrown.

prefer-number

Only difference between this algorithm and prefer-string is that it first invokes .valueOf() method and then .toString() method.

no-preference

When there is no preferred type or hint or if the preferred type is default, by default, prefer-number algorithm is used.

Objects can override this behaviour and of all the built-in objects, only Date and Symbol override this default ToPrimitive conversion behaviour. Date and Symbol use prefer-string algorithm when there is no preferred type or a hint or the preferred type is default.

Now coming back to you question, relational operators, i.e. <, >=, <, <= can be used to compare strings as well as numbers. If either operand of these operators is an object, it is converted to primitive value using prefer-number algorithm. So when you compare two arrays using a relational operator, javascript tries to convert each array into a primitive value using prefer-number algorithm.

As mentioned above, prefer-number algorithm first calls .valueOf() method. If return value is a primitive value, that value is used, otherwise .toString() method is called.

Default implementation of .valueOf() method simply returns the object itself rather than returning a primitive value, so javascript always ends up calling .toString() method when it uses prefer-number algorithm.

When .toValue() method is called on an array, it simply returns the array on which this method was called. Javascript then calls .toString() method on this returned array. When .toString() method is called on an array, it converts all the elements of the array into strings and then joins all the strings together with commas in between each string.

So when you compare [1] > [2], you are comparing '1' > '2' and similarly [1,2] > [1,1] is converted to '1,2' > '1,1'.

As strings are compared by their unicode code points, '1' > '2' evaluates to false and '1,2' > '1,1' evaluates to true.

Behavior of "Greater than" (and another inequality comparison operators) on arrays

2 Answers2

ToPrimitive abstract operation

OrdinaryToPrimitive abstract operation

prefer-string

prefer-number

no-preference

Linked

Related