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 more complex.
We will cover all three in this tutorial.

And

The 'and' operator (expressed in Javascript with a double ampersand – '&&') is to check if one condition 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 most basically by writing one condition (using two values and a conditional operator), then using the 'and' operator ('&&'), and then simply writing the second condition.
For example:

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 – but it illustrates the point perfectly. We are checking if one condition and another are true.

Or

The 'or' operator functions almost exactly like the 'and', but instead of checking of the first and second conditions are true, it checks if either the first condition or the second condition is true.
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) – this means that it will also be true if both the conditions are true.

So let's write another abstract example!

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!');
}

It's worth noting that 'or' can also be used to accept responses in varying cases, for example:

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

Not

Now the 'not' operator, is a little bit different to 'and' and 'or' - instead of being about to join conditions, it simply inverses 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" – you use the 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!

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.

Not also has some good uses outside of conditions – such as setting a variable to an inverse of another:

var variableOne = true;
var variableTwo = !variableOne;

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

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



Back to Javascript