For example, I have an array of strings, ['12', '34', '56'], and I want to dynamically update this array by adding additional elements ('78', '90'), or by removing some elements ('34', '56').
Not sure if there's a better data structure/library that gets the job done. Can someone shed some lights for a JS newbie?
In JavaScript, you can usually do anything with the provided arrays and objects.
To add elements, use Array.prototype.push.
var array = ["12", "34", "56"];
array.push("78", "90");
To properly remove elements without leaving holes, you need to find their index (you can use Array.prototype.indexOf in good browsers, there is a shim on the page for IE) and use Array.prototype.splice.
array.splice(array.indexOf("34"), 1);
array.splice(array.indexOf("56"), 1);
Note that if you already know the index and the count, you can just do
array.splice(1, 2); //Removes 2 elements starting at index 1
Also note that splice can also add elements with the same call. Just put them as the last parameters. That means you could do this:
var array = ["12", "34", "56"];
array.splice(1, 2, "78", "90"); //array is now ["12", "78", "90"]
Everyone here seems to be suggesting array based solutions but if all you are ever going to do is add/remove elements and check if they are present or not you can consider using an object as a hash table.
var elems = {
'a': true,
'b':true
};
//add someone to the list
elems['c'] = true;
//check if someone is in the list
elems.hasOwnProperty('c');
//remove someone from the list
delete elems[c];
Adding is easy, just use the push() method to add an element to the end of the array.
You can remove the first / last item with shift() and pop() respectively, but if you want to remove a specific element you need to find that element's index using indexOf(), then remove it using splice().
See https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/ for more about the methods.
To add to an array use .push.
var arr = ['12', '34', '56'];
arr.push('78', '90');
Removing a specific element, may take a bit more work. To to that, you'll need to copy the array into a new one (without the element(s) you want to remove).
John Resig (creator of jQuery) posted a function to remove array elements by their indexes (which you'll need to get 1st). His function is here.
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
var arr = ['12', '34', '56'];
arr.remove(arr.indexOf('34'));
arr.remove(arr.indexOf('56'));
Update: .splice could also work to remove elements.
var arr = ['12', '34', '56'];
arr.splice(arr.indexOf('34'), 1);
arr.splice(arr.indexOf('56'), 1);
Note: Array.indexOf may not work in all browsers. There is a function that will add it to older browsers at the MDN docs page.
After learning how this can be done using basic ECMAScript array manipulation (as addressed by the other answers),
I would recommend a set of higher-order functions. Mainly map, flatmap, and filter.
These are rolled into one in the jQuery.map function. However, similar constructs can be found elsewhere, such as in the ECMAScript 5th Edition Array functions (unfortunately does not have a flatmap), or additional libraries like Functional JavaScript, or manually created (which is a great learning exercise).
Happy coding.