Map and filter an array at the same time

Question

I have an array of objects that I want to iterate over to produce a new filtered array  But also  I need to filter out some of the objects from the new array depending of a parameter  I m trying this   function renderOptions options        return options map function  option            if   option assigned                return  someNewObject                            Is that a good approach  Is there a better method  I m open to use any library such as lodash

User · Answer

Since 2019  Array prototype flatMap is good option   options flatMap o   gt  o assigned    o name             From the MDN page linked above      flatMap can be used as a way to add and remove items  modify the   number of items  during a map  In other words  it allows you to map   many items to many items  by handling each input item separately     rather than always one-to-one  In this sense  it works like the   opposite of filter  Simply return a 1-element array to keep the item    a multiple-element array to add items  or a 0-element array to remove   the item

User · Answer

With ES6 you can do it very short   options filter opt   gt   opt assigned  map opt   gt  someNewObject

User · Answer

One line reduce with ES6 fancy spread syntax is here     x000D   x000D  var options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D   x000D  const filtered   options x000D     reduce  result   name  assigned     gt      result     assigned    name              x000D   x000D  console log filtered   x000D   x000D   x000D

User · Answer

I optimized the answers with the following points    Rewriting if  cond    stmt    as cond  amp  amp  stmt  Use ES6 Arrow Functions   I ll present two solutions  one using forEach  the other using reduce   Solution 1  Using forEach   x000D   x000D  var options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D  var reduced      x000D  options forEach o   gt    x000D    o assigned  amp  amp  reduced push    name  o name  newProperty   Foo       x000D       x000D  console log reduced   x000D   x000D   x000D    Solution 2  Using reduce   x000D   x000D  var options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D  var reduced   options reduce  a  o    gt    x000D    o assigned  amp  amp  a push    name  o name  newProperty   Foo       x000D    return a  x000D            x000D  console log reduced   x000D   x000D   x000D    I leave it up to you to decide which solution to go for

User · Answer

Use reduce  Luke   function renderOptions options        return options reduce function  res  option            if   option assigned                res push someNewObject                     return res

User · Answer

I d make a comment  but I don t have the required reputation  A small improvement to Maxim Kuzmin s otherwise very good answer to make it more efficient    x000D   x000D  const options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D   x000D  const filtered   options x000D     reduce  result    name  assigned      gt  assigned   result concat name    result       x000D   x000D  console log filtered   x000D   x000D   x000D    Explanation  Instead of spreading the entire result over and over for each iteration  we only append to the array  and only when there s actually a value to insert

User · Answer

At some point  isn t it easier or just as easy  to use a forEach   x000D   x000D  var options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D   x000D  var reduced      x000D  options forEach function option    x000D    if  option assigned    x000D       var someNewValue     name  option name  newProperty   Foo    x000D       reduced push someNewValue   x000D      x000D      x000D   x000D  document getElementById  output   innerHTML   JSON stringify reduced   x000D   lt h1 gt Only assigned options lt  h1 gt  x000D   lt pre id  output  gt   lt  pre gt  x000D   x000D   x000D    However it would be nice if there was a malter   or fap   function that combines the map and filter functions  It would work like a filter  except instead of returning true or false  it would return any object or a null undefined

User · Answer

You should use Array reduce for this    x000D   x000D  var options     x000D      name   One   assigned  true     x000D      name   Two   assigned  false     x000D      name   Three   assigned  true     x000D     x000D   x000D  var reduced   options reduce function filtered  option    x000D    if  option assigned    x000D       var someNewValue     name  option name  newProperty   Foo    x000D       filtered push someNewValue   x000D      x000D    return filtered  x000D          x000D   x000D  document getElementById  output   innerHTML   JSON stringify reduced   x000D   lt h1 gt Only assigned options lt  h1 gt  x000D   lt pre id  output  gt   lt  pre gt  x000D   x000D   x000D      Alternatively  the reducer can be a pure function  like this  var reduced   options reduce function result  option      if  option assigned        return result concat         name  option name        newProperty   Foo                return result

User · Answer

Direct use of  reduce can be hard to read  so I d recommend creating a function that generates the reducer for you  function mapfilter mapper      return  acc  val    gt        const mapped   mapper val       if  mapped     false        acc push mapped       return acc          Use it like so  const words    quot Map and filter an array  javascript  arrays quot   const tags   words split         reduce mapfilter word   gt  word startsWith       amp  amp  word slice 1         console log tags         javascript    arrays

User · Answer

Use Array prototy filter itself  function renderOptions options        return options filter function option           return  option assigned         map function  option            return  someNewObject

User · Answer

Using reduce  you can do this in one Array prototype function  This will fetch all even numbers from an array    x000D   x000D  var arr    1 2 3 4 5 6 7 8   x000D   x000D  var brr   arr reduce  c  n    gt    x000D    if  n   2     0    x000D      return c  x000D      x000D    c push n   x000D    return c  x000D          x000D   x000D  document getElementById  mypre   innerHTML   brr toString    x000D   lt h1 gt Get all even numbers lt  h1 gt  x000D   lt pre id  mypre  gt   lt  pre gt  x000D   x000D   x000D    You can use the same method and generalize it for your objects  like this   var arr   options reduce function c n     if somecondition   return c     c push n     return c            arr will now contain the filtered objects

[javascript] Map and filter an array at the same time

Examples related to javascript

Examples related to arrays