Filter Method in JavaScript

JavaScript Nuggets

filter method is used to remove unwanted things from an array.

like map, it returns a new array with elements removed.

we pass a function in the filter method which filters according to the task assigned to the function.

const cards = [];
for (let suit of ['H', 'C', 'D', 'S'])
    for (let value =1; value<=13; value++)
        cards.push({suit,value});

console.log(cards)

Q. Think of what might be the answer to the above code?

output:
[
  { suit: 'H', value: 1 },  { suit: 'H', value: 2 },
  { suit: 'H', value: 3 },  { suit: 'H', value: 4 },
  { suit: 'H', value: 5 },  { suit: 'H', value: 6 },
  { suit: 'H', value: 7 },  { suit: 'H', value: 8 },
  { suit: 'H', value: 9 },  { suit: 'H', value: 10 },
  { suit: 'H', value: 11 }, { suit: 'H', value: 12 },
  { suit: 'H', value: 13 }, { suit: 'C', value: 1 },
  { suit: 'C', value: 2 },  { suit: 'C', value: 3 },
  { suit: 'C', value: 4 },  { suit: 'C', value: 5 },
  { suit: 'C', value: 6 },  { suit: 'C', value:
 7 },
  { suit: 'C', value: 8 },  { suit: 'C', value:
 9 },
  { suit: 'C', value: 10 }, { suit: 'C', value:
 11 },
  { suit: 'C', value: 12 }, { suit: 'C', value:
 13 },
  { suit: 'D', value: 1 },  { suit: 'D', value:
 2 },
  { suit: 'D', value: 3 },  { suit: 'D', value:
 4 },
  { suit: 'D', value: 5 },  { suit: 'D', value:
 6 },
 8 },
  { suit: 'D', value: 9 },  { suit: 'D', value: 10 },
  { suit: 'D', value: 11 }, { suit: 'D', value: 12 },
  { suit: 'D', value: 13 }, { suit: 'S', value: 1 },
  { suit: 'S', value: 2 },  { suit: 'S', value: 3 },
  { suit: 'S', value: 4 },  { suit: 'S', value: 5 },
  { suit: 'S', value: 6 },  { suit: 'S', value: 7 },
  { suit: 'S', value: 8 },  { suit: 'S', value: 9 },
  { suit: 'S', value: 10 }, { suit: 'S', value: 11 },
  { suit: 'S', value: 12 }, { suit: 'S', value: 13 }
]

now let's go to the next step of applying the filter method to the result that we obtained. and let me remind you the result is stored in a cards array.

Applying filter method on the array(cards):

Q. let's try getting all the cards with a value of 10.

// getting all cards with value 10;
const result = cards.filter((c)=>{
  return c.value === 10;
})
console.log(result);

output:
[
  { suit: 'H', value: 10 },   
  { suit: 'C', value: 10 },   
  { suit: 'D', value: 10 },   
  { suit: 'S', value: 10 }    
]

Now your turn :

Q. Try writing code by using the filter method to get the following output?

output: [ { suit: 'H', value: 3 }, { suit: 'D', value: 3 } ]

I hope you might have figured out the code: and the question for above output would have been => find the card either H or D and its value must be 3.

const result = cards.filter((c)=>{
  return (c.suit ==="H" || c.suit ==="D") && c.value ===3;
})

console.log(result);

you can practice with more questions, like :

Q. Finding all the face cards?

Q. Finding all face cards that are hearts?

Q. Finding all the diamonds?

\=> a video solution for the above questions is provided as follows:

// solution:

👌Combining the map and filter method 😁: