Map, Filter & Reduce EXPLAINED in JavaScript - It's EASY!

Summary

In this informative video, Dom introduces three essential JavaScript array methods: map, filter, and reduce. He demonstrates how map creates a new array by transforming each element, filter selectively includes elements based on a condition, and reduce consolidates the array into a single value. Using an array of person objects, Dom illustrates the practical applications of these methods, showing how they can be chained for complex operations and emphasizing their utility in web development.

Takeaways

• 🗺️ The video introduces three essential JavaScript array methods: map, filter, and reduce.
• 🔄 The map method transforms each item in an array into a new one based on the existing item, maintaining the array's original length.
• 🚫 The filter method allows for the creation of a new array with items that meet specific criteria, likely resulting in a shorter array.
• 🔢 The reduce method condenses an array into a single value, which is not an array but could be a number, string, or other data type.
• 👤 The examples in the video use an array of person objects with properties for name, age, and occupation.
• 📝 The map method is demonstrated by creating a new array containing only the names of the people from the original array.
• 🎯 The filter method is shown by filtering out individuals under the age of 30, resulting in an array of people over 30.
• 🔗 The video explains that the map and filter methods can be chained together to perform multiple transformations and filtering in sequence.
• 🧩 The reduce method is used to calculate the total age of all people in the array, demonstrating its capability to aggregate data.
• 📊 The reduce method's parameters include an accumulator (total) and the current array item (person), with the ability to set an initial value for the accumulator.
• 🌐 The video encourages viewers to subscribe for more web development tutorials and projects.

Q & A

What are the three JavaScript methods discussed in the script?

The three JavaScript methods discussed in the script are map, filter, and reduce.

What does the map method do?

The map method takes an array of items and converts each item into a new one based on the existing one, resulting in an array of the same length as the original.

How does the filter method differ from the map method?

The filter method takes an array and removes items that do not meet a specified criteria, likely resulting in an array with a length shorter than the original.

What is the primary purpose of the reduce method?

The reduce method is used to reduce an array to a single value, which is typically not an array but could be a number, string, or any other data type.

What is the purpose of the conversion function in the map method?

The conversion function in the map method applies to every item in the array, allowing you to transform each item into a new form, such as extracting only the name from a person object.

Can you provide an example of how the filter method is used in the script?

In the script, the filter method is used to create an array of people over the age of 30, excluding those who are younger.

What is the significance of chaining methods like map and filter together?

Chaining methods allows for more complex data manipulations in a concise manner. For example, after filtering people over 30, you can chain a map method to extract their names.

How does the reduce method calculate the total age of all people in an array?

The reduce method iteratively adds the age of each person to a running total, starting with an initial value (in this case, 0), and ultimately returns the sum of all ages.

What is the initial value set for the reduce method in the script?

The initial value set for the reduce method in the script is 0, which is the starting point for the cumulative total of ages.

Can the reduce method return types other than numbers?

Yes, the reduce method is not limited to numbers and can return any data type, such as arrays, strings, or booleans, depending on the logic implemented in the function.

Outlines

00:00

📚 Introduction to JavaScript Array Methods

In this video, Dom introduces viewers to three essential JavaScript array methods: map, filter, and reduce. He explains that 'map' is used to transform each item in an array into a new one, 'filter' to remove items that don't meet certain criteria, and 'reduce' to condense an array into a single value. Dom uses a consistent array of person objects to demonstrate each method, emphasizing the differences between them and encouraging new viewers to subscribe for more web development content.

05:01

🔍 Demonstrating the Map and Filter Methods

Dom proceeds with a practical demonstration of the 'map' method by transforming an array of person objects into an array of names. He then uses the 'filter' method to create a new array that only includes people over the age of 30, excluding those who do not meet this criterion. Dom also illustrates the concept of method chaining by combining 'filter' and 'map' to extract names of people over 30, showcasing how these methods can be sequentially applied for more complex transformations.

10:01

🔢 Utilizing the Reduce Method for Aggregation

The video concludes with an explanation of the 'reduce' method, which Dom describes as one of the more complex but powerful array methods. He uses 'reduce' to calculate the total age of all individuals in the array, starting with an initial value of 0 and cumulatively adding each person's age. Dom clarifies that 'reduce' is not limited to numerical values and can be used to aggregate various data types. He invites viewers to like and subscribe for more tutorials and ends the video with a promise of more content in the future.

Keywords

💡JavaScript

JavaScript is a high-level, interpreted programming language commonly used for enhancing web pages with interactive elements. In the context of the video, JavaScript is the programming language where the methods 'map', 'filter', and 'reduce' are being demonstrated and discussed. It's the core technology that the video's theme revolves around.

💡map

The 'map' method in JavaScript is used to create a new array by transforming each item in the original array based on a function provided. It is a key concept in the video, as it's one of the three methods the presenter, Dom, is focusing on. The script uses 'map' to create an array of names from an array of person objects.

💡filter

