DEV Community

Megan Paffrath
Megan Paffrath

Posted on

JavaScript: forEach, map, Arrow Functions, setTimeout, setInterval, filter, some, every, and reduce

forEach Method

forEach is used to iterate over arrays. Here is a simple example:

const numbers = [1, 2, 3, 4, 5, 6, 7]; numbers.forEach(function (el) { if (el % 2 === 0) { console.log(el); } }); 
Enter fullscreen mode Exit fullscreen mode

Now let's use forEach with an array of objects:

const movies = [ { 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`); }); 
Enter fullscreen mode Exit fullscreen mode

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 lCase = ['jim', 'bob', 'abby']; const uCase = lCase.map(function (t) { return t.toUpperCase(); }); console.log(lCase, uCase); 
Enter fullscreen mode Exit fullscreen mode

Now, let's iterate over an array of objects:

const movies = [ { 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); 
Enter fullscreen mode Exit fullscreen mode

Arrow Functions

We can write arrow functions as follows to simplify our syntax:

const square = (x) => { 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()); 
Enter fullscreen mode Exit fullscreen mode

We can also re-visit the movie example and use an arrow function:

const movies = [ { 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`; }); 
Enter fullscreen mode Exit fullscreen mode

Implicit Returns

Implicit returns are another shorthand way of writing functions, some examples include:

const rollDie = () => Math.floor(Math.random() * 6) + 1; const isEven = (num) => num % 2 === 0; 
Enter fullscreen mode Exit fullscreen mode

Set Timeout

Runs the callback after x milliseconds

console.log('Apears 1st'); // takes callback, then milliseconds setTimeout(() => { console.log('Apears 3rd'); }, 3000); console.log('Apears 2nd'); 
Enter fullscreen mode Exit fullscreen mode

Set Interval

Repeats the callback every x milliseconds

setInterval(() => { console.log(Math.random()); }, 2000); 
Enter fullscreen mode Exit fullscreen mode

If we want to eventually make the callback stop, we can do this:

const id = setInterval(() => { console.log(Math.random()); }, 2000); clearInterval(id); // stops the loop 
Enter fullscreen mode Exit fullscreen mode

Filter Method

Filter creates a new array with the elements that return true within the callback function

const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 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] 
Enter fullscreen mode Exit fullscreen mode

We can also filter objects in an array:

const movies = [ { 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); 
Enter fullscreen mode Exit fullscreen mode

Some and Every

  • Some - tests if ANY of the elements in an array return true in the callback function. It returns a boolean
const firstWords = ['dog', 'jello', 'log', 'bag', 'wag', 'cupcake']; words.some((word) => { return word.length > 4; }); // true words.some((word) => word[0] === 'Z'); // false words.some((word) => word.includes('cake')); // true 
Enter fullscreen mode Exit fullscreen mode
  • Every - tests if ALL the elements in an array return true in the callback function. It returns a boolean
const words = ['dog', 'dig', 'log', 'bag', 'wag']; 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 
Enter fullscreen mode Exit fullscreen mode

Reduce

  • The first (and potential only) argument in reduce is 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 prices = [9.99, 1.5, 19.99, 49.99, 30.5]; const total = prices.reduce((total, price) => { return total + price; }); const min = prices.reduce((min, price) => { return Math.min(min, price); }); console.log(min); 
Enter fullscreen mode Exit fullscreen mode

We can do this with an array of objects too:

const movies = [ { 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); 
Enter fullscreen mode Exit fullscreen mode

We can also set the initial value of the reducer:

let nums = [1, 2, 3, 4, 5]; let totalPlus100 = nums.reduce((max, num) => { return (max += num); }, 100); console.log(totalPlus100); // 115 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)