bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/JavaScript/Objects, Classes, and Advanced Patterns
JavaScript•Objects, Classes, and Advanced Patterns

JavaScript Object Management

Property Management Methods

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)
// Adding or changing object properties
Object.defineProperties(object, descriptors)
// Accessing a Property
Object.getOwnPropertyDescriptor(object, property)
// Accessing Properties
Object.getOwnPropertyDescriptors(object)
// Returns all properties as an array
Object.getOwnPropertyNames(object)
// Accessing the prototype
Object.getPrototypeOf(object)

JavaScript Object.defineProperty()

The Object.defineProperty() method can be used to:

  • Adding a new property to an object
  • Changing property values
  • Changing property metadata
  • Changing object getters and setters

Syntax

Object.defineProperty(
object, property, descriptor
)

Adding a new Property

This example adds a new property to an object:

Example

// Create an Object: const person = { firstName: "John", lastName : "Doe", language : "EN"
};
// Add a Property Object.defineProperty(person, "year", {value:"2008"});

Changing a Property Value

Example

// Create an Object: const person = { firstName: "John", lastName : "Doe", language : "EN"
};
// Change a Property Object.defineProperty(person, "language", {value : "NO"});

Property Attributes

All properties have a name. In addition they also have a value.

The value is one of the property's attributes.

Other attributes are: enumerable, configurable, and writable.

These attributes define how the property can be accessed (is it readable?, is it writable?)

In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable).

( ECMAScript 5 has methods for both getting and setting all property attributes)

Changing Meta Data

The following property meta data can be changed:

writable : true // Property value can be changed
enumerable : true // Property can be enumerated
configurable : true // Property can be reconfigured
writable : false // Property value can not be changed
enumerable : false // Property can be not enumerated
configurable : false // Property can be not reconfigured

Getters and setters can also be changed:

// Defining a getter
get: function() { return language }
// Defining a setter
set: function(value) { language = value }

This example makes language read-only

Object.defineProperty(person, "language", {writable:false});

This example makes language not enumerable

Object.defineProperty(person, "language", {enumerable:false});

JavaScript getOwnPropertyNames()

The Object.getOwnPropertyNames() method can:

  • List object properties

Syntax

Object.getOwnPropertyNames(
object
)

List all Object Properties

This example gets all properties of an object:

Example

// Create an Object
const person = {
  firstName: "John", lastName : "Doe", language : "EN"
};
// Get all Properties Object.getOwnPropertyNames(person);

Object.getOwnPropertyNames() will also list properties that are not enumerable:

Example

// Create an Object
const person = {
  firstName: "John", lastName : "Doe", language : "EN"
};
// Set the language Property not enumerable Object.defineProperty(person, "language", {enumerable:false}); // Get all Properties Object.getOwnPropertyNames(person);

JavaScript Object.keys()

The Object.keys() method can:

  • List enumerable object properties

Syntax

Object.keys(
object
)

List Enumerable Object Properties

This example uses Object.keys() insted of Object.getOwnPropertyNames() :

Example

// Create an Object
const person = {
  firstName: "John", lastName : "Doe", language : "EN"
};
// Change the "language" Property Object.defineProperty(person, "language", {enumerable:false}); // Get all Enumerable Properties Object.keys(person);

The getOwnPropertyNames() method returns all properties.

The Object.keys() method returns all enumerable properties.

If you define object properties without enumerable:false , the two methods will return the same.

Adding Getters and Setters

The Object.defineProperty() method can also be used to add Getters and Setters:

Example

//Create an object
const person = {firstName:"John", lastName:"Doe"};
// Define a getter Object.defineProperty(person, "fullName", { get: function () {return this.firstName + " " + this.lastName;}
});

A Counter Example

Example

// Define object
const obj = {counter:0};
// Define setters Object.defineProperty(obj, "reset", { get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (i) {this.counter -= i;}
});
// Play with the counter: obj.reset; obj.add = 5; obj.subtract = 1; obj.increment; obj.decrement;

Prototype Properties

JavaScript objects inherit the properties of their prototype.

The delete keyword does not delete inherited properties, but if you delete a prototype property, it will affect all objects inherited from the prototype.

Advanced Chapters

JavaScript Object Definitions

JavaScript Object Advanced this

JavaScript Object Iterations

JavaScript Object Getters & Setters

