Creating Data Expressions Using Operators

Data involves using expressions. You might think of them as a formula or equations. They can be basic mathematics such as addition, subtraction, multiplication and division. They also can compute the trajectory to send a space ship to the moon.

Each data type has a set of operators they use for expressions. Examples of operators are +, -, *, /, ==, !=, <, >, <= and >=.

1+1

10000 * 1.1 / 12

300 >= 20 * 6

'Bob' + ' ' + 'Smith'

To get some practice, this lesson's activities uses the console interactive mode.

Steps:

  1. Open in the web browser the console.html file found in the completed folder.

    Alternatively any open web page can be used.

  2. Open the Console window in the web developer tools.

    For details see the Using Web Browser Developer Tools to Learn lesson in the Getting Started section for interactively accessing the Chrome Console window.

Boolean expressions tend to use number and string expressions, so we will do them last.

1. Activity: Number Expressions

The basic operators for numeric expressions are …

  • + Addition.
  • - Subtraction.
  • / Multiplication.
  • * Division.
100 + 2
100 - 200
2 * 2
100 * .33
100 / 5

Valid number literals entered into console interactive prompt.

2. Activity: String Expressions

There is only one operator for string expressions: + and it means concatenate.

'Bob' + 'Smith'
'Bob ' + 'Smith'
'Bob' + ' ' + 'Smith'
'Smith,' + ' ' + 'Bob'
'Country: ' + 'United States'

The use of literal delimiters can be mixed before and after operators.

"Country: " + 'United States'

Valid string literals entered into console interactive prompt.

3. Activity: Boolean Expressions

The basic boolean data expression operators are as follows …

  • == Equals.
  • != Not equals.
  • < Less than.
  • <= Less than or equals.
  • > Greater than.
  • >= Greater than or equals.

When any of the above operators are used in an expression, the result is true or false.

The basic boolean data expression operators compare data on the left and right of them. Examples comparing literal numbers.

100 == 100
100 != 100
100 < 200
100 <= 100
100 > 200
100 >= 200

Basic boolean operators comparing numbers.

You can compare the boolean literals true and false. Although not used in programming, they do give you an insight in logic.

true == false
true == true
true != true
true != false
true > true
true > false
false > true

Comparing boolean literals.

Why do you think true is greater than false?

Generally true is considered a value of one and false is considered a value of zero.

0 == false
0 == true
1 == true
2 == true

Comparing boolean literals with zero, one, two.

You might find examples of comparing the boolean literals true and false with other data expressions.

100 > 100 == true
100 > 100 == false
100 + 1 > 100 == true
100 - 1 > 100 == true
100 - 1 > 100 != true
100 - 1 > 100 == false

Numbers compared to boolean literals true and false.

You can compare strings.

"Bob" == "Bob"
"Bob" == "bob"
"Bob" > "Bob"
"Bobby" > "Bob"
"Bobby" == "Bob"

Boolean expressions comparing literal strings.

A common Javascript string comparison is the password and the verify password a user enters to create an account.

4. Activity: Operator Precedence

At first glance you might think that expressions are evaluated from left to right. However the operators have a order of precedence. For those we covered so far in this lesson that order is …

  1. * Division.
  2. / Multiplication.
  3. + Addition.
  4. - Subtraction.
  5. < Less than.
  6. <= Less than or equals.
  7. > Greater than.
  8. >= Greater than or equals.
  9. == Equals.
  10. != Not equals.

This means that if more than one operator appears in an expressions, operators with the higher order of precedence are processed first.

To change the order of precedence you can group portions of the expression using parentheses ( … ). Parentheses have the highest order of precendece.

How do you think the following expressions will compute? Explain your answer.

1000 + 100 / 10
(1000 + 100) / 10

Int the first expression the division of 100 by 10 occurs first and then is added to 1000.

The second expression's 1000 is added to 100 first and then divided by 12.

Precedence comparing 1000 + 100 / 10 vs (1000 + 100) / 10.

You can nest the grouping operator.

Break out the following expressions for each operator and show the computations.

(1000 + 100 * 2) / 10
((1000 + 100) * 2) / 10

These are the expressions' results.

Precedence comparing (1000 + 100 * 2) / 10 vs ((1000 + 100) * 2) / 10.

In the first expression the 100 was multiplied by 2 and then added to 1000 to get 1200. The 1200 divided by 10 to get 120.

The break down by operator of (1000 + 100 * 2) / 10.

In the second expression the 1000 was added to 100 and then multiplied by 2 to get 2200. The 2200 was divided by 10 to get 220.

The break down by operator of ((1000 + 100) * 2) / 10.

5. Activity: Guidelines and Best Practices

  • One or more spaces before and after operators are optional. A best practice is to be consistent if you do use them. This course uses one space before and after to aid in readability.

  • The operators we covered so far are evaluated left to right. There are more operators to learn and in some the data they work right to left.

  • If an expression computes the incorrect values, verify the input data values and then break it down into each operator and compute in the order of operator precedence.

    ((1000 + 100) * 2) / 10

    The break down by operator of ((1000 + 100) * 2) / 10.

Complete and Continue