Add a property to a JavaScript array

JavascriptArrays

Javascript Problem Overview


Arrays have a "length" property by default.

Can I add custom properties to them?

Without having to make them objects.

Javascript Solutions


Solution 1 - Javascript

Sure.

var arr = [1,2,3,4,5];
arr.prop = 'value';

Arrays are already objects in JavaScript -- they just have some extra features and a special literal syntax.

Solution 2 - Javascript

As other answers state, it's perfectly possible, because arrays in JavaScript are just objects. However, there is still the a question of whether it's a good idea or not.

That's a "coding style" question, so it's hard to say objectively, but Douglas Crockford doesn't have a problem with it (at least in some cases). In JavaScript: The Good Parts, he actually uses the example of adding a "total" method to an array.

> Because an array is really an object, we can add methods directly to an individual array: > // Give the data array a total function > data.total = function () { return this.reduce(add, 0); }; >
total = data.total(); // total is 108 > > Since the string 'total' is not an integer, adding a total property to an array does not change its length.

(p62, Crockford's "JavaScript The Good Parts", found on Google Books)

However, it is worth mentioning that these extra properties are not included in JSON serialisation, and would be thrown away if you do anything like arr = arr.slice(1);.

Solution 3 - Javascript

If you meant to hide it in an Array, etc. (at least that's what I was looking for):

Object.defineProperty( targ, "myVal", { enumerable: false, writable: true } );

Then the array doesn't add it to length, so it's a property, not a value I guess you could say.

Then if you want to see the keys in an object for instance, Object.keys won't see it, but Reflect.ownKeys() will.

The Reflect version of defineProperty will return success or fail, while Object's returns the object passed.

Remember Reflect.preventExtensions() will (like it says) stop you or others from extending them.

Solution 4 - Javascript

Arrays are objects and therefore you can add your own properties to them:

var arr = [1, 2, 3];
arr.foo = 'bar';

Extending from other answers, here are the following ways of iterating over the array, excluding custom properties.

  1. Using a standard for loop

     for (let i = 0; i < arr_length; i++)
         console.log(arr[i]);
    

    or if not using ES6:

     for (var i = 0; i < arr.length; i++)
         console.log(arr[i]);
    
  2. Using the for ... of loop (ES6+)

     for (let el of arr)
         console.log(el)
    
  3. Using Array.prototype.forEach (ES6+)

     arr.forEach(el => console.log(el));
    

    or

     arr.forEach(function(el) {
         console.log(el);
     });
    

Iterating over the array, including all properties (e.g., custom properties, length):

for (let prop in arr)
    console.log(prop);

Or if not using ES6:

for (var prop in arr)
    console.log(prop);

Solution 5 - Javascript

Yes. You can add them to the object by just declaring them and you can also extend Array using Array.prototype

var j = new Array();
j.yourprop = "foo";

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionellabeautyView Question on Stackoverflow
Solution 1 - JavascriptKevin EnnisView Answer on Stackoverflow
Solution 2 - JavascriptcloudfeetView Answer on Stackoverflow
Solution 3 - JavascriptMaster JamesView Answer on Stackoverflow
Solution 4 - JavascriptDavid CallananView Answer on Stackoverflow
Solution 5 - JavascriptDave ThomasView Answer on Stackoverflow