so in the last two videos we talked
quite a bit about the rest and spread
operator in this video I’d like us to
take a little bit of a different
approach Vegas to tackle a case study of
applying taxes to a price so imagine if
you buy something on Amazon let’s say
you go to amazon.com and you place an
order this is just covering the cost of
the product that you’re buying you
typically also have to pay the shipping
and handling fees and in some countries
like Canada you also have to pay taxes
so in fact let’s look at sales tax in
Canada I think they have a nice article
on Wikipedia that we can take a look at
basically in Canada we typically pay a
GST which is also known as goods and
services tax as well as a PSD which is a
provincial sales tax but depending on
the province there might also be what’s
known as HST which is a harmonized sales
tax or where I live we even have qst
Quebec sales tax which we call tax given
to Quebec or to the queue so as you can
see different provinces have different
forms of taxes and in fact they actually
have different rates of taxes so if we
wanted to include taxes in a total cost
the question really becomes how do I
know what taxes should be added to the
price tags because certain taxes are
only applicable in certain provinces
right for example in Alberta we only
have GST while in Ontario have HST and
in saskatchewan they have GST and bsd
let’s go back to the editor and in this
video I’d like us to change things up a
little bit and so I’m gonna be using JSP
ENCOM so when they close some of those
stuff we don’t need any HTML we’re gonna
need JavaScript and the console let me
the output so that looks good to me
the only thing is I’m going to switch to
es6 slash Babel just so that we don’t
get any errors in the console log so one
way that we could tackle this problem
with very you know variable taxes is we
could have let’s say a function let’s
say we’re gonna call it get total with
tax okay let’s say the first argument is
going to be the price of the product of
the ID or the item that you got
one thing that we could do is we could
use the default parameters and we could
basically rely on taxes as an array so
we can actually assign it an empty array
so whatever the function is gonna do the
EPI is gonna note something like this so
you could do get total with tax you
would pass the price let’s say $50 and
then you would pass an array containing
all the different taxes so for example I
live in Quebec and in Quebec we have two
taxes we have GST which is basically
five percent we also have the qst which
is nine point nine seven five so in this
case I could do something like zero zero
five for GST as well as zero point zero
nine nine seventy five for qst and this
is how that would look like what the
function would basically do is it would
sum up all of the taxes that you provide
and it would apply those taxes to the
price and then return you the resulting
price would the taxes included what the
function would do is it would basically
add up all the taxes that we provide in
the array and then it would basically
apply them to the price meaning it would
multiply the sum of the taxes by the
price and then add that result to the
price so that the total that we get
would also include the taxes so that’s
basically the premise of this function
now it would also be neat if we could
pass values individually so what I mean
by that is instead of passing an array
be nice if we could just pass the
arguments one by one individually and
this is in fact a perfect scenario for a
variable number of function arguments
so prior to es6 in the days of es 5 you
would typically handle the scenario with
the argument keyword like I said before
arguments keyword essentially refers to
the arguments object that looks like an
array but it’s not an array and in fact
it’s a built-in object of type arguments
that basically contains all the
arguments that you pass to the function
so if we run that we’re gonna get our
object alright so to get the price you
could do something
like this you can have your price we
could extract the price as the first
argument because we know that the very
first argument would always be the price
city fast in this case it’s going to be
50 and then the other variable would be
or taxes right and this goes back to the
previous videos where we talked about
the arguments object and I mentioned
that the arguments object is not an
array so if you wanted to go from an
array like arguments object if we’d
called the slice method on the prototype
like so so you’re going to invoke the
Col function you’re gonna pass the
arguments and you could also pass one
which is if you know how these slice
function works it’s basically gonna go
from index 1 to the very end of the
arguments object right so it’s basically
going to extract everything from index 1
till the very end the end here is
basically implicit and you’d even say
arguments dot length that’s basically
equivalent to not providing that value
at all but so if it did console.log
price as well as taxes of course I
forgot to change the signature of the
function so we know when we have the
price and the array of taxes which is
gonna have the list of arguments
separately so if we run that we’re gonna
get the price which is 50 and we also
gonna get the array of taxes as the
second element now the other way that
you could have done this of course
there’s multiple ways but let’s say you
wanted to extract these taxes from the
arguments object like I showed you
before you can use the slice method of
the array prototype like so I’m gonna
call that slice method with the
arguments so basically that’s gonna give
us all the arguments including the price
but then the other thing you could also
do is you could do price equals let’s do
taxes shift and what this shift method
is going to do is it’s basically going
to take the taxes array and extract the
very first element out of it so it’s
actually going to mutate the array
itself removing the first element of the
array so if we did console.log taxes on
price and if we clear the long
that’s gonna give us the Texas and it’s
gonna give us the price okay looks good
so far we could have also used the Fromm
method in es5 so we could have done
something like this you call the front
method on the array object using the
arguments object that’s gonna give us
the exact same result it’s basically
going to create an array from the
arguments object and of course to do the
very same thing you could also use the
spread operator like so and of course
the spaces are optional you could remove
them but if I clear that and run the
code again you’re gonna see that we get
the exact same results we get the taxes
as well as the price now there’s a line
right here so when we do taxes shift
that’s a bit of a bad code smell because
you’re essentially implicitly mutating
the taxes array behind the scenes so it
may not be you know obvious at first and
might bring in some confusion but let’s
say this is fine for now we’re gonna
switch to a better approach in a few
minutes so for now it’s just calculated
AE total e total is essentially going to
be the sum of the price as well as the
total of taxes now we’re gonna apply
right so let’s do another variable here
let’s do let’s total taxes and what we
want to do here is we’re basically want
to sum all the taxes from that array
that we got here right we want to sum
them and we basically want to multiply
them by the price and whatever we get as
a result of that is gonna be added to
the price so that we get eventually the
total with the tax that’s going to be
returned from the function okay I hope
that makes sense so this is a perfect
use case for using the reduce function
so again taxes now is an array used to
be an arguments object but now it’s an
array so you could call the reduce
method off of it and the reduced method
was actually added in es5 basically if
you want to read up more about the
reduce method in JavaScript we can look
it up it’s in
that off the prototype which basically
applies a function against an
accumulator and each element in the
array and it also goes from left to
right the idea is to basically reduce
all of the elements of that array into a
single value so in simple words the
reduced function allows you to look
through the elements of the array and
essentially bring them down to a single
value it makes a lot of sense in this
example because we’re dealing with
numbers right so you use the e reduced
function we could pass a callback into
it or an anonymous function
the very first argument is going to be
the accumulator so in this example we
could call it total taxes right that’s
gonna be the variable it’s going to hold
the total taxes every time that we loop
through the taxes all right
and also don’t have current tax okay so
this is going to return total taxes plus
current tax so it’s basically going to
add up all the values in the array and
if you want it to call so log that stick
on select all taxes okay in a clear up
the log and this is what we get as the
total to make it a little bit more clear
I’m just gonna cancel out the result of
that reduced call so let’s do console
log that thing right there just so that
it’s clear for everybody so we get zero
point fourteen nine seven five if you
look back at the table in Wikipedia the
exact same value that you see right here
so this is basically the total tax that
we pay in quebec’s whenever I go to do
my groceries I have to pay this
percentage of taxes on top of the total
on my bill ID so hope that makes sense
remove that so now we have the total
taxes I’m gonna remove the second
constant log and now we have the total
with tax which is basically the original
price plus any amount of taxes that we
have to pay so now we can return twelve
tax in fact it’s only used once so I’m
not even gonna store it in a variable
I’m just gonna retry it directly like so
okay so let’s clear that up I’m just
gonna add console.log so we get an
output and then let’s still run alright
so this is going to be the total price
with the tax now if we wanted to add a
bit of es6 here instead of using the
traditional function we could use the
arrow function like so we could also
remove the truly braces as well as the
return keyword if you remember the
return keyword could be implicit in
arrow functions so what this is going to
do is basically provide an anonymous
function inside of that reduce method
but to make it more readable we could
actually extract it to a separate
variable so let’s create a reducer
variable and let’s assign it to this
anonymous function like so and basically
we’re just gonna provide the reducer
inside of the call let’s clear it out
let’s do run we’re gonna get the exact
same result and lastly because this
variable is only being used once I see
no reason to actually declare it so
let’s just put the result directly in
there okay I’m gonna run this again and
we’re gonna get the exact same result
but so this looks good to me but this is
the es5 approach what about es6 what if
we wanted to use the rest operator to
deal with this situation here we could
go back to having the two arguments here
we’d have the price but then what do you
do with the rest of the arguments
because you really don’t know how many
there’s going to be right in this case
we only have two but what if you had you
know three four five what if you didn’t
know how many you had to deal with that
scenario you can use the rest operator
and you could basically put dot dot and
your taxes so your taxes variable is
going to hold the rest of the arguments
that you provide right and hence you
have the name rest operator think of it
as the rest of the arguments that you
provide to this function so the first
argument is going to be priced and the
rest of the arguments are going to be
placed inside of this taxes variable
just to make it clear let’s to
console.log
taxes let’s see I don’t need to save
anything I’m just gonna dismiss this
okay I’m gonna comment this out for now
that’s clear run okay it doesn’t return
anything the reason you see undefined is
because of this thing right there the
console log but when we cancel all the
taxes we get the two values just as
expected this is exactly what we need we
have the price and we also have the
array that holds all of the tax
arguments that we pass to the function
no matter how many tax values you pass
so I might add actually more if I wanted
to right but if I clear that out and
then I do run we’re gonna get all of
them inside of that array so that’s
pretty handy I’m just gonna bring it
back to what it was before okay and in
fact I can see that this adds a little
bit of boilerplate that we’ll need the
taxes anymore because we already have
the taxes variable we could keep the
reducer but in this case it’s only being
used once so I would go as far as
actually removing it completely so I’m
just gonna put it in here okay and so
we’re just going to return the price
would be total taxes add it to it okay
so let’s just do clear run that’s gonna
give us that value but you know just to
make it more realistic let’s do that and
this is basically going to be our Quebec
example let’s also do the Ontario
province example so in Ontario they they
a harmonized sales tax right let’s see
Ontario right here so they basically be
in a GST of five percent as well as the
provincial tax rate of 8 percent and it
totals to 13 so we could simply provide
a single value right it does have to be
two or three just could be a single
value so to provide the 13 percent okay
let’s run that this is what I would pay
in Quebec this is what I would say in
Ontario so now
the reason to move out to Ontario right
alright this looks perfect so the very
last thing I’m going to do is I’m going
to turn this into an arrow function so
I’m just gonna have it variable here so
I’m not gonna have the function keyword
I’m just gonna have my parameters then
I’m going to have my arrow alright looks
good so far but I’m going to simplify
this further I’m going to remove the
curly braces like so let’s see and
perhaps this is going to go on a
separate line also does that make sense
we have the reduced function oh yeah and
then the closing parenthesis right there
okay yeah I mean it looks pretty good to
me
all righty so let’s clear that it’s
oneness we got the exact same values so
consider how cool this is previously we
had a lot of boilerplate code we had a
lot of unnecessary things we had to
extract the function arguments from the
arguments object it was a little bit
confusing we had to do a lot of
additional steps just to accomplish the
results here we just have the function
we accept the two parameters the price
and as many taxes as you wish and then
we basically take the price we add the
taxes to it and we calculate the total
price with the tax again what this does
is it basically adds up all of the taxes
that you provide from the taxes right of
course you could do it manually you
could look through them but again this
would be sort of imperative in this case
we’re using a declarative approach as
well as in fact functional approach to
abstract out the logic of looping
through taxes and adding them up right
so this looks perfect to me I hope you
enjoyed the video and I’m gonna see you in the new year
quite a bit about the rest and spread
operator in this video I’d like us to
take a little bit of a different
approach Vegas to tackle a case study of
applying taxes to a price so imagine if
you buy something on Amazon let’s say
you go to amazon.com and you place an
order this is just covering the cost of
the product that you’re buying you
typically also have to pay the shipping
and handling fees and in some countries
like Canada you also have to pay taxes
so in fact let’s look at sales tax in
Canada I think they have a nice article
on Wikipedia that we can take a look at
basically in Canada we typically pay a
GST which is also known as goods and
services tax as well as a PSD which is a
provincial sales tax but depending on
the province there might also be what’s
known as HST which is a harmonized sales
tax or where I live we even have qst
Quebec sales tax which we call tax given
to Quebec or to the queue so as you can
see different provinces have different
forms of taxes and in fact they actually
have different rates of taxes so if we
wanted to include taxes in a total cost
the question really becomes how do I
know what taxes should be added to the
price tags because certain taxes are
only applicable in certain provinces
right for example in Alberta we only
have GST while in Ontario have HST and
in saskatchewan they have GST and bsd
let’s go back to the editor and in this
video I’d like us to change things up a
little bit and so I’m gonna be using JSP
ENCOM so when they close some of those
stuff we don’t need any HTML we’re gonna
need JavaScript and the console let me
the output so that looks good to me
the only thing is I’m going to switch to
es6 slash Babel just so that we don’t
get any errors in the console log so one
way that we could tackle this problem
with very you know variable taxes is we
could have let’s say a function let’s
say we’re gonna call it get total with
tax okay let’s say the first argument is
going to be the price of the product of
the ID or the item that you got
one thing that we could do is we could
use the default parameters and we could
basically rely on taxes as an array so
we can actually assign it an empty array
so whatever the function is gonna do the
EPI is gonna note something like this so
you could do get total with tax you
would pass the price let’s say $50 and
then you would pass an array containing
all the different taxes so for example I
live in Quebec and in Quebec we have two
taxes we have GST which is basically
five percent we also have the qst which
is nine point nine seven five so in this
case I could do something like zero zero
five for GST as well as zero point zero
nine nine seventy five for qst and this
is how that would look like what the
function would basically do is it would
sum up all of the taxes that you provide
and it would apply those taxes to the
price and then return you the resulting
price would the taxes included what the
function would do is it would basically
add up all the taxes that we provide in
the array and then it would basically
apply them to the price meaning it would
multiply the sum of the taxes by the
price and then add that result to the
price so that the total that we get
would also include the taxes so that’s
basically the premise of this function
now it would also be neat if we could
pass values individually so what I mean
by that is instead of passing an array
be nice if we could just pass the
arguments one by one individually and
this is in fact a perfect scenario for a
variable number of function arguments
so prior to es6 in the days of es 5 you
would typically handle the scenario with
the argument keyword like I said before
arguments keyword essentially refers to
the arguments object that looks like an
array but it’s not an array and in fact
it’s a built-in object of type arguments
that basically contains all the
arguments that you pass to the function
so if we run that we’re gonna get our
object alright so to get the price you
could do something
like this you can have your price we
could extract the price as the first
argument because we know that the very
first argument would always be the price
city fast in this case it’s going to be
50 and then the other variable would be
or taxes right and this goes back to the
previous videos where we talked about
the arguments object and I mentioned
that the arguments object is not an
array so if you wanted to go from an
array like arguments object if we’d
called the slice method on the prototype
like so so you’re going to invoke the
Col function you’re gonna pass the
arguments and you could also pass one
which is if you know how these slice
function works it’s basically gonna go
from index 1 to the very end of the
arguments object right so it’s basically
going to extract everything from index 1
till the very end the end here is
basically implicit and you’d even say
arguments dot length that’s basically
equivalent to not providing that value
at all but so if it did console.log
price as well as taxes of course I
forgot to change the signature of the
function so we know when we have the
price and the array of taxes which is
gonna have the list of arguments
separately so if we run that we’re gonna
get the price which is 50 and we also
gonna get the array of taxes as the
second element now the other way that
you could have done this of course
there’s multiple ways but let’s say you
wanted to extract these taxes from the
arguments object like I showed you
before you can use the slice method of
the array prototype like so I’m gonna
call that slice method with the
arguments so basically that’s gonna give
us all the arguments including the price
but then the other thing you could also
do is you could do price equals let’s do
taxes shift and what this shift method
is going to do is it’s basically going
to take the taxes array and extract the
very first element out of it so it’s
actually going to mutate the array
itself removing the first element of the
array so if we did console.log taxes on
price and if we clear the long
that’s gonna give us the Texas and it’s
gonna give us the price okay looks good
so far we could have also used the Fromm
method in es5 so we could have done
something like this you call the front
method on the array object using the
arguments object that’s gonna give us
the exact same result it’s basically
going to create an array from the
arguments object and of course to do the
very same thing you could also use the
spread operator like so and of course
the spaces are optional you could remove
them but if I clear that and run the
code again you’re gonna see that we get
the exact same results we get the taxes
as well as the price now there’s a line
right here so when we do taxes shift
that’s a bit of a bad code smell because
you’re essentially implicitly mutating
the taxes array behind the scenes so it
may not be you know obvious at first and
might bring in some confusion but let’s
say this is fine for now we’re gonna
switch to a better approach in a few
minutes so for now it’s just calculated
AE total e total is essentially going to
be the sum of the price as well as the
total of taxes now we’re gonna apply
right so let’s do another variable here
let’s do let’s total taxes and what we
want to do here is we’re basically want
to sum all the taxes from that array
that we got here right we want to sum
them and we basically want to multiply
them by the price and whatever we get as
a result of that is gonna be added to
the price so that we get eventually the
total with the tax that’s going to be
returned from the function okay I hope
that makes sense so this is a perfect
use case for using the reduce function
so again taxes now is an array used to
be an arguments object but now it’s an
array so you could call the reduce
method off of it and the reduced method
was actually added in es5 basically if
you want to read up more about the
reduce method in JavaScript we can look
it up it’s in
that off the prototype which basically
applies a function against an
accumulator and each element in the
array and it also goes from left to
right the idea is to basically reduce
all of the elements of that array into a
single value so in simple words the
reduced function allows you to look
through the elements of the array and
essentially bring them down to a single
value it makes a lot of sense in this
example because we’re dealing with
numbers right so you use the e reduced
function we could pass a callback into
it or an anonymous function
the very first argument is going to be
the accumulator so in this example we
could call it total taxes right that’s
gonna be the variable it’s going to hold
the total taxes every time that we loop
through the taxes all right
and also don’t have current tax okay so
this is going to return total taxes plus
current tax so it’s basically going to
add up all the values in the array and
if you want it to call so log that stick
on select all taxes okay in a clear up
the log and this is what we get as the
total to make it a little bit more clear
I’m just gonna cancel out the result of
that reduced call so let’s do console
log that thing right there just so that
it’s clear for everybody so we get zero
point fourteen nine seven five if you
look back at the table in Wikipedia the
exact same value that you see right here
so this is basically the total tax that
we pay in quebec’s whenever I go to do
my groceries I have to pay this
percentage of taxes on top of the total
on my bill ID so hope that makes sense
remove that so now we have the total
taxes I’m gonna remove the second
constant log and now we have the total
with tax which is basically the original
price plus any amount of taxes that we
have to pay so now we can return twelve
tax in fact it’s only used once so I’m
not even gonna store it in a variable
I’m just gonna retry it directly like so
okay so let’s clear that up I’m just
gonna add console.log so we get an
output and then let’s still run alright
so this is going to be the total price
with the tax now if we wanted to add a
bit of es6 here instead of using the
traditional function we could use the
arrow function like so we could also
remove the truly braces as well as the
return keyword if you remember the
return keyword could be implicit in
arrow functions so what this is going to
do is basically provide an anonymous
function inside of that reduce method
but to make it more readable we could
actually extract it to a separate
variable so let’s create a reducer
variable and let’s assign it to this
anonymous function like so and basically
we’re just gonna provide the reducer
inside of the call let’s clear it out
let’s do run we’re gonna get the exact
same result and lastly because this
variable is only being used once I see
no reason to actually declare it so
let’s just put the result directly in
there okay I’m gonna run this again and
we’re gonna get the exact same result
but so this looks good to me but this is
the es5 approach what about es6 what if
we wanted to use the rest operator to
deal with this situation here we could
go back to having the two arguments here
we’d have the price but then what do you
do with the rest of the arguments
because you really don’t know how many
there’s going to be right in this case
we only have two but what if you had you
know three four five what if you didn’t
know how many you had to deal with that
scenario you can use the rest operator
and you could basically put dot dot and
your taxes so your taxes variable is
going to hold the rest of the arguments
that you provide right and hence you
have the name rest operator think of it
as the rest of the arguments that you
provide to this function so the first
argument is going to be priced and the
rest of the arguments are going to be
placed inside of this taxes variable
just to make it clear let’s to
console.log
taxes let’s see I don’t need to save
anything I’m just gonna dismiss this
okay I’m gonna comment this out for now
that’s clear run okay it doesn’t return
anything the reason you see undefined is
because of this thing right there the
console log but when we cancel all the
taxes we get the two values just as
expected this is exactly what we need we
have the price and we also have the
array that holds all of the tax
arguments that we pass to the function
no matter how many tax values you pass
so I might add actually more if I wanted
to right but if I clear that out and
then I do run we’re gonna get all of
them inside of that array so that’s
pretty handy I’m just gonna bring it
back to what it was before okay and in
fact I can see that this adds a little
bit of boilerplate that we’ll need the
taxes anymore because we already have
the taxes variable we could keep the
reducer but in this case it’s only being
used once so I would go as far as
actually removing it completely so I’m
just gonna put it in here okay and so
we’re just going to return the price
would be total taxes add it to it okay
so let’s just do clear run that’s gonna
give us that value but you know just to
make it more realistic let’s do that and
this is basically going to be our Quebec
example let’s also do the Ontario
province example so in Ontario they they
a harmonized sales tax right let’s see
Ontario right here so they basically be
in a GST of five percent as well as the
provincial tax rate of 8 percent and it
totals to 13 so we could simply provide
a single value right it does have to be
two or three just could be a single
value so to provide the 13 percent okay
let’s run that this is what I would pay
in Quebec this is what I would say in
Ontario so now
the reason to move out to Ontario right
alright this looks perfect so the very
last thing I’m going to do is I’m going
to turn this into an arrow function so
I’m just gonna have it variable here so
I’m not gonna have the function keyword
I’m just gonna have my parameters then
I’m going to have my arrow alright looks
good so far but I’m going to simplify
this further I’m going to remove the
curly braces like so let’s see and
perhaps this is going to go on a
separate line also does that make sense
we have the reduced function oh yeah and
then the closing parenthesis right there
okay yeah I mean it looks pretty good to
me
all righty so let’s clear that it’s
oneness we got the exact same values so
consider how cool this is previously we
had a lot of boilerplate code we had a
lot of unnecessary things we had to
extract the function arguments from the
arguments object it was a little bit
confusing we had to do a lot of
additional steps just to accomplish the
results here we just have the function
we accept the two parameters the price
and as many taxes as you wish and then
we basically take the price we add the
taxes to it and we calculate the total
price with the tax again what this does
is it basically adds up all of the taxes
that you provide from the taxes right of
course you could do it manually you
could look through them but again this
would be sort of imperative in this case
we’re using a declarative approach as
well as in fact functional approach to
abstract out the logic of looping
through taxes and adding them up right
so this looks perfect to me I hope you
enjoyed the video and I’m gonna see you in the new year
Please follow and like us: