Why JavaScript returns false when I compare with "===" two identical arrays

Question

So, I am studying arrays in JavaScript when I noticed something odd: comparing arrays with either "==" or "===" return false.

var arrayOne = ["0", "1", "2"];
var arrayTwo = ["A", "B", "C", "D"];
var palindrome = [1, 2, 3, 2, 1];

function invertArray(array){
  let result=[];
  for(let i = array.length-1; i>=0; i--){
    result.push(array[i]);
  }
 return result;
}

function isPalindrome(array){
  return array === invertArray(array);
}

console.log(invertArray(arrayOne));//[ '2', '1', '0' ]
console.log(invertArray(arrayTwo));//[ 'D', 'C', 'B', 'A' ]
console.log(isPalindrome(arrayOne));//false
console.log(palindrome);//[ 1, 2, 3, 2, 1 ]
console.log(invertArray(palindrome));//[ 1, 2, 3, 2, 1 ]
console.log(isPalindrome(palindrome));//Expected: true; got:false
console.log([1, 2, 3]===[1, 2, 3]);//Expected: true; got:false
console.log([1]===[1]);//Expected: true; got:false
console.log([1]==[1]);//Expected: true; got:false
console.log(['1']===['1']);//Expected: true; got:false
console.log(['1']==['1']);//Expected: true; got:false

So I guessed that I would have to check element by element.

function areEqual(x, y){
  let result= x.length === y.length;
  for(let i = 0; i<x.length-1; i++){
   result = result && x[i]===y[i];
  }
  return result;
}

console.log(areEqual(palindrome, invertArray(palindrome)));//true
console.log(areEqual(arrayOne, invertArray(arrayOne)));//false
console.log(areEqual([1], [1]));//true
console.log(areEqual([1], [1, 2]));//false
console.log(areEqual([1, 0], [0,1]));//false
console.log(areEqual([1], [0,1]));//false

But why is it required such a convolution?