array methods in JavaScript

Some of the most common ...

pop push shift and unshift

Mutator methods

The pop method removes the last element from an array and returns that value to the caller. The push() method adds one or more elements to the end of an array and returns the new length of the array.


        
          var popped = ['angel', 'clown', 'mandarin', 'sturgeon'].pop(); // 'sturgeon'
          ['soccer', 'baseball'].push('football', 'swimming'); // ['soccer', 'baseball', 'football', 'swimming']

The shift method removes the element at the index zero and shifts the values at consecutive indexes down, then returns the removed value. If the length property is 0, undefined is returned. The unshift method inserts the given values to the beginning of an array-like object.


        
          var shifted = ['angel', 'clown', 'mandarin', 'surgeon'].shift(); // ['angel']
          [4,5,6].unshift(1,2,3); // [1, 2, 3, 4, 5, 6]
          [4,5,6].unshift(1).unshift(2).unshift(3); // [3, 2, 1, 4, 5, 6]

reverse and splice

The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first. The method transposes the elements of the calling array object, mutating the array, and returning a reference to the array.

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

var arrDeletedItems = array.splice(start, delete, item1, item2, ...)

Start is the index at which to start changing the array. DeleteCount is an integer indicating the number of elements in the array to remove from start. Item1, item2, ... are the elements to add to the array, beginning from start. The method returns sn array containing the deleted elements.

includes join and slice

Accessor methods

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string. If the array has only one item, then that item will be returned without using the separator.

arr.join('separator')

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

arr.slice(begin, end)

Begin is a Zero-based index at which to begin extraction.
A negative index can be used, indicating an offset from the end of the sequence. slice(-2) extracts the last two elements in the sequence.
If begin is undefined, slice begins from index 0. If begin is greater than the length of the sequence, an empty array is returned.
End is zero-based index before which to end extraction. slice extracts up to but not including end.
A negative index can be used, indicating an offset from the end of the sequence. slice(2,-1) extracts the third element through the second-to-last element in the sequence.
If end is omitted or greater than the length of the sequence, slice extracts through the end of the sequence (arr.length).

forEach and filter

Iteration methods

The forEach() method executes a provided function once for each array element.


        
          const items = ['item1', 'item2', 'item3'];
          const copy = [];
           // before
           for (let i=0; i < items.length; i++) {
             copy.push(items[i]);
           }
           // after
           items.forEach(function(item){
             copy.push(item);
           });

The filter() method creates a new array with all elements that pass the test implemented by the provided function.


        
          function isBigEnough(value) { value >= 10; }
          var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]