How to subclass Array in JavaScript and override 'length' getter and setter?

Question

I am trying to subclass JavaScript array and override 'length' getter and setter. This code is not working - it outputs nothing to the console because getter and setter are not called. How to fix this?

class MyArray extends Array {
  get length() {
    console.log('length getter')
    return super.length
  }

  set length(value) {
    console.log('length setter')
    super.length = value
  }
}

const arr = new MyArray()
arr.length = 1
console.log(arr.length)

Answer 1

length is a non-configurable property which is created inside the Array constructor (see here). So the only way to override it is to use Proxy.

class MyArray extends Array {

    constructor() {
        super()

        return new Proxy(this, {
            get: (target, property, receiver) => {
                if (property === 'length') {
                    console.log('length getter')
                }
                
                return Reflect.get(target, property, receiver)
            },
            set: (target, property, value, receiver) => {
                if (property === 'length') {
                    console.log('length setter')
                }
                
                return Reflect.set(target, property, value, receiver)
            },
        })
        
    }
}

Be cautious though - IT CAN DAMAGE THE PERFORMANCE OF YOUR PROGRAM.