Javascript Default Parameters ES6 ES2015 tutorial


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

Add a Comment

Your email address will not be published. Required fields are marked *