JavaScript Handler getOwnPropertyDescriptor() Method

The handler.getOwnPropertyDescriptor() is a method in JavaScript proxy API.It is used to retrieve property descriptors, that provide information like whether the property is writable, configurable. This method takes two arguments: the target object and the property name. It returns the property's descriptor if it exists; if not, it returns undefined. This method is crucial for property access operations on proxy objects, enabling control over property behavior. JavaScript applications can be made more flexible and secure by implementing various functionalities such as validation, access control, and dynamic property generation within proxy objects.

Syntax

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

new Proxy(target, {
   getOwnPropertyDescriptor(target, prop) {}
});

Parameters

target − It holds the target object.
prop − It holds the name of the property whose description should be retrieved.

Return value

This method returns an object or undefined.

Example 1

Let's look at the following example, where we are going to use the handler.getOwnPropertyDescriptor() and logging the property access.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   car: 'Mustang',
   model: 2024
};
const b = {
   getOwnPropertyDescriptor(target, prop) {
      return Object.getOwnPropertyDescriptor(target, prop);
   }
};
const c = new Proxy(a, b);
document.write(c.car);
</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 use the handler.getOwnPropertyDescriptor() on the non-existing property and observing the output.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {
   bike: 'TRIUMPH',
   model: 2023
};
const b = {
   getOwnPropertyDescriptor(target, prop) {
      return Object.getOwnPropertyDescriptor(target, prop);
   }
};
const c = b.getOwnPropertyDescriptor(a, 'name');
document.write(c);
</script>
</body>
</html>

Output

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

Example 3

In the following example, we are going to define a non-enumerable property 'year' on the object and using the getOwnPropertyDescriptor() to retrieve its descriptor.

<html>
<style>
body {
   font-family: verdana;
   color: #DE3163;
}
</style>
<body>
<script>
const a = {};
Object.defineProperty(a, 'year', {
   value: 'TUTORIALSPOINT',
   enumerable: false,
});
const b = {
   getOwnPropertyDescriptor(target, prop) {
      return Object.getOwnPropertyDescriptor(target, prop);
   }
};
const c = b.getOwnPropertyDescriptor(a, 'year');
document.write(JSON.stringify(c));
</script>
</body>
</html>

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

Print Page