What’s all this about ECMAScript 5?

by shuntacorp

ES5 is coming. With the majority of modern browsers supporting a large portion of the ES5 specification it is time to take a look at what this enhanced specification has to offer us as web developers. In large part the ES5 specification improves our ability to safely write large scale web applications by enhancing our ability to constrain what can be done with our objects at run time. As developers have moved from using JavaScript as a scripting language for adding UI widgets as an afterthought to their websites at the end of a development project, toward an increasing focus on rich client side user actions a requirement to bring safety features and constraints to the language has arisen.

Locking Down our Objects

The following features have been added to JavaScript with ES5 to allow us to lock down our objects, preventing them from being manipulated at run time when the need for this is identified:

Accessors

Accessors allow us to configure various attributes of object properties such as whether the property is read only or enumerable. Full detail of what attributes are available for configuration when defining properties using accessors can be found on the Mozilla developer network. An example of when this would be useful is if you had a Person object in your application, who needed to be created with a date of birth. Of course a persons date of birth should not be modifiable after a person as been created. In this case the date of birth could be initialised into a read-only property to prevent modification for the lifetime of the application.

An example of defining a read-only property accessor with a value of 13, which may not be enumerated can be found below:

Code Sample

var o = {};

Object.defineProperty(o, "a", {value : 13,
writable : false,
enumerable : false});

Getters and Setters

JavaScript finally has getter and setter support built in. Some of the great things that  this allows us to do are as follows:

  1. The example above where we wish to constrain the date of birth for our person object to be read-only can also be achieved by defining a DateOfBirth property with a get accessor only.
  2. The functionality related to getting or setting the property values can be encapsulated.
  3. Calls to getters and setters may be intercepted by frameworks to achieve all manner of wild and wonderful things. An example of this is eventing. We could wire an event to update a related DOM element when a property value is set implementing our own basic version of the functionality that frameworks such as KnockoutJS provide.
  4. Much much more…

Code Sample

var person;

Object.defineProperty(person, "Age", {
get : function(){ return bValue; },
set : function(newValue){ bValue = newValue; }
});

Object.Seal

The new Object.Seal method prevents methods/properties from being added or removed from an object at runtime. Values of properties may still be modified when an object has been sealed. This can be useful when you want to ensure that your object is used in the way that it was designed. Read more…

Code Sample

var sealedPerson = Object.seal(person);

Object.Freeze

The Object.Freeze method renders an object completely immutable. This means that no values may be modified on this object, and no properties or functions may be added or removed at run time. Immutability of objects allows developers to reason about the code that they write in ways that are not possible when objects are mutable. A later post will discuss the pros and cons of immutability in more detail.

Code Sample

var frozenPerson = Object.freeze(person);

Object.PreventExtensions

This method provides similar benefits to the seal function in that methods may not be added to an object at runtime when extensions have been prevented. However counter sealed objects non-extendable objects may have their properties dynamically removed at runtime.

Code Sample

var nonTrainablePerson = Object.preventExtensions(person);

That sums up the overview of the ES5 offerings for locking down our objects. Still to come on further blogs are the various enhancements added to other areas of the JavaScript language.

Advertisements