Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I create my own array object in JavaScript?

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?

like image 744
Christophe Avatar asked Feb 10 '12 19:02

Christophe


People also ask

How is array object created in JavaScript?

Arrays can be created using a constructor with a single number parameter. An array with its length property set to that number and the array elements are empty slots.

How can I create my own array?

An array is a sequence of values; the values in the array are called elements. You can make an array of int s, double s, or any other type, but all the values in an array must have the same type. To create an array, you have to declare a variable with an array type and then create the array itself.

Can you create an array in JavaScript?

Creating an ArrayUsing an array literal is the easiest way to create a JavaScript Array. Syntax: const array_name = [item1, item2, ...]; It is a common practice to declare arrays with the const keyword.

Can you have an array of objects in JavaScript?

Creating an array of objects We can represent it as an array this way: let cars = [ { "color": "purple", "type": "minivan", "registration": new Date('2017-01-03'), "capacity": 7 }, { "color": "red", "type": "station wagon", "registration": new Date('2018-03-03'), "capacity": 5 }, { ... }, ... ]


3 Answers

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();
like image 59
Elian Ebbing Avatar answered Sep 22 '22 05:09

Elian Ebbing


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.

like image 25
Mike Samuel Avatar answered Sep 18 '22 05:09

Mike Samuel


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();
like image 21
Brian Avatar answered Sep 19 '22 05:09

Brian