JavaScript Object Management

JavaScript Object Protection

JavaScript Object Prototypes

JavaScript Object Reference

Previous

JS Temporal Compare

Next

JavaScript Temporal Conversion

This chapter

Overview
123

Lessons

539m

Read time

1. JavaScript Objects2. JavaScript Temporal Tutorial3. JavaScript Loops4. JavaScript Advanced Functions5. JavaScript Objects6. JavaScript Temporal Intro7. JavaScript Iterables8. JavaScript Function Definitions9. JavaScript Object Properties10. JavaScript Temporal vs Date11. JavaScript Iterators12. JavaScript Callbacks13. JavaScript Object Methods14. JavaScript Temporal Duration15. JavaScript Generators16. The JavaScript this Keyword17. JavaScript this Keyword18. JavaScript Temporal Instant19. JavaScript Function call()20. JavaScript Display Objects21. JavaScript PlainDateTime22. JavaScript Function apply()23. JavaScript Object Constructors24. JavaScript Temporal PlainDate25. JavaScript Function bind()26. JavaScript PlainYearMonth27. Self-Invoking Functions28. JavaScript PlainMonthDay29. JavaScript Closures30. JavaScript Temporal PlainTime31. JavaScript Objects - Advanced32. JavaScript ZonedDateTime33. JavaScript Object Definitions34. JavaScript Temporal Now35. this in JavaScript Objects36. JS Temporal Arithmetic37. JavaScript Object Iterations38. JS Temporal Differences39. JavaScript Object Accessors40. JS Temporal Compare41. JavaScript Object Management42. JavaScript Temporal Conversion43. JavaScript Object Protection44. Temporal Display Formats45. JavaScript Object Prototypes46. JavaScript Temporal Mistakes47. JavaScript Classes48. Migrate from Date to Temporal49. JavaScript Class Inheritance50. Temporal Standards51. JavaScript Static Methods52. Asynchronous JavaScript53. Asynchronous Programming54. JavaScript Timeouts55. JavaScript Callbacks56. JavaScript Promises57. JavaScript async and await58. JavaScript fetch API59. Debugging Async JavaScript60. JavaScript Modules61. JavaScript Modules Export62. JavaScript Modules Import63. JS Module Namespace64. JavaScript Dynamic Modules65. JavaScript Meta Programming66. JavaScript Reflect67. JavaScript Proxy68. JavaScript Typed Arrays69. Typed Array Methods70. JavaScript ArrayBuffer71. JavaScript DataView72. JavaScript Atomics73. JavaScript HTML DOM Navigation74. JavaScript HTML DOM Elements (Nodes)75. JavaScript HTML DOM Collections76. JavaScript HTML DOM Node Lists77. JavaScript Window - The Browser Object Model78. JavaScript Window Screen79. JavaScript Window Location80. JavaScript Window History81. JavaScript Window Navigator82. JavaScript Popup Boxes83. JavaScript Timing Events84. JavaScript Cookies85. Web APIs - Introduction86. JavaScript Fetch API87. Web Geolocation API88. Web History API89. Pointer Events API90. Web Storage API91. JavaScript Validation API92. Web Workers API93. AJAX Introduction94. AJAX - The XMLHttpRequest Object95. AJAX - XMLHttpRequest96. AJAX - Server Response97. AJAX XML Example98. AJAX PHP Example99. AJAX ASP Example100. AJAX Database Example101. XML Applications102. JavaScript JSON103. JSON Syntax104. JSON vs XML105. JSON Data Types106. JSON.parse()107. JSON.stringify()108. JSON Object Literals109. JSON Array Literals110. JSON PHP111. JSON HTML112. JSONP113. JavaScript / jQuery DOM Selectors114. JavaScript / jQuery HTML Elements115. JavaScript / jQuery CSS Styles116. JavaScript / jQuery HTML DOM117. JavaScript Graphics118. HTML Canvas119. Plotly.js120. Chart.js121. Google Chart122. D3.js123. JavaScript Interview Preparation

On this page

Property Management MethodsJavaScript Object.defineProperty()Adding a new PropertyChanging a Property ValueProperty AttributesChanging Meta DataJavaScript getOwnPropertyNames()List all Object PropertiesJavaScript Object.keys()List Enumerable Object PropertiesAdding Getters and SettersA Counter ExamplePrototype Properties