Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the Important Array Methods of JavaScript ?

  • Difficulty Level : Easy
  • Last Updated : 05 Nov, 2021

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:

We can use the following syntax to create an array with ease (i.e. by using these [] literals).

let array = [element1, element2, .....]

Alternatively, we may also use the Array class (using 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: 

Javascript




<script>
let array = ['Hello'
    'GeeksforGeeks', 'JavaScript'];
console.log(array);
  
let newArray = new Array ('Hello'
    'GeeksforGeeks', 'JavaScript');
console.log(newArray);
</script>

The output of the above code snippet would be as follows-

['Hello', 'GeeksforGeeks', 'JavaScript']
['Hello', 'GeeksforGeeks', '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:

1. push() method: This method is used to push the elements from the end into an array.

Example: 

Javascript




<script>
  
let array = ['Hello'
    'GeeksforGeeks', 'JavaScript'];
      
array.push('React');
console.log(array);
  
</script>

The output of the above code snippet would be as follows-

[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

2. pop() method: This method deletes the last element present in the array.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
let lastElement = array.pop();
console.log(lastElement);
console.log(array);
</script>

The output of the above code snippet would be as follows-

JavaScript
[ 'Hello', 'GeeksforGeeks' ]

3. shift() method: This method is used to delete the first element from the array.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
let firstElement = array.shift();
console.log(firstElement);
console.log(array);
</script>

The output of the above code snippet would be as follows-

Hello
[ 'GeeksforGeeks', 'JavaScript' ]

4. unshift() method: This method is used to add the elements in the array from the front side.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
array.unshift("React");
console.log(array);
</script>

The output of the above code snippet would be as follows-

[ 'React', 'Hello', 'GeeksforGeeks', 'JavaScript' ]

5. indexOf() method: This method is used to find the index of a particular element in an array.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array.indexOf('GeeksforGeeks'));
</script>

The output of the above code snippet would be as follows-

1

6. includes() method: This method is used to check whether the array contains the specified element or not.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array.includes("GeeksforGeeks"));
console.log(array.includes("React"));
</script>

The output of the above code snippet would be as follows-

true
false

7. concat() method: This method is used to concat or basically join two different arrays from end to end.

Example:

Javascript




<script>
let firstArray = ["Hello"
    "GeeksforGeeks", "JavaScript"];
      
let secondArray = ["React"];
  
let newArray = firstArray.concat(secondArray);
  
console.log(firstArray);
console.log(secondArray);
console.log(newArray);
</script>

The output of the above code snippet would be as follows-

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'React' ]
[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

8. forEach() method: This method works as a loop over an array where for every element the function just runs for once only. This method is useful as a purpose of reducing the syntax of for-loop, but this method doesn’t return anything in its output.

Example:

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
array.forEach(function(element){
    console.log(element)
});
</script>

The output of the above code snippet would be as follows-

Hello
GeeksforGeeks
JavaScript

9. sort() method: This method sorts the elements of an array in alphabetical order in ascending order.

Example: 

Javascript




<script>
let array = ["Hello", "GeeksforGeeks", "JavaScript"];
console.log(array);
array.sort();
console.log(array);
</script>

The output of the above code snippet would be as follows-

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'GeeksforGeeks', 'Hello', 'JavaScript' ]

10. map() method: This method iterates over an array, and 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: 

Javascript




<script>
let oldArray = [1 , 2 , 3 , 4 , 5];
  
console.log(oldArray);
  
let newArray = oldArray.map(function(element){
    return element * 5;
});
  
console.log(newArray);
</script>

The output of the above code snippet would be as follows-

[ 1, 2, 3, 4, 5 ]
[ 5, 10, 15, 20, 25 ]

11. reduce() method: This method uses a reducer function that reduces the results into a single output.

Example:

Javascript




<script>
let oldArray = [1, 2, 3, 4, 5];
  
console.log(oldArray);
  
let sumOfElements = oldArray.reduce(
function (accumulator, element) {
  return accumulator + element;
});
  
console.log(sumOfElements);
</script>

The output of the above code snippet would be as follows-

[ 1, 2, 3, 4, 5 ]
15

12. 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:

Javascript




<script>
let oldArray = [1, 2, 3, 4, 5];
  
console.log(oldArray);
  
let newArray = oldArray.filter(function (element) {
  return element % 2 === 0;
});
  
console.log(newArray);
</script>

The output of the above code snippet would be as follows-

[ 1, 2, 3, 4, 5 ]
[ 2, 4 ]

13. 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: 

Javascript




<script>
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);
</script>

The output of the above code snippet would be as follows-

5 
3

14. slice() & splice() method: slice() selects the specified number of elements without effecting the original array elements whereas splice() removes the selected elements from the original array itself.

Javascript




<script>
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);
</script>

The output of the above code snippet would be as follows-

Slice Array: 1,2
Original Array: 1,2,3,4,5
Slice Array: 1,2
Original Array: 3,4,5

15. 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: 

Javascript




<script>
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);
</script>

The output of the above code would be as follows-

true
false

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!