Post
Ask Question

JavaScript Array Methods

Introduction

 
Before we go to the array methods, we should know about JavaScript Array. A JavaScript array holds more than one value in a single variable.  Like other arrays, the JavaScript array index starts from 0. Array stores similar types of data. We can fetch the values from JavaScript array using an index numbers. Array definitions are allocated memory in a sequence.
 
Declaration 
 
We can declare arrays in two ways. The following are the ways. 
  1. Var colors=["Red","Green","Blue"];    
  2. Var colors=new Array("Red","Green","Blue");    
There is no difference between the above two methods. For faster performance and readability, we don't need the new Array() method.
 

List of Array methods 

 
The followings are the JavaScript array methods.
 
concat() 
 
It concatenates more than one array and returns the new joined array.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="concatArray()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. function concatArray() {        
  7.  var colors=["Red","Green","Blue"];        
  8. var friends=["Bibhu","Omm","Niladri"];        
  9. var Office=["Mindtree"];        
  10.   var concat= Office.concat(colors,friends);         
  11.   document.getElementById("pDemo").innerHTML = concat;        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>    
copyWithin() 
 
Using this method, we can copy the array elements from one position to a different position, overwriting with the existing value.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="arrayCopyWithin()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>      
  6. var colors=["Red","Green","Blue"];        
  7. function arrayCopyWithin() {        
  8.   document.getElementById("pDemo").innerHTML = colors.copyWithin(1,0);      
  9. }      
  10. </script>    
  11.     </body>    
  12. </html>     
entries()
 
We can insert another key/value for each element of the array. For example - we can insert the index method to the array. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var colors=["Red","Green","Blue"];        
  6. var _color = colors.entries();        
  7. for (x of _color) {        
  8.   document.getElementById("pDemo").innerHTML += x + "    
  9.             <br>";        
  10. }        
  11.     
  12.             </script>    
  13.         </body>    
  14.     </html>    
every() 
 
