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.
Javascript
let array = ['Hello', 'neveropen', 'JavaScript'];console.log(array);let newArray = new Array('Hello', 'neveropen', 'JavaScript');console.log(newArray); |
Output:
['Hello', 'neveropen', 'JavaScript'] ['Hello', 'neveropen', '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 push() Method
- JavaScript pop() Method
- JavaScript shift() Method
- JavaScript unshift() Method
- JavaScript indexOf() Method
- JavaScript includes() Method
- JavaScript concat() 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 Array Methods:
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.
Javascript
let array = ['Hello','neveropen', 'JavaScript'];array.push('React');console.log(array); |
[ 'Hello', 'neveropen', '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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];let lastElement = array.pop();console.log(lastElement);console.log(array); |
JavaScript [ 'Hello', 'neveropen' ]
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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];let firstElement = array.shift();console.log(firstElement);console.log(array); |
Hello [ 'neveropen', '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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];array.unshift("React");console.log(array); |
[ 'React', 'Hello', 'neveropen', '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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];console.log(array.indexOf('neveropen')); |
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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];console.log(array.includes("neveropen"));console.log(array.includes("React")); |
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.
Javascript
let firstArray = ["Hello", "neveropen", "JavaScript"];let secondArray = ["React"];let newArray = firstArray.concat(secondArray);console.log(firstArray);console.log(secondArray);console.log(newArray); |
Output:
[ 'Hello', 'neveropen', 'JavaScript' ] [ 'React' ] [ 'Hello', 'neveropen', '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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];array.forEach(function (element) { console.log(element)}); |
Hello neveropen 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.
Javascript
let array = ["Hello", "neveropen", "JavaScript"];console.log(array);array.sort();console.log(array); |
[ 'Hello', 'neveropen', 'JavaScript' ] [ 'neveropen', '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.
Javascript
let oldArray = [1, 2, 3, 4, 5];console.log(oldArray);let newArray = oldArray.map(function (element) { return element * 5;});console.log(newArray); |
[ 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.
Javascript
let oldArray = [1, 2, 3, 4, 5];console.log(oldArray);let sumOfElements = oldArray.reduce( function (accumulator, element) { return accumulator + element; });console.log(sumOfElements); |
[ 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.
Javascript
let oldArray = [1, 2, 3, 4, 5];console.log(oldArray);let newArray = oldArray.filter(function (element) { return element % 2 === 0;});console.log(newArray); |
[ 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.
Javascript
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); |
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.
Javascript
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); |
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.
Javascript
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); |
true false
