Filter function with ternary

Question

This was bothering me for hours...and I don't understand yet why. I have an array of of objects. Is my syntax bad for the ternary?...

This is in React if that matters.
The array is something like below

[{id:1, name:'steve'}, {id:2, name:'john'}]

if i use this, it works fine.

array.filter(item => { if (item.id ==id) return item.name} )

if I use this, it returns me the whole array, without filtering nothing.

array.filter(item => item.id ===id ? item.name : 'null')

.

filter function traverse each entry of given array and return sub array with matched value. can you explain more what you want as output ? — Sunny S.M, Oct 29 '18 at 07:06
That works, I dont want anymore as the output, this little thing was bothering me for hours. — born2gamble, Oct 29 '18 at 07:10
the anonymous function in filter should either return a true or false. returning 'null' in javascript is true. 'null' is a non empty string — Alfred Ayi-bonte, Oct 29 '18 at 07:10
@AlfredAyi-bonte No, the `filter` callback can return *anything*, the programmer just has to keep in mind that it'll be converted to a Boolean if it isn't a Boolean already — CertainPerformance, Oct 29 '18 at 07:12
@CertainPerformance I can't agree less but that thing should evaluate to the correct boolean — Alfred Ayi-bonte, Oct 29 '18 at 07:14

score 4 · Answer 1 · answered Oct 29 '18 at 07:07

4

Why not just take the result of the comparison, as Array#filter expects a boolean value?

array.filter(item => item.id === id)

The return value of the callback does not change anything outside of filter, just the result of the filtering.

answered Oct 29 '18 at 07:07

Nina Scholz

376,160
25
347
392

score 3 · Answer 2 · answered Oct 29 '18 at 07:05

Array.filter() works by selecting those elements from the array for which true value is returned. Which does not mean the boolean true value but any values that is defined. So, in your code you are returning null with quotes for the else part which is a string and not actually a null value. Thus, it considers it as a truthy and consider that object in the filtered array. Change that to null and it will work.

var array = [{
    id: 10,
    name: "name10"
  },
  {
    id: 20,
    name: "name20"
  }
];
var id = 20;
var res = array.filter(item => item.id === id ? item.name : null);
console.log(res);

@born2gamble glad to help :) – Ankit Agarwal Oct 29 '18 at 07:12 — Ankit Agarwal, Oct 29 '18 at 07:12

qwermike · Answer 3 · 2018-10-29T07:26:20.307

You are using filter wrong.
You can check the documentation and see that callback parameter is a function that returns true or false.
So in your case - you want to filter array by id and then select only name.
You can chain filter and map.

For example,

let array = [{id:1, name:'steve'}, {id:2, name:'john'}];
let result = array
  .filter(item => item.id === 1)
  .map(item => item.name);

console.log(result);

Filter function with ternary

3 Answers3