When we work with conditional statements and logic operators it's often necessary to string multiple different conditions together, and for that we have two logic operators called AND and OR. These allow us to do things like say, if "a" equals "b" and "c" equals "d" or if "a" equals "b" or "c" equals "d". For AND statements we use two ampersands and for OR statements we use two vertical lines or pipes. When using logical AND and logical OR it's important to understand what logical AND and logical OR actually mean because it's not what it sounds like.
This makes a lot more sense if we use a venn diagram. In logic, AND means both conditions must be true for the whole statement to be true. That makes sense. OR means either the first statement or the second statement or both statements are true. Commonly, when we speak in human language we would expect that OR means either "a" or "b" but not both, but in computer logic, it actually means either "a" or "b" or both. This leads to a third condition where either "a" or "b" are true but not both.
For this we need a conditional logical test called XOR, but XOR doesn't exist in JavaScript. So, we need to create it manually. Let's say we have two conditions: "a" equals "b" and "c" equals "d" and we want to do something if either one of them is true but not both. To get that to work we have to nest a conditional statement inside a conditional statement. So at the bottom here, what we're saying is, if "a" equals "b" or "c" equals "d", so that would be either or, and "a" equals "b" is not equal to "c" equals "d".
So this gives us either "a" or "b" but not "a" and "b". Here you see how conditionals can be very powerful once you get the hang of how the logic works. When you start looking at code on the web, you'll quickly discover there's a shorthand for these IF/ELSE statements we talked about previously, and at first glance it looks pretty weird. This is the Ternary Operator. Ternary because it has three pieces to it. Take this as an example: "a" equals "b", question mark, console log, match, colon, console log, no match.
Okay. So, what on Earth is going on here? Let's look at the original code. If "a" equals "b" then console log match, else console log no match. This is easy enough to understand. And the Ternary Operator says the exact same thing. It literally says, if condition "a" equals "b" is true, then do one thing, else do something else. The Ternary Operator makes this into a single line of code for us where it says the condition, question mark, the true statement, colon, the false statement.
So, if "a" equals "b" is true, then console log match. Otherwise, console log no match. IF/ELSE statements are used all the time in JavaScript and this Ternary Operator takes up a lot less space than writing out the full statement. Now that you know how it works, you'll be able to recognize it and use it yourself to make your code more nimble. Just keep in mind what I previously mentioned; your code needs to make sense to humans. Ternary Operators are not immediately obvious, so use them with care and add comments when you do so to explain what's going on.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Advanced conditions and logic