Search code examples
javascriptes6-proxy

Only add even numbers to Array using JavaScript Proxy


I'm learning JavaScript Proxy .

By using set trap i only want to add even number to Array. But every time throw

Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'length'

Here is my code example.

//Only even numbers will be added here. We are using Js Proxy

let evenNumbers = [];

evenNumbers = new Proxy(evenNumbers, {
    set(target, p, value, receiver) {
        if ( (value % 2) === 0 ) {
            target[p] = value;
            return true
        }else {
            return false;
        }

    }
});

evenNumbers.push(2);


Solution

  • You neet to return true for both cases, because

    Return value

    The set() method should return a boolean value.

    • Return true to indicate that assignment succeeded.
    • If the set() method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.

    push calls the proxy twice, one by pushing the value and another times to change the length property. To avoid unnecessary more action whithin in this proxy, you could exit early with this unwanted property.

    let evenNumbers = [];
    
    evenNumbers = new Proxy(evenNumbers, {
        set (target, p, value, receiver) {
            if (p === 'length') return true; // exclude this property
            if (value % 2 === 0) {
                target[p] = value;
            }
            return true;
        }
    });
    
    evenNumbers.push(2);
    console.log(evenNumbers.length); // 1
    evenNumbers.push(3);
    console.log(evenNumbers.length); // Still 1
    console.log(evenNumbers);        // [ 2 ]