Javascript [Array] methods

elitenomad

Pranava S Balugari

Posted on April 15, 2020

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

Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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 :)

💖 💪 🙅 🚩
elitenomad
Pranava S Balugari

Posted on April 15, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related