Javascript Array Methods

There are different array methods supported by Javascript:-


Pushing elements

This push() method allows us to add one or more elements to the end of the array. This method returns the value of the length property that specifies the number of elements in the array.

Input:-
<script>  
   let stack = [1, 2, 3];
   stack.push(4);
   document.write(stack + "<br>");  
</script>

Output:-


Poping elements

This pop() method removes the element at the end of the array and returns the element to the caller. If the array is empty, the pop() method returns undefined.

Input:-
<script>  
   let stack = [1, 2, 3];
   stack.pop();
   document.write(stack + "<br>");  
</script>

Output:-


Shifting elements

This shift() method removes the first array element and “shifts” all other elements to a lower index. Shifting is equivalent to popping, working on the first element instead of the last.

Input:-
<script>  
   let stack = [1, 2, 3];
   stack.shift();
   document.write(stack + "<br>");  
</script>

Output:-


Unshifting elements

This unshift() method adds a new element to an array (at the beginning), and “unshifts” older elements. This method returns the new array length.

Input:-
<script>  
   let stack = [1, 2, 3];
   stack.unshift(0);
   document.write(stack + "<br>");  
</script>

Output:-


Splicing an array

This splice() method allows us to insert new elements into an array while deleting existing elements simultaneously. To do this, we pass at least three arguments with the second one that specifies the number of items to delete and the third one that indicates the elements to insert.

Note that the number of elements to delete needs not to be the same as the number of elements to insert.

Input:-
<script>  
   let frontend = ['HTML', 'CSS', 'JavaScript', 'ReactJS'];
   frontend.splice(1, 1, 'Bootstrap');
   document.write(frontend + "<br>");  
</script>

Output:-


Slicing an array

This method extracts the part of the given array and returns it. This method doesn’t change the original array.

The slice() method is represented by the following syntax:

array.slice(start,end)  

Here, there are two parameters – start and end.

Start is optional and represents the index from where the method starts to extract the elements.

End is also optional and represents the index at where the method stops extracting elements.

Input:-
<script>  
   let frontend = ['HTML', 'CSS', 'JavaScript', 'ReactJS'];
   var result = frontend.slice(1, 3);
   document.write(result + "<br>");  
</script>

Output:-


Merging arrays

This method creates a new array by merging (concatenating) existing arrays.

The concat() method does not change the existing arrays. It always returns a new array and it can take any number of array arguments.

Input:-
<script>  
     var frontend = ['HTML', 'CSS'];
     var backend = ['PHP', 'Java'];
	    var language  = ['ReactJS','NodeJS'];
     var development = language.concat(frontend, backend);
     document.write(development + "<br>"); 
</script>

Output:-