Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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, element2, ...);
Basic Array Methods (Adding/Removing Elements)
These methods are essential for manipulating array contents:
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: Basic Array Operations
<!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>
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
Search and Transform Methods
These methods help in searching, joining, and transforming arrays:
includes() method ? This method is used for checking if the array consists of the desired element 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: Array Search and Transform
<!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>
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 Array: 3,1,4,5,2 Sorted Array: 1,2,3,4,5 Original Array before mapping: 1,2,3,4,5 Array after mapping: 5,10,15,20,25
Advanced Array Methods
These methods provide powerful functionality for data processing and conditional operations:
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 ? The find() method finds out the first value which passes the user-specified conditions and findIndex() 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 splice() method removes the selected elements from the original array itself.
some() and every() method ? The some() method checks if at least one element passes the user-specified condition, whereas the every() method checks if all elements pass the user condition.
Example: Advanced Array Operations
<!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);
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 index of element 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 hasNegativeNumbers = arr.some(function(element){
return element < 0;
});
console.log("All elements greater than zero: " + numbersGreaterThanZero);
console.log("Has negative numbers: " + hasNegativeNumbers);
</script>
</body>
</html>
Original Array is: 1,2,3,4,5 Sum of all elements: 15 New Array after filtering: 2,4 Find Element greater than 3: 4 Find index of element 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 All elements greater than zero: true Has negative numbers: false
Method Categories Comparison
| Category | Methods | Purpose |
|---|---|---|
| Mutating | push(), pop(), shift(), unshift(), sort(), splice() | Modify original array |
| Non-mutating | concat(), slice(), map(), filter(), find() | Return new array/values |
| Search/Test | indexOf(), includes(), some(), every() | Find elements or test conditions |
Conclusion
JavaScript arrays provide powerful methods for data manipulation, from basic operations like push/pop to advanced transformations with map/reduce. Understanding these methods is essential for effective JavaScript programming and enables efficient data processing in web applications.
246 Views
