There are various inbuilt methods available in JavaScript to work with arrays
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>
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>
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>
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>
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>
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>
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>
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>
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() 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>
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>
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>
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>
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>
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>
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>
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>