The defineProperty() and defineProperties() are methods of the JavaScript Object class that can be used to add and modify properties dinamicaly directly on an object.


defineProperty()

defineProperty() - Defines a new property, or modifies an existing property of an object, and returns the object.

Syntax:
Object.defineProperty(obj, prop, {
 value: Prop_Value,
 configurable: true,
 enumerable: true
})
- obj - The object on which to define the property.
- prop - The name of the property to be defined or modified.
- Prop_Value - The value of the property specifieed to 'prop' parameter.
- configurable - if this attribute is set to false, the new added property cannot be then modified. Defaults to false.
- enumerable - if this attribute is set to false, the property not show up during enumeration of the properties on the corresponding object, will be stored only in memory. Defaults to false.

The third argument of this method (with the value of the property) is more complex, with some additional attributes. For a complete documentation see this page: developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty


Example (see the comments in code):
// define an object
var sites = {
 'CoursesWeb': 'https://coursesweb.net/'
};

// modifies the 'CoursesWeb' property
Object.defineProperty(sites, 'CoursesWeb', {
 value: 'https://coursesweb.net/javascript'
});

// adds a new property
Object.defineProperty(sites, 'MarPlo', {
 value: 'https://marplo.net/',
 configurable: true,
 enumerable: true
});

// Test
document.write(sites.CoursesWeb +'<br>'+ sites.MarPlo);

/* Result:
 https://coursesweb.net/javascript/
 https://marplo.net/
*/

defineProperties()

defineProperties() - Sets or modifies multiple existing properties same time directly on an object, returning the object.

Syntax:
Object.defineProperties(obj, {
 'prop1': { value: value_prop1 },
 'prop2': { value_prop2 },
 // ...
})
- obj - The object on which to define or modify properties.
- 'prop1', 'prop2' - The name of the properties to be defined or modified.
- value_prop1, value_prop2 - The values of the properties to be defined or modified.

Example (see the comments in code):
// define an object
var sites = {
 'CoursesWeb': 'https://coursesweb.net/html/'
};

// modifies the 'CoursesWeb' property, and adds two new properties
// stores the object in another variable
var sites2 = Object.defineProperties(sites, {
 CoursesWeb: { value: 'https://coursesweb.net/' },
 MarPlo: { value: 'https://marplo.net/' },
 id: { value: 8 }
});

// Test properties in 'sites' and 'sites2'
document.write(sites.CoursesWeb +'<br>'+ sites2.id);

/* Result:
 https://coursesweb.net/
 8
*/
• Here's a practical example with the defineProperty() method. Data selected by the user from Select dropdown list are added as properties into an object, then, the object is displayed as JSON string.
<h4>Example with defineProperty()</h4>
<p>Write a name in the text field, select an Age and Gender.</p>

<div id='showob'>JSON object</div>
<form action='#' method='post'>
 Name: <input type='text' name='nmusr' id='nmusr' onkeyup='setObj(this.id, this.value)' /><br>
 Age: <select name='agusr' id='agusr' onchange='setObj(this.id, this.value)'>
 <option>---</option>
 <option value='5-8'>5-8</option>
 <option value='9-14'>9-14</option>
 <option value='15-20'>15-20</option>
 <option value='21-30'>21-30</option>
 <option value='31-45'>31-45</option>
 </select><br>
 Gender: <select name='gdusr' id='gdusr' onchange='setObj(this.id, this.value)'>
 <option>---</option>
 <option value='male'>Male</option>
 <option value='female'>Female</option>
 </select>
</form>
<script>
// set 'usrob' with one property
var usrob = {nmusr: 'name'};

// this function adds /modifies property in usrob, using defineProperty()
// converts it into a string, and displays it
function setObj(prop, val) {
 Object.defineProperty(usrob, prop, {
 value: val,
 configurable: true,
 enumerable: true
 });
 document.getElementById('showob').innerHTML = 'JSON object: <b>'+ JSON.stringify(usrob) +'</b>'; 
}
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
defineProperty and defineProperties

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (41034)
  2. $_GET, $_POST and $_REQUEST Variables (27414)
  3. Contact page - CoursesWeb (16164)
  4. Tabs effect with CSS (16860)
  5. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (22999)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1434)
  2. Tabs effect with CSS (1369)
  3. Contact page - CoursesWeb (1366)
  4. Insert, Select and Update NULL value in MySQL (791)
  5. PHP getElementById and getElementsByTagName (622)