Removing elements with Array map in JavaScript

Question

I would like to filter an array of items by using the map   function  Here is a code snippet   var filteredItems   items map function item        if     some condition                    return item              The problem is that filtered out items still uses space in the array and I would like to completely wipe them out   Any idea   EDIT  Thanks  I forgot about filter    what I wanted is actually a filter   then a map     EDIT2  Thanks for pointing that map   and filter   are not implemented in all browsers  although my specific code was not intended to run in a browser

User · Accepted Answer

You should use the filter method rather than map unless you want to mutate the items in the array  in addition to filtering   eg   var filteredItems   items filter function item        return    some condition            Edit  Of course you could always do sourceArray filter      map      to both filter and mutate

User · Answer

following statement cleans object using map function   var arraytoclean     v 65  toberemoved  gronf     v 12  toberemoved null    v 4    arraytoclean map  x i   gt x toberemoved undefined   console dir arraytoclean

User · Answer

Inspired by writing this answer  I ended up later expanding and writing a blog post going over this in careful detail  I recommend checking that out if you want to develop a deeper understanding of how to think about this problem--I try to explain it piece by piece  and also give a JSperf comparison at the end  going over speed considerations   That said  The tl dr is this  To accomplish what you re asking for  filtering and mapping within one function call   you would use Array reduce     However  the more readable and  less importantly  usually significantly faster2 approach is to just use filter and map chained together    1 2 3  filter num   gt  num  gt  2  map num   gt  num   2   What follows is a description of how Array reduce   works  and how it can be used to accomplish filter and map in one iteration  Again  if this is too condensed  I highly recommend seeing the blog post linked above  which is a much more friendly intro with clear examples and progression     You give reduce an argument that is a  usually anonymous  function   That anonymous function takes two parameters--one  like the anonymous functions passed in to map filter forEach  is the iteratee to be operated on  There is another argument for the anonymous function passed to reduce  however  that those functions do not accept  and that is the value that will be passed along between function calls  often referred to as the memo   Note that while Array filter   takes only one argument  a function   Array reduce   also takes an important  though optional  second argument  an initial value for  memo  that will be passed into that anonymous function as its first argument  and subsequently can be mutated and passed along between function calls   If it is not supplied  then  memo  in the first anonymous function call will by default be the first iteratee  and the  iteratee  argument will actually be the second value in the array   In our case  we ll pass in an empty array to start  and then choose whether to inject our iteratee into our array or not based on our function--this is the filtering process   Finally  we ll return our  array in progress  on each anonymous function call  and reduce will take that return value and pass it as an argument  called memo  to its next function call   This allows filter and map to happen in one iteration  cutting down our number of required iterations in half--just doing twice as much work each iteration  though  so nothing is really saved other than function calls  which are not so expensive in javascript   For a more complete explanation  refer to MDN docs  or to my post referenced at the beginning of this answer    Basic example of a Reduce call   let array    1 2 3   const initialMemo        array   array reduce  memo  iteratee    gt           if condition is our filter     if  iteratee  gt  1               what happens inside the filter is the map         memo push iteratee   2                  this return value will be passed in as the  memo  argument        to the next call of this function  and this function will have        every element passed into it at some point      return memo      initialMemo   console log array      4 6   equivalent to   2   2    3   2     more succinct version    1 2 3  reduce  memo  value    gt  value  gt  1   memo concat value   2    memo        Notice that the first iteratee was not greater than one  and so was filtered  Also note the initialMemo  named just to make its existence clear and draw attention to it  Once again  it is passed in as  memo  to the first anonymous function call  and then the returned value of the anonymous function is passed in as the  memo  argument to the next function   Another example of the classic use case for memo would be returning the smallest or largest number in an array  Example    7 4 1 99 57 2 1 100  reduce  memo  val    gt  memo  gt  val   memo   val      this would return the largest number in the list    An example of how to write your own reduce function  this often helps understanding functions like these  I find    test arr           we accept an anonymous function  and an optional  initial memo  value  test arr my reducer   function reduceFunc  initialMemo           if we did not pass in a second argument  then our first memo value         will be whatever is in index zero   Otherwise  it will         be that second argument       const initialMemoIsIndexZero   arguments length  lt  2          here we use that logic to set the memo value accordingly      let memo   initialMemoIsIndexZero   this 0    initialMemo          here we use that same boolean to decide whether the first        value we pass in as iteratee is either the first or second        element     const initialIteratee   initialMemoIsIndexZero   1   0       for  var i   initialIteratee  i  lt  this length  i                 memo is either the argument passed in above  or the             first item in the list  initialIteratee is either the            first item in the list  or the second item in the list             memo   reduceFunc memo  this i               or  more technically complete  give access to base array            and index to the reducer as well             memo   reduceFunc memo  this i   i  this                 after we ve compressed the array into a single value         we return it      return memo      The real implementation allows access to things like the index  for example  but I hope this helps you get an uncomplicated feel for the gist of it

