Question

I want to create a helper object that will work the following way:
It is an array with a given number of rows, for example let’s say it can hold only 3 rows.
It will have an insert method that inserts the a new entry at the first index, and pushes one index down all the rest (new entry is 0, 0 becomes 1, 1–>2 etc..)
and if the array is full to the max number of rows, the last entry drops out.

So I made it the following way:

function limArray(array, maxlength){

    this.arr = array;
    this.maxlength = maxlength;
    this.arr.length = maxlength;

    this.insertVal = function(value){ //insert new value and push down the rest

        for (var i=maxlength; i>=0; i--) { 
            this.arr[i] = this.arr[i-1]
        };
        this.arr[0] = value;
        this.arr.length = maxlength;
    };
}

My question is, if it’s a smart way to make this?
Is it possible to create instance of the Array object itself and modify it to be limited etc..
Any critique / improvement suggestions are welcome!

Answer 1

You could overwrite the push method:

function limArray(array, maxlength){
    var push_ = array.push,
        slice_ = [].slice;

    array.push = function() {
        var values = slice_.call(arguments, 0, maxlength - this.length);
        return push_.apply(this, values);
    }
    return array;
}

As @alnorth29 mentioned, you can use unshift to prepend a value. You can overwrite this as well:

function limArray(array, maxlength){
    // push like above
    var unshift_ = array.unshift;
    array.unshift = function() {
        unshift_.apply(this, arguments);
        this.length = this.length > maxlength ? maxlength : this.length;
        return this.length;
    }

    return array;
}

Of course you can also attach a new property with a more expressive name than unshift:

array.prepend = array.unshift;

If you extend an array instance like this, make sure you only traverse over its elements with a for loop, not with a for...in loop (you should always use for for arrays anyway). Another possibility is to define the property using ECMAScript 5’s Object.defineProperty ^[docs] and set enumerable to false. But it is only supported in newer browsers.

There are other ways to add elements to an array, but I assume you are not going to use them .

Usage:

> var limited = limArray([], 3);
> limited.push(1,2,3,4);
  3
> limited
  [1, 2, 3]
> limited.push(5)
  3
> limited
  [1, 2, 3]

> var limited = limArray([], 3);
> limited.unshift(3, 4)
  2
> limited
  [3, 4]
> limited.unshift(1, 2)
  3
> limited
  [1, 2, 3]

Update:

I forgot, in case the array passed to the function already exceeds the maximum number of elements, you have to reduce the length:

function limArray(array, maxlength){
    array.length = array.length > maxlength ? maxlength : array.length;
    //...

    return array;
}