what's up guys so today we are gonna talk about default parameters in JavaScript
if you want to make your JavaScript base stronger it's one of the things you need
to understand so that you can apply some cool tricks in your code so I'm gonna
show you how to deal with the optional parameters and default parameters now
this feature was missing in es5 it was introduced in es6 so we're gonna look at
it how it works in detail and welcome to Techsith tutorials alright so let's start
with a simple function when a called add function and it takes two arguments a
and B and it would basically return A plus B that's a very simple function and
let's run it and see what happens now if I console.log it and let's see if I
don't provide any parameters what would happen if I don't provide any parameters
then A and B are undefined because I did not provide any parameters and so let's
see what returns so if I run this it will return me NaN and this is
because you need to handle this kind of situation where user doesn't provide any
parameters and need to handle inside so we're gonna look at how we used to do it
in es5 first and then we're gonna look at how to do in es6 so usually what you
would do here is you would say if a is let's say equal to and define then you
would say a equal to zero now it doesn't always have to be zero you could be
passing strings or numbers and then you could you need to provide a default
value accordingly so what I'm doing is if if you don't pass any per
then I'm gonna set the value of a to be zero so if I add them it will be zero
plus zero so the answer is zero so now if I run this I would get zero now there
is a better way to do this you can simply do this so you can say a equal do
if a has a value then it's a or it's zero same thing I can do for B be equal
to B if it has a value or if it's undefined then it make it zero and then
return a plus B so now if I run this I would get zero now if I provided let's
say only one parameter if I provide one parameter that means I'm providing a so
this is how it so basically doing a 1 plus 0 if I want to pass only B then I
don't know if you know this but you can do this undefined and one that
means a is undefined B is 1 you cannot simply do this it won't work you would
give you an error unexpected token this so you need to have an undefined here
just a trick that if you don't know this now if I run this it would say 1 all
right you can even have it more concise syntax you can simply do this this and
this should work as well I don't need this two lines all right so now if I run
this it gives me 1 and if I remove the entire argument then I get 0 which works
fine but this is still confusing it's not needed so in es6 and if you're using
the latest version of browser if using Chrome you're probably using the latest
version because it updates automatically you can do this so you can simply say
equal to 0 which means if I don't provide a value and the consider as 0
and then inside all I have to do is a plus B and I don't really have to do
anything else so now if I run this it would be zero and if I do provide a
value let's say 1 & 2 then it would be 3 now I can also do this I can say this
which means equal to 0 that's a default value and B equal to whatever the value
of a is so in this case if I don't provide anything that means equal to 0
and since B equal to a which means B also equal to 0 so I run this I would
get Europe but let's have I provide a value equal to 1 and then run it then
the answer is 2 because since I equal to 1 then also be equal to 1 since B equal
to a so it's adding 1 plus 1 so that's 1 2 and if you do let's say undefined + 1
which means I see what happens it's 1 because when so in this case a equal to
0 obviously because defined and B equal to 8 because b already I'm providing a
value it's gonna take the one I'm giving not the default so that's fine so it's
important to understand I now here I'm expecting numbers that's why I am
putting default value equal to 0 but let's say if I if I'm adding to arrays I
can actually do this empty array and B equal to an empty array and here instead
of a plus B I can do spread operator and now let's say if I don't provide any
value it should add an empty array plus empty re which would be the empty array
so I get an empty array as if I provide an array and on this I would get one
array and if I have another array let's say - and
run this and then I get to two values so merges to arrays. now instead of
passing this kind of values what if I am passing an object so let's say if I have
an object an object literal I'm gonna just say call it X which has two values
n equal to 1 and B equal to 2 all right and here passing some object which which
could be this and so inside I would simply do this object.a plus object.b . since I'm expecting it has a and B value
now if I provide X inside then it would take this object would be X and then it
would do X dot a plus X dot B so which would be 3 if I run this I get 3 which
works but here what if I don't provide this I have a problem and it gives me
the error actually because when I try to access property of the object it's not
there so it's gonna complain so let's first do es5 way how to deal with the
situation so first thing you have to do is here I have to say if if object it's
not undefined then it's object else it's an empty object alright and then I have
to say let a I can create two variables is if object has a value then it's fine
or else I'm gonna set it to 0 and same thing with B if object has B value then
I keep B or else it's 0 and here I would simply do a plus B so now if I run this
I would get 0 so this is sort of like a default value but this is still all
thing to do if I have much giant object I don't want to deal with this so how do
I set my default values here so the answer is very simple
instead of object I can put its definition here and here I can say a
equal to zero and B equal to zero and I can simply do this however it still
won't work because if I run this it will still complain me because here it's just
only checking setting the value of default value for a and B but not the
entire object so I have to use a D structuring and I could say and if I
don't provide entire object then I have to do this and this this step is very
important all right so now if I run this and let me just clear this and if I run
this then I get zero now how if I say X then it give me 3 so it works so this is
a nice little trick if you passing an object you can actually pass a
definition and then you can set the values and I will provide all the
examples on my github site and provide the link in the description so you can play
around with it and I hope you learned something from this tutorial and if you
did you can help three ways you can obviously provide comment and like and
subscribe and you can support the channel via a patreon or you can
translate the video I'll provide the link in the description and thank you