JavaScript's Special Operators: conditional, typeof and void

The following are 3 very important operators you may not see very often but that are extremely useful.

The Conditional Operator

? :
( a ? x : y ) if a is true, then a equals x. otherwise a equals y

The conditional operator is the only operator that takes three operands. It is basically the short hand version of an if-else statement (which we'll cover in the next lesson).

The first operand, located before the question mark, is a conditional expression that is tested for a true or false value. On either side of the colon are the second and third operands.

The second operand is an expression that will evaluate if the condition is true, and the third is an expression will evaluate if the condition is false.

The assignment operator is frequently used with the conditional operator to assign one of the two expressions to a variable.

var mood = (smile==true) ? happy : sad

Typeof Operator

( typeof variable or literal/expression )

This special operator is helpful when troubleshooting. It reveals the type of data a variable or literal you are working with is, or the type of data an expression evaluates to. This is important because the type of data you are working with dictates how you are allowed to manipulate that data.

Sometimes you will need to convert a type of data to another type, so it is helpful to be able to test the type of a value or expression at different stages of execution in your script. Used in concert with the alert method, an alert box indicating the data type is generated, helping you trouble shoot a problematic script.

alert(typeof "Hello World")
alert(typeof (2 + 2))
alert(typeof true)
alert(typeof cow) //cow has not been initialized as a variable
alert(typeof ('2' + 2)) //concatenating a number with a string results in conversion to string

Notice that some expressions above are surrounded by parenthesis. This is to force that expression to evaluate before determining the type of data.

Void Operator

blocks returned values
(void expression/function call)
When either an HTML A tag's href attribute or onclick event handler contain a JavaScript expression or function call, the void operator is placed before them in order to neutralize a value they may return. The void operator assures that the value will not be assigned to the href attribute.

If this step is not taken, the page content is replaced with that value or sometimes with the client's hard drive directory listing. The most common place this "gotcha" shows up is when the window.open() method is placed in an A tag as the href's value:

<a href="window.open(...)">Open Sub Window</a>
Or Here...
<a href="#" onclick="...">do something when link is clicked</a>

Void Operator fixes the above errors just by showing up:
<a href="void window.open(...)">Open Sub Window</a>
<a href="void (0)" onclick="...">do something when link is clicked</a>

The "(0)" following the void operator is sometimes used as a place holder for the returned value, but doesn't necessarily have to be used, but I've included it because you will probably see it used on occasion.


>>Functions
>>JavaScript Variables
>>JavaScript Arguments
>>JavaScript Operators, Expressions and Evaluation
>>Special JavaScript Operators
>>Decision Making: If Statement, Else Clause

View Source | Home | Contact