Keep current with the latest trends in technical communication by subscribing to the I'd Rather Be Writing newsletter. 4,500+ subscribers

Recent Comments

Search results

JavaScript: Conditional Code

You can start building more complex JavaScript statements by using conditional code. The conditional code allows you to ask if a condition is met. If the condition is met, a certain code block is run. If the condition isn't met, a different code block is run. The answer to the condition must always be a yes or no answer.

Conditional Code Format

Here's the format of the conditional code:

//begin with an if statementif(condition){//insert code to run ...alert("Hello World");//otherwise, run this code}else{//end the code block}

The statement begins with if followed by a condition in parentheses. After the condition, the code block is run. Code blocks are contained within curly braces { }. The else means "if the previous condition isn't met, do this instead," or more simply, "Otherwise."

Here's an example with some information:

//first declare a variablevara=100;//state an if conditionif(a>100){//if true, then run this commandalert("Hello");//if the condition isn't met, do this:}else{alert("Goodbye");}

Conditional Operators

In the condition statement, you can use a variety of operators to ask questions:

if(a==b)// if a is equal to bif(a!=b)// if a is not equal to bif(a>b)// if a is greater than bif(a<b)// if a is less than bif(a>=b)// if a is greater than or equal to bif(a<=b)// if a is less than or equal to b

Equals Signs

Note that the equals operator is two equals signs ==, not one. When you set the value of a variable, you use one equals sign =. One equals sign means "assign as" whereas two equals signs means "equals".

There's also a triple equals sign ===, which means "is strictly equal to." This is a more formal way of checking conditions. For example, if you have a variable that's a number, such as var a = 10, and another variable that's a string, such as var a = "10", the two variables are different types of variables and therefore aren't "strictly" equal, even though they're the same.

Nested Conditions

You can nest multiple conditions. A nested condition looks like this:

if(condition){//run some code...}else{if(condition){//run some code...}else{// otherwise, run this code}

Usually you don't nest more than a couple of condition levels, so that the code doesn't become too complicated.

And/Or Operators

You can create more advanced conditions by including && (and) or || (or) operators. Here's an example of the "and" operator:

//if a is equal to b and a is equal to cif(a==b&&a==c)

Here's an example with "or" operator:

//if a is equal to be or a is equal to cif(a==b||a==c)

For clarity, you can surround the conditions in their own parentheses, like this:

if((a==b)&&(a==c))

Just remember that you always need both opening and closing parentheses. And just as with more simple conditional statements, the answer needs to be either yes or no.

Arithmetic Operators

You can use a variety of arithmetic operators:

+// add-//subtract*//multiple/ //divide%// the remainder (the % is called a modulus)

Here's an example:

if(a+b==100)

This is pretty straightforward: if a plus b is equal to 100. However, when you combine multiple arithmetic operators, JavaScript runs multiplication and division first, and then addition and subtraction. This prioritization is called "operator precedence." So if the operation is the following:

(2+2*12)

The result will be 26 rather than 48. You multiply 12 * 2 to get 24, and then add 2 to get 26.

To specify that the addition or subtraction runs first, you can surround it in parentheses:

((2+2)*12)

Now the result will be 48.

The Remainder Operator

The remainder operator refers to what's left over when a number doesn't divide evenly into another number. Here's an example of the remainder operator in action:

//set a variablevaryear=2010;//set a variable to be the days left over after//dividing the year by 4varexcess=year%4

The value for the remainder would be 2. This is because 4 goes into 2010 (the year) 502 times, with a remainder of 2.

Arithmetic Shorthand

Because arithmetic operators are used so frequently, there's a shorthand way of writing them. When you see +=, it means to add the number that follows to the variable. Conversely, -= means subtract the number from the variable, and so on.

The following are the long and short ways of writing the same operators:

score=score+10;// the long wayscore+=10;// the short way</p><p>score=score-10;// the long wayscore-=10;// the short way</p><p>score=score*10;// the long wayscore*=10;// the short way</p><p>score=score/10;// the long wayscore/=10;// the short way

Unary (++) Operators

There's another shorthand for arithmetic operators: ++ is called a unary operator. When you add ++ with a variable, it means to increment the variable by 1. Similarly, if you add --, it means decrease the variable by 1. Here are a few examples:

a=a+1;// the long way of writing ita+=1;// a shorter waya++;// an even shorter waya++;// even shorter++a;// also acceptable and means the same thing.

Ternary Operators

There's one more shorthand operator to mention. A ternary operator has three components and reduces what would otherwise occupy several lines of code into just one line. Rather than writing out:

//declare some variablesvara=500;varb=600;varhighScore;//state an if conditionif(a>b){//run some codehighScore=a;//otherwise run this code}else{highScore=b;}

You can compress this into a couple of lines in the following format:

condition?true:false

After stating the condition, add a question mark ?. After the question mark, write what should happen if the condition is true; then add a colon. On the right of the colon, write what should happen if the condition is false.

Here's how the ternary operator would be written using the previous example:

vara=500;b=600;varhighScore=(a>b)?highScore=a:b;

In other words, if a is greater than b, assign the highScore variable as a. If it's not, assign the highScore variable as b.

Stay current with the latest in tech comm

Keep current with the latest trends in technical communication by subscribing to the I'd Rather Be Writing newsletter. 4,500+ subscribers