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.

Javascript

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

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

Output:

['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

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

<script>
    let array = ['Hello',
        'GeeksforGeeks', 'JavaScript'];

    array.push('React');
    console.log(array);
</script>

Output:

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

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

Output:

JavaScript
[ 'Hello', 'GeeksforGeeks' ]

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

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

Output:

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

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

Output:

[ 'React', 'Hello', 'GeeksforGeeks', '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

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

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.

Javascript

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

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.

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>

Output:

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

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

Output:

Hello
GeeksforGeeks
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

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

Output:

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

<script>
    let oldArray = [1 , 2 , 3 , 4 , 5];

    console.log(oldArray);

    let newArray = oldArray.map(function(element){
        return element * 5;
    });

    console.log(newArray);
</script>

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.

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>

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.

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>

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.

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>

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.

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>

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.

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>

Output:

true
false