hey guys welcome back to another episode
and this lesson we’re gonna take a look
at default parameters and template
strings so let’s begin with default
parameters let’s say you have a class of
document and if you’re new to the class
syntax make sure you go back to the
previous lesson in lesson number four we
talked extensively about classes so if
you’re still not comfortable classes
make sure to go back and review that
lesson but assuming that you know
classes let’s say we have a constructor
here that X has perhaps a title and so
what we’re gonna do is we’re gonna set
this title to the title and we can
create a new instance of the class so
let’s say if document would be new
document the title would be my new
document and let’s say we want to do a
console.log of the document and of
course as you might expect it’s gonna
give us an object for the title of my
new document now let’s say we wanted to
have a default title for documents so in
the past with es5 you would typically do
something like this so you would have
your title and you would basically
either a sign in the title or you would
assign it a default value using the
toolbar character symbols like so so the
default title might be something like
untitled document for example so the way
this example works is basically if you
provide a title for a document it’s
gonna use the title that’s been given us
the argument otherwise it’s basically
gonna use the default string so let’s
say in this case we have a document with
the title my new document but if we move
the title we can even remove the
parentheses it’s gonna give us an object
with the title of untitled document so
that’s gonna be the default value so
this is the way you would typically do
it in here’s five now when it comes to
es6 you could use the new syntax for
default parameters so in this case you
might just just like you would do in
other languages like PHP or Ruby you
would basically put an equal sign and
then you provide your values in this
case untitled document and as you can
see here we have a document that doesn’t
have any argument it’s just a symbol
object and it’s gonna have the default
title of untitled document so what if we
do provide a title it’s gonna use that
exact value as you can see right there
now when it comes to default parameters
you don’t necessarily have to provide
primitive values like string
this value right here could be for
example a mythical so let’s say we have
a method here you might call get default
title and maybe all it does it returns
untitled document as a string so you
could simply do instead of using this
string right there you could just simply
call the method like so right and it’s
gonna give you the same result so here
we get an object with the title of title
right the title of you provided for
remove the argument we’re gonna get an
object with a default title now the one
important thing to keep in mind about
default parameters is that those default
parameters will not be available through
the arguments keyword if you’re dealing
with functions or methods now if you
don’t know every single function where
method and JavaScript has a built-in
argument object and basically that
arguments object is going to contain all
the arguments that the function is going
to receive when it’s invoked or called
so let’s show this with an example of a
function here so let’s say we have a
function convert temperature it’s gonna
accept the number of degrees as well as
the scale so let’s say the scale could
be Celsius or Fahrenheit now the way
it’s gonna work is we might have a an if
condition here if the scale is Celsius
we might want to use a formula whereby
we basically multiply the number of
degrees by my point 1.8 and then we add
32 to it otherwise we know we’re dealing
with Fahrenheit so we want to convert
from Fahrenheit to Celsius so we’re
gonna have something like return we’re
gonna subtract 32 from degrees and then
we’re gonna divide that by 1.8 all right
so let’s call the convert temperature
function let’s do say 50 when I
console.log the results oops a small
typo right there degrees okay so that’s
gonna give us some 122 now so in this
case the scale becomes Celsius because
that’s a default parameter right but
let’s say if we provided Fahrenheit the
value would be 10 and of course if you
provide itself
manually it would still be 122 now the
interesting thing is going to happen if
you check the value of the arguments
sofa did console.log arguments the
arguments is basically just a special
key word that refers to the built in
argument subject as you can see right
there we get 50 which is the number of
degrees that we pass but we also get
Celsius which is a scale now if you
provide a little Fahrenheit well of
course the object is going to have 50
and Fahrenheit but let’s say if you
didn’t provide this second values to
let’s say if you were trying to rely on
the default scale of Celsius you would
get your arguments object but it’s only
going to have the number of degrees than
you best it’s not going to have the
default scale so that’s just one thing
to keep in mind
now another use case for default
parameters would be when destructuring
objects or arrays so let’s begin with
objects let’s say you have a function
get user metadata and I’m gonna use the
array syntax and basically that function
is going to return let’s say an object
so you might have an ID some ID maybe
you also have a name
let’s say the user name would be Alex
let’s say I have a plan we might call it
basic and lastly let’s say we have last
login and that could be some kind of a
timestamp so again as a reminder if you
want to let’s say to get the name write
the name of the object as well as the
plan in the past well you would do
something like this you might have a
meta variable and you basically make a
call to the get user metadata function
right and then you have your let’s say
ID equals meta dot ID and then you might
have your plan equals made a plan
oops plan so you might do a console log
of ID and plan of course that’s gonna
give you some ID and basic but of course
that’s the older es5 approach in es6 you
don’t have to do any of that you could
simply do let ID
and plan using the curly braces and
basically just assign that to the
function call metadata like so and
that’s gonna give you the exact same
values so what’s gonna happen if you
didn’t have a plan on the object so we
have the same object but we do have a
plan well in this case we’ll would get
an ID and would also get undefined and
that’s something you would expect right
because there’s no plan property on the
object that would return from the
function so if you wanted to have a
default plan assigned to that variable
you might simply use the same exact
syntax using the equal sign and you
might just say let’s say basic the idea
might be let’s say when you get the
metadata you want to get the ID and a
plan but if there’s no plan you just
want to default to the basic plan or the
free plan whatever the case might be so
and that’s gonna give you some ID and
the basic plan as you would expect and
of course that’s also going to work with
deep restructuring if you’re not sure
what that means
make sure to go back to the previous
lesson when we talk about destructuring
in more detail now the very last thing
is when it comes to destructuring arrays
it’s pretty much the same idea let’s say
we have a list of libraries lips let’s
say – might have Redux it might have
flux and let’s say lastly rxjs so again
in the past we do something like let
let’s say Redux equals lips element zero
you would do flux equals lips element
one of course that’s me the second
element and then you might have rxjs
equals the very last element the third
one and if you did console.log helix
flux and rxjs you would get all the
three libraries right there of course
that’s the older es5 approach if you
wanted to go ahead and use the new
syntax you would do something like this
you would do Redux flux rxjs and all
that equals two lips and basically this
syntax is going to extract all the
strengths in this
in exact order as they show up now again
what happens if you didn’t have the
third element in the array so let’s say
you only had two well of course you can
get undefined for rx GS because there’s
no third element in the array right and
basically if you’re curious this
behavior is known as fail Slough
destructuring so what happens is instead
of throwing an error javascript is
basically going to give you the value of
undefined for the third element even
though the array doesn’t actually
contain that element so let’s say we
want to have a default value for rxjs
well you pretty much use the same syntax
you would use the equal sign and then
the value the default value that you
wanted to be assigned to that third
argument so in this case as you can see
we get rxjs as you can see it’s all
pretty basic and very straightforward
now that’s pretty much it for default
parameters now let’s move on to template
strings so template strings let’s say we
had some kind of markup stored in a
variable so let’s say markup equals and
then we might have some kind of a div
inside the string with a class of maybe
container and that’s inside of the day
of we have some kind of a title right or
the closing tag and maybe also with a
class of title now this is kind of hard
to read so let’s say you wanted to
prettify this so you wanted to have your
title to be on the second line maybe the
closing div tags wants to be on another
line and then maybe you wanted your
title like so just so that it looks
nicer of course that’s not going to work
and you have an error in fact if you
check the dev tools you can see the
reference error right there
no that happens because when I have a
closing quote right there so one way to
solve this would be to continue using
single quotes so we’d close that at a
plus sign and then we’re gonna have a
second shrink right there close it at a
plus sign the same thing for the title
because it’s also a string I’m gonna
close the h1 tag the plus sign and
lastly that
like so let’s say we wanted to
console.log Marco and that’s gonna give
us the original value another way to
handle this would be to you as
backslashes so instead of using the plus
sign and the closing quote you might
just put a backslash like so same thing
right there don’t need any more quotes
let’s fix that
no more plus sign like so and that
should be it which you get the same
value like so of course now we get
spaces in between because we have new
lines and whatnot but that’s perfectly
valid then it’s gonna work and then the
very last thing you could do is you
could also go back to having the same
opening and closing quotes like so you
don’t need any more back slashes you’re
just gonna close all of that like that
so the other technique would be to treat
these single shanks as array elements so
you might simply make them array
elements and separate them by commas
like so all right and then close your
array so that’s gonna give you an array
so to make it a string you might simply
call John with an empty string right
there and that’s gonna give you the same
result as before but of course this is
much easier in es6 and es6 introduces
the backticks so what they do is they
basically allow you to have a shrink so
notice here I’m gonna put the backticks
at the very beginning at the very end of
the string I’m gonna remove all the
other quotes inside of it like so commas
I’m gonna need any of that and it’s
gonna give us the exact same result
except you also see the spacing right
you see the new lines and whatnot so
what the backticks allow us to do is to
basically split their string into
multiple lines and the other cool thing
is let’s say the title of the h1 tag was
dynamic so let’s say it was stored in a
variable we might call it title my title
and what if he wanted to put that title
inside
one h1 tag well in the past if you were
dealing with single quotes double quotes
and whatnot you would basically have to
put your argument between the quotes so
you would have to close the previous
string so in this case let’s say we’re
using the backticks you might want to
reach out to the old method of basically
closing the string putting the plus sign
putting your title and then another plus
sign for stuff going to work you can get
the title inside of it but with the
backticks you don’t have to reach out to
the same old approach as you would do
within single quotes or double quotes
you can put your variable right directly
inside of the string using the dollar
sign and then the curly braces and then
you just simply put your title variable
inside of it and you’re gonna get the
exact same result as before of course
you’re not limited to variables you
could also put expressions so you might
do some math inside of it you could also
call functions get I don’t user metadata
as we have before this could be a
function call this could be equal to a
method of a class or an object it really
depends there’s a lot of flexibility
with this new syntax but in this simple
example we’re just gonna stick to the
title and that’s gonna give us the mark
up with the title inside of it so that’s
about it for word to fold parameters and
template shrinks thank you so much for
checking out this video we have a lot
more in the way and I’m gonna see you in the very next one
and this lesson we’re gonna take a look
at default parameters and template
strings so let’s begin with default
parameters let’s say you have a class of
document and if you’re new to the class
syntax make sure you go back to the
previous lesson in lesson number four we
talked extensively about classes so if
you’re still not comfortable classes
make sure to go back and review that
lesson but assuming that you know
classes let’s say we have a constructor
here that X has perhaps a title and so
what we’re gonna do is we’re gonna set
this title to the title and we can
create a new instance of the class so
let’s say if document would be new
document the title would be my new
document and let’s say we want to do a
console.log of the document and of
course as you might expect it’s gonna
give us an object for the title of my
new document now let’s say we wanted to
have a default title for documents so in
the past with es5 you would typically do
something like this so you would have
your title and you would basically
either a sign in the title or you would
assign it a default value using the
toolbar character symbols like so so the
default title might be something like
untitled document for example so the way
this example works is basically if you
provide a title for a document it’s
gonna use the title that’s been given us
the argument otherwise it’s basically
gonna use the default string so let’s
say in this case we have a document with
the title my new document but if we move
the title we can even remove the
parentheses it’s gonna give us an object
with the title of untitled document so
that’s gonna be the default value so
this is the way you would typically do
it in here’s five now when it comes to
es6 you could use the new syntax for
default parameters so in this case you
might just just like you would do in
other languages like PHP or Ruby you
would basically put an equal sign and
then you provide your values in this
case untitled document and as you can
see here we have a document that doesn’t
have any argument it’s just a symbol
object and it’s gonna have the default
title of untitled document so what if we
do provide a title it’s gonna use that
exact value as you can see right there
now when it comes to default parameters
you don’t necessarily have to provide
primitive values like string
this value right here could be for
example a mythical so let’s say we have
a method here you might call get default
title and maybe all it does it returns
untitled document as a string so you
could simply do instead of using this
string right there you could just simply
call the method like so right and it’s
gonna give you the same result so here
we get an object with the title of title
right the title of you provided for
remove the argument we’re gonna get an
object with a default title now the one
important thing to keep in mind about
default parameters is that those default
parameters will not be available through
the arguments keyword if you’re dealing
with functions or methods now if you
don’t know every single function where
method and JavaScript has a built-in
argument object and basically that
arguments object is going to contain all
the arguments that the function is going
to receive when it’s invoked or called
so let’s show this with an example of a
function here so let’s say we have a
function convert temperature it’s gonna
accept the number of degrees as well as
the scale so let’s say the scale could
be Celsius or Fahrenheit now the way
it’s gonna work is we might have a an if
condition here if the scale is Celsius
we might want to use a formula whereby
we basically multiply the number of
degrees by my point 1.8 and then we add
32 to it otherwise we know we’re dealing
with Fahrenheit so we want to convert
from Fahrenheit to Celsius so we’re
gonna have something like return we’re
gonna subtract 32 from degrees and then
we’re gonna divide that by 1.8 all right
so let’s call the convert temperature
function let’s do say 50 when I
console.log the results oops a small
typo right there degrees okay so that’s
gonna give us some 122 now so in this
case the scale becomes Celsius because
that’s a default parameter right but
let’s say if we provided Fahrenheit the
value would be 10 and of course if you
provide itself
manually it would still be 122 now the
interesting thing is going to happen if
you check the value of the arguments
sofa did console.log arguments the
arguments is basically just a special
key word that refers to the built in
argument subject as you can see right
there we get 50 which is the number of
degrees that we pass but we also get
Celsius which is a scale now if you
provide a little Fahrenheit well of
course the object is going to have 50
and Fahrenheit but let’s say if you
didn’t provide this second values to
let’s say if you were trying to rely on
the default scale of Celsius you would
get your arguments object but it’s only
going to have the number of degrees than
you best it’s not going to have the
default scale so that’s just one thing
to keep in mind
now another use case for default
parameters would be when destructuring
objects or arrays so let’s begin with
objects let’s say you have a function
get user metadata and I’m gonna use the
array syntax and basically that function
is going to return let’s say an object
so you might have an ID some ID maybe
you also have a name
let’s say the user name would be Alex
let’s say I have a plan we might call it
basic and lastly let’s say we have last
login and that could be some kind of a
timestamp so again as a reminder if you
want to let’s say to get the name write
the name of the object as well as the
plan in the past well you would do
something like this you might have a
meta variable and you basically make a
call to the get user metadata function
right and then you have your let’s say
ID equals meta dot ID and then you might
have your plan equals made a plan
oops plan so you might do a console log
of ID and plan of course that’s gonna
give you some ID and basic but of course
that’s the older es5 approach in es6 you
don’t have to do any of that you could
simply do let ID
and plan using the curly braces and
basically just assign that to the
function call metadata like so and
that’s gonna give you the exact same
values so what’s gonna happen if you
didn’t have a plan on the object so we
have the same object but we do have a
plan well in this case we’ll would get
an ID and would also get undefined and
that’s something you would expect right
because there’s no plan property on the
object that would return from the
function so if you wanted to have a
default plan assigned to that variable
you might simply use the same exact
syntax using the equal sign and you
might just say let’s say basic the idea
might be let’s say when you get the
metadata you want to get the ID and a
plan but if there’s no plan you just
want to default to the basic plan or the
free plan whatever the case might be so
and that’s gonna give you some ID and
the basic plan as you would expect and
of course that’s also going to work with
deep restructuring if you’re not sure
what that means
make sure to go back to the previous
lesson when we talk about destructuring
in more detail now the very last thing
is when it comes to destructuring arrays
it’s pretty much the same idea let’s say
we have a list of libraries lips let’s
say – might have Redux it might have
flux and let’s say lastly rxjs so again
in the past we do something like let
let’s say Redux equals lips element zero
you would do flux equals lips element
one of course that’s me the second
element and then you might have rxjs
equals the very last element the third
one and if you did console.log helix
flux and rxjs you would get all the
three libraries right there of course
that’s the older es5 approach if you
wanted to go ahead and use the new
syntax you would do something like this
you would do Redux flux rxjs and all
that equals two lips and basically this
syntax is going to extract all the
strengths in this
in exact order as they show up now again
what happens if you didn’t have the
third element in the array so let’s say
you only had two well of course you can
get undefined for rx GS because there’s
no third element in the array right and
basically if you’re curious this
behavior is known as fail Slough
destructuring so what happens is instead
of throwing an error javascript is
basically going to give you the value of
undefined for the third element even
though the array doesn’t actually
contain that element so let’s say we
want to have a default value for rxjs
well you pretty much use the same syntax
you would use the equal sign and then
the value the default value that you
wanted to be assigned to that third
argument so in this case as you can see
we get rxjs as you can see it’s all
pretty basic and very straightforward
now that’s pretty much it for default
parameters now let’s move on to template
strings so template strings let’s say we
had some kind of markup stored in a
variable so let’s say markup equals and
then we might have some kind of a div
inside the string with a class of maybe
container and that’s inside of the day
of we have some kind of a title right or
the closing tag and maybe also with a
class of title now this is kind of hard
to read so let’s say you wanted to
prettify this so you wanted to have your
title to be on the second line maybe the
closing div tags wants to be on another
line and then maybe you wanted your
title like so just so that it looks
nicer of course that’s not going to work
and you have an error in fact if you
check the dev tools you can see the
reference error right there
no that happens because when I have a
closing quote right there so one way to
solve this would be to continue using
single quotes so we’d close that at a
plus sign and then we’re gonna have a
second shrink right there close it at a
plus sign the same thing for the title
because it’s also a string I’m gonna
close the h1 tag the plus sign and
lastly that
like so let’s say we wanted to
console.log Marco and that’s gonna give
us the original value another way to
handle this would be to you as
backslashes so instead of using the plus
sign and the closing quote you might
just put a backslash like so same thing
right there don’t need any more quotes
let’s fix that
no more plus sign like so and that
should be it which you get the same
value like so of course now we get
spaces in between because we have new
lines and whatnot but that’s perfectly
valid then it’s gonna work and then the
very last thing you could do is you
could also go back to having the same
opening and closing quotes like so you
don’t need any more back slashes you’re
just gonna close all of that like that
so the other technique would be to treat
these single shanks as array elements so
you might simply make them array
elements and separate them by commas
like so all right and then close your
array so that’s gonna give you an array
so to make it a string you might simply
call John with an empty string right
there and that’s gonna give you the same
result as before but of course this is
much easier in es6 and es6 introduces
the backticks so what they do is they
basically allow you to have a shrink so
notice here I’m gonna put the backticks
at the very beginning at the very end of
the string I’m gonna remove all the
other quotes inside of it like so commas
I’m gonna need any of that and it’s
gonna give us the exact same result
except you also see the spacing right
you see the new lines and whatnot so
what the backticks allow us to do is to
basically split their string into
multiple lines and the other cool thing
is let’s say the title of the h1 tag was
dynamic so let’s say it was stored in a
variable we might call it title my title
and what if he wanted to put that title
inside
one h1 tag well in the past if you were
dealing with single quotes double quotes
and whatnot you would basically have to
put your argument between the quotes so
you would have to close the previous
string so in this case let’s say we’re
using the backticks you might want to
reach out to the old method of basically
closing the string putting the plus sign
putting your title and then another plus
sign for stuff going to work you can get
the title inside of it but with the
backticks you don’t have to reach out to
the same old approach as you would do
within single quotes or double quotes
you can put your variable right directly
inside of the string using the dollar
sign and then the curly braces and then
you just simply put your title variable
inside of it and you’re gonna get the
exact same result as before of course
you’re not limited to variables you
could also put expressions so you might
do some math inside of it you could also
call functions get I don’t user metadata
as we have before this could be a
function call this could be equal to a
method of a class or an object it really
depends there’s a lot of flexibility
with this new syntax but in this simple
example we’re just gonna stick to the
title and that’s gonna give us the mark
up with the title inside of it so that’s
about it for word to fold parameters and
template shrinks thank you so much for
checking out this video we have a lot
more in the way and I’m gonna see you in the very next one
Please follow and like us: