Name: How to use built-in Proxy object in javascript
Rating: 4.5 (6070 reviews)
Author: gajananpp

How to use built-in Proxy object in javascript

Proxy object allows you to add custom get, set, delete behaviour on your existing object.

Here is one useful way of using Proxy, which will allow us to query json array with value rather than index.


// our array
const items = [
    {
        id: '123',
        name: 'phone'
    },
    {
        id: '789',
        name: 'tablet'
    },
    {
        id: '1011',
        name: 'laptop'
    }
]

// define custom hooks
const handlers = {
    get: (target, prop) => {
        return target.find(item => item.name === prop)
    }
}

// create proxy object
const customItems = new Proxy(items, handlers)

// now you can access our array with name instead of index 😀
console.log(customItems['laptop'])  
// logs => { id: '1011', name: 'laptop'}

For more in depth information check out MDN guide or comment below in case of doubt.

You can play with the above code here :-

How to use built-in Proxy object in javascript

💡 Post your cool ideas with Proxy in comments.

💡 Post your cool ideas with `Proxy` in comments.