Welcome to this interesting lesson! We're going to explore JavaScript array methods, specifically: forEach(), map(), filter(), reduce(), and find().

JavaScript arrays can store multiple values. Array methods enable us to perform operations such as modifying or searching array elements. To call array methods, you use dot-notation on the array. For example: arrayVar.arrayMethod(func).

Array Methods accept a function as a parameter using the => operator. For example: arrayVar.arrayMethod( (functionParameters) => /* function code */ )

To inspect each element in an array, we use the forEach() method, which runs a function on each array element.

JavaScript
Copy to clipboard
1const stars = ['Sirius', 'Vega', 'Rigel', 'Polaris'];
2stars.forEach((star) => {
3    console.log(star); // prints star names one by one
4});
5
6/* Prints
7Sirius
8Vega
9Rigel
10Polaris
11*/
12
13stars.forEach((star, index) => {
14    console.log(star, index); // prints star names along with their indices in the array
15});
16
17/* Prints
18Sirius 0
19Vega 1
20Rigel 2
21Polaris 3
22*/

The forEach() method accepts a function as a parameter, using the => operator, and runs the function on each element of the array. If we just want the value of each element in the array, we specify the input to our function as just (star). If we want the value of each element and its index, we specify the input as (star, index).

The map() method transforms data and creates a new array based on the results of a function.

Just like forEach(), map takes in a function as an input. map() returns an array where each element is the value returned by calling our function on that element.

JavaScript
Copy to clipboard
1const stars = ['Sirius', 'Vega', 'Rigel', 'Polaris'];
2const brightStars = stars.map((star) => {
3    return star + ' is very bright!';
4});
5console.log(brightStars); // prints star names with added info
6// Prints ['Sirius is very bright!', 'Vega is very bright!', 'Rigel is very bright!', 'Polaris is very bright!']

The filter() method creates a new array with only the elements that pass a condition. In this case, let's filter out elements that are at even indices.

JavaScript
Copy to clipboard
1const stars = ['Sirius', 'Vega', 'Rigel', 'Polaris', 'Betelgeuse'];
2const evenIndexedStars = stars.filter((star, index) => {
3    return index % 2 === 0;
4});
5console.log(evenIndexedStars); // prints ['Sirius', 'Rigel', 'Betelgeuse']

In the above code, the filter() method is used on the stars array. It checks the index of each element, and if the index is even (as checked by index % 2 === 0, meaning the remainder of dividing the index by 2 is 0), that element is included in the new evenIndexedStars array. As a result, evenIndexedStars includes the stars 'Sirius', 'Rigel', and 'Betelgeuse', which were at the 0th, 2nd, and 4th positions, respectively, in the original stars array.

The reduce() method applies a function to each array element and combines them into a single output.

reduce() accepts 2 parameters. A function, and an initial value. The function must take in a runningTotal and currentElement parameters. The runningTotal starts at initialValue. Inside the function, currentElement is used to update runningTotal.

In the example below: the initial value is 0. For each element in the array, the element number is added to total.

JavaScript
Copy to clipboard
1const numbers = [1, 2, 3, 4, 5];
2const sum = numbers.reduce((total, number) => {
3    return total + number;
4}, 0);
5console.log(sum); // prints total sum of numbers

The find() method returns the first element that satisfies a particular function.

JavaScript
Copy to clipboard
1const numbers = [1, 3, 5, 2, 4, 6];
2const firstEvenNumber = numbers.find((num) => {
3    return num % 2 === 0;
4});
5console.log(firstEvenNumber); // prints 2, the first even number

In this example, the find() method operates on the numbers array. It goes through each number in the numbers array until it finds a number where the condition num % 2 === 0 is true (i.e., the number is even). The find() method then immediately returns that number. If no number satisfies the condition, find() will return undefined. In this case, the first even number in the numbers array is 2, so that's what's logged to the console.

Great job! You've learned how to use forEach() for looping, map() for transforming, filter() for filtering, reduce() for summarizing, and find() for searching data in an array! Prepare for the upcoming practice exercises to consolidate your learning. Let's continue exploring!