Explain Handler Method in ES6

ES6 is referred to as ECMAScript 6. ES6 is the sixth version of ECMAScript, which was released in 2015 and is sometimes known as ECMAScript 2015. ECMAScript was developed to standardize JavaScript. Further in this article, we are going to discuss Handler Methods in ES6 in detail.

Introduction to ES6

As we Know ES6 (ECMAScript 6) is introduced for the standardization of JavaScript. It is a programming language and in ES6 we don't have to need to write a number of lines of code or we can say we have to write less and accomplish more. JavaScript follows the ES6 standard, which outlines all the requirements, specifics, and rules that must be included in a JavaScript implementation.

ES6 has several wonderful new features like Modules, template strings, class destruction, arrow functions, etc.

Handler Methods in ES6

In the above we have discussed the ES6, now we are going to discuss the Handler. Handler is an object and its properties are to function. Here function defines the behaviour of the proxy's actions when a task is executed on it.

In practically every way, an empty handler will provide a proxy that behaves precisely like the destination. You can alter some parts of the behaviour of the proxy by defining any one of a predefined group of functions on the handler object. For instance, by specifying get(), you can offer a customized property accessor for the target.

Syntax of Handler

We have seen the basics of the handler methods of ES6, now let’s move to the syntax of the handler method −

new Proxy(target, handler)

Here we are using Proxy Constructor() which is used to create a proxy object and take two parameters i.e. Target and Handler. Here Target defines as the object that Proxy will wrap. Any kind of object, such as a native array, a function, or even another proxy, can be the object. And Handler is defined as the object whose properties are operations that specify how the proxy will act in response to a request.

Different types of Handler methods In ES6

There are many handler methods in ES6 (ECMAScript 6). Now we will be going to discuss some of them. Handler Methods are frequently referred to as traps because handler methods block calls to the underlying target object.

handler.apply()

Through a proxy, the result of a function call is nothing else just the value returned by this method which is why this function is also known as the trap for the function call.

The syntax of this function is −

const cur = new Proxy(target_object, {
   apply: function(target_ojbect, thisArg, list_of_arguments){
   … // body of function
   }
});

Here target_object is the parameter that holds the target object, thisArg is used to call, and the list_of_arguments is the list of the arguments.

handler.construct()

The syntax of this function is −

const cur = new Proxy(target_object, {
   apply: function(target_ojbect, thisArg, list_of_arguments){
      … // body of function
   }
});

Here target_object is the parameter that holds the target object, thisArg is used to call, and the list_of_arguments is the list of the arguments.

handler.construct()

The syntax of this function is −

const cur = new Proxy(target_object, {
   construct: function(target_ojbect, list_of_arguments, newTarget){
      … // body of function
   }
});

handler.defineProperty()

The syntax of this function is −

const cur = new Proxy(target_object, {
   defineProperty: function(target_ojbect, property, newTarget){
      … // body of function
   }
});

handler.deleteProperty()

The syntax of this function is −

const cur = new Proxy(target_object, {
   deleteProperty: function(target_ojbect, property){
      … // body of function
   }
});

handler.get()

The syntax of this function is −

const cur = new Proxy(target_object, {
   get: function(target_ojbect, property, getter){
      … // body of function
   }
});

handler.getOwnPropertyDescriptor()

The syntax of this function is −

const cur = new Proxy(target_object, {
   getOwnPropertyDescriptor: function(target_ojbect, property){
      … // body of function
   }
});

handler.getPrototypeOf()

The syntax of this function is −

const cur = new Proxy(target_object, {
   getPrototypeOf: function(target_ojbect){
      … // body of function
   }
});

handler.has()

The syntax of this function is −

const cur = new Proxy(target_object, {
   has: function(target_ojbect, property){
      … // body of function
   }
});

handler.isExtensible()

The syntax of this function is −

const cur = new Proxy(target_object, {
   isExtensible: function(target_ojbect){
      … // body of function
   }
});

handler.ownKeys()

The syntax of this function is −

const cur = new Proxy(target_object, {
   ownKeys: function(target_ojbect){
      … // body of function
   }
});

handler.preventExtensions()

The syntax of this function is −

const cur = new Proxy(target_object, {
   preventExtensions: function(target_ojbect){
      … // body of function
   }
});

handler.set()

The syntax of this function is −

const cur = new Proxy(target_object, {
   set: function(target_ojbect, prop, value, getter){
      … // body of function
   }
});

handler.setPrototypeOf()

The syntax of this function is −

const cur = new Proxy(target_object, { setPrototypeOf: function(target_ojbect, prot){ … // body of function } });

Example

In the above, we have seen different types of handler methods in ES6. Now let's see an example of the handler in ES6 so that we can have a better understanding handler in ES6.

Here we are going to define the target and handler functions. The target function has two properties integer and string. The handler function that allows additional accesses to the target while returning a different value for num.

const target = {
   string: "This is the string",
   num: 567
};
const handler = {
   get: function (target, prop, receiver) {
   if (prop === "string") {
         return "This is the string"; // returning the value
      }
      return Reflect.get(...arguments); // returning the value
   }
};
const obj = new Proxy(target, handler);
console.log(obj.string); // "This is the string"
console.log(obj.num); // "567"

In the above code, first we have defined the object target which will contain the string and a number. Then we have defined another object handler that will contain the handler event get and a function. After the handler object we have defined the object that will contain the object of the Proxy and tried to print the values contained in the object that is string and number.

Conclusion

In this article we have learned ES6 (ECMAScript 6) is introduced for the standardization of JavaScript. It is a programming language and in ES6 we don't have to need to write a number of lines of code or we can say we have to write less and accomplish more. Handler Methods are frequently referred to as traps because handler methods block calls to the underlying target object.