Different behaviors with this.length and arr.length in JavaScript

I don’t entirely understand why this.length and arr.length behave differently in JavaScript. Can anyone explain what this does that makes it different from explicitly calling the array?

const arr = ["1", "2", "3"]

arr[arr.length] = "4" // Will add to end of array
console.log(arr) // ["1", "2", "3", "4"]

arr[this.length] = "5" // Will behave strangely
console.log(arr) // ["1", "2", "3", "4", undefined: "5"]