Map, Filter & Reduce EXPLAINED in JavaScript - It's EASY!
Summary
TLDRIn 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
📚 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.
🔍 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.
🔢 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.
Mindmap
Keywords
💡JavaScript
💡map
💡filter
💡reduce
💡Array
💡Function
💡Person Object
💡Shorthand Arrow Syntax
💡Chaining Methods
💡Condition
💡Total Age
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
Weitere ähnliche Videos ansehen
JavaScript forEach vs. map — When To Use Each and Why
Javascript Interview Questions ( map, filter and reduce ) - Polyfills and Output Based Questions
La diferencia de usar forEach() y map() en javascript #es6
Creating Array and Fetching Elements in JavaScript
Two Sum - Leetcode 1 - HashMap - Python
Numpy Operations - Data Analysis with Python Course
5.0 / 5 (0 votes)