Advanced Property Creation

As we have discovered you can create a new property by simply using it. However you cannot create a getter or a setter property in this way as you also have to define the get and set functions. To allow for more complex properties to be added dynamically and to allow for more control over how properties behave there is the defineProperty method of the Object constructor.

You can use it to add a property to myObject using:

Object.defineProperty(myObject,’myProperty’,descriptor);

The optional descriptor is an object of key value pairs that defines the property.

You can use any of the following keys:

configurable - default true

set to true the property is dynamic and its descriptor may be changed and the property deleted. You can still change the value but any attempt to change other characteristics of the property results in a runtime error.

Enumerable – default false

set to true if the property is to be included in an enumeration of properties using for..in say

value – default undefined

The value of the property.

Writable – default false

set to true if value can change. If the property isn’t writable then attempts to change it’s value fail but no error is thrown.

get default undefined

a getter function for the property

set default undefined

a setter function for the property

If you specify get and set you cannot specify writable or value they are mutually exclusive.

So for example:

Object.defineProperty(myObject,’myProperty’,
                                {
                                 value:0,
                                 writable: true,
                                 enumerable: true,
                                 configurable: true
                               }
                      );

is equivalent to

myObject.myProperty=0;

i.e. the usual way of creating a property.

Notice that the defaults do not give you the usual way of creating a property.

You can use defineProperty to control how properties behave but note that it was only defined in ES5.1 and only fully defined in ES2015.

It the property already exists then any key value pairs you include are used to modify it.

There is also a defineProperties method which allows you to define multiple properties:

Object(myObject,properties)

where properties is an object which consists of name descriptor pairs. For example:

Object.defineProperty(myObject,{myProperty1:
                                 {
                                  value:0,
                                  writable: true,
                                  enumerable: true,         
                                  configurable: true
                                },
                               myProperty2:
                                {
                                 value:0,
                                 writable: true,
                                 enumerable: true,
                                 configurable: true
                                }
                              }
                    );

creates myProperty1 and myProperty2 with the descriptors as given.

Object Creation

We already have two ways of creating an object as a literal {} or using the Object constructor. There was a need to find a more flexible way to specify the object that was being created and ES5.1 introduced the object factory method create.

Object.create works in much the same way as the constructor itself but you can specify another object to be used as the Prototype. Prototypes are described in Chapter Eight and you will find more on Object.create there.

So

Object.create(null);

returns an object with no prototype – this is the purest object you can create as it has no properties at all.

You can also specify an object to create properties. This object consists of property names with values that are property descriptors as introduced in the previous section.

For example:

var myObject= Object.create(null,{myProperty:
                                        {
                                          value:0,
                                          writable: true,
                                          enumerable: true,
                                          configurable: true
                                        }
                                  }
                           );

Creates an object with a single property, myProperty with the characteristics as given.

You can see that Object.create is a much more precise way of creating an object with just the characteristics you need but note that it isn’t supported by older browsers. If you can assume ES5 or ES2015 then it is the preferred way of creating an object but preferable within a constructor – see later.

Object Mutability

Final version in book.

Summary

• A general principle is that anywhere you can use an object you can use an object expression.

• The value of a property can be an object expression.

• In ES2015 the name of a property can be taken from a variable and its value is the variables current value.

• You can create getters and setters for any property.

• In general a set is used to check for legality and to preprocess the data and a get is used to convert data representations.

• The Object constructor has a set of methods that allow you to work with objects in more sophisticated ways.

• The defineProperty method can be used to control how properties behave.

• You can use defineProperties to add a set of properties to an object.

• The create method allows you to specify the prototype object.

• The methods freeze, seal and preventExtension can be used to impose various levels of immutability on objects.

This is an extract from the book Just JavaScript by Ian Elliot.

Buy Now: from your local Amazon

Just JavaScript 
An Idiomatic Approach

A Radical Look At JavaScript

Most books on JavaScript either compare it to the better known class based languages such as Java or C++ and even go on to show you how to make it look like the one of these.

Just JavaScript is an experiment in telling JavaScript's story "just as it is" without trying to apologise for its lack of class or some other feature. The broad features of the story are very clear but some of the small details may need working out along the way - hence the use of the term "experiment". Read on, but don't assume that you are just reading an account of Java, C++ or C# translated to JavaScript - you need to think about things in a new way. 

Just JavaScript is a radical look at the language without apologies.

Contents

1. JavaScript – Essentially Different
2. In The Beginning Was The Object
3. Real World Objects 
4. The Function Object
         Extract - The Function Object
         Extract - Function Object Self Reference
5. The Object Expression
6. Function Scope, Lifetime & Closure
   Extract Scope, Lifetime & Closure
   Extract Execution Context ***NEW!
7. Parameters, Returns and Destructuring
        Extract - Parameters, and Destructuring
8. How Functions Become Methods
   
9. Object Construction
        Extract: - Object Factories
10. The Prototype
         Extract - ES2015 Class and Extends
11. Inheritance and Type
12. The Search For Type
13. Property Checking

Buy Now: from your local Amazon

Also by Ian Elliot 
JavaScript Async: Events, Callbacks, Promises and Async Await
Just jQuery: The Core UI 
Just jQuery: Events, Async & AJAX  

<ASIN:1871962579>

<ASIN:1871962560>

<ASIN:1871962501>

<ASIN:1871962528>

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info