Drop last element of javascript array when array reaches specific length

Question

I would like to cache some data in javascript, but the cache should be limited to 10 elements for example.

I can place the objects in javascript array, but what is the best way to keep the array limited to 10 elements?

Example:

function getData(dataId) { return new NextDataObject(dataId); }

var array = new Array();

array.push(getData(0));
array.push(getData(1));
(...)
array.push(getData(10)); // this should result in dropping "oldest" data, so getData(0) should be removed from the array, so that in array there are only 10 objects at maximum

Should such mechanism be written manually (using splice() for example?) or are there better ways to achieve such "cache" structure in javascript?

BTW: in this particular situation I'm using angular.

Answer 1

Override the push function of your caching array.

var array = new Array()
array.push = function (){
    if (this.length >= 10) {
        this.shift();
    }
    return Array.prototype.push.apply(this,arguments);
}

Plunker

---

To make this more reusable I created a method which returns new instance of such array (basing on above code).

function getArrayWithLimitedLength(length) {
    var array = new Array();

    array.push = function () {
        if (this.length >= length) {
            this.shift();
        }
        return Array.prototype.push.apply(this,arguments);
    }

    return array;

}

var array = getArrayWithLimitedLength(10);