DEV Community

Cover image for 10 Powerful Array Methods
Tom Yotwongjai
Tom Yotwongjai

Posted on

10 Powerful Array Methods

Array is commonly use in programming. I can look at an array as a storage of data or a collection of variables. This article will cover 10 must know array methods.

1: forEach()

Rather than using for loop to loop through arrays, this higher order function array methods let programmer write much nicer code when looping through data.

I have an array with some cardio workout for each day.

Example:

const cardio = [
  { Day: 'Monday', workout: 'bike', start: '9:00am', end: '9:30am' },
  { Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am' },
  { Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am' },
  { Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am' },
  { Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am' },
];
Enter fullscreen mode Exit fullscreen mode

Looping through cardio with for loop:

for (let i = 0; i < cardio.length; i++) {
  console.log(cardio[i]);
}
//Output:
{Day: 'Monday', workout: 'bike', start: '9:00am', end: '9:30am'}
{Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am'}
{Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am'}
{Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am'}
{Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am'}
Enter fullscreen mode Exit fullscreen mode

looping in forEach is quite elegant, I pass in a callback function I called it workout:

cardio.forEach(function (workout) {
  console.log(workout);
});

//Similar output with cleaner code
Enter fullscreen mode Exit fullscreen mode

2: filter()

Like the name, filter use to filtering out something in the array.

If I wanted to get an even number inside an array.

Example:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15];
Enter fullscreen mode Exit fullscreen mode

In for loop I would construct it like this:

// set evenNum to an empty array
let evenNum = [];
for (let i = 0; i < nums.length; i++) {
//if current iteration is even
  if (nums[i] % 2 === 0) {
//using push methods to push nums to evenNum array and pass in current iteration.
    evenNum.push(nums[i]);
  }
}
//outputs: 
[2, 4, 6, 8, 10, 12, 14]
Enter fullscreen mode Exit fullscreen mode

Using filter methods:

const evenNum = nums.filter(function (even) {
  if (even % 2 === 0) {
    return true;
  }
});
console.log(evenNum);
//output: 
[2, 4, 6, 8, 10, 12, 14]
Enter fullscreen mode Exit fullscreen mode

I can simplify it even more with ES6 arrow function:

const evenNum = nums.filter((even) => even % 2 === 0);
console.log(evenNum);
Enter fullscreen mode Exit fullscreen mode

3: map()

This methods is very useful for when you want to get specific element inside an array or create an array within array.

In my cardio array, I want to log workout name.

Example:

const cardio = [
  { Day: 'Monday', workout: 'Bike', start: '9:00am', end: '9:30am' },
  { Day: 'Tuesday', workout: 'Running', start: '9:00am', end: '10:30am' },
  { Day: 'Wednesday', workout: 'Boxing', start: '9:00am', end: '10:00am' },
  { Day: 'Thursday', workout: 'Swimming', start: '9:00am', end: '9:30am' },
  { Day: 'Friday', workout: 'Soccer', start: '10:00am', end: '12:30am' },
];

 const workoutLog = cardio.map((item) => {
   return item.workout;
 });
console.log(workoutName);
//output: ['Bike', 'Running', 'Boxing', 'Swimming', 'Soccer']
Enter fullscreen mode Exit fullscreen mode

what if I want the summary of my workout log? I can use ES6 template string `${}` to access that data like this:

const workoutLog = cardio.map((item) => `${item.Day}: ${item.workout} 
= 
[${item.start} - ${item.end}]`
);
console.log(workoutLog);


//output:
0: "[Monday: bike] [9:00am - 9:30am]"
1: "[Tuesday: Running] [9:00am - 10:30am]"
2: "[Wednesday: Boxing] [9:00am - 10:00am]"
3: "[Thursday: Swimming] [9:00am - 9:30am]"
4: "[Friday: Soccer] [10:00am - 12:30am]"
Enter fullscreen mode Exit fullscreen mode

This method is very powerful and this method is use a lot in programming.

4: sort()

Sort method would sort compare two value and sorted the value according to the return.

In this example I want to sort my team from youngest to oldest.

Example:

const team = [
  { name: 'Tom', age: 33 },
  { name: 'Ann', age: 23 },
  { name: 'Tina', age: 35 },
  { name: 'Michael', age: 21 },
  { name: 'Aga', age: 27 },
  { name: 'John', age: 29 },
  { name: 'Landon', age: 30 },
];

 team.sort(function (a, b) {
   return a.age - b.age;
 });

//arrow function
team.sort((a, b) => a.age - b.age);
console.log(personList);

//output:
0: {name: 'Michael', age: 21}
1: {name: 'Ann', age: 23}
2: {name: 'Aga', age: 27}
3: {name: 'John', age: 29}
4: {name: 'Landon', age: 30}
5: {name: 'Tom', age: 33}
6: {name: 'Tina', age: 35}
Enter fullscreen mode Exit fullscreen mode

5: reduce()

Reduce data in the array and return single value.

Example:

//Getting total price for all items

const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const total = items.reduce((item) => {

});
Enter fullscreen mode Exit fullscreen mode

Reduce take in an item + another property of what I want to reduce everything into, in this case- total price:

const total = items.reduce((totalPrice, item) => {
 return totalPrice + item.price;
//take in second param as a starting point
}, 0);

console.log('total:' + total)

//output:
total:269
Enter fullscreen mode Exit fullscreen mode

6: find()

Finding single object in an array.

Example:

const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemName = items.find((item) => {
return item.name === 'item3'
})

//output:
{name: 'item3', price: 50}
Enter fullscreen mode Exit fullscreen mode

7: some()

Return true or false if element presented in an array.

Example:

//Check to see if any items is over $100
const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemIsExpensive = items.some((item) => {
  return item.price > 101;
});

console.log(itemIsExpensive);

//output: 
false
//since no items is over $100
Enter fullscreen mode Exit fullscreen mode

8: every()

Like some(), every() return true or false but instead of check for a single item, it check if every items is or isn't presented in an array.

Example:

//check if every items is lessthan or equal $100
const items = [
  { name: 'item1', price: 100 },
  { name: 'item2', price: 25 },
  { name: 'item3', price: 50 },
  { name: 'item4', price: 89 },
  { name: 'item5', price: 5 },
];

const itemIsExpensive = items.every((item) => {
  return item.price <= 100;
});

console.log(itemIsExpensive)

//output: 
true
//since every items in an array is $100 dollar or less
Enter fullscreen mode Exit fullscreen mode

9: includes()

Checking if something is include inside an array.

Example:

const number = [1, 3, 5, 6, 4]
const include = number.includes(6);
console.log(include);

//output:
true
Enter fullscreen mode Exit fullscreen mode

10: concat()

Join two or more array into one.

Example:

const a = [1, 2, 3];
const b = [true, false];

const c = a.concat(b);

//output:
[1, 2, 3, true, false]

//add new array and pass it in as a parameter
const a = [1, 2, 3];
const b = [true, false];
const d = ['tom', 'mikolaj', 'aga'];

const c = a.concat(b, d);
console.log(c);

//output:
[1, 2, 3, true, false, 'tom', 'mikolaj', 'aga']
Enter fullscreen mode Exit fullscreen mode

And That is my top 10 array methods, comment below if there's other array methods I should include in my programming arsenal.

Thanks for reading :) !!!!

Discussion (0)