I want to define a read-only object property that asynchronously fetches a value and then returns it using the new EcmaScript 5 getters.

However, the property always returns undefined even though magicValue in the example code below is definitively never undefined. Also, when I just return 'xxx'; the printed value is still undefined. It only works when I return outside the callback function.

It seems like return is being executed immediately regardless of whether the callback of myAsyncFunction is called. I am not sure whether this a bug in in V8 or if I am abusing JavaScript's getters.
Can I get this to work? I thought, since I can use getters and setters now, I will use getters/setters to read and write properties and regular functions to do certain tasks.

var User = function (id) {
    this.id = id;
};

Object.defineProperty(User.prototype, 'magic', {
    get : function () {
        myAsyncFunction(function (magicValue) {
            return magicValue;
        });
    }
});

var u = new User(5);
console.log(u.magic);

Prints undefined.

I want to define a read-only object property that asynchronously fetches a value and then returns it using the new EcmaScript 5 getters.

However, the property always returns undefined even though magicValue in the example code below is definitively never undefined. Also, when I just return 'xxx'; the printed value is still undefined. It only works when I return outside the callback function.

It seems like return is being executed immediately regardless of whether the callback of myAsyncFunction is called. I am not sure whether this a bug in in V8 or if I am abusing JavaScript's getters.
Can I get this to work? I thought, since I can use getters and setters now, I will use getters/setters to read and write properties and regular functions to do certain tasks.

var User = function (id) {
    this.id = id;
};

Object.defineProperty(User.prototype, 'magic', {
    get : function () {
        myAsyncFunction(function (magicValue) {
            return magicValue;
        });
    }
});

var u = new User(5);
console.log(u.magic);

Prints undefined.

• javascript
• node.js
• v8
• ecmascript-5

Share Improve this question Follow asked Aug 7, 2012 at 10:07 Max KuengMax Kueng 28044 silver badges1010 bronze badges 8

• 3 You cannot return a result from an asynchronous function to a synchronous operation - it's an illogical construct. Moreover, your myAsyncFunction is never called - it's merely declared. What is the nature of your asynchronous operation? – Mitya Commented Aug 7, 2012 at 10:09
• The above code is just an example. The real purpose is that a User has a property called "account". When the account property is accessed and the user does not already have an account, one will be created first and then it will be returned. – Max Kueng Commented Aug 7, 2012 at 10:18
• Over AJAX? But a getter is a synchronous operation. You cannot return something from the getter that is asynchronous - you'll need a different pattern. – Mitya Commented Aug 7, 2012 at 10:20
• 2 Nah - the getter is synchronous, and so will return (or not) immediately. – Mitya Commented Aug 7, 2012 at 10:24
• 2 Ok, I think you are right. And what you say makes sense. I guess I'll just use a regular function instead. Thanks for your help :) – Max Kueng Commented Aug 7, 2012 at 11:22

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 6

Asynchronous operations, these days, are typically handled with Promises. When you invoke your getter, it returns a promise, which you can attach a callback with using the 'then()' method.

Object.defineProperty(User.prototype, "magic", {
  get: function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        resolve(JSON.stringify({
          magic: 'value'
        }));
      }, 1000);
    });
  }
});

Here is a working example: https://jsfiddle/tw6gaudz/2/

Thanks @utkanos for your help.

JavaScript won't acynchronously return a getter function's value because getters are synchronous.

You could use a "setter":

var User = function (id) {
    this.id = id;
};

Object.defineProperty(User.prototype, 'magic', {
    set : function (value) {
        setTimeout(value.bind(0, "hello"), 1000);
        return true;
    }
});

var a = new User(5);

a.magic = function(msg){
    alert(msg);
};