Javascript Proxies, Russian Roulette and some Practical examples

For those of you who don’t know, es2015 came with a new feature named ‘proxy’
What proxy basically does is create an object that implements some traps ( middleware if you’d like), when accessing the object internal methods, like get, set and so on.

Proxy Terminology

Trap — is the built in object method we’re going to change.
when user will access the Trapped method, our function will handle it, instead of the standard implementation.
one example could be putting a trap on the object get method, implementing a new behaviour, now each time someone access the object properties with dot or brackets operators, our handler will meet it.

target — the object that the proxy acts upon

Handler — An object containing traps

Examples

Suppose we want to store readers and their reading count in an object,
where the reader name is the key, and reading count is the value

instead of implementing this logic over and

var readersCount = {}
somePageOnReadListener((readerName) => {
   if(!readersCount[readerName]){
      readersCount[readerName] = 1
   }
   else {
     readersCount[readerName]++
   }
 }
})
otherPageOnReadListener((readerName) => {
   if(!readersCount[readerName]){
      readersCount[readerName] = 1
   }
   else {
     readersCount[readerName]++
   }
 }
})

we could use proxies

// Here, set is the trap, and readersCount will be the target
var readersCount = new Proxy({}, {
    set: (target,prop,val) => {
      if (typeof val !== 'number){
         return
      }
      if (!target[prop]){
         target[prop] = 1
      } else {
         target[prop] = val 
     }
   }
})
somePageOnReadListener((readerName) => {
   readersCount[readerName]++
})
otherPageOnReadListener((readerName) => {
   readersCount[readerName]++
})

Proxies may be a good solution for this, since the logic in the proxy only handles redundant language specific “problems”.

this line of code

readersCount[readerName]++

merely does what we all expect it to do, only handling some language specific edge cases

Another Example

suppose we want to keep an object under track, and each time one of it’s properties change(only on the shallow object level), print it out

new Proxy({}, {
    set: (target,prop,val) => {
        if(tar[prop] !== val){
         console.log(`prev value ${target[prop]}: new value ${val}`)
        }
        tar[prop] = val
    }
})

Russian Roulette

Proxies can be fun too, here’s my implementation for a russian roulette game with your code using proxies.
basically, you wrap a certain object with the roulette function and in return you get a new object that allows you to access the object props, only if you’re lucky that is.

For more proxy goodies you can check out this git repo that contain a list of some cool and unique stuff implemented using proxies.

Beware of Proxies Magic

Since proxies return a new object, containing a new behaviour for well known language features, like getting, setting and so on, it can make the code HIGHLY unreadable.
I’d say that when using a proxy one should consider one of two possibilities.
1) declaring it in a way that won’t go unnoticed
2) use it to handle stuff like accessing undefined properties, simple string to number conversions, debugging and so on.