JavaScript Array superpowers: Map, Filter, Reduce (part I)

Learn advanced JavaScript techniques Map, Filter and Reduce. These Array methods might seem ordinary, but they're extremely powerful tools and the building blocks of the functional programming paradigm. We'll learn what they do, how to use them and how to write our own implementations of all three.

[Luxcium]

Please post more videos you are amazing 😉

[craigwarren]

Nice to watch minus the painful checks you add to everything. I have faith in you knowing what you are doing Michael

[tammytian]

Your video is a godsend. Thank you so much.

[alexon]

I saw the solution, very cool! Congratulations! Cool!

[pratikshah]

Dude - this was fantastic. The examples were just what I needed as I started working on a node project recently. Even picked up a neat IDE trick ( doing a .if will automatically wrap your condition with the if statement ).

[axe-z]

Starting the journey here, looks good !

[axe-z]

One thing, stick with the good old and quick console, chai is great, but it breaks the flow. But seem's like a great course, good thing you keep using the same obj array, not switching the setting for every exemples. I like to type everything on my end.

[alexon]

After so much trying I solved how to rearrange the data for a single, level! and turn everything into Objects!

Now

I need to use the reduce, to do the calculations with a break per month, for example

Tokyo - jan: 10 Feb: - 20
London - jan: 10 - Feb: 20

If you know how to do?

See how to transform to object, I do not know if this is the best way, but at least the data stays at the same level of structure!

/ ** LOOP UNIFICAR ARRAY * /
const getData = data.flatMap (temps => temps)
const allTemp = new Array ()
let valueFloat;
for (let i = 0; i <getDados.length; i ++) {
    idxCity = i;
    city ​​= getDados [i] .name;
    for (let j = 0; j <getDados [i] .values.length; j ++) {
        let temp = (getDados [i] .values ​​[j] .join (). split (', ') [1])
        (0) .split ('-') [0]
        let mes = (getData [i] .values ​​[j] .join (). split (', ') [0] .split ('-') [1])
        valueFloat = parseFloat (temp);
        JSON.parse (`{" city ":" $ {city} ", " temp ": $ {valueFloat}, " day ":" $ {day} ", " month ":" $ {month} " } `);
        allTemp.push (data);
    };
};
console.log (allTemp);


SORRY ENGLISH, I'M USING GOOGLE TRANSLATOR ***

Many thanks for your kindness! If I can help the

[alexon]

Doubt how to map, filter, reduce, with array values
I've created a framework to practice, but I can not figure out how to do map, filter, and reduce to values ​​inside arrays below:

let data = [{
name: "Tokyo",
temps: [
["01-01", 7],
["02-01", 6.9],
["01-02", 5.4],
["02-02", 5.6],
["01-10", 7.7],
["01-10", 4.5],
["02-12", 7.6],
["02-12", 7.6]
]
},
{
name: "London",
temps: [
["01-01", 3.9],
["01-02", 7.5],
["02-02", 6.9],
["01-03", 8.0]
]
}
];

/ *
I need to add temperatures based on the month, as the valves are inside arrays and not objects I get a little lost how to do things
I need to do the following reduction of my array!

Tokyo
    JAN - 13.9 degrees
    FEV - 11.0 degrees
    OUT - 12.2 degrees
    TEN - 15.4 degrees

I make a monthly average of the temperatures of each city, I have to make the filter for each month and reduce it to add and take the average of the month

// - ["01-03", 7] | 01 - Represents day | 03 - represents month | 7 - temperature

[obelingo]

what does the double apostrophe do ... ```if(!!user && typeof user === "object"){
cleanUserList.push(user)
}

[andreholston]

At 15:00 you say "we're gonna write a landy(sp?) function? What exactly did you say so I can research please!

[rsmolkin]

@Michael thanks for this informative video on the higher order JS functions. Could you do a more complex example where you'd use things like Map and Filter, but it would use two lists or arrays or objects? Like a list of employees in one, and a list of departments in another, and basically having to do a join of users to departments, like get everyone who's is assigned a department? I'm trying to find a clean implementation of doing more complex JS logic with these functions cleanly.

[davidmitchell]

Thanks for the vid! Question: how are you using the console in webstorm?

[alexon]

I turned everything into an object, on the same level, now I can use it, easily map, filter, reduce!

In fact, I would like to achieve, make the accumulation of it with reduce and return somehow!

  Return Another Object! The value in Jan (the values of the months are the average of the sum for the month)

Now is to see how to do this with reduce, it would be a kind of calculation per group, in this case the month!

   [
     {city: Tokyo, jan: 10, feb: -, mar: 10
     {city: London jan: 10
]

this way it would be easier to do without much if control, among others

I put the code in jsbin

[snø_music]

at 5:19 it looked like you were going to name that variable bigTit . lmao you even started to type it

[drifer]

Why didn't u create a function in ur map function why did u create on top of it ?

[joe]

So two things: First, thank you for this video, I have had a hard time wrapping my head around some of this stuff. Second...how did you get Casey Affleck to narrate your videos??