Nested Conditionals with booleans Javascript Lesson
Nested conditionals with booleans in Javascript are condition statements placed inside condition statements, allowing multiple layers of decision making.
Booleans with Nested Conditionals
A boolean is a data type that represents one of two possible values: true
or false
. Booleans are useful for decision-making in code, as they let us determine if specific conditions are met. For example, if we want to check if someone meets the age requirement for a concert or has a ticket, we might represent these conditions as booleans.
A nested boolean is simply a boolean condition used inside another condition. When using nested conditionals (conditions inside other conditions), we can build complex decision-making logic. For example, we might check first if the person is old enough, and if they are, then check if they have a ticket. This kind of logic allows us to handle multiple conditions in a structured way.
Here’s an example:
let isOldEnough = true; // Boolean indicating if the person meets the age requirement
let hasTicket = false; // Boolean indicating if the person has a ticket
if (isOldEnough) { // Check if the person meets the age requirement
if (hasTicket) { // Nested condition to check if they have a ticket
console.log("You can attend the concert.");
} else {
console.log("You need a ticket to attend the concert.");
}
} else {
console.log("You do not meet the age requirement for this concert.");
}
- The code below checks if you can cook a meal at home.
- It uses the presence of hunger, and ingredients, to determine if cooking a meal is possible at home.
- It uses booleans in the code
Popcorn Hack 2
- Open two new code cells and set them to javascript
- Copy the code example from above javascript cell into both the new code cells
- Change the first new code cell to print “You aren’t hungry. Maybe meal-prep for later if you had ingredients.”
- Change the second new code cell to print “You can make a cheese sandwich at home.”
%%html
<!-- HTML output div -->
<div id="message"></div>
<script>
function runWhenDOMLoaded() {
let isHungry = true;
// Define ingredients as a JSON object
const ingredients = {
"bread": true,
"cheese": true,
"tomato": true
};
const messageElement = document.getElementById("message");
function displayMessage(message) {
console.log(message); // Log to console
messageElement.textContent = message; // Display on the webpage
}
// Check if essential ingredients are available
if (isHungry) {
if (ingredients.bread && ingredients.cheese && ingredients.tomato) {
displayMessage("You can make a really bad pizza at home.");
} else if (ingredients.bread && ingredients.cheese) {
displayMessage("You can make a cheese sandwich at home.");
} else if (ingredients.bread){
displayMessage("Maybe you should make toast");
}
else{
displayMessage('You should order food since you dont have enough ingredients')
}
} else {
displayMessage("You aren't hungry. Maybe meal-prep for later if you had ingredients.");
}
}
// Ensure the function runs only after the page loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', runWhenDOMLoaded);
} else {
runWhenDOMLoaded();
}
</script>