- JavaScript Tutorial
- JavaScript Advantages and Disadvantages
- Adding JavaScript to html
- External JavaScript JS File – Advantages, Disadvantages, Syntax, Attributes
- JavaScript Syntax
- JavaScript Statements
- JavaScript Output
- JavaScript Comments
- Javascript Data Types
- JavaScript Variables
- JavaScript Scope of Variables
- JavaScript Operators
- Javascript ternary operator
- Javascript typeof Operator
- Javascript Arithmetic Operators
- Javascript Assignment
- JavaScript Functions
- JavaScript Anonymous Functions
- JavaScript Callback Functions
- JavaScript Objects
- JavaScript Events
- JavaScript Strings
- JavaScript String Methods
- JavaScript Numbers
- JavaScript Number Methods
- JavaScript Math Object
- JavaScript Date
- JavaScript Date Formats
- JavaScript Date Methods
- JavaScript Arrays
- JavaScript Array Methods
- JavaScript Boolean
- JavaScript Comparisons
- JavaScript Conditions
- JavaScript Switch statement
- JavaScript For loop
- JavaScript while loop
- JavaScript Break and Continue
- JavaScript Type Conversion
- JavaScript Regular Expressions
- JavaScript Errors
- JavaScript Debugging
- JavaScript Conventions
- JavaScript Best Practices
- JavaScript Common Mistakes
- JavaScript Reserved Words
- JavaScript Performance
- JSON Data, format, mime type and parsing
- JavaScript Form Validation
- Forms API
- JavaScript Objects Definition
- JavaScript Object Properties
- JavaScript Object Methods
- JavaScript Object Prototypes
- JavaScript Window Object
- JavaScript Window Screen
- JavaScript Cookies
- JavaScript Location Object
- JavaScript History
- JavaScript Window Navigator
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