DEV Community 👩‍💻👨‍💻

kalhong90s
kalhong90s

Posted on

20 JavaScript: Array Methods

In this tutorial, you will learn JavaScript Array Methods including examples.

JavaScript Array Methods

The following array methods in javascript:

  • Array pop() Method
  • Array push() Method
  • Array toString() Method
  • Array join() Method
  • Array splice() Method
  • Array sort() Method
  • Array shift() Method
  • Array unshift() Method
  • Array reverse() Method
  • Array concat() Method
  • Array slice() Method
  • Array filter() Method
  • Array find() Method
  • Array forEach() Method
  • Array map() Method
  • Array reduce() Method
  • Array some() Method
  • Array every() Method
  • FindIndex() Array Method
  • Array Include() Method
  • IndexOf() Array Method
  • Array lastIndexOf() Method
  • JavaScript Array isArray() Method

1: Array pop() Method
The javascript pop() method is used to remove the last element from an array.

The method returns the value of the removed item.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];
 lang.pop(); 
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
// New array:  PHP, Python, Java
Enter fullscreen mode Exit fullscreen mode

2: Array push() Method
The js push() method is used to add a new element to the end from an array.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];
 lang.push("JavaScript");  
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
// New array:  PHP, Python, Java, C, JavaScript
Enter fullscreen mode Exit fullscreen mode

3: Array toString() Method
The js toString() method is used to convert array to string.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];
 lang.toString();
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// output
PHP, Python, Java, C

4: Array join() Method
The javascript join() method is used to join the elements of an array into a string.

In otherwords, The "join()" method puts all the elements of the array into a string list. This method difference from "toString()" method.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];
 lang.join(" - ");
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// output
PHP - Python - Java - C
Enter fullscreen mode Exit fullscreen mode

5: Array splice() Method
The javascript splice() method is used to add and remove items from an array.

syntax
================
array.splice(index, howMany, [element1][, …, elementN]);
Enter fullscreen mode Exit fullscreen mode
  • index − Index param specifies where a new item should be inserted.
  • howMany − An integer indicating the number of old array elements to remove.
  • If howMany set to 0, no items will be removed in array list. Ex:-
 var lang = ["PHP", "Python", "Java", "C"];
 lang.splice(2, 0, "Javascript", "Rust"); 
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// Output
new array: PHP, Python, Javascript, Rust, Java, C
Enter fullscreen mode Exit fullscreen mode

6: Array sort() Method
The javascript array sort() method either alphabetic or numeric sorts an array.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];
 lang.sort();
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// Outuput
array: C, Java, PHP, Python
Enter fullscreen mode Exit fullscreen mode

7: Array shift() Method
The javascript shift() method is used to remove the first element from an array.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"]; 
 lang.shift(); 
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// Output
new array: Python, Java, C
Enter fullscreen mode Exit fullscreen mode

8: Array unshift() Method
The js unshift() method adds a new element to the beginning of an array.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"]; 
 cars.unshift("JavaScript");   
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

//Output 
New array: JavaScript, PHP, Python, Java, C
Enter fullscreen mode Exit fullscreen mode

9: Array reverse() Method
The method is used for reverses the order of the elements in an array.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];             
 lang.reverse();   
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// Outuput
array: C, Java, PHP, Python
Enter fullscreen mode Exit fullscreen mode

10: Array concat() Method
The javascript concat() method joins two or more arrays and makes a new one.

Ex:-

 var lang = ["PHP", "Python", "Java", "C"];  
 var newlang = ["JavaScript", "Rust"];  
 var join = lang.concat(newlang); 
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

// Output
New array: PHP, Python, Java, C, JavaScript, Rust
Enter fullscreen mode Exit fullscreen mode

11: Array slice() Method
The js slice() array() method is used to selected elements in an array and make a new one. It can take one or two arguments.

Ex:-

 var lang = ["PHP", "Python", "Java", "C", "JavaScript"];
 var lang = cars.slice(1, 4); 
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

//Output 
New Array : Python, JavaScript
Enter fullscreen mode Exit fullscreen mode

12: Array filter() Method
The js filter() method is used to filter the array, according our conditions.

Ex:-

<p>function isCheck(value) {<br>
  return value < 10;<br>
}

var filter = [10, 5, 16, 4, 7, 12].filter(isCheck);
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
 //new array: 5,4,7
Enter fullscreen mode Exit fullscreen mode

In this example the function filter() creates a new array. Those elements that satisfy the condition checked by isCheck() function.

13: Array find() Method
The js find() method is used find the first element of an array.

Ex:-

function isCheck(value) {
  return value >= 10;
}
var find= [10, 5, 16, 4, 7, 12].find(isCheck);
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
// 12
Enter fullscreen mode Exit fullscreen mode

14: Array forEach() Method
The JavaScript Array forEach method permits the call of a function on each element of an array in an easy way.

Ex:-

 var num = [18, 12, 10, 15];
 num.forEach(function(item) {
    document.writeln(item);
 });
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
 // return 
18 12 10 15
Enter fullscreen mode Exit fullscreen mode

15: Array map() Method
The js map() method, creates an array by calling a specific function on each element in the original array.

Ex:-

var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt);
document.write(x);
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

 Output
 // return   
 2,3,4,5 
Enter fullscreen mode Exit fullscreen mode

16: Array reduce() Method
The javascript array reduce() method reduces the array to a single value.

Ex:-

var numArr = [
        {  name: 'a', num: 50},
        {  name: 'b', num: 50},
        {  name: 'c', num: 75},
        {  name: 'd', num: 35},
        {  name: 'e', num: 25 },
        {  name: 'f', num: 40 },
    ];

    var sum = numArr.reduce(function (total, currentValue) {
        return total + currentValue.num;
    }, 0);

    document.write( "javascript- Sum of the array value is :- " + sum );
Enter fullscreen mode Exit fullscreen mode

Result of the above example is:

Output
 // return   
 275
Enter fullscreen mode Exit fullscreen mode

17: Array some() Method
The javascript array some() method checks whether at least one element of the array matches the given predicate. if none of the array elements match the predicate, then it will return false