Objects, properties, and property attributes

In Java, once an object is created, there is (almost) no way to modify its methods during runtime. Java is not a dynamic language. In JavaScript, things are quite different. You can create an object and modify it easily during runtime, such as adding new properties and replacing a method. That's what a dynamic language can do. Actually, that is not the special part. The special part is that Object is a language type in JavaScript, like other language types that JavaScript has, which includes Undefined, Null, Boolean, String, Symbol, and Number. Any value in JavaScript is a value of those types.

The undefined type has a single value, undefined. The null type has a single value, null. A Boolean has two values: true and false.

In Java, an object has fields and methods. In JavaScript, an object is logically a collection of properties. A property has a name of the String type and a list of attributes. Attributes, in JavaScript, are used to define and explain the state of a property. There are two types of properties—data properties and access properties.

A data property has four attributes:

  • value, which can be of any JavaScript language type
  • writable, which defines whether a data property can be changed or not
  • enumerable, which defines whether a property can be enumerated by using a for-in statement
  • configurable, which defines whether a property can be deleted, changed to be an access property, changed to be not writable, or whether its enumerable attribute can be modified

An access property also has four attributes:

  • get accessor, which can be a Function object or undefined
  • set accessor, which can be a Function object or undefined
  • enumerable, which defines whether a property can be enumerated by using a for-in statement
  • configurable, which defines whether a property can be deleted, be changed to be a data property, or whether its other attributes can be modified.

To access a property of an object, you can use dot notation or bracket notation. The dot notation acts the same as how it does in Java. The bracket notation, on the other hand, is quite interesting. In JavaScript, property names must be strings. If you try to use a non-string object as a property name with bracket notation, the object will be casted into a string via its toString() method, as we can see here:

var obj = {};
obj['100'] = 'one hundred';
// Number 100 will be casted to '100'
console.log(obj[100]); // 'one hundred'
// Both foo and bar will be casted to string '[object Object]'
var foo = {prop: 'f'}, bar = {prop: 'b'};
obj[foo] = 'Foo'
console.log(obj[bar]) // 'Foo'

In a nutshell, here is how an object appears, logically:

Figure 1.1: Object, properties, and property attributes

In JavaScript, you can use Object.defineProperty or Object.defineProperties to modify the properties of an object. Here is how it works:

1.  function User (name, department) {
2. var _department = department;
3. var _name = name;
4. Object.defineProperty(this, 'name', {
5. value: _name,
6. writable: true,
7. enumerable: true,
8. configurable: false
9. });
10. Object.defineProperty(this, 'department', {
11. get: function () {
12. console.log('Retrieving department');
13. return _department;
14. },
15. set: function (newValue) {
16. console.log('Updating department value to "' + newValue + '"');
17. _department = newValue;
18. },
19. enumerable: true,
20. configurable: true
21. });
24. Object.defineProperty(this, 'greeting', {
25. value: function () {
26. console.log('Hi, I'm ' + _name + '.');
27. },
28. enumerable: false,
29. configurable: false
30. });
31. }

As you can see from lines 4 to 9, we use Object.defineProperty to define name as a data property, and its actual data is stored in the internal property _name. In lines 10 to 21, we define department as an access property that has a get accessor and set accessor, and the actual value is kept in _department. In lines 24 to 30, we define greeting property as a data property and its value is a Function object:

32. var user = new User('Sunny', 'Engineering');      
33. console.log(user.department);
34. user.department = 'Marketing';
35. user.greeting();
36. Object.defineProperty(user, 'name', {
37. enumerable: false
38. });
39. delete user.name;
40. delete user.department;
41. for (var prop in user) {
42. console.log(prop);
43. }

In line 32, we create a user object using the User constructor function. In line 33, we access the department property. Since it is a get accessor, the getter function will be invoked and the message Retrieving department will show up in the console before the actual department value. In line 34, we assign a new value to the department property. Since we have defined the set accessor, the setter function will be invoked. In line 35, since the greeting property of user object is defined as a function, we will need to invoke it. In lines 36 to 38, we try to redefine the name property. However, since it is not configurable, JavaScript will throw an error with this. The same is true with regard to line 39, where we try to delete this property. The deletion of department property in line 40 will work since it is configurable. In lines 41 to 43, the only property that will show up in the console is the name property, because the department has been deleted and the greeting property is not enumerable.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.138.37.20