By mark


2018-09-14 14:45:01 8 Comments

I've found a weird issue.

given a filter and an array of objects, I would like to select only those objects that match the filter.

Weirdly, this doesn't work

this.state.articles.filter((article) => {
  article.category === filter 
})

while this does

this.state.articles.filter((article) => article.category === filter )

I originally thought they would evaluate the same, but it doesn't seem to be the case. Any ideas why?

4 comments

@Bhojendra Rauniyar 2018-09-14 15:23:20

How is () => {…} different from () =>

+----+--------------------------------+---------------------------------------+
| #  | Using curly brace              | Without curly brace                   |
+-------------------------------------+---------------------------------------+
| 1. | Needs explicit return          | Returns the statement implicitly      |
| 2. | `undefined` if no return used  | Returns the value of expression       |
| 3. | return {} // ok                | {} // buggy, ({}) // ok               |
| 4. | Useful for multi-line code     | Useful for single line code           |
| 5. | Okay even for single line      | Buggy for multi line                  |
+----+--------------------------------+---------------------------------------+

Here's the examples for above differences:

Example: 1

// Needs explicit return
() => {
  return value
}
// Returns the value
() => value

Example: 2

// Returns undefined
() => {
  1 == true
}
// Returns true
() => 1 == true // returns true

Example: 3

// ok, returns {key: value}
() => {
  return {key: value}
}
// Wrap with () to return an object
() => {key: value} // buggy
() => ({key: value}) // ok

Example: 4

// Useful for multi-line code
() => {
  const a = 1
  const b = 2
  return a * b
}
// Useful for single line code
() => 1 * 2 

Example: 5

// Okay even for single line code
() => { return 1 }
// Buggy for multi-line code
() => const a = 123; const b = 456; a + b; // buggy
() => 
     const a = 123
     const b = 456
     a + b // still buggy

When using filter function, return statement is required to pass the test:

A new array with the elements that pass the test. If no elements pass the test, an empty array will be returned.

So, with the form () =>, you're implicitly returning the value, it will pass the test and works fine. But when you use () => {...}, you're not explicitly returning the statement, and won't work as you expect. It just returns an empty object.

So, to make your code work as expected, you should use the return statement:

this.state.articles.filter((article) => {
  return article.category === filter 
})

PS: I'm using the implicit and explicit word, what's exactly that in terms of JavaScript?

Implicit means JavaScript engine does it for us. Explicit means We need to do what we want. We can think similar in any terms.

@DeltaMarine101 2018-09-14 15:08:06

The difference is that when you use () => x, it really means () => { return x }, so just how the statement article.category === filter on its own dosen't do anything, { article.category === filter } dosen't explicitly return anything.

@Willem van der Veen 2018-09-14 15:00:40

Javascript ES6 arrow functions work in a particular manner which can best be described via an example:

let multiply1 = (number) => number * 2;
// When we are returning one value we can put this expression on the same line

// this is the same as:
let multiply2 = (number) => { return number * 2};

//when we have 1 argument we can omit the parentheses
let multiply3 = number => number * 2;


// When we want to write multiple line we have to put brackets like this:
let multiply4 = (number) => { 
console.log('inside arrow function');
return number * 2;
};

console.log(multiply1(2));
console.log(multiply2(2));
console.log(multiply3(2));
console.log(multiply4(2));

When the arrow function is returning an expression it is very convenient to not have to explicitly write the return statement and the square brackets {}. This allows for more concise code.

@Zenoo 2018-09-14 14:45:57

When you open a block {} in an arrow function, the return isn't implied anymore.

You have to write it down :

this.state.articles.filter((article) => {
  return article.category === filter 
})

@Max Baldwin 2018-09-14 14:48:08

"implicit return" is the term if anyone wants to Google it.

@Ismael Miguel 2018-09-14 14:48:26

This is equivalent to function(article){ [...] }, in ES5 and older, while (article) => article.category === filter is equivalent to function(article){ return [...] }.

@dfsq 2018-09-14 15:29:10

@IsmaelMiguel No, they are not equivalent.

@Ismael Miguel 2018-09-14 16:42:28

Then what would be the equivalent for those?

Related Questions

Sponsored Content

88 Answered Questions

[SOLVED] How do JavaScript closures work?

36 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

52 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

69 Answered Questions

[SOLVED] How do I remove a particular element from an array in JavaScript?

  • 2011-04-23 22:17:18
  • Walker
  • 5016334 View
  • 6304 Score
  • 69 Answer
  • Tags:   javascript arrays

27 Answered Questions

20 Answered Questions

[SOLVED] What is the difference between call and apply?

32 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

59 Answered Questions

[SOLVED] How do I redirect to another webpage?

48 Answered Questions

5 Answered Questions

Sponsored Content