Menu

Subscribe

Eloquent JavaScript: The Basics

on JavaScript, Eloquent JavaScript, notes, tutorial, beginner, programming

What follows is my breakdown of Chapter 1: Values, Types, and Operators from Eloquent JavaScript: A Modern Introduction to Programming, written by Marijn Haverbeke.

JavaScript Values

  • JavaScript values are just like bash variables.

4 Different Value Types to Consider When Getting Started with JavaScript

  1. Numbers
  2. Strings
  3. Booleans
  4. Undefined

Numbers

  • Any number can be used as a value.
  • 64 bits max, or 2**64 (18 quintillion) numbers.
  • There are really only 9 quintillion possible numbers due to decimal places going to 15 places max.
  • Scientific notation: 2.998e8 = 2.988 x 10^8 = 299,800,000
  • Arithmetic: (100 + 4) * 11
  • Operators include: / divide, * multiply, + add, and - subtract.
  • % is used to give remainders:
    • 314 % 100 returns 14
    • 144 % 12 returns 0
  • Infinity and -Infinity are numbers.
  • NaN = Not a Number
    • 0 / 0 returns NaN
    • Infinity - Infinity returns NaN

Strings

  • Text strings are a type of value.
  • "Patch my boat with chewing gum" is a string.
  • 'Monkeys wave goodbye' is also a string.
  • Line breaks use the \n character:
    • "This is the first line\nAnd this is the second"
    • returns: This is the first line
    • returns: And this is the second
  • The escape character is \.
    • console.log("A newline character is written like \"\\n\".")
    • returns: A newline character is written like "\n".
  • Use + to concatenate strings:
    • "con" + "cat" + "e" + "nate"
    • returns: concatenate
    • "comb" + "in" + "a" + "tion"
    • returns: combination

Unary Operators

  • These are written word operators.
  • typeof names the type of value for the given string.
  • console.log(typeof 4.5)
  • returns: // ► number
  • console.log(typeof "x")
  • returns: // ► string

Binary Operators

  • Binary operators take two values.
  • E.g., + to concatenate is binary.
  • Unary operators take only one value (e.g., typeof).

Booleans

  • Examples of Boolean values are: On/Off; True/False; Yes/No; and OK/Cancel.
  • console.log(3 > 2) ... Asks: "Is 3 greater than 2?"
  • returns: // ► true ... Yes, it is.
  • console.log(3 < 2)
  • returns: // ► false
  • console.log("Aardvark" < "Zoroaster") ... This compares the lengths of the two strings.
  • returns: // ► true ... 'Aardvark' is shorter than 'Zoroaster'.
  • console.log("Itchy" != "Scratchy") ... Asks: "Is 'Itchy' not equal to 'Scratchy' in length?"
  • returns: // ► true ... Yes, it is true that it is not equal.
  • console.log(NaN == NaN) ... Asks: "Is this NaN the same as that NaN?"
  • returns: // ► false ... NaN is not a real number. There is nothing to compare.

Logical Operators

  • && and: If both are true, return true.
  • || or: If one or both are true, return true.
  • ! not: Negates whatever follows.
  • console.log(true && false)
  • returns: // ► false
  • console.log(true && true)
  • returns: // ► true
  • console.log(false || true)
  • returns: // ► true
  • console.log(false || false)
  • returns: // ► false
  • console.log(!true)
  • returns: // ► false

Precedence

  • Precedence determines the Order of Operations for a given line of JavaScript which contains multiple operators:
    • || is the lowest in precedence; it is computed last.
    • && is next.
    • The comparisons == != === !== < > <= >= are next.
    • The remaining operations follow; they are computed first and are highest in precedence.
  • console.log(1 + 1 == 2 && 10 * 10 > 50)
  • returns: // ► true
    • Consider that 2 == 2 && 100 > 50 becomes true == true, which, again, equates to true.

Ternary Operators

  • Ternary Operators, also known as Conditional Operators, use three values each.
  • The left-most (first) value determines which one of the remaining two values will be returned.
    • Example formula: VALUE1 ? VALUE2 : VALUE3
    • If VALUE1 is true then VALUE2 is returned.
    • If VALUE1 is false then VALUE3 is returned.
  • console.log(true ? 1 : 2);
  • returns: // ► 1
  • console.log(false ? 1 : 2);
  • returns: // ► 2

Undefined Values

  • The null and undefined values carry no meaningful information.
  • For many practical purposes they are identical.
  • They denote the absence of any meaningful value.

Automatic Type Conversion

  • Be aware: JavaScript will try to accept any program given to it, even very odd programs:
  • console.log(8 * null)
  • returns: // ► 0
  • console.log("5" - 1)
  • returns: // ► 4
  • console.log("5" + 1)
  • returns: // ► 51
  • console.log("five" * 2)
  • returns: // ► NaN
  • console.log(false == 0)
  • returns: // ► true
  • The heuristics for type conversion vary; e.g., string concatenation will be attempted before addition if both are present.
  • The computation of the comparison operator == changes when given values of two different types. First, JavaScript will try to convert one value type to the other's type.
    • null1 == null2 returns true.
    • null1 == realvalue2 returns false.
  • console.log(null == undefined);
  • returns: // ► true
  • console.log(null == 0);
  • returns: // ► false
  • null can be used with == to test other values and determine whether they have real or null value.
  • 0, NaN, and "" are interpreted as false in Boolean calculations.
  • console.log("" == false);
  • returns: // ► true
  • === is used to determine if A is precisely equal to B.
  • !== is used to determine if A is not precisely equal to B.
  • console.log("" === false);
  • returns: // ► false

Short-Circuiting of Logical Operators

  • If VALUE1 in an ||/or statement is true, only VALUE1 is evaluated before returning true.
  • If VALUE1 in an ||/or statement is false but VALUE2 is true, JavaScript will evaluate both before returning true.
  • console.log(null || "user")
  • returns: // ► user ... Because null is automatically interpreted as false.
  • console.log("Karl" || "user")
  • returns: // ► Karl ... If both are real values; return the first without evaluating the second.
  • If VALUE1 in an &&/and statement is false, only VALUE1 is evaluated before returning false.
  • console.log(true || X)
  • returns: // ► true ... Only VALUE1 is evaluated.
  • console.log(false && X)
  • returns: // ► false ... Again, only VALUE1 is evaluated.
  • 'Short-Circuit Evaluation' can be used for testing.
  • Conditional/Ternary Operators can also do short-circuit evaluation.
  • In Conditional/Ternary Short-Circuit Evaluation, VALUE1 is always evaluated, followed by either VALUE2 or VALUE3, but not both.

NOTE: Any of these operations and code snippets can be tested in Eloquent JavaScript's Code Sandbox. You can also read the book online for free. And don't forget to support the author by buying a paperback copy if you like it or if, like me, you just prefer physically having the book.