Question

Let’s say I have a JavaScript object:

function a(){
    var A = [];
    this.length = function(){
        return A.length;
    };
    this.add = function(x){
        A.push(x);
    };
    this.remove = function(){
        return A.pop();
    };
};

I can use it like so:

var x = new a();
x.add(3);
x.add(4);
alert(x.length()); // 2
alert(x.remove()); // 4
alert(x.length()); // 1

I was trying to make .length not a function, so I could access it like this: x.length, but I’ve had no luck in getting this to work.

I tried this, but it outputs 0, because that’s the length of A at the time:

function a(){
    var A = [];
    this.length = A.length;
    //rest of the function...
};

I also tried this, and it also outputs 0:

function a(){
    var A = [];
    this.length = function(){
        return A.length;
    }();
    //rest of the function...
};

How do I get x.length to output the correct length of the array inside in the object?

Answer 1

Because when you call a.length, you’re returning a function. In order to return the output you have to actually invoke the function, i.e.: a.length().

As an aside, if you don’t want to have the length property be a function but the actual value, you will need to modify your object to return the property.

function a() {
  var A = [];
  this.length = 0;
  this.add = function(x) {
    A.push(x);
    this.length = A.length;
  };
  this.remove = function() {
    var removed = A.pop();
    this.length = A.length;
    return removed;
  };
};