Can I create my own array object in JavaScript?

Question

I have created a JavaScript application that has a lot of array manipulations (sorting, filtering, etc.).

Currently my functions are like this:

function (myArray, arg1, arg2,...)

where myArray is the array I am working on, and arg1, arg2,... are the arguments used by the function to modify the array.

I am thinking that it would be neater to have a clear separation between the object and the arguments (a la jQuery):

myArray.function(arg1, arg2,...)

I know that I could use Array.prototype to add my function to all arrays, but this seems too heavy as the functions I add are really specific to my case and don't make sense on arrays in general. I also know that I could create an object, but then I wouldn't benefit from the array methods available in JavaScript (indexOf, filter, etc.).

Is there a way I could create my own array object, that would inherit the default array methods and allow me to add my own?

Right, but I like how clean it is, for example for chaining or defining default options/arguments. — Christophe
– Christophe, Commented Feb 10, 2012 at 19:31

Elian Ebbing · Accepted Answer · 2012-02-10 19:55:16Z

10

You've got two options:

Option one is to extend the Array object by adding new methods to it:

Array.prototype.myMethod = function(arg1, arg2)
{
    // Use 'this' to access the array.
}

The advantage is that every javascript array will now have this extra method. This can also be a disadvantage when multiple (external) javascript libraries try to add the same methods. Furthermore, this new method will appear in for(var item in myArray) constructs which can be problematic.

Option two is to create a "factory method" for your extended array:

function MyExtendedArray = function()
{
    var array = [];
    array.myMethod = function(arg1, arg2) {
        // Use 'this' or 'array' to access the array.
    };

    return array;
};

Now you can write this to create a new extended array:

var arr = MyExtendedArray();

edited Feb 10, 2012 at 19:55

answered Feb 10, 2012 at 19:49

Elian Ebbing

19.1k5 gold badges50 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christophe Over a year ago

I think the factory method is exactly what I need for my specific application. It's so obvious...not that I see it :-) Thanks!

Mike Samuel · Accepted Answer · 2012-02-10 19:25:41Z

5

No. Array cannot be subclassed and still behave like an array. Specifically, the length property will not change to reflect elements that are added or deleted from the array.

function MyArray() {}
MyArray.prototype = [];
MyArray.prototype.constructor = MyArray;
var instance = new MyArray;
instance[0] = 0;
alert(instance.length);  // alerts 0

The reason this happens is because only objects that are created via new Array or syntactic sugar like [] have the special handling around length.

The new MyArray above creates a regular object whose prototype is an Array, but there is nothing about the new operator that checks whether the prototype of an object is an Array and sets up the special length handling.

answered Feb 10, 2012 at 19:25

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

3 Comments

Zlatin Zlatev Over a year ago

Oddly enough, if you use .push() method for storing data to the array, length updates properly.

Mike Samuel Over a year ago

@ZlatinZlatev, recent EcmaScript candidates have a goal of allowing subclassing of things like Array, RegExp, and Date so this answer may not be correct for much longer. Perhaps you're seeing behavior in recent JavaScript engines that are implementing some support for subclassing of Arrays.

Zlatin Zlatev Over a year ago

Well, at least latest version of Chrome and latest version of Rhino engine (till today's date - 31.Aug.2015) do have the behaviour described by you and me.

Brian · Accepted Answer · 2012-02-10 19:36:13Z

5

You can simply just add the function directly to your object rather than to the prototype:

var myArray = new Array();
myArray.myFunc = function(){ /* do stuff! */ };
myArray.myFunc();

answered Feb 10, 2012 at 19:36

Brian

512 bronze badges

Comments

Ali Nawaz · Accepted Answer · 2019-03-19 07:57:04Z

i create this which is my version of array but with some modifications in this array you cant change the length like with the original array

let ary = [1,2,3];
console.log(ary.length); //3

ary.length = 999;
console.log(ary.length); //999

because i use get function to get my length and use closures for saving the value of original array length

let myArray = new MyArray(1,10); //new MyArray(from,to)
console.log(myArray.length); // 10

myArray.length = 999;
console.log(myArray.length); // 10  //still 10 because .length is a get function

the code of my array is

let _getlength = {}, _inclength = {}, _declength = {};

class MyArray{

 constructor(from, to)
  {
    this.key = Symbol('ignore this key');

    //i make it a closer because i don't want any one to change the length
    // by this my length become private and can be only incremented by one by "_inclength()" function or
    [_getlength[this.key], _inclength[this.key], _declength[this.key]] = (
        () =>
        {
            let length = 0;

            let getLength = () =>
            {
                return length;
            };

            let inclength = () =>
            {
                length++;

                this[length - 1] = 0;

                return length;
            };

            let declength = () =>
            {
                return --length;
            };


            return [getLength, inclength, declength];
        }
    )();

    if (from != null || to != null)
    {
        for (let num = from; num <= to; num++)
        {
            this.push(num);
        }
    }

}

push(value)
{
    this[this.IncreaseLengthByOne() - 1] = value;
}

unshift(value)
{
    this.addAt(0, value)
}

addAt(index, value)
{
    this.IncreaseLengthByOne();
    for (let i = this.length - 2; i >= index; i--)
    {
        this[i + 1] = this[i];
    }

    this[index] = value;
}

removeAt(index)
{

    for (let i = index; i < this.length - 1; i++)
    {
        this[i] = this[i + 1];
    }

    this.pop();
}

pop()
{
    _declength[this.key]();
    delete this[this.length];
}

get length()
{
    return _getlength[this.key]();
}

IncreaseLengthByOne()
{
    return _inclength[this.key]();
}

forEach(callback)
{
    for (let i = 0; i < this.length; i++)
    {
        callback(this[i], i, this);
    }
}

map(callback)
{
    let myArray = new MyArray();
    for (let i = 0; i < this.length; i++)
    {
        myArray.push(callback(this[i], i, this));
    }

    return myArray;
}


// if you don't know what it is then go and learn what generators are! what Symbol(primitive type) is and what Symbol.iterator is then
// come back
* [Symbol.iterator]()
{
    for (let i = 0; i < this.length; i++)
    {
        yield this[i];
    }
}
}

examples: create an array of names and add "Ali", "Hadi", "Amber" to it

let names = new MyArray();

names.push('Ali');
names.push('Hadi');
names.push('Amber');
console.log(names); // MyArray {0: "Ali", 1: "Hadi", 2: "Amber"}

modify every name by adding there last name "Nawaz" at the end Like "Ali" become "Ali Nawaz"

let fullNames = names.map(nam => nam +' Nawaz');
console.log(fullNames); //MyArray {0: "Ali Nawaz", 1: "Hadi Nawaz", 2: "Amber Nawaz"}

enam · Accepted Answer · 2012-02-11 08:47:28Z

0

Yes, just extend the Array prototype with jQuery.extend

edited Feb 11, 2012 at 8:47

enam

1,1771 gold badge10 silver badges24 bronze badges

answered Feb 10, 2012 at 19:27

Paul Nikonowicz

3,91323 silver badges39 bronze badges

Collectives™ on Stack Overflow

Can I create my own array object in JavaScript?

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related