JavaScript: Logical Operators

So we've already come quite a way with 'if' statements - but there are three more operators which can come in useful to make conditions and logic paths even more complex. These are called logical operators and are what we're going to be talking about in this tutorial.

And

The 'and' operator (expressed in JavaScript with a double ampersand - &&) is used to check if one expression and another is true. Both must be true for the condition to be true (and if used in an 'if statement', for the code to be executed).

We can use the 'and' operator in a very basic manor by writing one condition (using two values and a conditional operator), then using the 'and' operator (&&), and then simply writing the second condition. Take the following for example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var userInput = prompt('Enter a number');
var userInputTwo = prompt('Enter another number');

if(userInput == userInputTwo && userInput > 9000)
{
	alert('You entered two identical values over 9000!');
}
else if(userInput > userInputTwo && userInput < 9000)
{
	alert('The first value was more than the second (and was less than 9000!)');
}
else
{
	alert('Yawn.. Your numbers bore be');
}

So maybe we haven't created an extremely useful example to demonstrate the 'and' operator above, however this does illustrate some functionality which would be messy and difficult to achieve otherwise. We are checking if one condition and another are true.

Or

The 'or' operator functions almost exactly like 'and', but instead of checking of the first and second expressions are true, it checks if either the first condition is true or the second condition is true (who would have guessed it, eh?). We can express the 'or' operator in JavaScript using a double "pipe symbol" (||) - this is often on keyboards to the left of 'Shift', or to the right of 'Enter'.

It's worth noting that the 'or' operator is not exclusive (it's not like XOR if you know about logical operators in general), so this means that it will also return 'true' if both the expressions it is evaluating are true. So let's write another abstract example!

1
2
3
4
5
6
7
8
9

var userInput = prompt('Enter a number');
if(userInput > 9000 || userInput < -9000)
{
	alert('It\'s over 9000! (or less than -9000!)');
}
else if(userInput=='Hello' || userInput=='Hi')
{
	alert('You weren\'t supposed to enter that - but Hi!');
}

'Or' can also be used to accept responses in varying cases within basic scripts, for example:

1
2
3
4

if(userInput=="Hi" || userInput=="hi")
{
	//Do something
}

Not

Now finally, the 'not' operator. This one is a little bit different to 'and' and 'or' - instead of being about joining conditions, it simply inverts them. So if a condition is true, putting the 'not' operator before it will make it false (and if you put the 'not' operator before a condition that is true, it will make it false).

You can write 'not' in JavaScript as you do in "not equal to" - by using an exclamation mark (!). So if we wanted an 'if' statement to always be false, and wanted to use the 'not' operator to do it for some obscure reason - then we could write '!true' (or just 'false' which makes a lot more sense). So it's time to create an abstract example:

1
2
3
4
5
6
7
8
9

var userInput = prompt('Enter a number');
if(!(userInput > 9000 || userInput < -9000))
{
	alert('Your input wasn\'t above 9000 or below -9000..');
}
else
{
	alert('It\'s over 9000! (or less than -9000!)');
}

Notice how I bracketed up the whole condition I wanted to inverse (in the above case - checking if the users input was above 9000 or below -9000) and then simply put a '!' in-front of it to invert it. This condition is possible to formulate without using 'not', however the 'not' operator makes the code neater and more readable. 'Not' also has some clear uses outside of conditions - such as setting a variable to the inverse of another:

1
2

var variableOne = false;
var variableTwo = !variableOne;

In the above case, variableTwo would be true (because it's '!false').

Playing around with different logical operators can help you get to grips with them and as always, I recommend either tweaking with the files in your project folder or playing around on JSFiddle.