How to use ES6 Fat Arrow to .filter() an array of objects
JavascriptEcmascript 6Higher Order-FunctionsJavascript Problem Overview
I'm trying to use ES6 arrow function with .filter
to return adults (Jack & Jill). It appears I cannot use an if statement.
What do I need to know in order to do this in ES6?
var family = [{"name":"Jack", "age": 26},
{"name":"Jill", "age": 22},
{"name":"James", "age": 5 },
{"name":"Jenny", "age": 2 }];
let adults = family.filter(person => if (person.age > 18) person); // throws error
(8:37) SyntaxError: unknown: Unexpected token (8:37)
|let adults = family.filter(person => if (person.age > 18) person);
My working ES5 example:
let adults2 = family.filter(function (person) {
if (person.age > 18) { return person; }
});
Javascript Solutions
Solution 1 - Javascript
> It appears I cannot use an if statement.
Arrow functions either allow to use an expression or a block as their body. Passing an expression
foo => bar
is equivalent to the following block
foo => { return bar; }
However,
if (person.age > 18) person
is not an expression, if
is a statement. Hence you would have to use a block, if you wanted to use if
in an arrow function:
foo => { if (person.age > 18) return person; }
While that technically solves the problem, this a confusing use of .filter
, because it suggests that you have to return the value that should be contained in the output array. However, the callback passed to .filter
should return a Boolean, i.e. true
or false
, indicating whether the element should be included in the new array or not.
So all you need is
family.filter(person => person.age > 18);
In ES5:
family.filter(function (person) {
return person.age > 18;
});
Solution 2 - Javascript
You can't implicitly return with an if
, you would need the braces:
let adults = family.filter(person => { if (person.age > 18) return person} );
It can be simplified though:
let adults = family.filter(person => person.age > 18);
Solution 3 - Javascript
return arrayname.filter((rec) => rec.age > 18)
Write this in the method and call it
Solution 4 - Javascript
As simple as you can use const adults = family.filter(({ age }) => age > 18 );
const family =[{"name":"Jack", "age": 26},
{"name":"Jill", "age": 22},
{"name":"James", "age": 5 },
{"name":"Jenny", "age": 2 }];
const adults = family.filter(({ age }) => age > 18 );
console.log(adults)
Solution 5 - Javascript
Here is my solution for those who use hook
; If you are listing items in your grid and want to remove the selected item, you can use this solution.
var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);