ES5 and ES6 Array Methods — Simplify The Logic

Sanjeev Shukla
Nov 4 · 4 min read

An array is a special type of data structure that can store multiple values of different data types sequentially.

Most of the applications we build, require some sort of data. Processing items in a data array is a common operation you will most likely encounter. Most of times we use standard for-loop to process the collection, but performing filter, search, modify, update operations on large data collection can be quite complex if you use standard for-loop.

In this journey of learning we will explore some of the new ways to iterate data arrays.

Array ‘from’ Method

this function can be used to get a new mutated/updated array from the data array.

const fruits= [
{name: ‘apples’, quantity: 2},
{name: ‘bananas’, quantity: 0},
{name: ‘cherries’, quantity: 5}
];
console.log(Array.from(fruits, fruit => fruit.quantity + 2));
// [4, 2, 7]

Array ‘Of’ Method

‘of’ method can accept multiple arguments and returns a new array of those arguments in the new array instance.

Array.of(“Money”, “Ball”, “Win”);
// returns [“Money”, “Ball”, “Win”]

find Method

This method can be used to find a specific element based on the condition defined in callback function if condition matched then you will get that element else you will get undefined.

const items = [
{name: ‘apples’, quantity: 2},
{name: ‘bananas’, quantity: 0},
{name: ‘oranges’, quantity: 5}
];
console.log(items.find(fruit => fruit.name === ‘bananas’));
// { name: ‘bananas’, quantity: 0}

fill Method

The ‘fill’ method will mutate the original array and fills all the elements from a start index to an end index with a static value. The start and end index values are optional. The default of start is zero and the default of end is array length.

[1, 2, 3].fill(1);// results in [1, 1, 1][7, 2, 3, 9, 5, 1].fill(0, 1, 3);

// results in [7, 0, 0, 9, 5, 1] note - end index is not included
This method is very useful to fill with default values.

forEach Method

This method is an abstraction over the for loop that takes a callback function in argument and callback is executed for each item in the array.
This can help you to loop over array’s items.

const arr = [1, 2, 3, 4, 5, 6];arr.forEach(item => {
console.log(item); // output: 1 2 3 4 5 6
});

for-of Method

for -of is the same as for-loop or for Each method. it can be used to iterate over array items.

const arr = [‘a’, ‘b’, ‘c’];for (const item of arr) {
console.log(item);
}
// expected output: “a”
// expected output: “b”
// expected output: “c”

Includes() method

The includes() method is used to check if a specific item exists in a collection, and returns true or false. Keep in mind that it is case sensitive:

const arr = [1, 2, 3, 4, 5, 6];arr.includes(2); // output: true
arr.includes(7); // output: false

Some() method

This method can be used to check if some element matches with your condition or not. if matches it will return true if not then false.

const arr = [1, 2, 3, 4, 5, 6];// at least one element is greater than 4?
const num1= arr.some(num => num > 4);
console.log(num1); // output: true
// at least one element is less than or equal to 0?
const num2 = arr.some(num => num <= 0);
console.log(num2); // output: false

Every() method

This method checks if all array’s item are matching with your condition, if yes then it will return true if not then it will return false.

const arr = [1, 2, 3, 4, 5, 6];// all elements are greater than 2
const gtTwo = arr.every(num => num > 2);
console.log(gtTwo); // output: false
// all elements are less than 7
const lsSeven = arr.every(num => num < 7);
console.log(lsSeven); // output: true

Filter() method

This method can be used to filter the array with some specific conditions and return a new array with only elements that match with the condition.

const arr = [1, 2, 3, 4, 5, 6];// item(s) greater than 4 const filtered = arr.filter(num => num > 4);
console.log(filtered); // output: [5, 6]

Map() method

The map() method is similar to the filter() method in terms of returning a new array. but in the map, you can modify the values then return them in a new array.

const arr = [1, 2, 3, 4, 5, 6];// add one to every element const onePlus = arr.map(num => num + 1);
console.log(onePlus); // output [2, 3, 4, 5, 6, 7]

Reduce() method

The reduce() method can be used to transform an array into other data type output. this output could be an integer, an object, an array, a chain of promises etc. In short, it “reduces” the whole array into one value, this value could be any data type.

1st Exampleconst arr = [1, 2, 3, 4, 5];
const newArray = arr.reduce((accumulator, value, index) => {
accumulator[index] = value * 2;
return accumulator;
}, []);
console.log(newArray); // [2, 4, 6, 8, 10]
2nd Exampleconst fruits = ['banana', 'cherry', 'orange', 'apple', 'cherry', 'orange', 'apple', 'banana', 'cherry', 'orange', 'fig' ];const count = fruits.reduce( (tally, fruit) => {tally[fruit] = (tally[fruit] || 0) + 1 ;return tally;} , {})count // { banana: 2, cherry: 3, orange: 3, apple: 2, fig: 1 }
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade