Arrays are a crucial part of any programming language. Arrays are commonly used on a daily basis in any type of project and knowing how to interact with arrays will make your journey more enjoyable.

Before talking about the Array methods, first, let's understand what an Array is:

Arrays are a data structure that can store any type of data. These can contain a combination of elements, such as strings, numbers, or boolean values. For example an array of movie names or an array of numbers as shown on the example below:

const films = ["Harry Potter", "Tenet", "Mulan", "Wonder Woman"];

const numbers = [1, 34, 23, 17, 10, 7];

Now that we know what Arrays are, we can move on to talk about some Array methods that are really important.

For the examples below, I will be using the following Array of objects to illustrate the different Array methods. The Array contains various information about movies, such as name, year, and rating as shown below.

const films = [
  { name: "Tenet", year: 2020, rating: 7.5 },
  { name: "Wonder Woman 1984", year: 2020, rating: 5.4 },
  { name: "The Karate Kid", year: 1984, rating: 7.3 },
  { name: "Avengers: Endgame", year: 2019, rating: 8.4 },
  { name: "The Godfather", year: 1972, rating: 9.2 },
  { name: "Godzilla", year: 2014, rating: 6.4 },
  { name: "The Croods: A New Age", year: 2020, rating: 7.0 }
];

Filter

As the name indicates, the filter method can be used to filter or extract any type of information from an array based on a condition. This returns or creates a new array with the filtered items. In the following example, we get all the films that were released before the year 2000.

const filteredFilms = films.filter(film => {
  return film.year < 2000; // condition
});

/*
Output: filteredFilms = [
  { name: "The Karate Kid", year: 1984, rating: 7.3 },
  { name: "The Godfather", year: 1972, rating: 9.2 },
]
*/

Map

The Map method allows you to iterate through all the items in the array to carry out a specific task based on the provided function. Map will also create a new array with the results. In the following example, we are getting the names of all the films.

const filmNames = films.map((film) => {
  return film.name;
});

/*
Output: ["Tenet", "Wonder Woman 1984", "The Karate Kid", 
"Avengers: Endgame", "The Godfather", "Godzilla", 
"The Croods: A New Age"]
*/

ForEach

The Foreach method also allows us to iterate through all the items in an array but the difference is that it won't create any new array but rather it will execute the provided function on each item. In the following example, we are displaying on the console, a string with the name of the film and its rating.

films.forEach((film) => {
  console.log(`${film.name} has a rating of ${film.rating}`);
});

/*
Output: Tenet has a rating of 7.5 
Wonder Woman 1984 has a rating of 5.4 
The Karate Kid has a rating of 7.3 
Avengers: Endgame has a rating of 8.4 
The Godfather has a rating of 9.2 
Godzilla has a rating of 6.4 
The Croods: A New Age has a rating of 7 
*/

Find

The find method returns the first item on the array that passes the condition on the provided function. In the case that there are no items that satisfy the condition, it will simply return "undefined". In the following example, we are passing a testing function to find the name of a film.

const foundFilm = films.find((film) => {
  return film.name === "Avengers: Endgame"; //condition
});

// Output: {name: "Avengers: Endgame", year: 2019, rating: 8.4}

Reduce

And finally, we have the reduce method which is a bit confusing to understand. It allows us to iterate every item in the array and combine everything into a single result by passing a reducer function and an optional initial value. This reducer function takes 4 different arguments.

1. Accumulator
2. Current Value
3. Current Index
4. Source Array

The arguments that were are going to worry about for now are the accumulator (which is the current total on each iteration) and the current value (which gives you access to the current item on each iteration).

In the following example, we are passing a reducer function that adds the ratings of each film and an initial value of 0, and then display the average on the console.

const total = films.reduce((currentTotal, currentValue) => {
  return currentTotal + currentValue.rating;
}, 0);

// total = 51.199999999999996

console.log(total / films.length); // 7.314285714285714

That's it for me today. Thank you for reading my first DEV blog post. I will keep posting more content related to web development, programming, and things I've learned. Happy coding! 😃 catch you in the next one.