Boolean Logic and JavaScript Conditions

Introduction
This is part 6 of my series, JavaScript Basics. In this part of the series we apply Boolean logic to JavaScript conditions.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Single Expression Example
Consider the following code:

var me = "tall";

if (me == "tall")
{
alert('I am tall');
}

Read and try the code (you have to add the surrounding HTML elements first). In the condition, (parentheses of if) there is only one expression, which is, me == "tall". If this expression results in true, the if-block will be executed. The above if-statement is equivalent to

if (true)
{
alert('I am tall');
}

For this second if-statement to be executed (display alert box), you do not need the declaration of the variable and its assignment. Read and try the following code:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

if (true)
{
alert('I am tall');
}

Let us look at a case where the condition results in false. Consider the following code:

var me = "short";

if (me == "tall")
{
alert('I am tall');
}

The if-block (curly braces) in the above code will not be executed, because the condition results in false, since the value of the variable, me, is "short" and not "tall". The above if-statement is equivalent to:

if (false)
{
alert('I am tall');
}

The if-block can only be executed if the condition is true. In this last case it is not executed.

More than One Expression in Condition
You can have more than one expression in a condition. In this part of the series, I consider a maximum of two expressions in a condition. Each of the expressions results in true or false. The expressions are combined with the AND, OR or NOT operators. The AND operator is typed as, &&. The OR operator is typed as, || . The NOT Operator is typed as ! . &&, || , and ! are called logical operators. With logical operators, the rules in the previous part of the series can be rewritten as:

AND
(false) && (false) = false
(false) && (true) = false
(true) && (false) = false
(true) && (true) = true

OR
(false) || (false) = false
(false) || (true) = true
(true) || (false) = true
(true) || (true) = true

NOT
!(false) = true
!(true) = false

Double-Expression Examples
The if-block will not be executed in the following code:

if ((false)&&(true))
{
alert('We are tall');
}

A practical example for the above code is:

var you = "tall";
var me = "tall";
if ((you == "short")&&(me == "tall"))
{
alert('We are tall');
}

"tall" is assigned to the variable, you, and also to the variable, me. The first expression in the condition results in false and the second one results in true. (false)&&(true) gives false as the effective Boolean value for the condition. So the block is not executed.

The if-block will be executed in the following code:

if ((false)||(true))
{
alert('Either of us is tall');
}

A practical example for the above code is:

var you = "tall";
var me = "tall";
if ((you == "short")||(me == "tall"))
{
alert('Either of us is tall');
}

Read the above code. Try it (first add the HTML parts). The first expression results in false; the second one results in true. The effective condition is true, since (false)||(true) gives true.

NOT Examples
The if-block will be executed in the following code:

if (!(false))
{
alert('I am tall');
}

The if-block is executed, if the condition is true. !(false) gives true. If the condition is false, the if-block will not be executed.

A practical example for the above code is:

var me = "tall";
if (!(me == "short"))
{
alert('I am tall');
}

else-if and else
You can still add the else-if and else sub statements to the above code, following what we learned in one of the previous parts.

Let us stop here and continue in the next part of the series.

Chrys