What's the difference between these 2 types of arrow functions in JavaScript?

Question

I am having trouble understanding why one arrow function will return an array of items while the other doesn't (it's the same function, just in a different format).

Goal: This program is supposed to filter through a JSON file to find cocktails that have every ingredient (not strictly just the ingredients specified) specified by an array of strings.

Let me share some context as to what one of the JSON file objects looks like (out of over 400+):

{
    "strGlass": "White Wine Glass",
    "idDrink": "15346",
    "strCreativeCommonsConfirmed": "No",
    "strCategory": "Cocktail",
    "strInstructionsIT": "Miscela con ghiaccio.\r\nServire in un bicchiere da vino.\r\nGuarnire con una carota.",
    "strInstructions": "Blend with ice. Serve in a wine glass. Garnish with carrot.",
    "strDrink": "155 Belmont",
    "Ingredients": [
      {
        "Measurement": "1 shot ",
        "Ingredient": "Dark rum"
      },
      {
        "Ingredient": "Light rum",
        "Measurement": "2 shots "
      },
      {
        "Measurement": "1 shot ",
        "Ingredient": "Vodka"
      },
      {
        "Measurement": "1 shot ",
        "Ingredient": "Orange juice"
      }
    ],
    "dateModified": "2016-10-05 12:36:28",
    "strDrinkThumb": "https://www.thecocktaildb.com/images/media/drink/yqvvqs1475667388.jpg",
    "strAlcoholic": "Alcoholic",
    "strInstructionsDE": "Mit Eis vermischen. In einem Weinglas servieren. Mit Karotte garnieren."
  }

And the array I'm using looks like this:

let Filterable_Drinks = reactive([]);
let Ingredients_Searched_For = reactive(["vodka", "lemonade"]);

Here's the first format:

Filterable_Drinks.length = 0;

const items = DRINKS.filter(cocktail => Ingredients_Searched_For.every(ing => cocktail.Ingredients.find(cocIng => cocIng.Ingredient.toLowerCase().includes(ing.toLowerCase()))))

Filterable_Drinks.push(...items);
console.log(Filterable_Drinks);

And here is the second format:

Filterable_Drinks.length = 0;

const items = DRINKS.filter((cocktail) => {
    Ingredients_Searched_For.every((ing) => {
      cocktail.Ingredients.find(cocIng => cocIng.Ingredient.toLowerCase().includes(ing.toLowerCase()))
    })
  })

Filterable_Drinks.push(...items);
console.log(Filterable_Drinks);

It seems to be the same thing, but the second one returns an empty array as the first one doesn't.

What's the difference between the two different formats of the same code?

the second format, nothing is returned - because you dont' `return` anything — Jaromanda X, Aug 21 '22 at 00:50
Where would I place the return? I appended it to the ```cocIng.Ingredient.toLowerCase().includes(ing.toLowerCase())``` and it still returned an empty array — ssethzz, Aug 21 '22 at 00:52
`return Ingredients_Searched_For........etc` best way to understand is by [reading documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#comparing_traditional_functions_to_arrow_functions) — Jaromanda X, Aug 21 '22 at 00:53
you did it wrong - you need to ALSO add it before `return cocktail.Ingredients.find` - I didn't see that because I wasn't debugging your code for you - basically `() => statement` is equivalent to `() => { return statement;}` — Jaromanda X, Aug 21 '22 at 00:55
Please note that if you're using JS, please also get in the habit of using JS conventions for naming things. Variables and functions use lowerCamelCase, constants use UPPER_SNAKE_CASE, classes/constructor function use UpperCamelCase. Don't invent your own conventions: for your sake and everyone who needs to read your code, use the established conventions. — Mike 'Pomax' Kamermans, Aug 21 '22 at 01:01

What's the difference between these 2 types of arrow functions in JavaScript?

0 Answers0