JavaScript arrays come with some functions that make it very easy to add or remove items of an array: push, unshift, splice, concat, pop,  …

Adding elements to a JavaScript array

  • Use push to add an item to the end of an array.
    var cars = ["Toyota", "Nissan", "Honda"];
    cars.push("Mitsubishi");
    

    This results in this array:

    ["Toyota", "Nissan", "Honda", "Mitsubishi"]
    
  • Use unshift to add an item to the beginning of an array.
    var cars = ["Toyota", "Nissan", "Honda"];
    cars.unshift("Mitsubishi");
    

    This results in this array:

    ["Mitsubishi","Toyota", "Nissan", "Honda"]
    
  • Use splice to add an item to any position in an array.
    When we want to use the splice function to add items to an array we need to specify the index at which we want to insert the new items, and the item or items we want to insert at that position:

    array.splice(index,0, item1,..., itemN);
    

    For example:

    var cars = ["Honda","Nissan","Toyota"];
    cars.splice(1,0,"Mazda","Mitsubishi");
    

    This results in this array:

    ["Honda", "Mazda", "Mitsubishi", "Nissan", "Toyota"]
    

    What does the zero in cars.splice(1,0,”Mazda”,”Mitsubishi”) mean? Well, splice is a function that can be used both to add and to remove items of an array, and the second parameter in the function indicates how many elements are going to be removed from the array at the selected index. Since in this case we are using splice to add items, and we don’t want to remove any item we say that the items we are going to remove are 0: that is none.

  • Use concat to add one array to the end of the other.
    var cars = ["Toyota", "Nissan"];
    console.log(cars.concat(["Honda","Mitsubishi"]));
    

    This results in the following array being printed in console:

    ["Toyota", "Nissan", "Honda", "Mitsubishi"]
    

    Notice that concat does not modify the existing arrays. When joining arrays with concat a new array – containing the values of the joined arrays – is returned.

Removing elements from a JavaScript array

  • Use pop to remove the last element of an array.
    var cars = ["Toyota", "Nissan","Honda"];
    var elementRemoved= cars.pop();
    

    This results in this array:

    ["Toyota", "Nissan"]
    

    Notice also that the pop function returns the element removed: in our example above if we were to print the value of elementRemoved we would see the string “Honda”.

  • Use shift to remove the first element of an array.
    var cars = ["Toyota", "Nissan","Honda"];
    var elementRemoved= cars.shift();
    

    This results in this array:

    ["Nissan","Honda"]
    

    As pop the shift function return the element removed. So this time the elementRemoved is “Toyota”.

  • Use splice to remove items from any position in an array.
    As we said before splice can also be used to remove items from an array.
    In this case we will use the function splice like this:

    array.splice(index,numberOfItemsToBeRemoved);
    

    Let’s see how that works:

    var cars = ["Honda", "Mazda", "Mitsubishi", "Nissan", "Toyota"]
    cars.splice(1,2);
    

    This results in this array:

    ["Honda", "Nissan", "Toyota"]
    

    Notice that as it was the case with pop and shift the splice function returns the elements removed. As splice is not limited to remove a single element, but can remove a range of them splice will always return an array containing the element or elements removed.

Advertisements