Difference between accessor property and data property in ECMAScript?

Question

The ECMAScript version 5 specification, introduces a new type of properties called accessor properties. Compared to the existing and known type of properties called data properties, how are these two things related with each other, in terms of specification only?

I've read the spec on ECMAScript v5 and it is not clear to me the exact difference. Can somebody explain the two with a code example? I've searched the internet, but all the examples seem vague.

Answer 1

A named data property associates a name with a value. Which means you use the property to get and retrieve data directly, like a public field on a class.

A named accessor property associates a name with one or two accessor functions. The accessor functions are used to store or retrieve a value that is associated with the property. Which means that you restrict the access to a certain value behind a get or/and set accessor property.

Comparing both, the 1st option gives you no encapsulation or kind of control, on how your value is accessed. The 2nd lets you specify if your value can be read 'get accessor', written 'set accessor' or both.

UPDATE

Regarding your secondary doubt (in comments) here is a little and quick 101 on the Ecma Script basics that I've just cooked ;):

// accounting namespace
var Accounting = {};

// client class definition
Accounting.Client = function(){
    // private fields
    var _address="";
    var _phone=0;

    // data property
    this.token = "";

    // privileged properties
    Object.defineProperty(this, "address", {
        get: function(){
            if(console) console.log('hey im using get address accessor property.');        
            return _address;
        },
        set: function(value){
            if(console) console.log('hey im using set address accessor property.');

            if(value == null)
                throw new Error('Field address cannot be null!');

            _address=value;
        }
    });

    Object.defineProperty(this, "phone", {
        get: function(){
            if(console) console.log('hey im using get phone accessor property.');
            return _phone;
        },
        set: function(value){
            if(console) console.log('hey im using set phone accessor property.');
            _phone=value;
        }
    });
};

Accounting.Client.prototype = {
    sayHello: function(){
        alert("hello im a shared function, which means im shared by all objects of type Client"
              + " and i do not have access to private fields :(.");
    }
};


/* use case */
var c1 = new Accounting.Client();
c1.address = "Rua da Capela";
c1.phone = 961909090;
c1["token"] = "mytoken in a data property";
c1.token = c1.token + "-111";

alert("client address is '" + c1.address + "' and his phone also is '" + c1.phone + "'.");
c1.sayHello();    
alert(c1.token);

try{
    // check non nullable field.
    c1.address=null;
}
catch(ex){
    alert(ex);
}

Use my jsfiddle to play around!

Happy Coding!