10 Powerful Array Methods
Tags: javascript, productivity, beginners, programming
Published: 2021-12-02 12:16:50

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:
```javascript
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' },
];
```
Looping through cardio with for loop:
```javascript
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'}
```
looping in forEach is quite elegant, I pass in a callback function I called it workout:

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

//Similar output with cleaner code
```
#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:
```javascript
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15];
```
In for loop I would construct it like this:
```javascript
// 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]
```
Using filter methods:
```javascript
const evenNum = nums.filter(function (even) {
  if (even % 2 === 0) {
    return true;
  }
});
console.log(evenNum);
//output: 
[2, 4, 6, 8, 10, 12, 14]
```
I can simplify it even more with ES6 arrow function:
```javascript
const evenNum = nums.filter((even) => even % 2 === 0);
console.log(evenNum);
```
#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:
```javascript
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']
```
what if I want the summary of my workout log? I can use ES6 template string `` `${}` `` to access that data like this:
```javascript
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]"
```
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:
```javascript
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}
```
#5: reduce()
Reduce data in the array and return single value.

##Example: 

```javascript
//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) => {
 
});
```
Reduce take in an item + another property of what I want to reduce everything into, in this case- total price:
```javascript
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
```
#6: find()
Finding single object in an array.

##Example:
```javascript
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}
```
#7: some()
Return true or false if element presented in an array.

##Example:
```javascript
//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
```
#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:
```javascript
//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
```
#9: includes()
Checking if something is include inside an array.

##Example:
```javascript
const number = [1, 3, 5, 6, 4]
const include = number.includes(6);
console.log(include);

//output:
true
```
#10: concat()
Join two or more array into one.

##Example:
```javascript
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']
```
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 :) !!!!