The 'filter' method in JavaScript is used to create a new array with all elements that pass a test implemented by the provided function. It's one of the core methods discussed in the video, where Dom uses it to filter out people who are not over the age of 30, demonstrating its use in creating a new array based on a condition.

💡reduce

The 'reduce' method in JavaScript is used to reduce the array to a single value. It's the most complex of the three methods discussed in the video and is used to calculate the total age of all people in the array. The method is powerful for performing operations that aggregate data into a single result.

💡Array

An array in JavaScript is a global object that is used in the script to hold collections of values. The video's examples are based on an array of person objects, and the methods 'map', 'filter', and 'reduce' are applied to this array to demonstrate their functionality.

💡Function

In JavaScript, a function is a block of code designed to perform a particular task. In the video, functions are used as parameters for the 'map', 'filter', and 'reduce' methods to define the behavior of these operations on the array elements.

💡Person Object

A person object in the script represents an individual with properties like name, age, and occupation. It's a data structure used in the examples to demonstrate how the 'map', 'filter', and 'reduce' methods work with arrays of objects.

💡Shorthand Arrow Syntax

Shorthand arrow syntax in JavaScript is a concise way to write function expressions. In the script, Dom uses this syntax when defining the functions for the 'map' and 'filter' methods, making the code more readable and succinct.

💡Chaining Methods

Chaining methods in JavaScript allows you to use multiple methods on the result of the previous method. In the video, Dom demonstrates chaining by first using 'filter' to get people over 30 and then 'map' to get their names, showing how you can combine operations for more complex data manipulation.

💡Condition

A condition in programming is a boolean expression that evaluates to true or false. In the context of the 'filter' method in the video, a condition is used to test each item in the array to determine if it should be included in the resulting array.

💡Total Age

In the video, 'total age' refers to the cumulative age of all people in the array. Dom uses the 'reduce' method to calculate this value, demonstrating how to aggregate data into a single numerical value.

Highlights

Introduction to three favorite JavaScript methods: map, filter, and reduce.

Map method explained for converting array items into new ones based on the existing ones, maintaining the original array length.

Filter method allows filtering out items that don't meet specific criteria, likely resulting in a shorter array length.

Reduce method is used to condense an array into a singular value, such as a number or a string.

Consistent use of an array of person objects for demonstrating each method.

Example of using map to create a new array containing only the names of the people.

Shorthand arrow syntax used in the map function for conciseness.

Explanation of how the map function applies a conversion function to every item in the array.

Demonstration of using filter to exclude people under the age of 30.

Filter method's function as a test to determine if an item should be included in the results.

Chaining map and filter methods to get names of people over 30.

The power of chaining methods for more complex data manipulation.

Introduction to the reduce method for calculating the total age of all people in the array.

Explanation of the reduce function parameters and their role in accumulating a result.

Setting an initial value for the reduce method to start the accumulation process.

Final result of the reduce method showing the total age calculated.

Flexibility of the reduce method to return various data types, not just numbers.

Conclusion and call to action for likes and subscriptions for more web development content.

Transcripts

hey guys how's it going my name is dom

and today i'm going to be taking you

through my three favorite

javascript methods map filter and reduce

now before diving into the code i just

want to briefly go over each one

map lets you take an array of items and

then convert each item

into a new one based on the existing one

the resulting array is the same length

as the original

filter allows you to take an array and

then filter out

any items that don't pass the criteria

which you pass

in the resulting array's length is most

likely going to be

less than the original and lastly reduce

allows you to reduce down an array into

a singular

value which is typically not an array

but instead things like a number or a

string

so now i want to head into this code and

show you an example of each one of those

methods

being used and for all those examples

i'll be using the exact same

array of people so basically just an

array of person objects

just so it's consistent and you're able

to better understand the difference

between each one of those methods

but before we get into that i just want

to say if you're new around here

consider subscribing

as i've got plenty of fantastic web

development tutorials and projects on my

channel

all right so we're going to be starting

off with the map method

okay so right here i've got my array of

people

so every single item inside this array

is an object representing a single

person so right here

these people have a name age and

occupation

and like i mentioned earlier we're going

to be using this same array

in every single example in today's video

now

in the in the case of map we're going to

be using the map

method to give us a new array

containing each person's name

so only the name part of every single

person here

so we're going to just minimize this and

then drop

down and we're going to be declaring a

new constant called

name so this names constant is going to

be the result

of calling the map method we're going to

say

people dot map and then inside here

we're going to pass through a function

so you can think of this function as a

conversion function

so this conversion function is going to

apply to every single item

inside your array so we're going to take

through all

we're going to be accepting a person

here now

i'm using the shorthand arrow syntax

array here

so we can see basically this function

here is going to apply

for every single person inside the array

of

people so we're going to say right

inside here

return person dot name

so essentially whatever value you decide

to return

from this function that is going to be

what gets used in the resulting

array um you know once the map method

has been ran okay so now if our

console.log

