JavaScript Fundamentals: Conditionals
Today is the 5th day of my #100DaysOfCode journey with JavaScript.
I write about my learnings in an explained way through my blogs and socials. If you want to join me on the learning journey, make sure to follow my blogs and social and share yours too. Let’s learn together!🫱🏼🫲🏼
This Article is a part of the JavaScript Fundamentals series.
Console Log
The console.log
will log values during the program's execution. If we console.log
a value, that value will show in our test results. You will also often see console.log
used in code examples:
let a = 22;
a = a + 10;
console.log(a); // 32;
Conditionals
Conditional statements control behaviour in JavaScript and determine whether or not pieces of code can run.
if
Statement- Use of
if
when needing to branch based on a condition:
if(1 === 1) {
console.log( "Yes, it's true!" );
}
In the above line, 1 === 1
is the condition. The ===
operator referred to as the strict equality operator. It compares two values and evaluates them to be true
if they are equal.
Example: Let’s complete the isEqual function! If a is equal to b return true.
function isEqual(a, b) {
return(a===b);
}
!==
or Is Not Equal referred to as a strict inequality operator. This operator will evaluate to true
if the two values are not equal.
console.log( 1 !== 2 ); // true
console.log( 2 !== 2 ); // false
console.log( 3 !== 2 ); // true
Example: Let’s complete the isNotEqual
function! If a
is not equal to b
return true
.
function isNotEqual(a, b) {
if(a !== b){
return true;
}
}
else
Statement- The
else
statement runs only if theif
condition is not true.
if(isRaining === true) {
stayIndoors();
}
else {
// isRaining is not true
goOutside();
}
Example: Let’s update our isNotEqual
function to also handle the case where a
is equal to b
. If a is not equal to b
return true. Otherwise, return false
.
function greater(first, last) {
if (first > last){
return first;
}
if (last > first) {
return last;
}
}
Let’s take a look at two new operators, greater than >
and less than <
operators! Both >
and <
will evaluate to false
if the operands are equal:
console.log(1 > 3); // false
console.log(3 > 1); // true
console.log(3 < 1); // false
console.log(1 < 3); // true
- The values on either side of the operator are referred to as “operands”. The operands for the equation
1 > 3
are1
and3
. >=
or<=
Operator- Both
>=
and<=
will evaluate totrue
when the operands are equal, unlike the>
and<
operators.
function greaterThanOrEqualTo(a, b) {
if(a > b) {
return true;
}
if(a === b) {
return true;
}
}
// or
// Both will accomplish the same functionality.
function isEqual(a,b) {
if(a === b) {
return true;
}
return false;
}
else If
Statement- We can use
else
andif
together:
if(firstCondition) {
// firstCondition is true
}
else if (otherCondition) {
// firstCondition is not true and otherCondition is true
}
else {
// neither condition is true
}
What happens if the two conditions were true
?
const a = true;
const b = true;
if(a) {
// this will run
}
else if (b) {
// this will not run!
}
else {
// this will definitely not run.
}
- The important thing to take away from this is that
else
statements will only run if the original condition is nottrue
.
Conclusion
Ending with an extra bit of information about JavaScript functions…
In order to guarantee that code is readable to a standard, many organisations maintain a rigid style guide. {}
are typically recommended for if/else
statements.
Today I learned about Conditionals, If, Else, Else If in JavaScript.