This article provides you with the JavaScript Array methods that allow you to manipulate arrays effectively.
1. Converting Arrays to Strings
A. toString()
The toString() method converts an array to a string of (comma separated) array values.
let animals = ["dog", "cat", "tiger", "lion"];
animals.toString();
Output
dog,cat,tiger,lion
B. join()
join methods
The join() method also joins all array elements into a string. It behaves just like toString(), but in addition you can specify the separator:
let animals = ["dog", "cat", "tiger", "lion"];
animals.join("*");
Output
dog*cat*tiger*lion
2. Adding and removing items
A. pop()
The pop() method removes the last element from an array.
let animals = ["dog", "cat", "tiger", "lion"];
animals.pop();
Output
animals = ["dog", "cat", "tiger"];
B. push()
The push() method adds a new element to the end of the array.
animals = ["dog", "cat", "tiger"];
animals.push("leopard");
Output
animals = ["dog", "cat", "tiger", "leopard"];
C. shift()
The shift() method removes the first array element and "shifts" all other elements to a lower index.
animals = ["dog", "cat", "tiger", "leopard"];
animals.shift();
Output
animals = ["cat", "tiger", "leopard"];
D. unshift()
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
animals = ["cat", "tiger", "leopard"];
animals.unshift("fox");
Output
animals = ["fox", "cat", "tiger", "leopard"];
3. Concatenating arrays
The concat() method creates a new array by merging (concatenating) existing arrays.
let animals1 = ["dog", "cat"];
let animals2 = ["tiger", "lion"];
animals = animals1.concat(animals2)
Output
animals = ["dog", "cat", "tiger", "lion"];
4. Splicing arrays
A. Adding items using splice()
The splice() method can be used to add new items to an array.
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.
Example 1
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
Output
fruits = ["Banana", "Orange", "Lemon", "Kiwi", "Apple", "Mango"];
Example 2
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");
Output
fruits = ["Banana", "Orange", "Lemon", "Kiwi"];
B. Removing items using splice()
The splice() method can be used to remove elements without leaving "holes" in the array.
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);
Output
fruits = ["Orange", "Apple", "Mango"];
5. Slicing arrays
A. Adding items using splice()
The slice() method slices out a piece of an array into a new array. The slice() method always creates a new array, and does not remove any elements from the source array.
Example 1
This example slices out a part of an array starting from array element 1 ("Orange").
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1);
Output
fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
citrus = ["Orange", "Lemon", "Apple", "Mango"];
Example 2
The slice() method can take two arguments like slice(1, 3). If the end argument is omitted, like in the first examples, the slice() , 3method slices out the rest of the array.
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(1);
Output
fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
citrus = ["Orange", "Lemon"];