Javascript: Why does my every() method return false when all the values of the array appear to meet the methods criteria?

Question

I am trying to understand why the every method I am using returns a false boolean value. Here is my code:

let box1 = document.querySelector(`.box1`);
let box2 = document.querySelector(`.box2`);
let box3 = document.querySelector(`.box3`);

let array = [box1.value, box2.value, box3.value];

box1.value = `X`;
box2.value = `X`;
box3.value = `X`;

array.every((el) => el === `X`));
// This returns false

Is there something I am misunderstanding about the every() method? It seems like the values for each element of the array satisfy the condition set by the every() method, so why does it return false?

Answer 1

Because you're changing box.value AFTER you've inserted it into the array.

let box1 = { value: 1 };
let box2 = { value: 2 };
let box3 = { value: 3 };

// since `value` points to a primitive
// that primitive is copied into this array
// so box1.value and array[0] are both pointing
// to an integer 1 but it's not the same integer!
// the value is the same but the location in memory is not
let array = [box1.value, box2.value, box3.value];

// this will only change the boxes
// but won't affect the `array`
box1.value = `X`;
box2.value = `X`;
box3.value = `X`;

// since the array contains a copy of each value
// from the box, the changes above only affect
// the boxes but not the array itself
console.log(array); // 1, 2, 3