TheLazy.Dev
Portfolio GitHub

Blog

javascript |productivity |beginners |programming

10 Powerful Array Methods

tomyotwongjai

Tom Yotwongjai

Posted on December 2, 2021

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

💖 💪 🙅 🚩
tomyotwongjai
Tom Yotwongjai

Posted on December 2, 2021

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

Sign up to receive the latest update from our blog.

Related

Javascript concept every developer should know!!!
javascript Javascript concept every developer should know!!!

October 1, 2022

10 Powerful Array Methods
javascript 10 Powerful Array Methods

December 2, 2021