forEach Method
forEach is used to iterate over arrays. Here is a simple example:
numbers.forEach(function (el) {
if (el % 2 === 0) {
console.log(el);
}
});
Now let’s use forEach with an array of objects:
{
title: ‘Indiana Jones‘,
score: 77,
},
{
title: ‘Star Trek‘,
score: 94,
},
{
title: ‘Deadpool‘,
score: 79,
},
];
movies.forEach(function (movie) {
console.log(`${movie.title} – ${movie.score}/100`);
});
Map
Map creates a new array with the results from calling a callback on every element in the array.
First, let’s iterate over a basic array:
const uCase = lCase.map(function (t) {
return t.toUpperCase();
});
console.log(lCase, uCase);
Now, let’s iterate over an array of objects:
{
title: ‘Indiana Jones‘,
score: 77,
},
{
title: ‘Star Trek‘,
score: 94,
},
{
title: ‘Deadpool‘,
score: 79,
},
];
const titles = movies.map(function (movie) {
return movie.title;
});
console.log(titles);
Arrow Functions
We can write arrow functions as follows to simplify our syntax:
return x * x;
};
const sum = (x, y) => {
return x + y;
};
const rollDie = () => {
return Math.floor(Math.random() * 6) + 1;
};
console.log(square(2), sum(2, 3));
console.log(rollDie());
We can also re-visit the movie example and use an arrow function:
{
title: ‘Indiana Jones‘,
score: 77,
},
{
title: ‘Star Trek‘,
score: 94,
},
{
title: ‘Deadpool‘,
score: 79,
},
];
const newMovies = movies.map((movie) => {
return `${movie.title} = ${movie.score} / 10`;
});
Implicit Returns
Implicit returns are another shorthand way of writing functions, some examples include:
const isEven = (num) => num % 2 === 0;
Set Timeout
Runs the callback after x milliseconds
// takes callback, then milliseconds
setTimeout(() => {
console.log(‘Apears 3rd‘);
}, 3000);
console.log(‘Apears 2nd‘);
Set Interval
Repeats the callback every x milliseconds
console.log(Math.random());
}, 2000);
If we want to eventually make the callback stop, we can do this:
console.log(Math.random());
}, 2000);
clearInterval(id); // stops the loop
Filter Method
Filter creates a new array with the elements that pass return true within the callback function
const odds = nums.filter((n) => {
return n % 2 === 1; // our callback returns true or false
// if it returns true, n is added to the filtered array
});
// [9, 7, 5, 3, 1]
const smallNums = nums.filter((n) => n < 5); // [4, 3, 2, 1]
We can also filter objects in an array:
{
title: ‘Indiana Jones‘,
score: 77,
},
{
title: ‘Star Trek‘,
score: 94,
},
{
title: ‘Deadpool‘,
score: 79,
},
];
const badMovies = movies.filter((movie) => {
return movie.score < 80;
});
console.log(badMovies);
Some and Every
Some – tests if ANY of the elements in an array return true in the callback function. It returns a boolean
words.some((word) => {
return word.length > 4;
}); // true
words.some((word) => word[0] === ‘Z‘); // false
words.some((word) => word.includes(‘cake‘)); // true
Every – tests if ALL the elements in an array return true in the callback function. It returns a boolean
words.every((word) => {
return word.length === 3;
}); // true
words.every((word) => word[0] === ‘d‘); // false
words.every((w) => {
return w[w.length – 1] === ‘g‘;
}); // true
Reduce
The first (and potential only) argument in reduce a callback function.
This function’s first argument is a value that is subject to change as we iterate through each item.
The second argument in this function is the value from an index of the array.
The optional second argument of reduce is the value that we want the callback function’s first value to start at.
const total = prices.reduce((total, price) => {
return total + price;
});
const min = prices.reduce((min, price) => {
return Math.min(min, price);
});
console.log(min);
We can do this with an array of objects too:
{
title: ‘Indiana Jones‘,
score: 77,
},
{
title: ‘Star Trek‘,
score: 94,
},
{
title: ‘Deadpool‘,
score: 79,
},
];
let bestMovie = movies.reduce((best, movie) => {
if (movie.score > best.score) {
return movie;
}
return best;
});
console.log(bestMovie);
We can also set the initial value of the reducer:
let maxPlus100 = nums.reduce((max, num) => {
return (max += num);
}, 100);
console.log(maxPlus100); // 115
