One of the more common coding scenarios with an array of objects is to find the first object whose property matches some condition. This can be achieved via the find() method of the array object, as shown below.

const courbet = paintings.find( p => p.artist === 'Courbet' );
console.log(courbet.title); // Burial at Ornans

Like the forEach() method, the find() method is passed a function; this function must return either true (if condition matches) or false (if condition does not match). In the example code above, it returns the results of the conditional check on the artist name.

What if you were interested in finding, not just the first match but all matches? In that case, you can use the filter() method, as shown in the following:

// vangoghs will be an array containing two painting objects
const vangoghs = paintings.filter(p => p.artist === 'Van Gogh');

Since the function passed to the filter simply needs to return a true/false value, you can make use of other functions that return true/false. For instance, you could perform a more sophisticated search if you made use of regular expressions. The following code uses regular expressions to create an array containing the painting objects whose title contains the word ‘with’ or ‘WITH’ (or any combination of upper and lower case).

const re = new RegExp('with', 'i'); // case insensitive
const withs = paintings.filter( p => p.title.match(re) );

The map() function operates in a similar manner except it creates a new array of the same size but whose values have been transformed by the passed function. For instance, let’s imagine you need to generate an array of strings containing <li> elements with each one containing the painting title and its year of composition. You could do so via the following bit of “traditional” JavaScript code:

let options = [];
for (let p of paintings) {
   let opt = `<li>${p.title} (${p.artist})</li>`;
   options.push(opt);
}

You could achieve the same result using the map() function as shown in the following:

const options2 = paintings.map( p => `<li>${p.title} (${p.artist})</li>` );

Figure 10.2 illustrates this process. In Listing 10.2, you see an alternate use of the map() function: instead of returning an array of strings (as in Figure 10.2), we could instead return an array of DOM element nodes.

Figure 10.2 Using the map() function

// create array of DOM nodes
const nodes = paintings.map( p => {
   let item = document.createElement("li");
   item.textContent = `${p.title} (${p.artist})`;
   return item;
});
// now add them to document
nodes.forEach( (n) => {
  document.querySelector("#parent").appendChild(n);
});

The reduce() function is used to reduce an array into a single value. Like the other array functions in this section, the reduce() function is passed a function that is invoked for each element in the array. This callback function takes up to four parameters, two of which are required: the previous accumulated value and the current element in the array.

For instance, the following example illustrates how this function can be used to sum the value property of each painting object in our sample paintings array:

let initial = 0;
const total = paintings.reduce( (prev, p) => prev + p.value, initial);

Notice that the reduce function here is not only passed a callback function, but also the initial value used to initialize the accumulated value. Most of our students find this function pretty confusing at first, so it may take some time and practice to fully comprehend its use.