DEV Community

loading...

5 Famous Array Methods in JavaScript.

nikhilswain profile image Nikhil Kumar Swain Originally published at Medium on ・3 min read

map() , reduce() , filter() , some() , every() .

JavaScript provide us lots of useful methods to ease our work.In this article we will take a closer look at some JavaScript famous Array methods that will help us to code efficiently.

  1. Array.prototype.map() The map() method creates a new array with the results of calling a function for every array element.It accepts a callback function as a parameter and we have access to a ccurrent value of an array, current index and array itself as well. Syntax : array.map(function(currentValue, index, arr), thisValue)
const array = [2,4,6,8];

const newArr = array.map(val => val*2);

// [4, 8, 12, 16]
Enter fullscreen mode Exit fullscreen mode

You could also pass a callback function as a parameter.

const callbackFunc = val => val + 2;

const array = [2,4,6,8];

cons newArr = array.map(sum)

// [4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

Chaining is also available in so we can do something like this :

const sum = val => val + 2;

const mul = val => val * 2;

const array = [1, 2, 3, 4, 5];

const newArray = array.map(sum).map(mul);

// [6, 8, 10, 12, 14]
Enter fullscreen mode Exit fullscreen mode

2. Array.prototype.reduce()

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

The reducer function takes four arguments:

  1. Accumulator
  2. Current Value
  3. Current Index
  4. Source Array

Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.

Syntax :

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

function myFunc( total, num ) {
return total + num ;
}

const numbers = [30, 20, 10];

numbers.reduce(myFunc)
// 60
Enter fullscreen mode Exit fullscreen mode

We can also provide an initial value instead of taking the first value as an accumulator by default :

const num = [5, 10, 15, 10];

const sum = num.reduce(( acc, val ) => acc + val, 100);

// 140
Enter fullscreen mode Exit fullscreen mode

3. Array.prototype.filter()

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

Syntax :

const newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback : Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise.

It accepts three arguments:

element : The current element being processed in the array.

index : (Optional) The index of the current element being processed in the array.

array : (Optional) The array filter was called upon.

thisArg : (Optional) Value to use as this when executing callback.

const band = ['Against', 'the', 'current', 'is', 'my', 'favourite', 'band'];


const newBand = band.filter( word => word.length > 5 );

// ["Against", "current", "favourite"]
Enter fullscreen mode Exit fullscreen mode

Let’s look at another example.

const isGreater = (val) => {
return val > 12;
}

const realNumbers = [3,6,12,15,18,21].filter(isGreater);

// [15, 18, 21]
Enter fullscreen mode Exit fullscreen mode

4. Array.prototype.some()

As the name suggest the some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value .

Syntax : array.some(function(currentValue, index, arr), thisValue)

const names = [const names = ['sheldon', 'lenoard', 'raj', 'howard', 'penny'];

names.some(having => having === 'sheldon');

// true

names.some(having => having === 'chrissy');

// false
Enter fullscreen mode Exit fullscreen mode

Another example of some() method

const number = [5,7,10,12,15,17,20];

number.some(mulOfFive => mulOfFive % 5 === 0);
Enter fullscreen mode Exit fullscreen mode

5. Array.prototype.every()

Unlike some() the every() method tests whether all elements in the array pass the test implemented by the provided function. It also returns a Boolean value.

Syntax : array.every(function(currentValue, index, arr), thisValue)

const band = ['ATC','ATC','ATC','ATC'];

band.every(having => having === 'ATC');

// true
Enter fullscreen mode Exit fullscreen mode

Another example of some() method

const marks = [80, 75, 52, 91, 63];

marks.every(mark => mark > 50);

// true
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide