Explain it to me like I'm five: .map, .reduce, & .filter edition

RC Maples — Sun, 22 Jul 2018 17:11:21 +0000

I'm having trouble understanding how to use map, reduce, and filter to iterate over an array (or an array of objects for that matter 🙄).

I generally use for loops (and nested for loops if needed), but would really like to switch over to map, reduce, and filter for various things. I just can't wrap my head around how it works and what it's doing.

Here's a sample bit of code where I think I could use map/reduce/filter to achieve the same results a bit cleaner.

const jsIngredients = [
    {"ingredient-1":"chicken"},
    {"ingredient-2":"brocolli"},
    {"ingredient-3":"cheese"}
];

let ingredientString = "";

for (let k = 0; k<jsIngredients.length; k++) { 
    if (jsIngredients[k].value) { // if non-empty
        ingredientString +=  `${jsIngredients[k].value},`;
        // ingredientString = "chicken,brocolli,cheese," 
        }
    }
ingredientString = ingredientString.slice(0,ingredientString.length-1);
// ingredientString = "chicken,brocolli,cheese"

Any help?
🍻

DEV Community: RC Maples

Explain it to me like I'm five: .map, .reduce, & .filter edition