JavaScript Handler ownKeys() Method

The handler.ownKeys() is a method in JavaScript that is used in conjunction with the Proxy object. A Proxy is an object in JavaScript that encapsulates another object (the target) and allows you to modify and intercept operations on that object. This includes operations like getting and setting properties, calling functions, and more.

The handler.ownKeys() method is one of the traps that a Proxy handler object can define. When the Object.getOwnPropertyNames(), Object.getOwnPropertySymbols(), or Object.keys() methods are called on a target object that has been wrapped in a proxy, it enables you to intercept the process of obtaining the own property keys of that object. This method gives you strong control over how properties are enumerated on proxy objects, enabling you to customize property access and behavior according to your requirements.

Syntax

Following is the syntax of JavaScript handler.ownKeys() method −

new Proxy(target, {
   ownKeys(target) {}
});

Parameters

target − It holds the target object.

Return value

This method returns enumerable object.

Example 1

Let's look at the following example, where we are going to use the handler.ownKeys() that return all the keys.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   ownKeys(target) {
      return Reflect.ownKeys(target);
   },
};
const b = new Proxy({
   x: 1,
   y: 2
}, a);
document.write(JSON.stringify(Object.keys(b)));
</script>
</body>
</html>

Output

If we execute the above program, it will displays a text on the webpage.

Example 2

Consider another scenario where we are going to add a new property.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 1,
   y: 2,
};
let b = {
   ownKeys(a) {
      return Reflect.ownKeys(a).concat(["z"]);
   }
};
let c = new Proxy(a, b);
document.write(JSON.stringify(Object.getOwnPropertyNames(c)));
</script>
</body>
</html>

Output

On executing the above script, it will displays text on the webpage.

Example 3

In the following example, we are going to remove the property and using handler.ownKeys() to return all the keys.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   ownKeys(b) {
      return Reflect.ownKeys(b).filter(key => key !== 'y');
   },
};
const c = new Proxy({
   x: 1,
   y: 2
}, a);
document.write(JSON.stringify(Object.keys(c)));
</script>
</body>
</html>

When we execute the above code, it will generate an output consisting of the text displayed on the webpage.

Example 4

Following is the example, where we are going to use the handler.ownKeys() to change the order in which the keys are enumerated.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
let a = {
   x: 1,
   y: 2
};
let b = {
   ownKeys(a) {
      return ['y', 'x'];
   }
};
let c = new Proxy(a, b);
document.write(JSON.stringify(Object.keys(c)));
</script>
</body>
</html>

On executing the above script, the output window will pop up displaying the text on the webpage.

Print Page