ES6 Array filter() method not working as expected

Question

I have an array of objects (dishes) that need to be sorted according to their categories.

I have a set of predefined categories that fall into three main groups. If a dish belongs to group 1, it should appear at beginning of the array. If it belongs to group 2, it should appear in middle, and if it belongs to group 3, it should be at the end. [see code].

I resolved to take the original array, create three separate arrays each containing the filtered results (according to a group), and then merge them again.

Here is my code (categorySort is the main function here):

const CAT1 = ["main dish", "combo", "meal", "pasta", "pizza"];
const CAT2 = ["sandwiches", "burgers"];
const CAT3 = ['appetizers','salad','soup','frozen','healthy','catering', 'undefined'];

function belongToCategory(dishCategory, categoryArray){
    categoryArray.forEach(cat => {
        if(cat.localeCompare(dishCategory.toLowerCase()) === 0)
            console.log(`DISH ${dishCategory.toLowerCase()} BELONGS TO A CERTAIN CATEGORY ${cat}`) //dishes are being checked properly
            return true
    })
    return false
}

export const categorySort = (dishArray) => {
    let cat1Array = dishArray.filter(dish => belongToCategory(dish.category, CAT1)); 
    let cat2Array = dishArray.filter(dish => belongToCategory(dish.category, CAT2)); 
    let cat3Array = dishArray.filter(dish => belongToCategory(dish.category, CAT3)); 

    //debuggining: 
    console.log('array1');
    console.log(cat1Array);
    console.log('array2');
    console.log(cat2Array);
    console.log('array3');
    console.log(cat3Array);
    //all of the above arrays are empty
    
    return [...cat1Array, ...cat2Array, ...cat3Array];
}

//example of dishArray:
dishArray = [
  {name: 'Hummus', category: 'Appetizers'}, 
  {name: 'Mansaf', category: 'Main Dish'}, 
  {name: 'Cheese Burger', category: 'Burgers'}, 
  {name: 'Fattoush', category: 'Salad'}, 
  {name: 'Pepperoni Pizza', category: 'Pizza'}, 
  {name: 'Shawarma', category: 'Sandwiches'}, 
]

However, I think I am missing something about how the filter method works because even though I am correctly checking whether a dish belongs to a category, the filter method is returning an empty array.

I can make this work differently but I would appreciate it if someone tells me why this code isn't working. Thank you.

Answer 1

The return true in your forEach returns from the callback of the forEach, not the belongToCategory function. Use a for...of loop instead:

function belongToCategory(dishCategory, categoryArray){
    for (const cat of categoryArray) {
        if(cat.localeCompare(dishCategory.toLowerCase()) === 0) {
            console.log(`DISH ${dishCategory.toLowerCase()} BELONGS TO A CERTAIN CATEGORY ${cat}`) //dishes are being checked properly
            return true
        }
    }
    return false
}

Also it should be noted that this can simply be done with .some:

function belongToCategory(dishCategory, categoryArray){
    return categoryArray.some(cat => cat === dishCategory.toLowerCase());
}

Or, since you're checking equality, even .includes:

function belongToCategory(dishCategory, categoryArray){
    return categoryArray.includes(dishCategory.toLowerCase());
}