How to interupt Array.push with Proxy?

Question

I want to add a side effect every when an array being pushed. For example, I want to add console.log:

var arr = [];
arr.push(1); // => I want it to work normally, and in addition, it logs 1 to the console

How to achieve that? I'm looking for a solution using Proxy and I have tried handler.get() and handler.apply() but still, can't figure it out.

you could hijack the Array prototype push function to do this, but I don't know why you can't just create another function that takes an array as a parameter, does something and then pushes to the array. — wootscootinboogie
– wootscootinboogie, Commented Jan 25, 2021 at 16:18
@wootscootinboogie Imagine I'm adding console.log just for the debugging purpose, and it's on an existing codebase, I want to modify the existing code base as little as possible. Let me try prototype. — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Jan 25, 2021 at 16:20
@wootscootinboogie From what you've suggested I can solve the problem now, do you want to write an answer? — Loi Nguyen Huynh
– Loi Nguyen Huynh, Commented Jan 25, 2021 at 16:28
Overriding base prototypes can be dangerous, everything on window including third-party code will use this. Strongly suggest creating a custom func. — lux
– lux, Commented Jan 25, 2021 at 17:00

Loi Nguyen Huynh · Accepted Answer · 2021-01-25 17:25:55Z

3

To directly answer your initial question...you need to return a closure from the get trap. To actually trap this, you would need to use proxy.push() instead of array.push(), though. For example:

const arr = [];

const arrProxy = new Proxy(arr, {
  get(target, prop) {
    if (prop === 'push') {
      return (...args) => {
        console.log(...args);
        return target[prop](...args);
      };
    }
    return target[prop];
  }
});

arrProxy.push('test');
arrProxy.push('test1', 'test2');

edited Jan 25, 2021 at 17:25

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

answered Jan 25, 2021 at 17:12

BCDeWitt

4,8232 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Loi Nguyen Huynh Over a year ago

What if what I want is console.log('test'), not console.log(1)

BCDeWitt Over a year ago

Well, array.push() can be provided more than one parameter. What would you like to happen if there's more than one value? If we assume there's only ever one parameter, you can just replace 1 with args[0] but I wouldn't recommend it. You most likely want to do console.log(args); (Updated answer)

Loi Nguyen Huynh · Accepted Answer · 2021-01-25 17:24:43Z

1

Here's the final answer that I'm comfortable with, it doesn't use Proxy by the way.

{

var arr = [];

// add push
arr.push = function (...items) {
  console.log(...items);
  Array.prototype.push.apply(this, items);
};

arr.push('test');
arr.push('test1');

// clean up the push
delete arr.push;

}

answered Jan 25, 2021 at 17:24

Loi Nguyen Huynh

10.2k5 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to interupt Array.push with Proxy?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related