How to use built-in Proxy object in javascript

This content originally appeared on DEV Community and was authored by Gajanan Patil

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'}

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

You can play with the above code here :-


    // 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'}

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

This content originally appeared on DEV Community and was authored by Gajanan Patil

Print Share Comment Cite Upload Translate Updates

APA

Gajanan Patil | Sciencx (2021-12-18T16:02:57+00:00) How to use built-in Proxy object in javascript. Retrieved from https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/

MLA

" » How to use built-in Proxy object in javascript." Gajanan Patil | Sciencx - Saturday December 18, 2021, https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/

HARVARD

Gajanan Patil | Sciencx Saturday December 18, 2021 » How to use built-in Proxy object in javascript., viewed ,<https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/>

VANCOUVER

Gajanan Patil | Sciencx - » How to use built-in Proxy object in javascript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/

CHICAGO

" » How to use built-in Proxy object in javascript." Gajanan Patil | Sciencx - Accessed . https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/

IEEE

" » How to use built-in Proxy object in javascript." Gajanan Patil | Sciencx [Online]. Available: https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/. [Accessed: ]

rf:citation

» How to use built-in Proxy object in javascript | Gajanan Patil | Sciencx | https://www.scien.cx/2021/12/18/how-to-use-built-in-proxy-object-in-javascript/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

💡 Post your cool ideas with Proxy in comments.

Related Posts

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