JavaScript Array Methods

There are various inbuilt methods available in JavaScript to work with arrays

Convert an Array as comma separated string

toString() method is used to convert an array to a comma separated string

<!DOCTYPE html>
<html>
<body>

Available car makes
<p id="text"></p>
<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];

document.getElementById('text').innerHTML = carMakes.toString();
</script>

</body>
</html>

Download the code Run the code

Like toString method join() method also used to convert an array to string but join method takes a parameter for join character.

<!DOCTYPE html>
<html>
<body>

Available car makes, separated by | character
<p id="text"></p>
<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];

document.getElementById('text').innerHTML = carMakes.join('|');
</script>

</body>
</html>

Download the code Run the code

Push to an Array()

Insert a new element to an array is called push to an array. push() method is used to add new element into an array. push() method returns total elements of an array after inserting a new item.

<!DOCTYPE html>
<html>
<body>

Available car makes
<p id="text"></p>
<p>Add new car make Alpha-romeo using push() method.</p>
<p id="text1"></p>
Total elements : <p id="text2"></p>
<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = carMakes.join();
var totMake = carMakes.push('ALPHA-ROMEO');
document.getElementById('text1').innerHTML = carMakes.join();
document.getElementById('text2').innerHTML = totMake;


</script>

</body>
</html>

Download the code Run the code

Pop item out of an Array()

pop() method is used to remove an item from an array. It removes only last element from array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];

document.getElementById('text').innerHTML = 'Last make : ' +carMakes.pop();
document.getElementById('text').innerHTML += '<br />Now Last make : ' +carMakes.pop();
document.getElementById('text').innerHTML += '<br />Now Last make : ' +carMakes.pop();
document.getElementById('text').innerHTML += '<br />Now Last make : ' +carMakes.pop();

</script>

</body>
</html>

Download the code Run the code

shift() method

shift() method is same as pop() method except shift() method removes first element.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];

document.getElementById('text').innerHTML = 'Last make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();

</script>

</body>
</html>

Download the code Run the code

unshift() method

unshift() method add new element at the beginning of an array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];

document.getElementById('text').innerHTML = 'Last make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();
document.getElementById('text').innerHTML += '<br />Next make : ' +carMakes.shift();

</script>

</body>
</html>

Download the code Run the code

Change value of an array

An array elements is access using index number. Set value for any index for that array will change value of an array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
carMakes[1] = 'ALPHA-ROMEO';
document.getElementById('text1').innerHTML = 'New array : ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

Delete an Array element

delete operator is used to delete an item from an array

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
delete carMakes[1];
document.getElementById('text1').innerHTML = 'New array : ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

As shown in above example output, delete an element does not remove the index from array. It is better to use pop() or shift() methods instead.

Splice an array

splice() method is used to remove some elements and/or insert new elements to an array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
carMakes.splice(2,1, 'ALPHA-ROMEO');
document.getElementById('text1').innerHTML = 'New array : ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

first parameter is for position where need to add new elements.

second parameter is for number of elements to remove from an array.

From third parameter onwards are new element to insert

If only two argument is supplied, than splice() method will remove element only

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
carMakes.splice(2,1);
document.getElementById('text1').innerHTML = 'New array : ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

Sort an array

The sort() method is used to sort an array based on its values in ascending order

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
carMakes.sort();
document.getElementById('text1').innerHTML = 'Sorted array : ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

Reverse an array

The reverse() method is used to reverse an array. reverse() with sort() method cab be used to sort an array in descending order

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var carMakes = ['BMW', 'AUDI', 'TOYOTA', 'SUZUKI'];
document.getElementById('text').innerHTML = 'Old array : ' +carMakes.join();
carMakes.sort();
carMakes.reverse();
document.getElementById('text1').innerHTML = 'Array in reverse order: ' +carMakes.join();

</script>

</body>
</html>

Download the code Run the code

Sort an array with Numeric values

Array sort() function consider array values as strings when sorting. This will works well for alphabetic string values like Egg come before Hen, but if the values are numeric than it will result in wrong order. i.e. 20 comes after 100 as 2 is bigger than 1.

This can be fixed using a compare function as a parameter

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var numbers = [10, 20, 50, 100, 150, 60];
document.getElementById('text').innerHTML = 'Old array : ' +numbers;
numbers.sort(function(a, b){return a-b}); 
document.getElementById('text1').innerHTML = 'New Array : ' +numbers;

</script>

</body>
</html>

Download the code Run the code

same trick can be used for descending order if function parameter is reversed.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var numbers = [10, 20, 50, 100, 150, 60];
document.getElementById('text').innerHTML = 'Old array : ' +numbers;
numbers.sort(function(a, b){return b-a}); 
document.getElementById('text1').innerHTML = 'New Array : ' +numbers;

</script>

</body>
</html>

Download the code Run the code`

Join Arrays

Array concat() method is used to join two or more arrays in new array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var fruits = ["Apple", "Banana"];
var vegetables = ["Potato", "Tomato"];
var grains = ["Wheat", "Rice"];
var Items = fruits.concat(vegetables, grains);
document.getElementById('text').innerHTML = Items;
</script>

</body>
</html>

Download the code Run the code

Slice an Arrays

Slice() method is used to cut(slice) a piece of array in a new array.

<!DOCTYPE html>
<html>
<body>

<p id="text"></p>
<p id="text1"></p>

<script>
var fruits = ["Apple", "Banana", "Orange", "Papaya"];
document.getElementById('text').innerHTML = fruits;
var fruits1 = fruits.slice(1);
document.getElementById('text1').innerHTML = fruits1;
</script>

</body>
</html>

Download the code Run the code

<<< JavaScript ArraysJavaScript Boolean >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .