Signed in as
Especially since we're looping over arrays and applying conditional logic, students can quickly start to mix up the variable they're currently working with. Help them to understand what 'this' is whenever they're applying logic to an argument.
Students shouldn't have too hard of a time wrapping their heads around the concept of conditional logic. However, the syntax for ternary operators and the logical && can throw them for a loop. Help them by repeatedly showing examples of how these concepts compare to each other in outcome and the differences in syntax.
Grab a deck of cards and have two students come to the front of the room; we're going to play War. Split the deck between the two of them and have them draw a single card, face up. The winner is the person with the highest value card. If they have two cards of equal value, they'll draw three cards face-down before drawing a fourth face-up; the person with the highest face-up card wins the hand. If they tie again, they repeat the previous step until one draws a higher card.
Students in the room should be tasked with explaining the rules of the game using if...else language. Help them to formalize the rules of the game and, if time allows, to create a diagram explaining how each hand works from start to finish.
Lead students through the lesson and provide support as they begin their assignment.
Take the formative assessment at the end of class. Work towards mastery.
When we're developing web applications, some times we want certain elements to appear only when certain conditions are met. For example, maybe if an item is unavailable or out of stock, we still want the page to exist, but we want to prevent the button for buying the item to work. In these cases, conditional logic allows us to run certain code when certain logical statements are true.
The most common form this takes is in the form of an if...else statement.
1let raining = true; 2let hasUmbrella = false; 3 4if (raining === true) { 5 console.log(`It's raining!`); 6} else { 7 console.log(`It's not raining.`); 8}
These evaluations can become increasingly complex with multiple conditions being included.
1let raining = true; 2let hasUmbrella = false; 3 4if (raining === true && hasUmbrella === true) { 5 console.log(`Aren't you prepared!`); 6} 7if (raining === true && hasUmbrella === false) { 8 console.log(`Looks like you're singin' in the rain...`); 9} else { 10 console.log(`It's not raining.`); 11}
There's a few things about each of these examples that jumps out. First, you see a triple-equals sign === like this. The if takes an argument that is an expression; if the expression is equal to the boolean it's compared to, it will run the next block of code inside the curly brackets. Otherwise, it will move onto the next expression and, eventually, the else statement.
Second, we can have multiple conditions we evaluate; we're not restricted to simply one evaluation at each if...else block.
elseIf it's a simple true/false without lots of conditions and we don't care about alerting the user to the fact that it's not raining (because, who cares?), you don't even need the else block. Our first example could be rewritten to this and it would work just fine.
1let raining = true; 2let hasUmbrella = false; 3 4if (raining === true) { 5 console.log(`It's raining!`); 6}
Ternary operators are a great example of 'one-liners' that make it really easy to quickly and cleanly write code. They're less readable - especially to new developers - at first, but you'll quickly pick up on their usefulness and timesaving abilities.
1let raining = true; 2let hasUmbrella = false; 3 4raining === true 5 ? console.log(`It's raining!`) 6 : console.log(`It's not raining.`);
Or, like our modified example:
1let raining = true; 2let hasUmbrella = false; 3 4raining === true ? console.log(`It's raining!`) : null;
And, we can even take it a step further with the (rather) newly popular logical &&
1let raining = true; 2let hasUmbrella = false; 3 4raining === true && console.log(`It's raining!`);
All three of the code snippets above are, essentially, the same. Just different ways of writing out the same if...else block.
So, what does this look like in the DOM? Well, let's take a look at an example with the API we were using earlier. One of the properties each character receives is status which is set to either alive or dead. We could have some fun there...
1<body> 2 <div id="characterGallery"></div> 3</body> 4 5<script> 6 // Async function 7 async function getPeoples() { 8 // Make our request and get in a usable format 9 let response = await fetch(`https://rickandmortyapi.com/api/character/`); 10 let data = await response.json(); 11 let { results } = data; // destructure to get results array 12 console.log(results); 13 // get the gallery element 14 const gallery = document.querySelector(`#characterGallery`); 15 results.map((character) => { 16 // We'll create the div 17 let div = document.createElement(`div`); 18 // Assign a class to it 19 div.className = `characterCard`; 20 // We'll add the student's name into the card 21 let name = document.createElement(`p`); 22 name.innerText = character.name; 23 // We'll add the name to the div 24 div.appendChild(name); 25 // And add the div to the gallery 26 gallery.appendChild(div); 27 // Add the character's image 28 let image = document.createElement(`img`); 29 // Set the source 30 image.src = character.image; 31 // Add the image into the DOM 32 div.appendChild(image); 33 34 // Let's make it clear who is dead and who is alive... 35 character.status === `Dead` 36 ? (div.style.cssText = `background: red; opacity: .4`) 37 : null; 38 }); 39 } 40 41 // Call the function 42 getPeoples(); 43</script>
Practice: Conditionals