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' },
];
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'}
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
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];
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]
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]
I can simplify it even more with ES6 arrow function:
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:
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:
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:
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:
//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:
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:
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:
//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:
//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:
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:
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.
Top comments (0)