The and (&&) and or (||) operators in javascript do not function like traditional logical operators.  We can use them to our advantage to eliminate some boilerplate code when writing conditional expressions.

Additional jsbin: https://jsbin.com/qipina/edit?js,output

Double && (and) Double || (or) = Double Functionality

[00:00] The double ampersand and double pipe are logical operators in JavaScript, but we can do some pretty cool shorthand conditional operations with them.

"[00:11] What's more fun -- Programming or Testing? Testing or Programming?" If I asked you if those two questions would have the same result, one would typically say yes, but in JavaScript, they will have two different answers because the order in which you ask the question has an impact.

[00:29] I'm asking one of the questions here, "Testing or Programming?" Right now, we're seeing that the result is "Testing," but if we were to change the order in which the question is asked, our result is going to change, even though we were using the same values to ask the question.

[00:48] The OR operator in JavaScript is checking if the value on the left-hand side is truthy. If it is, it returns the value from the left-hand side instead of simply giving you a Boolean equal to true.

[01:02] That means we're getting the entire programming object that we declared up here set as our result. Later, down here, in our render function, when we're accessing that result, we can pull the name property off of the programming object.

[01:17] Let's look at what happens if we put non-truthy values in here, like null or undefined. In both cases, we saw that our output updated to show "Testing." With the OR operator, if the left-hand side is undefined, it will return the entire value of the right-hand side.

[01:39] The AND operator is similar in that it can return one of the values being compared instead of a Boolean type. The differences are that it can only return the value on the right-hand side of the comparison and only if both the left and right-hand sides are truthy values.

[01:58] If we change this to null, we have no output because the left-hand side was not truthy, but when the value of both sides is truthy, we're getting the value of the right-hand side in our result, as we can see in our output.

[02:14] I want to show you how we can leverage these operators to do some more complex expressions. Here we have a list of activities. The main three in question here are three activities that are tied with a FunScore of 10.

[02:29] The first thing we're going to check is if our activity is "Board Games." If so, it wins, and it returns ActivityOne as our result. If it's false, then the OR kicks in, and it's going to continue looking for a truthy value.

[02:44] The next thing we're going to look for is "Teaching" in the ActivityTwo slot, and then for "Programming" in the ActivityTwo slot. If none of those evaluated to truthy, we're just going to compare the FunScore. If ActivityOne has a higher FunScore, we'll give that back. Lastly, we'll fall through to returning ActivityTwo.

[03:06] This is a useful tool because we can combine the "return right-hand side when all truthy" behavior of the AND operator with the "return the first truthy value we find" behavior of the OR operator to do some concise logical evaluations.

Double && (and) Double || (or) = Double Functionality

Share this video with your friends