0
createFilter(queryString) {
  return (restaurant) => {
    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
  };
}

I'm wondering that why the first return is followed by another return, and what dose the symbol => mean? How should I comprehend the whole piece of code?

Matthew Herbst
  • 21,357
  • 19
  • 68
  • 107
wangzewei
  • 35
  • 1
  • 7
  • `createFilter` is a method from some class, which returns a function that only matches restaurant starting with the queried string. – Washington Guedes Feb 28 '19 at 02:05
  • It could however, be just: `return restaurant => RegExp(queryString, 'i').test(restaurant);` – Washington Guedes Feb 28 '19 at 02:08
  • @WashingtonGuedes doesn't have to be on a class. You can create a function on an object the same way – Matthew Herbst Feb 28 '19 at 02:14
  • 1
    @MatthewHerbst You are completely right... I just tested it out, thought it was a class only syntax – Washington Guedes Feb 28 '19 at 02:16
  • Possible duplicate of [What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?](https://stackoverflow.com/questions/24900875/whats-the-meaning-of-an-arrow-formed-from-equals-greater-than-in-javas) – Raymond Chen Feb 28 '19 at 02:44
  • @Raymond Chen the code is from the element ui offical website.When I studied the element ui conponent from its offical website,I found I couldn't understand this piece of code.So I asked it myself on SO after I couldn't find the satisfied question and answer. – wangzewei Feb 28 '19 at 03:09

3 Answers3

1

The => symbol is just another way of declaring a function. This type of function is known as an arrow function (or sometimes referred to as a lambda function). For example, (restaurant) => {...} can be re-written as:

function(restaurant) {...}

While this isn't exactly the same as the arrow function, it will help you understand what's going on in your code. To understand the core difference between arrow functions and plain function syntax, you can read this answer.

As for the code logic, if you look at the inner-function by itself it may become clearer what's happening:

(restaurant) => {
  return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};

This is a function, which accepts a restaurant as an argument. The function then uses the restaurant to return a value once called. In this case, the return value is a boolean.

If you were to call the entire function above x, then your entire code would look something like:

createFilter(queryString) {
  return x;
}

Here, it is clear that that the function createFilter will accept an argument, queryString, and return x which we know is a function.

So, if I was to call createFilter("foo"), it would give me the function x, which we said is equivalent to:

(restaurant) => {
  return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};

So, now, as we know x is a function, we can call it x("bar"). We can see that the above function will return a boolean (as it is doing a comparison), and so calling x("bar") will result in either true or false.

Full usage of the createFilter function will thus looking something like:

let filter = createFilter("foo"); // returns a function (x), we can store the returned function in a variable called "filter"
let found = filter("bar"); // call the function stored in the variable filter

Or, by removing the itermidiate variables, it can be written as one-line:

let found = createFilter("foo")("bar");
// returns a function--^^^        ^^---- executes the returned function
Nick Parsons
  • 31,322
  • 6
  • 25
  • 44
0

(restaurant) => { } is a function. More specifically it is an arrow function.

justFatLard
  • 327
  • 3
  • 7
0

Welcome to SO. Sounds like you have a lot of JS reading to do. What the code is doing: createFilter returns a function (=> is an "arrow function") which when called, returns the true or false based on if the comparison holds. The comparison is checking if queryString.toLowerCase() matches the first letter (indexOf where the index is 0) of restaurant.value.toLowerCase().

So for example, you could call it like:

const myFilter = createFilter('A');
myFilter('Algerian Food'); // true
myFilter('Italian Food'); // false
Matthew Herbst
  • 21,357
  • 19
  • 68
  • 107
  • whether the whole code means that the first `return` calls the following function, and passes the parameter: `restaurant` which the function uses it to do the match thing.@Matthew Herbst – wangzewei Feb 28 '19 at 02:53