Array Methods

There are many methods that allow you to manipulate and utilize arrays.  Some of these include:

Stack Methods

The push() method adds the arguments at the end of the array and pop() removes the last element of the array.

var names = ['alice','bob'];
names.push('cece');
var last = names.pop();
console.log(last);       // prints 'cece'

Alternate Stack Methods

The shift() method removes the first element in the array.

The method unshift() adds the arguments to the beginning of the array.

var names = ['alice','bob'];
var first = names.shift();
console.log(first);               // prints 'alice'

names.unshift(first);
console.log(names[0]);            // prints 'alice'

Reordering Methods

The reverse() method reverses the order of the elements in the array.

var names = ['alice','bob'];
names.reverse(); 
for (var elm of names) {      
    console.log(elm); // prints 'bob then 'alice' 
}

The sort() method by default converts all elements to strings for comparison.

var values = [0, 1, 5, 10, 15];
values.sort();                  // 0, 1, 10, 15, 5 - Oops! Not in numeric order

The sort() method can also accept a comparison function as an argument. The comparison function must take two arguments and return a negative number if the first element is less than the second, 0 if they are equal, and a positive number if the first number is greater than the second.

To sort an array of integers we can use the following comparison function and sort.

function compare(v1, v2) {
    if (v1 < v2)
        return -1;
    else if (v1 == v2)
        return 0;
    else
        return 1;
}

var values = [10, 1, 15, 5, 1];
values.sort(compare); 
console.log(values.toString());    // prints '1,1,5,10,15'

A more efficient compare function for integers is as follows.

function compare(v1, v2) {
    return v2 – v1;
}

New Arrays From Old

The concat() method creates a copy of the existing array then adds the elements that are passed to the function to the end of the new array.

var arr1 = [1, 2, 3];
var arr2 = arr1.concat(4, 5, 6);    // 1, 2, 3, 4, 5, 6
var arr3 = arr2.concat(arr1);       // 1, 2, 3, 4, 5, 6, 1, 2, 3 – concat elms in an array

The slice() method returns a subarray. The method takes a starting index and an optional ending index that specify where to splice. The element at the starting index is included, but the element at the ending index is not included.  The original array is not modified by slice().

var arr1 = [1, 2, 3, 4, 5];
var arr2 = arr1.slice(1,4);    console.log(arr2.toString());     // prints '2,3,4'

The splice() method takes an index in the array as the first argument and allows you to delete 0 or more (second argument) elements in the array starting at the index.  The method optionally accepts additional elements that are inserted starting at the index.  The method modifies the array on which it is called and returns an array of elements that were deleted.

var arr1 = [1,2,3,4];
var arr2 = arr1.splice(1,2,'foo','bar','whoo','car'); 
console.log(arr1.toString());   // prints '1,2,foo,bar,whoo,car' 
console.log(arr2.toString());   // prints '2,3'

Location Methods

The indexOf() and lastIndexOf() methods search the array for an element identical (using ===) to the element passed in as the first argument. An optional second argument specifies the index where the search starts.indexOf() searches from front of the array to the back whereas lastIndexOf() searches from the back to the front.  Both methods return the index of the first element found or -1 if the element is not found.

Caution must be taken when searching for reference objects.

var person = {name: “Nicholas”};
var arr1 = [person];
console.log(arr1.indexOf(person));    // 0: found at index 0 
var arr2 = [{name: “Nicholas”}];      // an array containing an unnamed object - not person 
console.log(arr2.indexOf(person));    // -1: not found

Iterative Methods

The every() and some() methods each take a function that returns a Boolean.  When every() or some() are called, the function argument is called once for each element in the array.  Each time it is called, a different element of the array is passed into the function argument.  The function argument must return a Boolean indicating whether or not the element that is passed into it has some property.

The every() and some() methods also return a Boolean.  In the case of every(), if each time the function argument is applied to the elements of the array the function argument returns true, then every() will return true.

In the case of some(), if when the function argument is applied to the elements of the array, the function argument returns true at least once, then some() will return true.

The function that is passed in as a parameter to every() and some() should have 3 parameters: item, index and array.  When the function is called, the array element is passed in as the first argument, the index of the array element is passed in as the second argument, and a reference to the array is passed in as the third parameter.

var f = function(item, index, array) { 
    return (item > 2); 
};

var numbers = [1,2,3];
var result = numbers.every(f);
console.log(result);            // false – not every element is greater than 2

var numbers = [1,2,3];
var result = numbers.some(f); 
console.log(result);            // true – some elements are greater than 2

The filter() method returns a new array and has a function parameter.  The function argument must return a Boolean to indicate whether or not the array element that was passed into the function argument is to be included in the new array.

var g = function(item, index, array) {          
    return item % 2 === 0;  
};  

var numbers = [1,2,3,4];  
var newArray = numbers.filter(g);  
console.log(newArray.toString());    // prints '2,4'

The map() method also returns a new array. The function passed into the map() method returns an element which is included in the new array. Thus, one element is put in the new array for each element in the original array.

var h = function(item, index, array) {     
    if (item % 2 === 0) {         
        return item;     
    } else {         
        return 0;
    } 
}; 

var numbers = [1,2,3,4];
var newArray = numbers.map(h); 
console.log(newArray.toString());    // prints '0,2,0,4'

The forEach() method has no return type. It iterates over the elements of the array, like a for-loop.

var init = function(item, index, array) {     
    array[index] = '0' 
}; 

var numbers = [1,2,3,4]; 
numbers.forEach(init); 
console.log(numbers.toString());     // prints '0,0,0,0'

Reduction Methods

The reduce() and reduceRight() methods return a value that is built up by iterating a function (passed in as an argument) over the elements in the array. The reduce() method iterates over the elements from the start to the end, the reduceRight() method works in the opposite direction.

The function argument passed into reduce() and reduceRight() requires 4 parameters: prev, cur, index, and array. The first parameter holds the value that the function returned on the previous iteration, except the first time the function is executed, in which case the previous value is the value of the element stored at index 0 in the array.  The second parameter holds the value of the element at array[index].  The third parameter holds the index of the current element.  The last parameter is a reference to the array.

The reduce() method starts with index equal to 1.  reduceRight() starts with index equal to array.length – 2.

var add = function(prev, cur, index, array) {     
    return prev + cur; 
} 

var numbers = [1,2,3,4];
var sum = numbers.reduce(add);
console.log(sum);   // prints 10

© 2018, Eric. All rights reserved.