Check if Array are equal - Javascript

Question

I have an array, and i need to check if Array[A] is same or not with Array[B]

Here's my array in console:

Array A

Array B

and when i console.log, i got false

and here's my code to check the array:

const [listA, setListA] = useState([
    { id: 1, color: "white" },
    { id: 2, color: "red" },
    { id: 3, color: "red" },
    { id: 4, color: "blue" },
    { id: 5, color: "red" },
    { id: 6, color: "red" },
    { id: 7, color: "red" },
    { id: 8, color: "blue" },
    { id: 9, color: "red" },
    { id: 10, color: "red" },
    { id: 11, color: "red" },
    { id: 12, color: "blue" },
    { id: 13, color: "red" },
    { id: 14, color: "red" },
    { id: 15, color: "red" },
    { id: 16, color: "red" },
  ]);

  const [listB, setListB] = useState([
    { id: 1, color: "white" },
    { id: 2, color: "red" },
    { id: 3, color: "red" },
    { id: 4, color: "blue" },
    { id: 5, color: "red" },
    { id: 6, color: "red" },
    { id: 7, color: "red" },
    { id: 8, color: "blue" },
    { id: 9, color: "red" },
    { id: 10, color: "red" },
    { id: 11, color: "red" },
    { id: 12, color: "blue" },
    { id: 13, color: "red" },
    { id: 14, color: "red" },
    { id: 15, color: "red" },
    { id: 16, color: "red" },
  ]);

const checkArray = async (newArr) => {
    console.log(listA === listB);
    // i got false

    // another attempt:
     const is_same =
      listA.length == listB &&
      listA.every(function (element, index) {
        return element === listB[index];
      });
     console.log(is_same)
    // i got false
  };

to be honest, i still didn't know what is wrong,

but when i do check listA === listA, the console said true

[Please do not upload images of code/errors when asking a question.](//meta.stackoverflow.com/q/285551) — 0stone0, Oct 06 '22 at 11:47
The reason why `element === listB[index]` returns false is because you are comparing _objects_. Even when two objects are defined the same way, as long as they are _not the same object_, comparing them will return false. — Terry, Oct 06 '22 at 11:49
so basicly i need to specify the object (in this case colors) right @Terry? — Haksatrya Bhaswara, Oct 06 '22 at 11:57

Giorgi Moniava · Accepted Answer · 2022-10-06T11:53:02.720

1

You need to change it to

 const is_same =
      listA.length == listB.length &&
      listA.every(function (element, index) {
        return element.color === listB[index].color;
      });

And it seems OP is unaware in JS if you do

{} === {} // or use [] instead

this is false, because the references are compared.

edited Oct 06 '22 at 11:53

answered Oct 06 '22 at 11:43

Giorgi Moniava

27,046
9
53
90

Uhmn something about duplicate questions? – 0stone0 Oct 06 '22 at 11:47
This answer is correct, but i still doesnt understand why, if i check all the object with all inside of it (ids, and colors), why i got false? but when i try to check only color, it become true? – Haksatrya Bhaswara Oct 06 '22 at 11:47
@0stone0 While duplicate might answer the question, it not always shows what is *wrong* with current implementation of OP. So not sure suggesting duplicate is right in such cases. – Giorgi Moniava Oct 06 '22 at 11:48
@HaksatryaBhaswara I don't understand your question but you were missing `color` property. And `length`. – Giorgi Moniava Oct 06 '22 at 11:48
The very same reason why `{a: 1} === {a: 1}` will return false: that is the problem you're running into: as long as two objects are not pointing to the same reference, they are considered different. – Terry Oct 06 '22 at 11:50
Holly molly, you are right @Terry, thanks for explain it – Haksatrya Bhaswara Oct 06 '22 at 11:56

Check if Array are equal - Javascript

1 Answers1