Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to use JavaScript Object.defineProperty?
The Object.defineProperty() method allows you to define a new property or modify an existing property on an object with precise control over its behavior.
Syntax
Object.defineProperty(obj, prop, descriptor)
Parameters
- obj - The object on which to define the property
- prop - The name of the property to be defined or modified
- descriptor - An object that describes the property's attributes
Property Descriptor Attributes
The descriptor object can contain the following attributes:
- value - The value of the property
- writable - Whether the property can be changed (default: false)
- enumerable - Whether the property shows up in for...in loops (default: false)
- configurable - Whether the property can be deleted or modified (default: false)
Example: Basic Property Definition
<!DOCTYPE html>
<html>
<body>
<script>
const obj = {};
Object.defineProperty(obj, 'prop', {
value: 20,
writable: false
});
obj.prop = 10; // This won't change the value
document.write("Property value: " + obj.prop);
</script>
</body>
</html>
Example: Property with Getter and Setter
<!DOCTYPE html>
<html>
<body>
<script>
const person = {};
let name = '';
Object.defineProperty(person, 'fullName', {
get: function() {
return name;
},
set: function(value) {
name = value.toUpperCase();
},
enumerable: true,
configurable: true
});
person.fullName = 'john doe';
document.write("Full name: " + person.fullName);
</script>
</body>
</html>
Example: Non-enumerable Property
<!DOCTYPE html>
<html>
<body>
<script>
const user = { age: 25 };
Object.defineProperty(user, 'secret', {
value: 'hidden data',
enumerable: false
});
document.write("Age property: " + user.age + "<br>");
document.write("Secret property: " + user.secret + "<br>");
document.write("Keys: " + Object.keys(user)); // Only shows 'age'
</script>
</body>
</html>
Comparison of Descriptor Attributes
| Attribute | Default Value | Description |
|---|---|---|
value |
undefined | The property's value |
writable |
false | Can the value be changed? |
enumerable |
false | Shows in Object.keys() and for...in? |
configurable |
false | Can be deleted or redefined? |
Key Points
- Properties defined with
Object.defineProperty()are non-writable, non-enumerable, and non-configurable by default - You cannot use both
value/writableandget/setin the same descriptor - Useful for creating constants, computed properties, and controlling property behavior
Conclusion
Object.defineProperty() provides fine-grained control over object properties. Use it when you need to create properties with specific behaviors like read-only values or computed properties with getters and setters.
Advertisements
