Can I add a function to an array in Javascript?

Question

I had this code suggested to me:

var activityArray = [];
activityArray.push("Loading content 1");
activityArray.push("Loading content 2");
activityArray.push("Loading content 3");
activityArray.push("Loading content 4");

//find the item we want to delete
var index = activityArray.indexOf('Loading content 4');// returns 3
activityArray.splice(index,1)//remove the item at index 3

I have a lot of places where I want to add elements to my array so "activityArray.push" seems like a very easy way to do this.

I also have a lot of places where I want to remove the elements from the array. Is there a way that I could take the code to delete the item and add it as a function to activityArray so that I could say:

activityArray.pull("Loading content 4");

Perhaps you're asking "how do I extend the Array type in javascript?" This might give you good contextual information: http://stackoverflow.com/questions/8859828/javascript-what-dangers-are-in-extending-array-prototype — rliu, Dec 01 '13 at 09:50

joews · Accepted Answer · 2013-12-01T10:06:28.797

3

Yes, Javascript's prototypical inheritance system makes it very easy to monkey patch new functionality onto existing objects.

This version, like your code, will return the first instance of the removed element, or undefined if the element did not exist in the array.

Array.prototype.pull = function(element) { 
  var index = this.indexOf(element); 
  var removed = undefined;
  if(index >= 0)
    removed = this.splice(index,1); 
  return removed;
}

If you just want to add the method to a single array,

myArray = [1,2,3,4,5,6];

myArray.pull = function(element) { 
  var index = this.indexOf(element); 
  var removed = undefined;
  if(index >= 0)
    removed = this.splice(index,1); 
  return removed;
}

myArray.pull(3) // -> [1,2,4,5,6]
[3,2,1].pull(2) // -> exception

edited Dec 01 '13 at 10:06

answered Dec 01 '13 at 09:52

joews

29,767
10
79
91

`var removed = undefined;` is excessive. `var removed;` will be enough. – Pavlo Dec 01 '13 at 10:02
That is true, but there is no harm in being explicit - it makes the functionality more obvious to a novice. – joews Dec 01 '13 at 10:03
3

@Alan FYI: prototype meddling is not recommended (especially using the name `pull`) as this might someday be used as an actual prototype method and cause you some serious headaches. – hitautodestruct Dec 01 '13 at 10:06

score 3 · Answer 2 · answered Dec 01 '13 at 09:54

3

You can add methods to the array prototype for instance specific methods.

Array.prototype.pull = function(content) {
    var index = this.indexOf(content);
    this.splice(index, 1);
};

var activityArray = [];
activityArray.push("Loading content 1");
activityArray.push("Loading content 2");
activityArray.push("Loading content 3");
activityArray.push("Loading content 4");

activityArray.pull("Loading content 4"); 

>> ["Loading content 1", "Loading content 2", "Loading content 3"]

answered Dec 01 '13 at 09:54

Adam Hoddinott

97
1
1
6

Is there a way I can apply it to just the activityArray object ? – Alan2 Dec 01 '13 at 09:59
See my updated answer for a version that works on a single array. – joews Dec 01 '13 at 10:04
joews - Did you change anything. The answer looks the same? – Alan2 Dec 01 '13 at 10:05

score 2 · Answer 3 · answered Dec 01 '13 at 10:04

2

If you can skip using a simple Array try a named array \ object syntax:

var activityArray = {};

activityArray["Loading content 1"] = "Loading content 1";
activityArray["Loading content 2"] = "Loading content 2";
activityArray["Loading content 3"] = "Loading content 3";
activityArray["Loading content 4"] = "Loading content 4";

// To remove simply use the `delete` keyword
delete activityArray["Loading content 4"];

answered Dec 01 '13 at 10:04

hitautodestruct

20,081
13
69
93

1

This is a good answer provided that each element can exist only once in the data structure. Given that the other answers, and the OP's code, will only remove the first instance of a given element anyway, that is a pretty good assumption to make. – joews Dec 01 '13 at 10:10

Can I add a function to an array in Javascript?

3 Answers3