1. Technology

JavaScript Making Decisions

2. Comparison Operators

By

JavaScript uses the = operator to perform assignments. As the same operator cannot perform two different tasks, a different operator is needed to test of two variables contain values that are equal. JavaScript provides two operators for testing if two values are equal. These are == and ===.

The == operator compares two values and returns true if the values on both sides are equal to one another. If the two values have different data types (for example, if one is a number and the other is a text string) then they are both converted to the same type before the comparison takes place. JavaScript will convert whichever of the two types can be converted to the other type without having to change the value contained in the variable (for example, converting a number to a text string).

The === operator does the same thing with one minor difference. This operator does not convert data from one type to another. It only returns true when the variables being compared are both of the same type and contain the same value.

While '3' == 3 is true (because by converting either the left side value to a number or converting the right side value to a text string will result in both being the same) '3' === 3 is false since one value is a text string and the other is a number.

Not all comparisons test for values being equal. Sometimes we need to test if the two values are not equal. Sometimes we need to know if one value is less than or greater than the other. JavaScript provides us with ways of testing all of these conditions as well.

To test if the two values are not equal we can use either != or !== for the comparison. The difference between these is the same as the difference between the equality tests with != returning false if the values are the same without considering if they are the same data type. A !== comparison will return true unless the values have both the same data type and value.

To test for the value on the left being 'less than' the value on the right (for example a smaller number or a text string starting with a letter earlier in the alphabet) we use the < operator and if we want to allow for then being equal as well we would use <=. Similarly to test for 'greater than' we use > and for greater than or equal >=..

Here are some comparisons that are true.


1 '2' != 'smith'
2 '3' !== 3
3 5 < 7
  4 <= 7
  7 <= 7
4 'abacus' <= 'calculator'
5 'abacus' < 'abate'
6 'Z' < 'a'
7 '10' < '2'

1 is true because the two text strings don't have the same value

2 is true because the two fields are not the same type, one is a text string and the other is a number

3 these three examples give exactly the results that you would expect when comparing numbers

4 'a' is closer to the start of the alphabet than 'c'

5 text strings are compared character by character until the result can be determined. As the first three letters of each of these text strings are the same we get to compare the 'c' with the 't' in working this one out

6 When comparing text strings the ASCII values associated with each of the letters are what actually gets compared. Since the uppercase letters all have lower ASCII values than any of the lowercase letters comparisons that involve both uppercase and lowercase letters will not necessarily give the result you would expect.

7 When comparing text strings that contain numbers, JavaScript compares the string, character by character basis, just as if the string contained letters. '1' has a lower value than '2'.

Here are some examples that are false.


1 '2' == 'smith'
2 '3' === 3
3 7 < 7
4 'abacus' >='calculator'
5 'A' < '9'

1 is false because the two text strings don't have the same value

2 is false because the two fields are not the same type, one is a text string and the other is a number

3 is false because we are specifically testing less than and not less than or equal

4 'a' is closer to the start of the alphabet than 'c' and so is not greater than or equal

5 the ASCII values for numbers are lower than those for letters and so 9 is less than A.

This tutorial first appeared on www.felgall.com and is reproduced here with the permission of the author.

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Learn Modern JavaScript
  6. 2. Decision Making
  7. JavaScript Making Decisions - Comparison Operators

©2014 About.com. All rights reserved.