Why does setting positions in a subclass of Array not change its length? Should I not subclass array?

Question

In the CoffeeScript program below, I create a subclass of Array which sets two positions in its constructor:

class SetPositionsArray extends Array
  constructor: (x,y) ->
    @[0] = x
    @[1] = y

  myLength: ->
    @length

sp_array = new SetPositionsArray 1, 2

console.log "sp_array: "
console.log sp_array
console.log "sp_array[0]: "
console.log sp_array[0]
console.log "sp_array[1]: "
console.log sp_array[1]
console.log "sp_array.length: "
console.log sp_array.length
console.log "sp_array.myLength(): "
console.log sp_array.myLength()

I would hope that this code would change the length property of sp_array, since it effectively sets positions on it. However, the output I get is:

$ coffee sp.coffee
sp_array: 
[ 1, 2 ]
sp_array[0]: 
1
sp_array[1]: 
2
sp_array.length: 
0
sp_array.myLength(): 
0

That is, the length is 0.

Then, I created another class which pushes values in the instance instead of setting them:

class PushValuesArray extends Array
  constructor: (x,y) ->
    @push x
    @push y

  myLength: ->
    @length


pv_array = new PushValuesArray 1, 2


console.log "pv_array: "
console.log pv_array
console.log "pv_array[0]: "
console.log pv_array[0]
console.log "pv_array[1]: "
console.log pv_array[1]
console.log "pv_array.length: "
console.log pv_array.length
console.log "pv_array.myLength(): "
console.log pv_array.myLength()

In this case, I get the expected result, except that there is an actual length attribute in the array (while I would imagine that it would be some internal detail):

$ coffee pv.coffee
pv_array: 
[ 1, 2, length: 2 ]
pv_array[0]: 
1
pv_array[1]: 
2
pv_array.length: 
2
pv_array.myLength(): 
2

So, why does setting the position in the array does not change its length?

This question is related to this one for which I posted this answer.

Answer 1

The simplest explanation is: length is magic.

length obviously doesn't behave like an ordinary property, since it changes its value when you insert/delete other properties on its object (and, conversely, setting length = 0 will delete other properties); but there's nothing special about the identifier "length". That means you can easily write foo.length = 'bar', and the world will keep turning. Only on arrays does it have its special nature.

Now, you might expect when when you extend the Array constructor, that you get an array—but do you? Well, in one sense you do:

class PushValuesArray extends Array
(new PushValuesArray) instanceof Array  # true

Unfortunately, for the purpose of length, you don't. All the extends keyword does here is create a prototype chain, and the Array prototype has a distinctly non-magical length property:

Array::length  # 0

That's all you get on your PushValuesArray instance. Sadly, there's no way to duplicate that length magic on your own objects. Your only option is to either write a function instead (say, size()), or modify the Array prototype with the methods you want and use true arrays instead.

To sum up: Subclassing Array won't get you very far. That's why, for instance, jQuery has a very array-like API on its objects—

$('body').length  # 1
$('body')[0]      # [object HTMLBodyElement]

—but doesn't actually make those objects inherit from the Array prototype:

$('body') instanceof Array  # false