How Do I Compare Arrays In Javascript?

Can someone please describe the outcome of these expressions? [1, 2, 4] < [1, 2, 5] // true [1, 3, 4] < [1, 2, 5] // false [1, 2, 3] === [1, 2, 3] // false [1

Solution 1:

Equality =

[1, 2, 3] == [1, 2, 3]

is described under The Abstract Equality Comparison Algorithm, which basically says

(if x or y are primitives, compare them, otherwise...)
Returntrueif x and y refer to the same object. Otherwise, returnfalse.

Since different object literals always represent different objects, even if the content is the same, the above comparison fails.

Relational operators < >

Relative comparisons are different from equality. When you use < or >, arrays are compared as strings.

[1, 2, 4] < [1, 2, 5]

The Abstract Relational Comparison Algorithm converts both operands to primitives. If an operand is an object, ToPrimitive calls [[DefaultValue]] which in turn is the same as obj.valueOf().toString(). Since valueOf of an object is the object itself, the whole thing boils down to

"1,2,4" < "1,2,5"

A common assumption that arrays are compared element-wise is not true:

[10,1,3] < [101,5]// false

Note that valueOf can be overridden to affect the behavior of relational operators:

> a = [1,2,3]
[1, 2, 3]
> a < [1,2,4]
true
> a.valueOf = function() { return'zzz' }
function () { return'zzz' }
> a < [1,2,4]
false

Solution 2:

In JavaScript almost everything is an Object. There are primitive types which auto-box between primitive and Object version as needed.

When you compare Objects in JavaScript, you are actually comparing if they are the same reference(e.g point to the same memory address). Proof here

var a = [1, 2, 3];
 b = a;
 b.push(5);
 console.log(a); // 1, 2, 3, 5

In this case a == b or a === b will yield true. If I want to compare two separate arrays, then I need to loop through them and compare element by element.

In the following case, I can use a trick though. Live demo

var x = [1, 2, 3];
var y = [1, 2, 4];
var z = [1, 2, 3];
varequals = x.join("").localeCompare(y.join("")) == 0; //x with yvar equals2 = x.join("").localeCompare(z.join("")) == 0; //x with z
document.body.innerHTML += equals + "<br />";
document.body.innerHTML += equals2 + "<br />";

In your weird case

Array([],null,undefined,null) == ",,,";

In JavaScript the == operator will perform all the type casts/conversions it can perform to check for equality. It will try to compare a String with String, at which point the left hand side, the Array will be converted to a String using a simple toString() call!

Look here, I guess the answer is now obvious.

Solution 3:

[1, 2, 3] === [1, 2, 3]   // false
[1, 2, 3] ==  [1, 2, 3]   // false

Arrays are objects in JavaScript and therefore compared by reference (regardless whether with strict or typecasting equality). Two distinct (even if similar) literals always evaluate to distinct objects, which will never equal. To cite the spec,

[If both x and y are of type Object, then] return true if x and y refer to the same object. Otherwise, return false.

---

[1, 2, 4] < [1, 2, 5]// true
…

JavaScript's comparison operators do always cast their arguments to primitive values (and then to strings or numbers if needed). On objects, first .valueOf() then .toString() is tried. Arrays will become stringified, and for your simple example "1,2,4" indeed is smaller than "1,2,5". It would not work for complex objects, strings that contain commata or even for [12] vs [2].

Solution 4:

That's how the equality algorithm has been specified (sec 11.9.3):

The comparison x == y, where x and y are values, produces true or false. Such a comparison is performed as follows:

1. If Type(x) is the same as Type(y), then
   • [...]
   • Return true if x and y refer to the same object. Otherwise, return false.

So the following will return true and all other equality comparisons will return false

var x = [1,2,3];
return x == x;