Welcome to our new JavaScript adventure. Today, we're exploring the world of conditional statements. Just as decisions are made in real life, conditional statements in JavaScript guide a program in determining which steps to take under certain conditions.
In this lesson, we're going to explore:
if
statement — the pathway for making single-pathway decisions.else
and else if
statements — options for making multi-pathway decisions.Our journey begins with the straightforward if
statement, which checks a specific condition and takes action if the condition is true. Similar to determining whether an apple is ripe enough to eat, the if
statement would appear like this :
JavaScript1let apple = 'ripe'; 2 3if (apple === 'ripe') { 4 // If our apple is ripe, the message is printed. 5 console.log("The apple is ripe. It's ready to be eaten."); 6} 7/* 8Prints: "The apple is ripe. It's ready to be eaten." 9*/
Here, the if-condition checks the condition (apple === 'ripe'
), and if it is true, it performs the action inside the { ... }
block, which is a console.log("The apple is ripe. It's ready to be eaten.");
statement here.
So, what if the apple isn't ripe? In this case, we use the else
statement, which defines an alternative course of action when the if
condition is false.
To evaluate multiple conditions, we place an else if
statement after the if
statement and before the else
statement. This process mirrors our daily decision-making based on the weather:
JavaScript1let weather = 'snowy'; 2 3if (weather === 'sunny') { 4 console.log("It's sunny, let's go for a walk."); 5} 6else if (weather === 'rainy') { 7 console.log("Rainy day, we'd better stay at home."); 8} 9else if (weather === 'snowy') { 10 console.log("Snowy day, let's enjoy a snowball fight!"); 11} 12else { 13 console.log("The weather's unclear. Let's stay home and read a good book."); 14} 15/* 16Prints: 17"Snowy day, let's enjoy a snowball fight!" 18*/
The above code prints "Snowy day, let's enjoy a snowball fight!"
.
But what if we need to consider multiple conditions for a decision? This is where compound conditional statements, which combine multiple conditions using logical operators (and - &&
, or - ||
), come in handy. Take a look at this example, where multiple conditions determine if a swim is possible:
JavaScript1let temperature = 22; 2let weather = 'sunny'; 3 4if (temperature > 20 && weather === 'sunny') { 5 // If both conditions hold true, the message is printed. 6 console.log("The weather is fabulous. It's perfect for a swim!"); 7} 8/* 9Prints: "The weather is fabulous. It's perfect for a swim!" 10*/
The Ternary Operator ? :
is ideal for swift if-else
decisions. This shorthand expression verifies a condition, executes the code after ?
if true, otherwise it executes the code specified after :
.
JavaScript1let isRaining = true; 2 3// The operator acts as an 'if' statement. If it's raining, take an umbrella; otherwise, it's not needed. 4const message = isRaining ? "I'm taking my umbrella." : "I don't need my umbrella."; 5 6console.log(message); // Prints: "I'm taking my umbrella"
Excellent work! Today, we learned to make decisions using JavaScript's conditional statements, the basic if
statement and delved into the else
and else if
branches, compound conditionals, as well as the shorthand approach — the ternary operator.
Next, it’s exercise time! Reinforce your understanding by applying today's enriching lesson to various problems. After this practice, be ready for the forthcoming engaging lesson that delves deep into comparison and concatenation operations in JavaScript. Forward and onward!