Javascript [Array] methods

The Array.prototype property represents the prototype for the Array constructor.Array instances inherit from Array.prototype. As with all constructors, you can change the constructor's prototype object to make changes to all Array instances.

Array.prototype.concat:

var array_1 = [1, 2, 3];
var array_2 = ['apple','orange','pear'];
var a1 = array_1.concat(array_2)

console.log("combined array :",a1);
>[1, 2, 3, 'apple', 'orange', 'pear']

Array.prototype.join:

var array = ['Pranava', 'Swaroop', 'Balugari'];
var a1 = array.join(' ');
var a2 = array.join('-');
var a3 = array.join();

console.log("joined array with a space :",a1);
console.log("joined array with a hyphen :",a2);
console.log("joined array without delimiter:",a3);
>'Pranava Swaroop Balugari'
>'Pranava-Swaroop-Balugari'
>'Pranava,Swaroop,Balugari'

Array.prototype.IndexOf:

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

// Check for any occurrence of "gorilla" in an array.
var arr = ['apple', 'gorilla','orange','banana'];

console.log("Orange found:", arr.indexOf("gorilla") != -1);  # true
console.log("Orange found:", arr.indexOf("mango") != -1);    # false

Array.prototype.lastIndexOf:

Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

// Check for any occurrence of "gorilla" in an array.
var arr = ['apple', 'gorilla','gorilla','banana'];

console.log("Gorilla found at:", arr.lastIndexOf("gorilla"));  # 2
console.log("Mango found:", arr.indexOf("mango") != -1);    # -1

Array.prototype.every

The every() method tests whether all elements in the array pass the test implemented by the provided function.

function isNumGreaterThanTen(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isNumGreaterThanTen);   // false
[12, 54, 18, 130, 44].every(isNumGreaterThanTen); // true

Array.prototype.some:

Returns true if at least one element in this array satisfies the provided testing function.

function isNumEven(element, array) {
  return (element % 2) === 0;
}
[199, 5, 9, 13, 45].every(isNumEven);   // false
[12, 54, 18, 130, 44].every(isNumEven); // true

Array.prototype.forEach

Calls a function for each element in the array.

function logArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

[2, 5, 9].forEach(logArrayElements);
// logs:
> a[0] = 2
> a[1] = 5
> a[2] = 9

Array.prototype.map

Creates a new array with the results of calling a provided function on every element in this array.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
> roots is now [1, 2, 3], numbers is still [1, 4, 9]

Array.prototype.filter

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

function isNumEven(value) {
  return value % 2 === 0;
}
var filtered = [12, 5, 8, 130, 44].filter(isNumEven);
> filtered is [12,8, 130, 44]

Array.prototype.reduce

The reduce() method applies a function against an accumulator and each value of the array

# Accumulator
var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
# Flatten arrays
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
}, []);
> flattened is [0, 1, 2, 3, 4, 5]

Array.prototype.slice

The slice() method returns a shallow copy of a portion of an array into a new array object.

// Using slice, create newCar from myCar.
var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } };
var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997'];
var newCar = myCar.slice(0, 2);


// Display the values of myCar, newCar, and the color of myHonda
//  referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

// Change the color of myHonda.
myHonda.color = 'purple';
console.log('The new color of my Honda is ' + myHonda.color);

// Display the color of myHonda referenced from both arrays.
console.log('myCar[0].color = ' + myCar[0].color);
console.log('newCar[0].color = ' + newCar[0].color);

Conclusion:

That's not it. There are more to Mutator , Accessor and iterator methods on the array instances than the ones mentioned above. I am sure developers will not use sea of methods available on Array object on a daily basis. Its always good to learn and understand how they work, with examples. Mozialla developer JS documentation will help you achieve that.

I will appreciate the constructive feedback about the article. Please share interesting and important JS utility methods and reference examples from your experience.

Thank you :)