- [Instructor] Functions are a great tool for using
or transforming data in some ways.
So let's break this down further,
so you can get a firm handle on how functions work.
For us to be able to pass data,
we need to be able to pass that data
to the function in the first place.
And this is done by passing arguments
through function parameters.
To explain, let's build a basic example,
a tip calculation function.
I've already built the framework for the function for you,
except, this function isn't very useful right now.
It calculates the tip of 18% for the value 29.95.
And no matter how many times you run it,
it will only ever give you these values and nothing else.
What we want to be able to do,
what would make this function useful to us,
would be to pass a sum
and a percentage number into the function
and then it will return the tip and total for us
for whatever values we pass in.
To do that, we need to specify our values down here
in the call to the function using arguments
and those arguments then get captured by parameters
up in the function and use inside the function.
So, let's set that up.
I need two parameters here, sum and percentage.
Now that I've declared these values,
I no longer need to specify them inside the functions.
So, I'll just delete these two lines here.
These two parameters now become available
inside the function.
So whenever I mention sum in the function body,
I'm referring to the parameter value up here,
which is the argument we passed in.
Now I can pass in those arguments
and they match up to the list I have up here.
So I have sum, percentage.
That means I need to put in 29.95, and then 18.
And if we save this,
we get the exact same result as before over here.
Cool. Now I can try to change the values.
So maybe 28.
Let's say I want to give a really big tip.
So watch over here, save.
And I would say, 28
and the tip and total are completely different.
Now that I see how these arguments and parameters work,
I can start extending the function with more information.
For example, you can see over here in the output,
we don't have a currency symbol.
So I want to add a currency symbol
but I don't really know what currency is being used.
So I want the user to be able
to pass in their currency symbol.
For that, I'll add a new parameter and a new argument.
So, the parameter will be called currency.
And then down here, if I add a comma,
you'll see it now says tip calculator,
sum: any,
percentage: any,
currency: any.
And the currency is the one I'm currently working with.
So here I'll pass in a string with a dollar symbol.
Then, now that I have the parameter,
I can use it inside my code.
So here I'll just add on
inside the template literal, currency
and then I'll add it wherever I want it to appear.
So I'll want it here,
here and here.
Save that.
Woof, got an error.
Currency off.
Dyslexics, so
I make mistakes like this all the time.
All right.
Let's just make sure it's the right one by highlighting it.
Yes, yes, everything's matching.
Okay, cool.
Right. So now we have the denomination marked
on the frontier.
But what if I want to use a different currency?
Let's say Norwegian kroners,
which is like this.
Now Norwegian kroner wants to put the KR
at the end, not the beginning.
So that looks weird.
How do I handle that?
Well, I can pass a Boolean value
and then output different content depending
on what that Boolean value is.
So I'll set up a new parameter, call it prefix.
Then I will create two outputs here.
So I will say if prefix.
Now this format says
if prefix is true, then do this.
And if prefix is true
that I want to output the content as it is right now.
So I'll copy this and paste it in.
So that means we get the prefix
in front of the other content.
Let's see the currency is in front, else.
So I'll go after the curly bracket and say, else
that means the prefix is false.
Then I'll take this stuff again
cut it out this time and paste it in.
And this time I'll move currency
to the back of each of these values.
Like that.
And then I have to pass in either a true or false.
So in this case, I'll say false.
That should trigger the, else, condition.
And here we can see the KR is set to the back
If I then again, pass in
a dollar symbol and set it to true instead,
save, and now the dollar sign is set to the front.
So as you can see, using these parameters and arguments
we can pass any data we want up into the function
and then the function we'll just use the data we pass to it.