Expressions and Statements

Slide navigation: Forward with space bar, →, or PgDn. Backwards with ← or PgUp.

Expressions and Statements

• Expression has value:

  6 * 7

• Statement has effect:

  const number = 6 * 7;
  console.log(6 * 7);
  

• Try it in the node REPL.
  • Value of expression is displayed.
  • Statement is executed for its side effect.
• The simplest statement is an expression statement:

  6 * 7; // Not useful
  console.log(6 * 7); Useful because console.log has a side effect
  

• What's with the semicolons? Stay tuned.

Expressions and Statements

Semicolon Insertion

• Certain statements are terminated by semicolons:
  • Expression statements
  • Variable declarations
  • Non-linear control flow (break, continue, return, throw)
• Semicolons are automatically inserted if they are not supplied.
• Basic rule: Semicolon inserted before “offending token”.
  • Something that could not be a part of the statement.
  • Preceded by a line terminator.
  • Or } or the end of input.
• Example:

  const a = x
    + someComplicatedFunctionCall() // + not offending—no semicolon
  const b = y; // const is offending—semicolon placed before it

• What could possibly go wrong?

Semicolon Insertion

• No semicolon when the first token could have been a part of the preceding statement:

  const x = a
  (console.log(6 * 7))

• Could have been a(console.log(...))
• Ok, that's completely contrived.
  • Just drop the parentheses.
  • Or add a semicolon if you can't.
• More obscure rules—semicolon inserted:
  • Before ++, --, or => immediately preceded by line terminator
  • After break, continue, return, throw, or yield immediately followed by line terminator
• So, don't break lines like this:

  return // Semicolon inserted here
     someComplicatedExpression;
  

• Bites you even if you conscientiously put all semicolons!

Conditions

Equality Operators

• Two “strict equality” operators:

  === strictly equal to
  !== not strictly equal to

• If x and y don't have the same type, then x !== y
• Numbers, Boolean values, strings compared by value.
• undefined and null only equal to themselves.
• Object/array references are strictly equal if they refer to the same object in memory:

  const harry = { name: 'Harry Smith', age: 42 }
  const harry2 = harry
  harry === harry2 // true—two references to the same object
  const harry3 = { name: 'Harry Smith', age: 42 }
  harry === harry3 // false—different objects

• Avoid the “loose equality” operators == and !=

Comparison Operators

• Four comparison operators:

  <  less than
  <= less than or equal
  >  greater than
  >= greater than or equal
  

• Use these to compare numbers with numbers or strings with strings.
• Strings are compared lexicographically:

  'Hello' < 'Goodbye' // false
  'Hello' < 'Hi' // true

• Avoid mixed type comparisons:

  '42' < 5 // Don't do this!

Relational Operand Conversions

• Comparing number and string:

  '42' < 5 // false—'42' is converted to the number 42
  '' < 5 // true—'' is converted to the number 0
  'Hello' < 5 // false—'Hello' is converted to NaN

• Compare as numbers if one operand is a number, otherwise as strings:

  [42] < 5 // false—[42] is converted to the number 42
  [1, 2, 3] < {} // true—[] is converted to '1,2,3', {} to '[object Object]'

• Loose equality is baffling:

  '' == 0 // true—'' is converted to 0.
  '0' == 0 // true—'0' is converted to 0.
  '0' == false // true—both are converted to 0.
  null == false // false—null is only equal to itself and undefined.
  '' == '0' // false—no conversion since both operands are strings.

Boolishness

• Conditions—such as in if (...)—need not be Boolean values.
• 0, NaN, null, undefined, '' are falsish.
• All other values are truish.
• Also in loop conditions, operands of &&, ||, and !, first operand of ? :
• Why not?

  if (performance) { // Skipped if performance is undefined
  }

• Did you really want to skip the block if performance is the number zero? The empty string?
• Code what you mean:

  if (performance !== undefined) . . .

• Tip: Avoid Boolishness. Always produce true or false in conditions.

Boolean Operators

• Three Boolean operators:

  && and
  || or
  !  not

