For this, I want to reuse the calculator and attached you will find my version of that calculator,
the one we finished in the basics module, you can of course also use yours or just download and use mine
to have exactly the same code
and in there, I want to give you an example of how we could use conditional expressions to optimize
this code a bit more because of course, this works without any if statements, clearly because we haven't
learned about them yet but you might notice that in the add, subtract, multiply and divide functions,
we have a lot of code duplication.
We always start by getting the entered number,
then we set the initial result,
that's always exactly the same,
then we have our calculation which is always different, then however we again just write the output or
write to the log
and yes, we do pass different information in there but actually the only information that is different
is the operator that we used and description of the operation we did,
the other parameters are always the same.
So there is a lot of code reusage but without conditional statements, without if statements, there
really wasn't a way around it,
well now this changes.
Now we can for example add a new function here, maybe just name it
calculate result, something like this and there, I'll bring in my code that I have in the add function
but here I now want to write this in a more flexible way,
here I can now expect a parameter, let's say calculation type and I expect this to be a string that describes
the type of calculation we want to perform.
Now we can add an if statement here by just adding if, this is a keyword understood by Javascript, then
parentheses where we place our condition in and then important,
curly braces.
Now this here, the parentheses here, that will take our condition,
the parentheses here will in the end take our body, our code that should be executed if the condition
is met.
Now you don't add a semicolon after this,
just as you didn't do it for the function here and now we need to add a condition here.
Now the condition could be that calculation type is equal, with the triple equality operator here, equal
to let's say add. If that is the case, then I want to set current result equal to current result plus entered
number
and now I also want to provide an alternative to that and we do that with the else keyword.
Now you add that right after your closing curly brace for the if blocks, so the
if the condition is met
block and then you add another pair of curly braces that now marks the block of code that should be
executed if this condition is not met.
So if the condition is met, we make it into this first block and therefore this code gets executed,
the other code is ignored, so the code in here is ignored,
if this condition is not met, then we'll ignore this code and instead the code in here will get executed
and therefore for now, let's say we want to subtract,
later I'll also cover the other cases but for now let's say I want to subtract here,
so I will just move that subtraction code in here.
Now you can also by the way write this like this for example, so move on onto a new line,
if you only have one expression you want to execute,
you could also omit the curly braces here,
that would be allowed but for readability sake, I recommend that you always add curly braces
even if you have only one expression in there and you also most often will find the style where the
else statement or the else keyword then is on the same line as the closing curly brace.
So whilst this would work, my code formatter even moves it back to this line if I autoformat the code
because this is the most common way of writing this which you will find in most resources you find on
the web and therefore this is the style I would recommend to you.
We also use indentation here to improve readability,
technically that's all not required, technically just as with the functions, you could write this all
in one line like this but of course, that would be super hard to read
which is why we split this across multiple lines.
So now we're doing, we're performing different calculations based on the calculation type we're getting,
now I also want to write my output here based on that and for that, let me actually check for add here,
all capital case,
so now calculation type could be forwarded here,
now this all of a sudden is way more dynamic, it has no hardcoded values in there,
instead this is now fully reusable because all these values are dynamic,
we therefore get a different result by just tweaking these values
and now here for the plus operator, we just have to introduce a new variable here, math operator
for example which by default has no value
but then here in the add case, I set this to be equal to a plus
and now just with one equals sign because here I'm not checking two values, I'm not comparing two values,
instead here I want to assign this as a value to the math operator variable and in the else case, math operator
simply is a minus,
so that's just a string of course and I'm using that because now I can use math operator down here and
now these two lines are fully reusable,
they have no hardcoded values in there and therefore they work for whatever the calculation we're
performing,
we just have to make sure we set these values correctly.
Now calculation type should be received from outside and therefore what we can now do is here in the
add case, we can remove all that code and instead call calculate result and pass in add as a calculation
type and for subtract, we also remove all of that and I pass in
subtract or for now actually, any other value than add will do the trick because if we pass in add, then
this function will be executed and calculation type is set equal to add which means we make it into
this block here, we make it into this block, this code gets executed and therefore we do the same which
we previously did in here in add - we add the numbers, we set math operator to a plus and therefore down here,
we forward add as a value for calculation type and a plus here for math
operator. If anything else, then add is received, we currently always subtract the values here in the
else block and math operator is set to a minus,
so here we'll pass in whatever value calculation type held and the math operator will be a minus.
So if we save that and we reload our calculator, you will notice that it works exactly as before for
all these operations
and most importantly also for plus and minus where we now reuse our code with help of this if else statement.