the names here we can see in the bottom

right

upon saving we get right here an array

of each individual person's name inside

our original array

and we can see also that the length of

the array is the same as the original

because of course with the map you're

simply applying a conversion function

to every single item inside your array

and whatever you return

from that function that is going to be

what gets used

in the resulting you know array so that

is your

map method now moving on to the filter

method

we're going to be using the same array

here but this time we're going to be

using

filter to filter out

any people that are not over the age of

30. okay so in the resulting array we

only expect

dom and bruce to be returned

okay so basically we just want to filter

out amy because

her age is under 30. okay so

let's minimize the array once again and

go down here and we're going to say

const over 30s so basically

of course as the name suggests it's

going to be an array of people over

30 years of age i'm going to say here

people dot filter okay so

the filter method much like map is going

to take through a function

this time the function is going to be

more of a test okay so

you're defining a test which must pass

for the item to be returned inside your

results array

so inside here we're going to once again

and grab on to the person and i'll just

make this a little bit smaller so we're

going to be grabbing on to

the person here okay now

it's going to be a simple case of

returning true or false

so if this function returns true then

your person is going to exist in your

resulting array

if not they're going to be excluded so

i can return here a a check i can say

return person dot age is greater than or

equal to

30. so of course this expression is

going to give me

true for dom and bruce since of course

the age is more than 30

but for amy that condition is going to

give me false

therefore she's not going to be included

in my results so now

if i console.log the over 30s

array i save this here we can see in the

console

we get two items we get the exact same

objects as we did

in the people so you know like we saw

earlier map's gonna change this but

with filter you know you get the exact

same item back

but of course we only get two items here

dom and bruce

as these ones are going to pass the

condition which you pass through

and that is your filter method it's also

important to know that you can actually

chain these methods onto one another

okay so for example

i've got my filtered over 30s here like

i just showed you but

i can then say right down here because

the result

of the filter method is going to be a

new array

it's still an array which means i can

call dot

map onto the result of this so i can say

dot map

i can once again take through a person

object

then i can just say once again returned

person dot name so now we're actually

getting

uh the the name of every single person

over the age of 30 with this whole chain

here

so if i save this we can see in the

console we get dom and bruce

instead of the previous example where we

actually got the full object

and that of course is due to the usage

of map at the end here

so you might definitely find it useful

to chain your methods together

like i've just shown and lastly we've

got the reduce

method okay so the reduce method is

probably one of the more

complicated ones out of the three but

it's definitely super powerful

okay so like i mentioned at the

beginning the reduce method

is used to reduce down your array

into a singular value okay so right here

with the people i want to be able to

find the total

of every single person's age so

basically

when i add up 35 plus 26 plus 55

and we're going to be using reduce to

achieve that okay

so going down here let's make a new

constant

called total age okay of course

this total age refers to the results of

all those numbers

added up and now we're going to use

reduce

so we're going to say people dot reduce

okay then it's going to take through a

function

just like the previous two methods so

this one here

is going to take through multiple

parameters so i'm going to pass through

here

total and then person okay so

let me explain these two parameters

right here

so this function is going to run for

every single

person inside my array or every single

item inside my array

and that is what your person is going to

be just like the previous two examples

so

person is always going to refer to the

object down here name

age and occupation this total here

this essentially is going to represent

the current value as we loop through

every single person so we need this

temporary

uh parameter okay to

you know cumulatively add up every

single age so

it's basically just a placeholder which

eventually turns into

our final results much like if you were

to loop through this person

or these people array manually and try

and find the total

you'd have a variable called total which

you continuously add to

that is what this one is right here so

when the reduce method first runs and

the first

item here is going to be you know this

person here

named dom h35 when this first object

goes through what is the total going to

be

well you can set a initial value

so that is done by going right down here

and providing a value

to you know right after your function

as part of the reduce method so right

here comma

then say 0 we're going to start counting

at 0.

so inside here we're going to return

total plus person dot age

okay so basically we're saying right

here total

is going to be 0 in this case in the

first

object so 0 plus 35

for this first one here 35 so 0 plus 35

the next object once the once the

function runs again

and we have you know our next person

inside here

this total is going to be whatever

that was returned from the previous

iteration

so in this case here it's going to be 35

whatever 0 plus 35 is that is going to

be what gets passed to the total

in the next iteration so the next time

this runs right

when it runs for amy it's going to be 35

plus 26 and then as it continues to run

as we iterate through every single

person in the array this total is going

to grow

and once we're done this total is going

to be what gets

you know used in the return here of

total age

so if our console.log the total age

result here save this we get 116 inside

the console so

that is what your reduce method does now

obviously

you're not limited to numbers here so

commonly

you're going to find numbers being used

but you can actually return whatever you

want inside here

it's totally up to you it can be arrays

strings

booleans whatever you want so that is

the reduce method

right there and that is all for today

guys if you liked drop a like and

subscribe i really appreciate it and

i'll see you guys in the next video