What does the following code mean??And how should I understand the syntax of the function body?

Question

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?

Answer 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    

Answer 2

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

Answer 3

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