Back

Technologies:

javascriptjavascript
typescripttypescript
avatar
Tolerim
a month ago

What is the process for mapping two distinct arrays using a single statement?

Could you assist me in finding a cleaner way to write the following code? Essentially, I want to know if there's a way to combine two separate map() functions into one statement. Currently, I am creating a featuredProjects array by using map() to loop through allProjects and include only the featured ones. Then, another map() function is used to create an openSourceProjects array including only non-featured projects. This implementation feels redundant and could be improved upon.

  const featuredProjects = allProjects.map((e) => {
    if (e.featured == true) {
      return (
        buildCard(e)
      );
    }
  });

  const openSourceProjects = allProjects.map((e) => {
    if (e.featured == false) {
      return (
        buildCard(e)
      );
    }
  });
I would appreciate any suggestions for reducing code redundancy and making this implementation more efficient.

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Yes, there is a way to combine two separate map() functions into one statement. You can use the reduce() method to achieve this. Here's how you can do it: 
([featured, openSource], project) => {
    project.featured ? featured.push(buildCard(project)) : openSource.push(buildCard(project));
    return [featured, openSource];
  },
  [[], []]
);
This code uses the reduce() method to iterate over the allProjects array and create two new arrays: featuredProjects and openSourceProjects. The initial value of the accumulator is an array containing two empty arrays. The callback function takes two arguments: the accumulator and the current element of the array being iterated over. If the current project is featured, it is pushed onto the featured array; otherwise, it is pushed onto the openSource array. Finally, the callback function returns an array containing both arrays. I hope this helps! Let me know if you have any other questions.

Sources

Merging two Maps in Java - amitphjavascript - Simplest way to merge ES6 Maps/Sets? - Stack OverflowHow to merge two maps in Java - Atta-Ur-Rehman Shahjavascript - Writing multiple map functions in Promise.all() - Stack ...Joining multiple functions together in Javascript - Coderwall
avatar
Tolerim
a month ago
One way to accomplish this in a single statement is to use Array.prototype.reduce() method. Here's an example code snippet: 
const { featuredProjects, openSourceProjects } = allProjects.reduce((acc, e) => {
  const card = buildCard(e);
  if (e.featured) {
    acc.featuredProjects.push(card);
  } else {
    acc.openSourceProjects.push(card);
  }
  return acc;
}, { featuredProjects: [], openSourceProjects: [] });
In this example, we are using the reduce method on the allProjects array to iterate over each element and build the card using the buildCard() function. We use an empty object as the initial value for the accumulator and return it at the end. Inside the reduce callback, we check if e.featured is truthy and push the card to the featuredProjects array of the accumulator. If it is falsy, we push the card to the openSourceProjects array. Finally, we use destructuring assignment to extract the values from the accumulator object into named variables featuredProjects and openSourceProjects.
;