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);
  }
});

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`);
});

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);

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);

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());

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`;
});

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;

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');

Set Interval

Repeats the callback every x milliseconds

setInterval(() => {
  console.log(Math.random());
}, 2000);

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

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]

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);

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

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

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);

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);

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

Blog

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

Megan Paffrath