How to use ES6 Fat Arrow to .filter() an array of objects

by

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;
});

More Related Contents:

  1. Attaching Dynamic Variable in ES6 [closed]
  2. Methods in ES6 objects: using arrow functions
  3. Explanation of `let` and block scoping with for loops
  4. Null-safe property access (and conditional assignment) in ES6/2015
  5. Where can I get info on the object parameter syntax for JavaScript functions?
  6. Why shouldn’t JSX props use arrow functions or bind?
  7. using brackets with javascript import syntax
  8. ES6 variable import name in node.js?
  9. es6 Map and Set complexity, v8 implementation
  10. What do curly braces inside of function parameter lists do in es6?
  11. Fulfill (don’t resolve) promise with another promise
  12. ES6 modules in local files – The server responded with a non-JavaScript MIME type
  13. What is the difference between using constructor vs state = {} to declare state in react component?
  14. What does @@ (“at at”) mean in ES6 JavaScript?
  15. Javascript ES6 export const vs export let
  16. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  17. Arrow functions and the use of parentheses () or {} or ({})
  18. ES6 tagged templates practical usability
  19. Destructuring Nested objects in javascript | Destructure second level parent and child Objects
  20. What does calling super() in a React constructor do?
  21. Maps vs Objects in ES6, When to use?
  22. How to use javascript proxy for nested objects
  23. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  24. How to call another function within the same object?
  25. What is the best general practice to timeout a function in promise [closed]
  26. Wrap long template literal line to multiline without creating a new line in the string
  27. Declare a class property outside of a class method
  28. Importing javascript file for use within vue component
  29. React cannot read property map of undefined
  30. What is the technical definition of a Javascript iterable and how do you test for it?

Leave a Comment