• Evaluated lazily:

  if (i < a.length && a[i] > 0) // a[i] > 0 is not evaluated if i ≥ a.length

• The “deciding” operand becomes the result:

  0 && 'Harry' // 0
  0 || 'Harry' // 'Harry'

• Some programmers do this on purpose:

  const result = arg && arg.someMethod()
  const result = arg.someMethod() || 0

• Conditional operator:

  const max = x > y ? x : y

• Bitwise operators & | ^ ~ truncate operands to 32-bit integers.
• Shift operators << >> >>> truncate left operand to 32-bit, right operand to 5-bit.
• Don't abuse them:

  x | 0 // Use Math.floor(x) instead

Branches

The if Statement

• Conditional statement:

  if (condition) statement

• Body is often a block statement:

  {
     statement1
     statement2
     . . .
  }

• Optional else clause:

  if (yourSales >= target) {
    performance = 'Satisfactory'
    bonus = 100
  } else {
    performance = 'Unsatisfactory'
    bonus = 0   
  }

• Note “one true brace style”.

The Switch Statement

• Just like in C++ and Java, warts and all:

  const description = ''
  switch (value) {
    case 0:
      description = 'zero'
      break
    case false:
    case true:
      description = 'boolean'
      break
    case '':
      description = 'empty string' // Error—fall through!
    default:
      description = 'something else'
  }

• Tip: Use when you need binary search in jump table.
• Tip: Otherwise, don't.

Catching Exceptions

• Error return values aren't always sufficiently expressive:

  if (parseFloat(input) === NaN) { Invalid input... }
    // What if the user entered NaN?
  

• JSON.parse throws an exception if it can't parse the input.
• Catch it with a try block:

  try {
    const input = ...
    const data = JSON.parse(input)
    // Process data... 
  } catch {
    // Invalid input...
  }

Loops

while and do/while Loops

• Loop condition tested before entry:

  while (i < s.length) {
    if (s[i] == ' ') count++
    i++
  }

• Body executed at least once:

  do {
    i++
  } while (i < s.length && s[i] != ' ')

The Classic for Loop

• Initialize, test, update:

  for (let i = 1; i <= 10; i++)
    console.log(i)

• Can cram in multiple variables, update expressions:

  for (let i = 0, j = a.length - 1; i < j; i++, j--) {
    const temp = a[i]
    a[i] = a[j]
    a[j] = temp
  }

The for of Loop

• Iterates over elements of iterable:

  const arr = [1, 2, , 4]
  arr[5] = 100
  for (const element of arr) // Visits 1, 2, undefined, 4, undefined, 100
    console.log(element)
  

• With strings, visits each Unicode code point:

  const greeting = 'Hello 🌐'
  for (const c of greeting) // Visits H e l l o, a space, and 🌐
    console.log(c)

The for in Loop

• Iterates over keys of “enumerable” object properties:

  const obj = { name: 'Harry Smith', age: 42 }
  for (const key in obj) // Visits 'name', 'age'
    console.log(key)
  

• Works for arrays:

  const arr = [1, 2, , 4]
  arr[5] = 100
  for (const key in arr) // Visits '0', '1', '3', '5'
    console.log(key)
  

• But not so well for strings:

  const greeting = 'Hello 🌐'
  for (i in greeting) // Visits both code units of 🌐 separately
    console.log(greeting[i])

Breaking and Continuing

Breaking and Continuing

• Break out of a loop:

  let i = 0
  while (i < arr.length) {
    if (arr[i] === 0) break
    i++
  }

• Can always rewrite with Boolean control variable:

  let i = 0
  let found = false
  while (!found && i < arr.length) {
    if (arr[i] === 0) found = true
    else i++
  }

Labeled Break

• Labeled break:

  let i = 0
  outer:
  while (i < arr.length) {
    let j = 0
    while (j < arr[i].length) {
      if (a[i][j] === 0) break outer
      j++
    }
    i++
  }

Continue

• Continue with next iteration:

  let count = 0
  let sum = 0
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 0) continue
    count++
    sum += arr[i]
  }
  const avg = count === 0 ? 0 : sum / count
  

• There is even a labeled continue