JavaScript array methods

web
mobile

Popping and Pushing

When you work with arrays, it is easy to remove elements and add new elements.

This is what popping and pushing is:

Popping items out of an array, or pushing items into an array.


Popping

The pop() method removes the last element from an array:


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.pop();              // Removes the last element ("Mango") from fruits
      

The pop() method returns the value that was "popped out":


                    var fruits = ["Banana", "Orange", "Apple", "Mango"];
                    var x = fruits.pop();      // the value of x is "Mango"
                

More examples


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      x = fruits;         // Banana,Orange,Apple,Mango
                      y = fruits.pop();   // Mango
                      z = fruits;         // Banana,Orange,Apple
                

Pushing

The push() method adds a new element to an array (at the end):


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits
                

The push() method returns the new array length:


                    var fruits = ["Banana", "Orange", "Apple", "Mango"];
                    var x = fruits.push("Kiwi");   //  the value of x is 5
                

Shifting Elements

Shifting is equivalent to popping, working on the first element instead of the last.

The shift() method removes the first array element and "shifts" all other elements to a lower index.


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.shift();            // Removes the first element "Banana" from fruits
                    

The shift() method returns the string that was "shifted out":


                    var fruits = ["Banana", "Orange", "Apple", "Mango"];
                    var x = fruits.shift();    // the value of x is "Banana"
                

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits
                  

The unshift() method returns the new array length.


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.unshift("Lemon");    // Returns 5
                

Changing Elements

Remember: Array indexes start with 0. [0] is the first array element, [1] is the second, [2] is the third ...

Array elements are accessed using their index number:


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits[0] = "Kiwi";        // Changes the first element of fruits to "Kiwi"
                

The length property provides an easy way to append a new element to an array:


                    var fruits = ["Banana", "Orange", "Apple", "Mango"];
                    fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruits
                

Splicing an Array

The splice() method can be used to add new items to an array:


                    var fruits = ["Banana", "Orange", "Apple", "Mango"];
                    fruits.splice(2, 0, "Lemon", "Kiwi");   // Result: Banana,Orange,Lemon,Kiwi,Apple,Mango
                

The first parameter (2) defines the position where new elements should be added (spliced in).

The second parameter (0) defines how many elements should be removed.

The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.

The splice() method returns an array with the deleted items:


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      x = fruits.splice(2, 2, "Lemon", "Kiwi");
                      alert(x);  // Alert: Apple,Mango
                  

Using splice() to Remove Elements

With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:


                      var fruits = ["Banana", "Orange", "Apple", "Mango"];
                      fruits.splice(0, 1); 
                    

The first parameter (0) defines the position where new elements should be added (spliced in).

The second parameter (1) defines how many elements should be removed.

The rest of the parameters are omitted. No new elements will be added.


                    <button onclick="myFunction()">Try it</button>
      
          <p id="example-1"></p>
      
          <script>
            var fruits = ["Banana", "Orange", "Apple", "Mango"];
            document.getElementById("example-1").innerHTML = fruits;
            function myFunction() {
                fruits.splice(0, 1);
                document.getElementById("example-1").innerHTML = fruits;
            }
        </script>
                

Live preview - with every click you will remove one item


Exercises - test your knowledge

Exercise 1

Use the correct Array method to remove the last item of the fruits array.


                    var fruits = ["Banana", "Orange", "Apple"];
                

                    var fruits = ["Banana", "Orange", "Apple"];
                    fruits.pop();
                

Exercise 2

Use the correct Array method to add "Kiwi" to the fruits array.


                    var fruits = ["Banana", "Orange", "Apple"];
                

                    var fruits = ["Banana", "Orange", "Apple"];
                    fruits.push("Kiwi");
                

Exercise 3

Use the splice() method to remove "Orange" and "Apple" from fruits.


                    var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
                

                        var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
                        fruits.splice(1,2);
                

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.