What are the Important Array Methods of JavaScript ?
In this article, we will try to understand various important Array methods (like push(), pop(), and so on) with the help of certain examples.
Let us first understand how we can create an array in JavaScript by using certain syntax provided.
Syntax:
let array = [element1, element2, .....]
Alternatively, we may also use the Array class (using a new keyword along with the Array class default constructor) for creating new Array elements, but it is always recommended that we must prefer using the above literal syntax.
let array = new Array (element1, elemnet2, .....);
Example: In this example, we will create an array using both the methods discussed above.
let array = ['Hello',
'w3wiki', 'JavaScript'];
console.log(array);
let newArray = new Array('Hello',
'w3wiki', 'JavaScript');
console.log(newArray);
Output:
['Hello', 'w3wiki', 'JavaScript']
['Hello', 'w3wiki', 'JavaScript']
Now that we have understood the creation of an array with the help of an example, let us now jump into several methods which are associated with the array.
JavaScript Array Methods:
Table of Content
- JavaScript push() Method
- JavaScript pop() Method
- JavaScript shift() Method
- JavaScript unshift() Method
- JavaScript indexOf() Method
- JavaScript includes() Method
- JavaScript concat() Method
- JavaScript forEach() Method
- JavaScript sort() Method
- JavaScript map() method
- JavaScript reduce() Method
- JavaScript filter() Method
- JavaScript find() & findIndex() Method
- JavaScript slice() & splice() Method
- JavaScript some() and every() Method
- Javascript forEach() method
- JavaScript Array reverse() Method
- Javascript Array every() method
JavaScript push() Method
This method is used to insert the elements from the end into an array.
Example: In this example, we will insert an element at the end of the array using the push() method.
let array = ['Hello','w3wiki',
'JavaScript'];
array.push('React');
console.log(array);
Output
[ 'Hello', 'w3wiki', 'JavaScript', 'React' ]
JavaScript pop() Method
This method deletes the last element present in the array.
Example: In this example, we will remove an element from the beginning of the array using the pop() method.
let array = ["Hello", "w3wiki", "JavaScript"];
let lastElement = array.pop();
console.log(lastElement);
console.log(array);
Output
JavaScript [ 'Hello', 'w3wiki' ]
JavaScript shift() Method
This method is used to delete the first element from the array.
Example: In this example, we will remove an element from the beginning of the array using the shift() method.
let array = ["Hello", "w3wiki", "JavaScript"];
let firstElement = array.shift();
console.log(firstElement);
console.log(array);
Output
Hello [ 'w3wiki', 'JavaScript' ]
JavaScript unshift() Method
This method is used to add the elements in the array from the front side.
Example: In this example, we will insert an element at the beginning of the array using the unshift() method.
let array = ["Hello", "w3wiki", "JavaScript"];
array.unshift("React");
console.log(array);
Output
[ 'React', 'Hello', 'w3wiki', 'JavaScript' ]
JavaScript indexOf() Method
This method is used to find the index of a particular element in an array.
Example: In this example, we will find out the index of the elements using the indexOf() method.
let array = ["Hello", "w3wiki", "JavaScript"];
console.log(array.indexOf('w3wiki'));
Output
1
JavaScript includes() Method
This method is used to check whether the array contains the specified element or not.
Example: In this example, we will check whether the array contains the element or not using the includes() method.
let array = ["Hello", "w3wiki", "JavaScript"];
console.log(array.includes("w3wiki"));
console.log(array.includes("React"));
Output
true false
JavaScript concat() Method
This method is used to concat or basically join two different arrays from end to end.
Example: In this example, we will merge two arrays using the concat() method.
let firstArray = ["Hello",
"w3wiki", "JavaScript"];
let secondArray = ["React"];
let newArray = firstArray.concat(secondArray);
console.log(firstArray);
console.log(secondArray);
console.log(newArray);
Output:
[ 'Hello', 'w3wiki', 'JavaScript' ]
[ 'React' ]
[ 'Hello', 'w3wiki', 'JavaScript', 'React' ]
JavaScript forEach() Method
This method works as a loop over an array where for every element the function just runs once only. This method is useful for the purpose of reducing the syntax of the for-loop, but this method doesn’t return anything in its output.
Example: In this example, we will print each element of the array using the forEach() method.
let array = ["Hello", "w3wiki", "JavaScript"];
array.forEach(function (element) {
console.log(element)
});
Output
Hello w3wiki JavaScript
JavaScript sort() Method
This method sorts the elements of an array in alphabetical order in ascending order.
Example: In this example, we will sort the array alphabetically using the sort() method.
let array = ["Hello", "w3wiki", "JavaScript"];
console.log(array);
array.sort();
console.log(array);
Output
[ 'Hello', 'w3wiki', 'JavaScript' ] [ 'w3wiki', 'Hello', 'JavaScript' ]
JavaScript map() method
This method iterates over an array, transforms the array according to user-specified conditions and returns a new array. Using this shorter syntax, one could easily make code more readable and understandable.
Example: In this example, we will multiply each element of the array by 5 using the map() method.
let oldArray = [1, 2, 3, 4, 5];
console.log(oldArray);
let newArray = oldArray.map(function (element) {
return element * 5;
});
console.log(newArray);
Output
[ 1, 2, 3, 4, 5 ] [ 5, 10, 15, 20, 25 ]
JavaScript reduce() Method
This method uses a reducer function that reduces the results into a single output.
Example: In this example, we will add all the values of the array and return a single output using the reduce() function.
let oldArray = [1, 2, 3, 4, 5];
console.log(oldArray);
let sumOfElements = oldArray.reduce(
function (accumulator, element) {
return accumulator + element;
});
console.log(sumOfElements);
Output
[ 1, 2, 3, 4, 5 ] 15
JavaScript filter() Method
This method is used to filter out the contents, as per the user-specified condition, in the form of a new array.
Example: In this example, we will filter the even numbers from the array using the filter() method.
let oldArray = [1, 2, 3, 4, 5];
console.log(oldArray);
let newArray = oldArray.filter(function (element) {
return element % 2 === 0;
});
console.log(newArray);
Output
[ 1, 2, 3, 4, 5 ] [ 2, 4 ]
JavaScript find() & findIndex() Method
This 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.
Example: In this example, we will see the use of the find() and findIndex() methods.
let arr = [1, 2, 3, 4, 5];
let findElement = arr.find(function (element) {
return element > 4
});
console.log(findElement);
let findIndexValue = arr.findIndex(function (element) {
return element >= 4
});
console.log(findIndexValue);
Output
5 3
JavaScript slice() & splice() Method
slice() selects the specified number of elements without affecting the original array elements whereas splice() removes the selected elements from the original array itself.
Example: In this example, we will see the use of the slice() and splice() methods.
let arr = [1, 2, 3, 4, 5];
let sliceArray = arr.slice(0, 2);
console.log("Slice Array: " + sliceArray);
console.log("Original Array: " + arr);
let spliceArray = arr.splice(0, 2);
console.log("Slice Array: " + spliceArray);
console.log("Original Array: " + arr);
Output
Slice Array: 1,2 Original Array: 1,2,3,4,5 Slice Array: 1,2 Original Array: 3,4,5
JavaScript some() and every() Method
The some() method checks the user-specified conditions on some elements of an array (i.e. it checks for a few elements only), whereas every() method checks the user-specified conditions on every element of an array then returns the results in true or false.
Example: In this example, we will see the use of some() and every() method of arrays.
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(NumbersGreaterThanZero);
console.log(NumbersLessThanZero);
Output
true false
Javascript forEach() method
The forEach() method in JavaScript is used to execute a provided function once for each element in an array.
Example: In this example, we will see the use of forEach() method of arrays.
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(element, index) {
console.log(element);
});
Output
1 2 3 4 5
JavaScript Array reverse() Method
The reverse() method is used to reverse the order of the elements in an array. This method modifies the original array and returns the reversed array.
Example: In this example, we will use reverse() method to reverse the array of numbers.
let array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array);
Output
[ 5, 4, 3, 2, 1 ]
Javascript Array every() method
The every() method is used to check if all elements in the array pass the test implemented by the provided function. It returns a boolean value true if all elements satisfy the test otherwise returns false.
Example: In this example, we will see the use of every() method of arrays.
const numbers = [2, 4, 6];
const isEven = (num) => num % 2 === 0;
const allEven = numbers.every(isEven);
console.log(allEven);
Output
true