Day 12, #100DaysOfCode #Javascript - Else, Else if and If Else - Feb. 12, 2022
David Ogunniran
WordPress Developer | Website manager | admin | Site maintenance | Elementor expert
Love is in the air ??... Well, not so for some of us... ?? At least not for today...?? Don't mind me, I'm stuck indoors, working and learning. So dear valentine, we'll see next time :). Till then, coding continues. ???
However, that won't stop me from wishing you a happy valentine's day! Spread love!
You might have(or may not have ????) noticed the disparity in the days I learn and the days I share what I learn. Well, your guess is as good as mine - my consistency has been lagging recently. I've been slipping up real bad, and I sincerely want to get back on track as soon as possible; in fact, my goal is to catch up on most lessons this week.
To this end, I'll be sending in two of these posts today — this is the first, the second will come in later in the day and focus on what I learned today itself - the 14th of February, 2022. I hope to be more consistent each day for the remaining part of the week.
If you have tips that you feel could help me, please don't hold them back. I'd be glad to read them. Thanks!
So today, I was able to cover about four lessons from @freeCodeCamp's Javascript algorithms and data structures curriculum, and they covered the following areas:
Else statements
They are usually used in conjunction with 'if' statements. They are usually used to provide an alternate block of code for execution when the condition in an if statement is read as 'false.'
An example is shown below:
if (charLength > 10)
return "longer than 10 characters";
} else {
return "less than 10 characters";
}
Else if statements
"Else if" statements work just like an 'if' statement with the exception that it only comes into play when the condition of the initial 'if' statement is read as false. It's useful when there's a need to test multiple conditions and so multiple 'else if' statements can be employed as seen in the code block below: ????
if (charLength > 15) {
return "Bigger than 15";
} else if (charLength < 5) {
return "Smaller than 5";
} else if (charLength < 3) {
return "Smaller than 3";
} else {
return "Character length between 3 and 15";
}
The code block shown above is also known as a chained statement.
Logical order in "if-else" statements
Javascript functions execute following a top-to-bottom approach. By default, the top most code blocks get executed first before the subsequent ones. It's therefore imperative that careful note is taken when writing the logic for any programs in other to prevent undesired results.
An example is seen below: ????
function check(x) {
if (x < 1) {
return "Less than one";
} else if (x < 2) {
return "Less than two";
} else {
return "Greater than or equal to two";
}
}
On switching the order of the conditions above, we have ????
领英推荐
function verify(x) {
if (x < 2) {
return "Less than two";
} else if (x < 1) {
return "Less than one";
} else {
return "Greater than or equal to two";
}
}
On calling both functions, we have: ????
Check(0); //returns 'Less than one'
verify(0); //reruns 'Less than two'
From this, we can easily infer that the problem an improper logical order causes is that it prevents proper code execution. As seen above, it's seen that when the second function is called, zero is executed as less than two and that immediately stops code execution which leads to inferring that X is either of 0 or 1, whereas this isn't the case.
Golf code. (Task)
Today's lesson included a task ( I'll summarise the instructions below this paragraph) that covered the use of if/else statements, arrays, conditional statements, booleans, and logical ordering in Javascript.
The instruction -
My solution:
const names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"]
function golfScore(par, strokes) {
// Only change code below this line
if(strokes == 1){
return names[0];
} else if (strokes <= par-2){
return names[1];
} else if (strokes == par-1){
return names[2];
} else if (strokes == par){
return names[3];
} else if (strokes == par + 1){
return names[4];
} else if (strokes == par + 2){
return names[5];
} else if (strokes >= par + 3){
return names[6];
}
return "Change Me";
// Only change code above this line
}
golfScore(5, 4);
My thought process:
I first had issues sorting out the logical order as I initially thought a descending order would fit the solution. Still, on analyzing probable solutions to the problem, I found out that would be a wrong approach, so I went for the ascending order, and it worked out nicely.
It was somewhat easy(though slightly tricky initially) for me to figure that the "strokes" would have to be equal to the "pars." Once I figured it out, I knew the double equal comparison (==) operator would play. Every other part of the code fell into place when I had this sorted out(I'm assuming you already know I would have to use If/else statements as there are multiple conditions to be tested for).
All you've read sums up all I learned today, and I'm glad you were able to stick to this point.
As always, please drop your reactions, share your thoughts in the comments, and yes, you can also help to share for a greater reach,
Thank you and see you when I learn again!
David.
#100DaysOfCode
Photo credit: Photo by Alexander Sinn on Unsplash, Giphy.com