Up next in 10
JavaScript Object.groupBy() Function Explained with Real Examples to Split Data into Categories
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video we'll look at a method
0:06
of group by where you can actually group
0:08
multiple users based upon a category so
0:11
let's suppose the users below this age
0:13
will be categorized young below above
0:16
these age will be categorized old so
0:19
inside JavaScript we do now have a
0:22
method of group bu you can categorize
0:24
users based upon their some property so
0:27
we have the set of users right here if
0:29
you see on your screen so we have these
0:32
users set of users which have three
0:34
properties name H country and uh we have
0:37
multiple users rise here so we will be
0:39
looking at this age property and
0:41
depending upon this age property we will
0:43
categorize these
0:45
users into three categories young old
0:49
and uh senior so now to categorize them
0:53
we will simply create a new variable new
0:56
users and inside that we will put
1:01
the array name which is users and this
1:04
is actually the method which is Group by
1:06
if you don't know about this method
1:08
Group by is actually a new method which
1:10
is supported in almost every browser
1:12
which is used to categorize users
1:15
grouping
1:16
users and inside this it takes the two
1:19
arguments first of all the
1:23
actual
1:26
uh so here we will simply pass the first
1:29
argument as the actual array that we
1:31
want to categorize so this is actually
1:33
the first argument and the second
1:34
argument is actually the call back
1:36
function so here we will have the actual
1:40
user so this is actually a call back
1:43
function inside this we are in simply
1:45
passing the user which we are working
1:47
upon so one by one all these users will
1:50
be passed to this call back function so
1:51
we have this user object right here
1:53
available to us so now we can either we
1:56
can console log it this user proper
2:01
so it is saying that
2:10
users this is actually the function I
2:12
think Group by function yeah so here we
2:15
need to depending upon a condition we
2:17
need to have a return statement so it
2:19
actually Returns the so here we will
2:22
simply check the age property if the age
2:24
is greater than
2:26
30 then in that case we will categorize
2:29
it to y
2:31
we'll use a Turner operator right
2:35
here or if the age is greater than 30
2:37
then we will simply say it's old so we
2:40
are simply using the Turner operator and
2:43
after that we can console
2:45
log the new
2:48
users so it is saying that users Group
2:53
by is not a
2:56
function just wait let me see I
3:00
I think I made a typo mistake right here
3:02
this needs to be object
3:04
sorry because we are grouping by objects
3:07
sorry this needs to be object not this
3:10
object. group by this is actual
3:13
method so after you do
3:20
this so This is actually go to console
3:23
you will get an object so you will
3:26
actually see two categories have been up
3:29
dated we have the actual object which
3:32
contains uh old and young so so based
3:36
upon the condition that we put the age
3:39
must be greater than 30 of all those
3:41
users must be categorized as old and if
3:45
those users are smaller than 30 then
3:47
it's young so let me change this
3:49
condition to smaller than 30 so the
3:52
current age of user is smaller than 30
3:54
then it will be labeled as young if the
3:56
age is greater than 30 then it will be
3:58
labeled as old So based upon this data
4:01
that we provided we have nine old users
4:05
and two young users if you check the
4:07
ages right here of these two users it's
4:09
22 and 27 so now these are categorized
4:13
because we have put this condition that
4:15
they must be smaller than 30 so now
4:17
these are categorized as young users and
4:20
all these other users if you check the
4:22
ages you will see it's greater than or
4:25
equal to 30 so 30 35 34 32 38 37 6 40 45
4:31
50 so in this way you can categorize uh
4:34
your array into multiple categories
4:37
using this function which is object.
4:39
Group by and if you want to categorize
4:42
into multiple categories you can use
4:45
instead of tary operator you can use a
4:48
if condition so here again you'll simply
4:50
say user H if it's smaller than or equal
4:54
to 25 then we will return Young
5:04
young boy and else if we will have
5:07
another condition user age is smaller
5:09
than or equal to 30 then we will return
5:13
young else if again another condition if
5:16
user
5:18
age then we will simply
5:22
say
5:24
adult and
5:26
then else we will return
5:37
so now we have four conditions uh if the
5:40
age is smaller than 25 or equal to 25
5:42
then it's young boy and if the age is
5:44
greater than or equal to 30 then it's
5:46
young if smaller than equal to 40 it's
5:49
adult and then it is
5:50
senior now if it has divided the data
5:54
into four categories if you see adult is
5:57
six people young is two young boy in no
6:00
and Senior is true and Senior if you see
6:03
it's greater than age 40 so 45 and 50
6:06
they are categorized into senior people
6:09
young boy is only one people which is
6:12
22 you can see young boy is categorized
6:16
if the age is smaller than 25 so it is
6:18
22 so you can see it is categorized then
6:21
we have the young people which is the AG
6:24
is if you see
6:26
2730 and then the adult which is greater
6:29
than than 30 smaller than 35 so 35 34 32
6:36
38 36 40 so this is comes under adult so
6:40
if the user
6:42
ages
6:44
so in this way guys you can categorize
6:47
uh your data into multiple categories
6:50
using this group by function inside uh
6:54
JavaScript so it applies to an array of
6:58
objects you can apped is to any data so
7:01
thank you very much for watching this
7:02
video and do check out my website as
7:04
well free mediat tools.com which is a
7:06
tool-based website which contains a open
7:09
source tools about audio image and video
7:12
and I will be seeing you in the next
7:14
video