[ES6] Use ES6 Proxies

Posted 2020-08-27 Answer1215

A javascript Proxy allows you to intercept operations performed on objects, arrays, or functions like property lookup, assignment, invocation, property deletion, and more to add custom behavior. In this lesson we look at how to intercept property lookup with the get "trap" that will allow us to get items starting from the end of the array with ease.

 

console.clear()

const characters = [
  ‘Harry Potter‘,
  ‘Ron Weasly‘,
  ‘Hermione Granger‘,
  ‘Nevel Longbottom‘,
  ‘Lavender Brown‘,
  ‘Scabbers‘,
  ‘Pigwidgeon‘,
]

const handler = {
  // target: the array itself
  // name: the index which passed in
 get(target, name) {
   
   // check whether index is 0,1...6
   if(name in target) {
     
     // if yes, then get the value back
     return Reflect.get(target, name)
   } else {
   
     // if not, then the name is -1, -2, -3...
     const index = Number(name);
     return Reflect.get(target, target.length + index)
   }
 }
}

const proxy = new Proxy(characters, handler)

console.log(proxy[3]); // Nevel Longbottom
console.log(proxy[0]); // Harry Potter
console.log(proxy[-2]); // Scabbers