Author: MDBootstrap
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);
Previous lesson Next lesson
Spread the word:
