JavaScript Array Methods
The strength of JavaScript arrays lies in the array methods.
Converting Arrays to Strings
In JavaScript, all objects have the valueOf() and toString() methods.
The valueOf() method is the default behavior for an array. It returns an array as a string:
Example
document.getElementById("demo").innerHTML = fruits.valueOf();
Try it Yourself »
For JavaScript arrays, valueOf() and toString() are equal.
Example
document.getElementById("demo").innerHTML = fruits.toString();
Try it Yourself »
The join() method also joins all array elements into a string.
It behaves just like toString(), but you can specify the separator:
Example
<script>
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
</script>
Try it Yourself »
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.
The pop() method removes the last element from an array:
Example
fruits.pop(); // Removes the last element ("Mango") from fruits
Try it Yourself »
The push() method adds a new element to an array (at the end):
 |
Remember: [0] is the first element in an array. [1] is the second. Array indexes start with 0. |
|---|
Example
fruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits
Try it Yourself »
The pop() method returns the string that was "popped out".
The push() method returns the new array length.
Shifting Elements
Shifting is equivalent to popping, working on the first element instead of the last.
The shift() method removes the first element of an array, and "shifts" all other elements one place down.
Example
fruits.shift(); // Removes the first element "Banana" from fruits
Try it Yourself »
The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
Example
fruits.unshift("Lemon"); // Adds a new element "Lemon" to fruits
Try it Yourself »
The shift() method returns the string that was "shifted out".
The unshift() method returns the new array length.
Changing Elements
Array elements are accessed using their index number:
Example
fruits[0] = "Kiwi"; // Changes the first element of fruits to "Kiwi"
Try it Yourself »
The length property provides an easy way to append a new element to an array:
Example
fruits[fruits.length] = "Kiwi"; // Appends "Kiwi" to fruit
Try it Yourself »
Deleting Elements
Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete:
Example
delete fruits[0]; // Changes the first element in fruits to undefined
Try it Yourself »
|
Using delete on array elements leaves undefined holes in the array. Use pop() or splice() instead. |
|---|
Splicing an Array
The splice() method can be used to add new items to an array:
Example
fruits.splice(2, 0, "Lemon", "Kiwi");
Try it Yourself »
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.
Using splice() to Remove Elements
With clever parameter setting, you can use splice() to remove elements without leaving "holes" in the array:
Example
fruits.splice(0,1); // Removes the first element of fruits
Try it Yourself »
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.
Sorting an Array
The sort() method sorts an array alphabetically:
Example
fruits.sort(); // Sorts the elements of fruits
Try it Yourself »
The sort() method takes a function as parameter. The function can be used to define the sort method.
Reversing an Array
The reverse() method reverses the elements in an array.
You can use it to sort an array in descending order:
Example
fruits.sort(); // Sorts the elements of fruits
fruits.reverse(); // Reverses the order of the elements
Try it Yourself »
Numeric Sort
The sort() method cannot be used on a number array, because it sorts alphabetically (25 is bigger than 100).
You can fix this by providing a function that returns -1, 0, or 1:
Example
points.sort(function(a, b){return a-b});
Try it Yourself »
Use the same trick to sort an array descending:
Example
points.sort(function(a, b){return b-a});
Try it Yourself »
Calling function(a, b) returns -1, 0, or 1, depending on the values of a and b.
The arguments are provided by the sort() method when it compares two values.
Example: When comparing 40 and 100, the sort() method calls function(40,100).
Find the Highest (or Lowest) Value
How to find the highest value in an array?
Example
points.sort(function(a, b){return b-a});
// now points[0] contains the highest value
Try it Yourself »
And the lowest:
Example
points.sort(function(a, b){return a-b});
// now points[0] contains the lowest value
Try it Yourself »
Joining Arrays
The concat() method creates a new array by concatenating two arrays:
Example
var myBoys = ["Emil", "Tobias","Linus"];
var myChildren = myGirls.concat(myBoys); // Concatenates (joins) myGirls and myBoys
Try it Yourself »
The concat() method can take any number of array arguments:
Example
var arr2 = ["Emil", "Tobias","Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3); // Concatenates arr1 with arr2 and arr3
Try it Yourself »
Slicing an Array
The slice() method slices out a piece of an array:
Example
var citrus = fruits.slice(1,3);
Try it Yourself »
Complete Array Reference
For a complete reference, go to our Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.
Your suggestion:
Thank You For Helping Us!
Your message has been sent to W3Schools.
