Set Trap execute for two times - JS Proxy

Question

Im working with proxies in js, but something is weird =>

let _usernames = [];

_usernames = new Proxy(_usernames, {
  set(target, prop, val) {
    console.count(); //this execute for two times!
    if(typeof val === 'string') {
      target[prop] = val;
      return true;
    } else {
      return false;
    }
  }
});

_usernames.push('Manuel');

The Set trap should call only once when i push to the array, but it executed twice.

And there is an error in the console, when i push to array =>

Uncaught TypeError: proxy set handler returned false for property '"length"'

How can i fix this and what's wrong?

Answer 1

Calling Array#push causes set to be called two times:

1. target=[], prop=0, val=Manuel: Adds a new value to an index
2. target=["Manuel"], prop=length, val=1: Updates length of array

In your case, the second call is returning false since the length value is numeric.

A possible solution:

let _usernames = [];

_usernames = new Proxy(_usernames, {
  set(target, prop, val) {
    console.log(target, prop, val);
    if(typeof val === 'string' || prop === 'length') {
      target[prop] = val;
      return true;
    } else {
      return false;
    }
  }
});

_usernames.push('Manuel');