CS 1100: Web Development: Client-Side Coding

Basic Operators

We can combine two or more expressions into a compound expression in a number of ways. The simplest is by using an operator:

  > 42 + 14               // the usual arithmetic
  56
  > 3 * (4 + 4)           // we can combine compound expressions, too
  24
  > 7 / 3                 // does its best with non-terminating numbers
  2.3333333333333335
  > 7 % 3                 // and some math-y operators (remainder)
  1
  > - 8                   // some operators take only one argument
  -8
  
  > 'Eugene' + 'Wallingford'     // + "concatenates" strings
  'EugeneWallingford'
  
  > 10 / 2
  5
  > '10 / 2'              // strings are literals -- not evaluated
  '10 / 2'
  > '10' + '/' + '2'
  '10/2'
  

Practice Exercises

Write an expression to find how many days are left in 2023 by summing the days left in October, November, and December.

Write an expression to assemble a person's name in "last, first" form by concatenating strings for their first and last names.

Comparisons and Boolean Values

JavaScript also has operators to compare things:

  > 42 > 14               // greater than?
  true
  > 1 > 14
  false
  > 42 < 14               // less than?
  false
  > 8 === 8               // equal to?
  true
  > 8 === 8.0
  true
  > 27 !== 13             // not equal to?
  true
  > 27 !== 27
  false
  > true                  // literal true
  true
  > false                 // literal false
  false
  > true === 'true'       // these are different from strings
  false
  

These operators show us a new kind of value: Booleans. There are only two Boolean values: true and false. Notice that these values do not use quotation marks. They are keywords. Boolean values will be useful when we have to make choices such as Do this or do that? or Do this again?

JavaScript has other equality operators that we will encounter later. We will use === and !== unless we must use something else.

Named Values

A second kind of primitive expression is the named value, what programmers usually call a variable.

To create a name, we use the keyword let to write a JavaScript statement:

  > let firstName = 'Eugene';     // create firstName and give it 'Eugene'
  undefined                          // statements are not expressions!
  > firstName                     // what is the value of firstName?
  'Eugene'
  
  > let lastName;                 // we can create a name without a value
  undefined
  > lastName = 'Wallingford';     // then give it a value
  'Wallingford'
  

Up to this point, wee had seen numbers, strings, and boolean values. This interaction shows us undefined, which is a special value all its own. undefined means that a name has never been given a value.

  > let b;
  undefined
  > b
  undefined
  

Naming Rules

In JavaScript, a variable name must start with a letter (a-z or A-z), an underscore (_), or a dollar sign ($). Subsequent characters can be letters, numbers, or underscores. However, we cannot use one of JavaScript's keywords, such as true, false, or let, as the name of a variable.

For example, $31 and _private are valid names, but 1abc and aName% are not.

Otherwise, we can use any string of characters we want. If a variable name consists of more than one word (example: lastName), we use camel case to make the name more readable.

JavaScript names are case-sensitive: lastName and lastname are different variables.

One final note for now: If we don't use let or the semicolon, the interpreter will accept our code, but it may not treat the expression as we intend. (We may discuss this issue in more detail later in the course.) We will use them as a matter of good practice.

Assignment Statements

The = operator can also change the value of an existing name:

> firstName = 'Tua';            // the = operator can also change
'Tua'                           // the value of an existing name

We call code of the form [name] = [expression]; an assignment statement. It means "let [name] take the value of [expression]".

Note that this is a single equal sign, unlike the equality operators. In JavaScript, the equal sign does not mean what it means in mathematics. In math, a = b means "a equals b". In JavaScript, it means to compute the value of b and copy it into a. It is an instruction to make a equal to b.

An assignment statement changes only the value of the name on the left hand side.

Practice Exercise: Work through each line of this chart. Enter the statement in Column 1, then check the value of a and b by entering them at the prompt before moving on to the next line.

Did any of the results surprise you?