Up next in 10
What is Lodash Library Crash Course in Browser Using HTML5 & Javascript With Full Examples
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys in this tutorial I we will
0:02
be discussing about a most widely used
0:05
Library called as low Dash low Dash is
0:09
actually a library which actually works
0:12
in both nodejs and you can also use it
0:15
in the browser as well we will look at
0:18
example on how to use low Dash Library
0:20
what is low Dash so if you just search
0:22
on Google low Dash it is actually a
0:26
JavaScript utility Library which is
0:29
veloped especially for programmers if
0:32
you are working with arrays if you are
0:34
working with any sort of data structure
0:36
inside programming it can be arrays it
0:39
can be numbers it can be strings so with
0:42
the help of low Das Library your time
0:45
will be saved and you no longer need to
0:48
use complex Loops for daily task so it
0:51
has a pre-built methods available if you
0:53
go to their documentation for each every
0:56
method there is a certain example given
0:58
so we will be looking at some of the
1:00
methods in this
1:02
video so now to get started using low
1:05
Dash you can just either you can include
1:08
the CDN of low Dash by including the CDN
1:12
right here if you want to work it in the
1:14
browser you can even install it as a
1:17
nodejs dependency so just search for low
1:20
Dash and you can also see it's a widely
1:24
used package almost 50 million downloads
1:27
are there so it I think it's a number
1:29
number one module which is used by every
1:32
developer somewhere inside the
1:35
application so it's a widely used module
1:38
so now uh we will be looking at a simple
1:41
example I will show you this is actually
1:45
a simple script.js file we are using
1:48
it let me show you if you want to
1:51
include this in right in the browser
1:53
itself you just need to paste the CDN of
1:55
it so you can paste the CDN and now you
1:58
can work inside your your app browser or
2:02
you can use it in nodejs environment as
2:04
well the command is really simple as I
2:06
already told you npmi low Dash this will
2:09
install it as a nodejs package now to
2:12
get started I will actually show you I
2:16
will declare an array here which will be
2:19
numbers so let's suppose this is a
2:21
numeric array 25 67 89 and again I have
2:27
25 so these are actually AR I have
2:30
declared which has five values all
2:33
numerics and now I need to perform some
2:36
operations on this array so you can see
2:39
low Dash Library actually contains some
2:43
methods which are very useful so let me
2:46
show you the first method if you want to
2:47
split this array into multiple pieces
2:51
so without using low Dash you will be
2:54
using complex for Loops for actually
2:57
iterating through each value but using
2:59
load Dash it actually has a built-in
3:01
method so we can access L Dash inside
3:04
this script by using underscore so it is
3:07
this Library who created L Dash is
3:09
inspired by underscore.js
3:12
also a very good library for working
3:14
with arrays so we access low Dash using
3:17
underscore and then it has a various
3:20
methods which is one such method is
3:22
chunk so what this method does actually
3:25
it takes the array so in this case we
3:28
will pass this array right here as the
3:30
first argument and the second argument
3:32
is actually it takes uh in how many
3:35
pieces you want to actually split this
3:37
array I want to split it into two pieces
3:40
so what it does guys you will see the
3:42
output right here so 25 65 so one two
3:47
pieces and then 8925 another two pieces
3:51
so it has split the array it contains
3:54
five elements 1 2 3 4 5 it has basically
3:57
I provided this value to be two so now
4:00
it has splitted this into two parts 25
4:03
65 89 25 and now it only contains the
4:07
last element so a78 I can change this to
4:10
Let's suppose three elements and now it
4:11
will actually create a subset which
4:14
contains three elements per array so you
4:16
can see that so in this way you can
4:19
split your long array into smaller
4:22
subsets by actually using this chunk
4:24
method and here here you can provide any
4:27
sort of subset you can provide the
4:30
second method is actually the difference
4:32
if you want to calculate the difference
4:34
between any two arrays we have this
4:37
difference method
4:39
underscore do difference and right here
4:41
you will actually provide the array
4:44
which needs to be processed as the first
4:46
argument and then the second argument
4:48
will be the
4:51
actual second array that needs to be
4:54
differentiated so let's suppose if I
4:56
provide a value such as 20 5 and 50 so
5:02
what will be the output so just see what
5:04
is the
5:05
output so you will see that the output
5:08
is shown right here 25 67 89 25
5:14
78 so this is actually the difference
5:17
method for this we can actually have
5:21
a string array which contains some
5:24
country names let's
5:28
suppose New Zealand Australia and we
5:31
have
5:32
India and then South
5:36
Africa so now we have this teams array I
5:39
can pass this as a first argument and
5:40
then I
5:42
provide the second argument to be a
5:44
string let's suppose I provide uh a
5:47
different value which is not present
5:49
inside I provide England as the first so
5:52
what it will does it will actually
5:54
return the full array because England is
5:57
not present inside this team's array but
5:59
if I Pro provide here let's
6:02
suppose New Zealand and Australia which
6:04
is already present in the input array so
6:08
what will be the output just see India
6:10
and South Africa because New Zealand and
6:12
Australia are already present in this
6:14
teams array so now they will be
6:16
subtracted or they will be removed from
6:18
the original array and now this is
6:20
actually the difference it calculated
6:22
India and South Africa same goes with
6:24
the number array as well if you also
6:27
take the same example with car as well
6:30
let's suppose I replace it here with
6:32
nums and now I provide here a value
6:36
which is press already present which is
6:39
25 so now if you
6:41
see this 25 ENT
6:45
three will be
6:47
removed I think uh you need
6:50
to uh
6:52
25 okay this difference method guys only
6:55
works with the string array it doesn't
6:58
work with the number array
7:00
because in string array we need to
7:02
actually compare the strings which are
7:03
already present inside this array so we
7:05
actually remove this so you can see that
7:07
these two country names are already
7:09
present so we the output is India and
7:11
South Africa so you will see that the
7:14
next method comes is the intersection
7:17
intersection Union you have studied in
7:20
maths so intersection Al basically
7:26
Returns the common elements so
7:28
intersection we provide the teams array
7:31
similarly we are providing this teams
7:33
array and then we provide the array that
7:37
needs to be
7:39
processed so let's suppose I provide
7:42
again New Zealand and Australia as my
7:46
input so what it will does it will
7:49
calculate the intersection between the
7:51
steams array and this is actually the
7:52
array that we provided so you can see
7:54
New Zealand and Australia are present in
7:56
both the arrays so this will actually be
7:58
the output new New Zealand and Australia
8:00
this is actually calculated the
8:01
intersection or both the teams are
8:04
present in both the areas so that's why
8:05
it returned to it similarly we also have
8:08
the union method as well Union so Union
8:12
as you all know it actually combines or
8:15
concatenates all the values so let's
8:17
suppose I provide here England like what
8:20
will be the output New Zealand Australia
8:22
India South Africa and England because
8:25
it will combine or concatenate both the
8:28
entries of both the arrays into a single
8:31
array so now it contains this output
8:33
array which contains all these entries
8:35
because it calculated the
8:37
union but if I provide also here
8:40
newsand you will see that now the output
8:43
will not contain duplicate entries New
8:46
Zealand will only be contained once
8:50
because it basically it doesn't repeat
8:53
because it is already present in the
8:56
original array so this is actually meant
8:58
by Union
9:00
it doesn't concat it does concatenate
9:02
but it doesn't duplicate entries so this
9:05
was the union method
9:08
then we also have some methods for
9:11
actually filtering out or searching as
9:13
well one such method is let's suppose if
9:16
you want to get the head
9:19
value so what it will does it will
9:21
return the first value in the array so
9:23
head represents it will actually return
9:25
the zeroth value on the array it will
9:29
return the first element so head is
9:31
meant by that and similarly we have also
9:34
the tail method as well tail method
9:36
actually removes the first element from
9:38
the array and Returns the output array
9:42
now you can see New Zealand is removed
9:44
because it was the first element in the
9:45
array rest of the array is returned to
9:47
us as the output so if you want to
9:49
remove the first element from the array
9:51
this is really useful guys in blow Dash
9:53
you have pre-built methods available you
9:55
don't need to actually run these complex
9:57
for Loops you can actually make use of
10:00
this tail method and actually remove the
10:03
first element from the array so it's
10:05
really simple and you can just see the
10:07
power of all these methods and then we
10:10
also have the join method as well join
10:14
method is similar to Union but there is
10:17
a slight
10:18
difference if you see the join method
10:21
what it does uh it actually joins all
10:26
these elements which are present in this
10:28
array
10:30
with the string so now the output if you
10:33
want to see this output let me show you
10:35
in the browser because it will not show
10:38
it right inside this so if I open
10:41
this and show you in the console it will
10:45
look something like this so K will be
10:47
inserted in all the array
10:51
values so it will look something like
10:54
this New Zealand can Australia can India
10:56
can South Africa so you will see cane
10:58
will be inserted in all the entries
11:00
which is present in this array and it
11:02
will actually concatenate a simple
11:04
string so if you want to concatenate
11:06
everything everything which is available
11:09
inside this array into a single string
11:12
then we will use the join
11:15
method and now if you want to remove
11:18
something from the array we also have a
11:20
drop method as well which actually takes
11:23
uh the nums array let me take a numeric
11:26
array and if I want to remove the first
11:28
element
11:33
sorry we need to end this so we actually
11:37
takes the nums array so what it will
11:39
does it will remove the first element
11:41
from the array you will see 25 will be
11:43
removed so because we have
11:47
actually passed this one entry so one
11:50
simply means that remove the first
11:51
element of the array so similar we can
11:53
pass two here it will actually remove
11:56
all the elements starting from 1 and two
12:00
you can see that the power of this
12:01
method so it actually removed the first
12:04
two elements if you want to remove the
12:06
first three elements it will be
12:07
returning 25 comma 78 so it has removed
12:10
25 67 89 it has removed the first three
12:13
elements from the array and it has
12:15
returned it this is actually the drop
12:17
method and then we also have the finding
12:21
method if you want to search something
12:23
from this array we also have this find
12:25
index method and here you pass your
12:29
actual array as first argument we are
12:32
passing the teams array and then we have
12:34
this function which you can run in the
12:36
second argument and right here you can
12:39
have any sort of condition that you want
12:40
to put you can say return the
12:45
team which which is equal
12:48
to New Zealand so here we put a
12:52
condition guys so what will be the
12:54
output if you
12:57
see so it is saying that it is returning
13:00
the index of the team it is returning
13:03
the index zero here if you see this is
13:06
actually the output will be returned
13:07
because New Zealand is present at the
13:09
zeroth index so it is the first element
13:11
in the array so that's why it is
13:13
returning zero let's suppose if I
13:14
replace it with Australia so now I'm
13:17
just interested to find out the team
13:19
which is starting from Australia so now
13:21
it is the second element in the array so
13:23
it is returning the index one right here
13:25
so in this way this is actually the find
13:27
index method it actually Returns the
13:29
index number of the actual element which
13:32
is present in the array so we can
13:34
actually have South Africa as well right
13:36
here now the index number will be three
13:39
you can see that so three will be
13:40
returned so this is actually the finding
13:42
method which is present in low Dash
13:44
which actually makes it very much easy
13:46
to actually find elements in the array
13:48
without having to actually make use of
13:50
for loops and all and then similarly we
13:53
also have a method to actually clone a
13:57
original array so let's suppose if you
13:58
want to make a copy of your original
14:01
array let's suppose if you want to
14:03
create a copy of this array there is a
14:05
clone method available so you just need
14:08
to write
14:10
here underscore do clone and then you
14:14
provide the teams array it will actually
14:16
create this clone array it will create a
14:19
copy of this teams array and store it
14:22
you can store it in a variable as well
14:25
so now it has actually created a clone
14:27
similarly so this is actually clone
14:30
method and uh also we also have another
14:35
method called as uh
14:37
pull so pull method guys
14:40
actually uh removes the
14:44
element removes multiple elements so if
14:47
you want to remove multiple elements
14:50
from the array let's suppose I want to
14:52
remove from the teams array so here you
14:55
can provide multiple elements if you
14:57
want to remove New Zealand and also
14:59
Australia at the same time you can
15:01
provide as many arguments as you want so
15:05
now it will actually create a new array
15:07
and now New Zealand and Australia will
15:09
be removed from the array now the output
15:11
you can see India and South Africa so
15:14
this is actually the output India and
15:16
South Africa so the thing about pull
15:18
method guys it actually mutates the
15:21
original array it actually modifies the
15:23
original array so if you want to access
15:25
now the teams array it will look
15:27
something like this India and South fre
15:29
so it actually modifies the original
15:31
array so if you don't want to modify the
15:34
original array if you just want to
15:36
create a copy of this without having to
15:40
modify the original array there is a
15:42
second method which does the same thing
15:45
but it actually doesn't modify the
15:48
array that method is uh I think is uh
15:54
without so now if you can actually say
15:57
without it does the same thing you can
15:59
see India and South Africa will be
16:01
returned New Zealand Australia will be
16:03
removed but now if you access the teams
16:05
array the original array is not modified
16:09
it actually created a new array which
16:11
contains uh doesn't contain New Zealand
16:13
and Australia but if you do use this
16:16
method called as pull but it will modify
16:19
the original array so this is actually
16:21
the difference between pull and without
16:24
so I showed you both the
16:27
methods so depending upon on which one
16:29
you want to use you can use it and then
16:31
we also have some more methods which
16:34
actually want to if you want to count
16:36
something so there is also a count
16:38
method as well count by so this method
16:41
actually takes the array and it actually
16:45
tells you how many times a certain
16:47
element is repeated so you can see it
16:50
actually tells us inside this numeric
16:51
array 25 is repeated twice 67 is
16:55
repeated once say 78 1 89 1 so it
16:59
exactly tells you how many times a
17:01
certain element is repeated in this
17:03
array so if I enter let's suppose 78
17:07
twice so it will also say 78 is also
17:11
repeated twice so this is actually meant
17:13
by count by it actually tells you how
17:15
many times a certain element is repeated
17:17
and similarly we also have a for each
17:20
method as well in low Das if you want
17:25
to Loop through elements
17:29
there is this call back function you can
17:31
do this and you can console log num it
17:34
will print out all the elements which
17:36
are present 25 67 89 25
17:39
7878 this is very simple for each Loop
17:42
also available in low Dash if you want
17:44
to iterate through all the elements of a
17:47
particular array you can use a for each
17:49
loop as
17:50
well and uh then guys I will show you a
17:54
more complex example let's suppose if
17:56
you have a array
17:59
array of
18:01
objects each object contains two
18:03
properties the name
18:07
property and let's suppose a age
18:10
property as well and
18:13
a
18:19
country so this is a one object I can
18:22
repeat this
18:29
so I can change the name
18:31
here age
18:37
35 can say
18:43
here
18:46
40 say here USA and then I can say here
18:52
gy this one is 20 and I can say here
18:56
UK so we have an array of op objects and
19:00
users object now if you want to apply
19:02
some methods which is present very handy
19:04
methods one such method is order by
19:07
order by guys what it does it actually
19:09
takes the array for example as a first
19:11
argument you provide the users array and
19:14
then you can provide some properties
19:15
which are available in this object we
19:18
can access the name property Age Country
19:20
so any property we can access let's
19:22
suppose I want the results to be ordered
19:24
by name property and then we need to
19:27
access it in the descending order order
19:29
so we'll say descending order so if you
19:32
want to run this you need to run it in
19:34
the browser so what I will do I will
19:36
simply show it in the script
19:38
file so what it will does it will if you
19:41
show it so it actually Returns
19:45
the uh alphabets in a descending order
19:48
you can see k j j k so because K is
19:55
greater than J that's why it is the
19:58
names have been sorted in a descending
20:00
way Kane is getting first and then John
20:03
then Jim then Ali so you can do it for
20:06
anyone uh you can also order it by age
20:09
as well so whichever user has basically
20:13
has a greater age will come first so age
20:15
40 then age 35 27 20 so you can see all
20:19
these sorting methods are already built
20:21
in low Dash if you want to sort this
20:23
using a descending order ascending order
20:25
as well you can even have a ascending
20:27
order as well so now the ages will come
20:30
in a ascending order so 20 27 35 40 so
20:34
if you want to sort element sort persons
20:37
with different ages different names so
20:41
here you can do this using this order by
20:44
Method so this is uh all ladash methods
20:49
guys one such method also exist which is
20:53
every method so in every method you
20:55
actually pass the users object and then
20:58
we have
21:00
the call back function so here we only
21:03
need to access the users which whose age
21:06
is greater than 30 so what it will does
21:10
it will actually return all the users
21:14
whose age is greater than 30 so in this
21:18
case if you see the John has age 35 that
21:23
that is why it will be returned and Kan
21:26
has 40 h so I can now show you in this
21:33
example so now if you see console log
21:36
for every user user we need to say here
21:40
user age 30 it is actually returning
21:44
false here as an output but if I show
21:46
you in the
21:48
browser so it returns a Boolean value
21:51
guys for every so if the actual
21:54
condition evaluates to true then it
21:57
returns true but here in this array all
21:59
the ages are not greater than 30 some
22:02
ages are also smaller than 30 so if I
22:05
make all the ages greater than 30 you
22:08
will see this condition will evaluate to
22:10
True let's suppose if here also if I
22:13
make this to 40 and this 240 as well now
22:16
this returns true here because all the
22:18
elements are actually getting this
22:22
condition to be true so all the persons
22:24
are greater than 30 H that's why this
22:27
condition evalues to true now this is
22:28
returning trueu so this is actually a
22:30
very handy method you can use every
22:32
method you can apply this on a variety
22:35
of objects arrays and you can check for
22:38
a certain property that if if it
22:40
evaluates to true or not and uh
22:43
similarly we have a filter method as
22:45
well which actually filter out a certain
22:48
user so let's suppose if you want to
22:50
filter user based upon any condition we
22:53
have the filter method we pass the users
22:55
as a first argument and this this
22:57
actually will be a call back function
22:59
and here we only need to return the
23:02
users which actually matches some kind
23:04
of criteria that is if the age is
23:07
greater than if age is greater than 30
23:11
so let's suppose if I say 20 here make
23:14
it
23:16
20 and also make it 20 as well so now
23:20
only two users are there whose age is
23:22
greater than 30 if I now need to console
23:25
log the filtered users do length
23:30
now it comes out to be two because there
23:32
are only two users whose age is greater
23:34
than 30 if I want to print this you will
23:36
see John and uh Kane so whose ages
23:41
greater than 30 so in this way guys you
23:43
can apply these very easily without
23:46
having to use any sort of logic that's
23:48
why low Dash is used widely in nodejs
23:51
and JavaScript because it eliminates
23:54
the very usage of actually having
23:58
pre-built methods are there and you
24:00
don't need to write Logic on your own so
24:04
these methods makes it very easy to
24:06
actually
24:08
handle uh arrays so these are some of
24:11
the methods guys you can read the
24:13
documentation it actually contains a lot
24:15
of methods you can see the for each
24:18
method there is an certain example given
24:20
to you so the documentation is really
24:22
easy to understand so please hit that
24:25
like button guys subscribe the channel
24:27
as well for more videos like this and I
24:30
will be seeing you guys in the next one