User · Answer

TLDR  Use map  returning undefined when needed  and then filter   First  I believe that a map   filter function is useful since you don t want to repeat a computation in both  Swift originally called this function flatMap but then renamed it to compactMap  For example  if we don t have a compactMap function  we might end up with computation defined twice    let array    1  2  3  4  5  6  7  8     let mapped   array    filter x   gt        let computation   x   2   1      let isIncluded   computation   2     0      return isIncluded          map x   gt        let computation   x   2   1      return    x  is included because   computation  is even             Output   2 is included because 2 is even  6 is included because 4 is even   Thus compactMap would be useful to reduce duplicate code  A really simple way to do something similar to compactMap is to   Map on real values or undefined  Filter out all the undefined values   This of course relies on you never needing to return undefined values as part of your original map function  Example    let array    1  2  3  4  5  6  7  8     let mapped   array    map x   gt        let computation   x   2   1      let isIncluded   computation   2     0      if  isIncluded          return    x  is included because   computation  is even        else         return undefined               filter x   gt  typeof x      quot undefined quot

User · Answer

I just wrote array intersection that correctly handles also duplicates  https   gist github com gkucmierz 8ee04544fa842411f7553ef66ac2fcf0   x000D   x000D     array intersection that correctly handles also duplicates x000D   x000D  const intersection    a1  a2    gt    x000D    const cnt   new Map    x000D    a2 map el   gt  cnt el    el in cnt   cnt el    1   1   x000D    return a1 filter el   gt  el in cnt  amp  amp  0  lt  cnt el --   x000D     x000D   x000D  const l   console log  x000D  l intersection  1234  split     3456  split            3    4    x000D  l intersection  12344  split     3456  split            3    4    x000D  l intersection  1234  split     33456  split            3    4    x000D  l intersection  12334  split     33456  split            3    3    4    x000D   x000D   x000D

User · Answer

You must note however that the Array filter is not supported in all browser so  you must to prototyped     This prototype is provided by the Mozilla foundation and   is distributed under the MIT license    http   www ibiblio org pub Linux LICENSES mit license  if   Array prototype filter        Array prototype filter   function fun     thisp                  var len   this length           if  typeof fun     function               throw new TypeError             var res   new Array            var thisp   arguments 1            for  var i   0  i  lt  len  i                          if  i in this                                var val   this i      in case fun mutates this                  if  fun call thisp  val  i  this                      res push val                                    return res             And doing so  you can prototype any method you may need

User · Answer

That s not what map does  You really want Array filter  Or if you really want to remove the elements from the original list  you re going to need to do it imperatively with a for loop

User · Answer

Array Filter method   x000D   x000D  var arr    1  2  3  x000D   x000D     ES5 syntax x000D  arr   arr filter function item   return item    3    x000D   x000D     ES2015 syntax x000D  arr   arr filter item   gt  item    3  x000D   x000D  console log  arr   x000D   x000D   x000D

User · Answer

First you can use map and with chaining you can use filter   state map item   gt                if item id     action item id                          return                           id   action item id                          name   item name                          price  item price                          quantity   item quantity-1                                     else                  return item                           filter item   gt                if item quantity  lt   0                   return false               else                  return true

[javascript] Removing elements with Array.map in JavaScript

Examples related to javascript

Examples related to functional-programming

Examples related to data-manipulation

Examples related to client-side