Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the Important Array Methods in JavaScript?
In this article, we are going to explore different methods provided by Array and their importance in JavaScript. We will learn how to use them and what are their actual use cases with the help of examples.
Before moving on to methods, below is the syntax for creating an array in JavaScript −
let array = [element1, element2, ...
Alternatively, we can also define the array as follows −
let array = new Array (element1, elemnet2, ...
Now, we will be learning about the different methods in the array:
push() method − This method is used for pushing an element into the array. The element will be added from the end.
pop() method − This method is used for popping the element from the array. The element that will be deleted will be taken from the end.
shift() method − We can delete the first element from the array using this method.
unshift() method − This method can add elements into the array from the front.
indexOf() method − This method is used for finding out a particular element from the array.
Example 1
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4];
console.log("Array is: " + array)
array.push(5);
console.log("Array after pushing 5: " + array);
let lastElement = array.pop();
console.log("Element popped: " + lastElement);
console.log("Array after popping: " + array);
let firstElement = array.shift();
console.log("Element popped from starting: " + firstElement);
console.log("Array after shifting: " + array);
array.unshift(9);
console.log("Array after unshifting: " + array);
console.log("Index of 3: " + array.indexOf(3));
</script>
</body>
</html>Output
It will produce the following result in the Console.
Array is: 1,2,3,4 Array after pushing 5: 1,2,3,4,5 Element popped: 5 Array after popping: 1,2,3,4 Element popped from starting: 1 Array after shifting: 2,3,4 Array after unshifting: 9,2,3,4 Index of 3: 2
includes() method − This method is used for checking if the array consists of the desired method or not.
concat() method − This method joins two different arrays from end to end and returns a new array.
forEach() method − This method is an iterator that is used to iterate over the array. It will iterate over each element from the array and we can perform any operations on them as per our choice.
sort() method − This method sorts the elements in alphabetical order or the ascending order.
map() method − This method iterates over the array and transforms the array as per the user’s conditions. It maps the field or value as defined by the user in the map predicate.
Example 2
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4,5];
console.log("Does array include 3: " + array.includes(3));
console.log("Does array include 7: " + array.includes(7));
let secondArray = [6,7,8,9,10];
let newArray = array.concat(secondArray);
console.log("First array: " + array);
console.log("Second array: " + secondArray);
console.log("New array: " + newArray);
console.log("All Elements are: ")
array.forEach(function(element){
console.log(element)
});
array = [3,1,4,5,2]
console.log("Original Array" + array);
array.sort();
console.log("Sorted Array" + array);
console.log("Original Array before mapping: " + array);
let arrayV2 = array.map(function(element){
return element * 5;
});
console.log("Array after mapping: " + arrayV2);
</script>
</body>
</html>Output
It will produce the following output in the Console.
Does array include 3: true Does array include 7: false First array: 1,2,3,4,5 Second array: 6,7,8,9,10 New array: 1,2,3,4,5,6,7,8,9,10 All Elements are: 1 2 3 4 5 Original Array3,1,4,5,2 Sorted Array1,2,3,4,5 Original Array before mapping: 1,2,3,4,5 Array after mapping: 5,10,15,20,25
reduce() method − This method uses a reducer function that reduces the results into a single output.
filter() method − This method is used to filter out the contents as per the conditions defined by the user.
find() & findIndex() method − This method finds out the first value which passes the user-specified conditions and findIndexfindIndex() method finds out the first index value which passes the user-specified conditions.
slice() & splice() method − The slice() method selects the specified number of elements without changing the actual array whereas the splicesplice() method removes the selected elements from the original array itself.
some() and every() method − The somesome() method checks the user specified condition on some elements of the array i.e. It only checks the specific elements of the array, whereas as the name suggests everyevery() method checks the user condition on every element of the array.
Example 3
#Filename: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Array Methods</title>
</head>
<body>
<h1 style="color: red;">
Welcome To Tutorials Point
</h1>
<script>
let array = [1,2,3,4,5]
console.log("Original Array is: " + array);
let sumOfElements = array.reduce(
function (accumulator, element) {
return accumulator + element;
});
console.log("Sum of all elements: " + sumOfElements);
console.log(array);
let newArray = array.filter(function (element) {
return element % 2 === 0;
});
console.log("New Array after filtering: " + newArray);
let findElement = array.find(function(element){
return element > 3
});
console.log("Find Element greater than 3: " + findElement);
let findIndexValue = array.findIndex(function(element){
return element > 3
});
console.log("Find indexes of elements greater than 3: " + findIndexValue);
let sliceArray = array.slice(0, 2);
console.log("Slice Array from 0,2: " + sliceArray);
console.log("Original Array: " + array);
let spliceArray = array.splice(0, 2);
console.log("Splice Array after 0,2: " + spliceArray);
console.log("Original Array after splice: " + array);
let arr = [1, 2, 3, 4, 5];
let NumbersGreaterThanZero = arr.every(
function(element){
return element > 0
});
let NumbersLessThanZero = arr.some(
function(element){
return element < 0
});
console.log("Elements greater than zero with some(): " + NumbersGreaterThanZero);
console.log("Elements greater than zero with every(): " + NumbersLessThanZero);
</script>
</body>
</html>Output
It will produce the following output in the Console.
Original Array is: 1,2,3,4,5 Sum of all elements: 15 (5) [1, 2, 3, 4, 5] New Array after filtering: 2,4 Find Element greater than 3: 4 Find indexes of elements greater than 3: 3 Slice Array from 0,2: 1,2 Original Array: 1,2,3,4,5 Splice Array after 0,2: 1,2 Original Array after splice: 3,4,5 Elements greater than zero with some(): true Elements greater than zero with every(): false
109 Views
To Continue Learning Please Login