It checks if all methods pass a test or not. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="getEveryValueCondition()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks = [70, 30, 35, 50];        
  7. function checkPass(markList ) {        
  8.   return markList >= 40;        
  9. }        
  10. function getEveryValueCondition() {        
  11.   document.getElementById("pDemo").innerHTML = marks .every(checkPass);        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>     
fill() 
 
All array elements will override with a specific element. It works as a static value. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="fillTheArray()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var friends=["Bibhu","Omm","Niladri"];        
  7. function fillTheArray() {          
  8.   document.getElementById("pDemo").innerHTML = friends.fill("Pradosh");        
  9. }        
  10. </script>    
  11.     </body>    
  12. </html>    
filter() 
 
It returns the elements that pass a specific condition.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="filterArray()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks= [70, 30, 35, 55];         
  7. function filterMarks(marks) {        
  8.   return marks >= 37;        
  9. }         
  10. function filterArray() {        
  11.   document.getElementById("pDemo").innerHTML = marks.filter(filterMarks);        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>      
find() 
 
Returns the fist passed element. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="findArray()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks = [70,37, 50, 38];        
  7. function checkMarks(marks) {        
  8.   return marks >= 35;        
  9. }        
  10. function findArray() {        
  11.   document.getElementById("pDemo").innerHTML = marks.find(checkMarks);        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>    
findIndex() 
 
Finds the index of the first passed element.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="checkMarks()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks = [25,35,45,55];        
  7. function chcekPass(marks) {        
  8.   return marks >= 37;        
  9. }        
  10. function checkMarks() {        
  11.   document.getElementById("pDemo").innerHTML = marks.findIndex(chcekPass);        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>      
forEach() 
 
Iterates the array till the array index doesn't finish.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var colors=["Red","Green","Blue"];        
  6. colors.forEach(forEachFunction);        
  7. function forEachFunction(item, index) {        
  8.   document.getElementById("pDemo").innerHTML += index + ":" + item + "    
  9.             <br>";         
  10. }        
  11.     
  12.             </script>    
  13.         </body>    
  14.     </html>    
from() 
 
It creates an array from a string. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var array = Array.from("BIDYASAGAR");        
  6. document.getElementById("pDemo").innerHTML = array;        
  7. </script>    
  8.     </body>    
  9. </html>     
includes()
 
Finds the given value in an array. Returns true/false 
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var colors=["Red","Green","Blue"];        
  6. var _colors= colors.includes("Green");        
  7. document.getElementById("pDemo").innerHTML = _colors;        
  8. </script>    
  9.     </body>    
  10. </html>     
indexOf() 
 
Finds the given element's index number
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>          
  5. var colors=["Red","Green","Blue"];          
  6. var _colors= colors.indexOf("Green");          
  7. document.getElementById("pDemo").innerHTML = _colors;          
  8. </script>    
  9.     </body>    
  10. </html>    
isArray()
 
It returns true if the variable is an array.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>          
  5. var colors=["Red","Green","Blue"];          
  6. var _colors= Array.isArray(colors);        
  7. document.getElementById("pDemo").innerHTML = _colors;          
  8. </script>    
  9.     </body>    
  10. </html>     
join() 
 
It returns an array as a string.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>          
  5. var colors=["Red","Green","Blue"];          
  6. var _colors= colors.join();        
  7. document.getElementById("pDemo").innerHTML = _colors;          
  8. </script>    
  9.     </body>    
  10. </html>       
keys() 
 
Creates an iteration object from the array, Holds the index keys.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var colors=["Red","Green","Blue"];        
  6. var _colors = colors.keys();        
  7. for (items of _colors) {        
  8.   document.getElementById("pDemo").innerHTML += items + "    
  9.             <br>";        
  10. }        
  11.     
  12.             </script>    
  13.         </body>    
  14.     </html>     
lastIndexOf() 
 
Holds the last index of an array element.  
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>            
  5. var colors=["Red","Green","Blue"];            
  6. var _colors= colors.lastIndexOf("Blue");          
  7. document.getElementById("pDemo").innerHTML = _colors;            
  8. </script>    
  9.     </body>    
  10. </html>    
valueOf() 
 
Returns the value of an array  
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>            
  5. var colors=["Red","Green","Blue"];            
  6. var _colors= colors.valueOf("Blue");          
  7. document.getElementById("pDemo").innerHTML = _colors;            
  8. </script>    
  9.     </body>    
  10. </html>    
map() 
 
It will loop each element of the array. Inside map(), we will assign another task. Each element will run with that task. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="mapMarks()">Click</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks=[25,35,45,55];        
  7. function mapMarks() {        
  8.   numbers= document.getElementById("pDemo")        
  9.   numbers.innerHTML = marks.map(Math.sqrt);        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>   
pop() 
 
Deletes the last element of an array. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="popFunction()">Clear</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var friends=["Bibhu","Omm","Niladri"];        
  7. function popFunction() {        
  8.   friends.pop();        
  9.   document.getElementById("pDemo").innerHTML = friends;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>     
push() 
 
Inserts item as the last element of the array.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="pushFunction()">Add</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var friends=["Bibhu","Omm","Niladri"];        
  7. function pushFunction() {        
  8.   friends.push("Pradosh");        
  9.   document.getElementById("pDemo").innerHTML = friends;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>   
reduce() 
 
Reduces the array to a single value using left to right order.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var marks=[525,43,45]        
  6. document.getElementById("pDemo").innerHTML = marks.reduce(reduceFunction);        
  7. function reduceFunction(total, num) {        
  8.   return total - num;        
  9. }        
  10. </script>    
  11.     </body>    
  12. </html>   
reduceright() 
 
Reduces the array to a single value using the right to left order.
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var marks=[525,43,45]        
  6. document.getElementById("pDemo").innerHTML = marks.reduceRight(reduceRightFunction);        
  7. function reduceRightFunction(total, num) {        
  8.   return total - num;        
  9. }        
  10. </script>    
  11.     </body>    
  12. </html>   
reverse() 
 
Reverses the order of array elements. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="reverseColors()">Reverse</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var colors=["Red","Green","Blue"];        
  7. document.getElementById("pDemo").innerHTML = fruits;        
  8. function reverseColors() {        
  9.   colors.reverse();        
  10.   document.getElementById("pDemo").innerHTML = colors;        
  11. }        
  12. </script>    
  13.     </body>    
  14. </html>     
shift()
 
Deletes the first element of the array and returns the rest amount.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="shiftFunction()">Shift</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var colors=["Red","Green","Blue"];        
  7. function shiftFunction() {        
  8.   colors.shift();        
  9.   document.getElementById("pDemo").innerHTML = colors;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>    
slice() 
 
Selects an element from the array using index range. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="sliceFunction()">Slice</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. function sliceFunction() {        
  7. var colors=["Red","Green","Blue","Yellow"];        
  8.   var sliceColor = colors.slice(2, 3);        
  9.   document.getElementById("pDemo").innerHTML = sliceColor;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>      
some() 
 
Checks if given elements are available or not.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="someFunction()">Some</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var marks=[25,35,45,55]        
  7. function checkMark(mark) {        
  8.   return mark >= 18;        
  9. }        
  10. function someFunction() {        
  11.   document.getElementById("pDemo").innerHTML = marks.some(checkMark);        
  12. }        
  13. </script>    
  14.     </body>    
  15. </html>    
sort() 
 
Used for sorting the array elements. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <p id="pDemo"></p>    
  4.         <script>        
  5. var friends=["Bibhu","Omm","Niladri"];        
  6.   friends.sort();        
  7.   document.getElementById("pDemo").innerHTML = friends;        
  8. </script>    
  9.     </body>    
  10. </html>    
splice() 
 
Removes and adds elements to the array. 
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="spliceFunction()">Splice</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var friends=["Bibhu","Omm","Niladri","Pradosh"];        
  7. function spliceFunction() {        
  8.   friends.splice(2, 0, "Sambit", "Bata");        
  9.   document.getElementById("pDemo").innerHTML = friends;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>     
tostring() 
 
Converts array into a string.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="toStringFunction()">String</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. function toStringFunction() {        
  7.   var friends=["Bibhu","Omm","Niladri"];        
  8.   var _friends = friends.toString();        
  9.   document.getElementById("pDemo").innerHTML = _friends;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>     
unshift() 
 
Insert new items to the array in the beginning.
 
Example
  1. <html>    
  2.     <body>    
  3.         <button onclick="unshiftFunction()">Unshift</button>    
  4.         <p id="pDemo"></p>    
  5.         <script>        
  6. var friends=["Bibhu","Omm","Niladri"];        
  7. function unshiftFunction() {        
  8.   friends.unshift("Bidya", "Sambit");        
  9.   document.getElementById("pDemo").innerHTML = friends;        
  10. }        
  11. </script>    
  12.     </body>    
  13. </html>    

Summary 

 
In this session, I discussed the commonly used JavaScript array methods. I hope this session will help beginners. 


Similar Articles