Eloquent JavaScript – Chapter 1: Values, Types, and Operators; Rough Notes

  • Data is stored as bits – any kind of two-valued things
  • Bits – usually described as zeros and ones
  • Inside the computer, bits – high or low electrical charge, a strong or weak signal, a shiny or dull spot on a CD
  • “Any piece of discrete information can be reduced to a sequence of zeros and ones and thus represented in bits” {?}

NB: Discrete data can only take distinct values; can be numeric or categorical (male or female, green or yellow) –stackexchange 

Example: Show the number 13 in bits

-Have only 2 digits (0 and 1)
-The weight of each digit increases by a factor of 2 from right to left

13 in bits

-The binary number 00001101, or 8+4+1, is the decimal number 13

NB: a binary number is expressed in the binary numeral system or base-2 numeral system which represents numeric values using two different symbols: usually 0 and 1 –Wikipedia 

Values

  • modern computer has > 30 billion bits in its volatile data storage; more in nonvolatile data storage

NB: Volatile memory is computer memory that requires power to maintain the stored info; stored data is lost if the power is off or interrupted —Wikipedia 

  • hard to work with this large quantity of bits
  • Solution: separate bits into chunks (called values) that represent pieces of information
  • Every value has a type that determines its role
  • The 6 basic types of values in JS:
    -numbers
    -strings
    -Booleans
    -objects
    -functions
    -undefined values
  • To create a value — invoke its name
  • Every value has to be stored somewhere
  • Might run out of bits if you use many, many values simultaneously
  • “When you no longer use a value, it will dissipate {?}, leaving behind its bits to be recycled as building material for the next values”

 

Numbers

[make more concise]

  • The value of the number type is a numeric value
  • JS uses 64 bits to store a single number value
  • The amount of different numbers that can be represented is limited
  • With 64 binary digits, 264 different numbers can be represented
  • Computer memory used to be smaller; 8 bits or 16 bits were used to represent numbers
  • Easy to overflow such small numbers – end up with a number that did not fit into the given amount of bits
  • Today, computers have plenty of memory, so overflow occurs only when dealing with astronomical numbers
  • Bits can store negative numbers (one bit indicates the sign of the number)
  • Nonwhole numbers must also be represented (some of the bits store the position of the decimal point)
  • Calculations with integers (whole numbers) are precise
  • Treat fractional digital numbers as ap and proximations, not as precise values (because fractions cannot be expressed by a finite number of decimal digits — and there is only 64 bits available to store them)

 

Arithmetic

  • 100 + 4*11
  • + and * are operators 
  • + represents addition
  • * represents multiplication
  • <<value>> <<operator>> <<value>>
  • An operator between two values applies itself to those values to produce a new value
  • Order of operator application (precedence) is determined by BEDMAS
  • Apply Left to Right if there are multiple operators with the same precedence
  • % : represents the remainder operation — known as modulo or remainder 
  • X % Y : the remainder of dividing X by Y
  • Example: 314 % 100 produces 14, 144 % 12 produces 0 

 

Special Numbers

3 JS values considered numbers but don’t behave like normal numbers:

  1. Infinity : positive infinity
  2. -Infinity : negative infinity
  3. NaN : “Not a Number” – a value of the number type; will get NaN when i.e.  0/0 (zero divided by zero), Infinity – Infinity, any numeric operation that does not yield a precise result

 

Strings

  • string – a basic data type
  • represent text
  • content enclosed in quotes (single, double – but start and end quote must match)
  • i.e. “Hello there!”, ‘On the way to the moon, hold up.’
  •  Characters that are difficult to place within quotes: quotes, newlines (characters you get when you press Enter – basically spaces on a new line)
  • Solution: escaping the character — using: backslash (\)  — when this is inside a quoted text,  it indicates the the character after it has a special meaning
  • i.e. ‘She\’s my sister\’s dog’ means the quotes are a part of the string
  • i.e. ‘ \n ‘ means a newline
  • i.e. ‘ \t ‘ means a tab character
  • i.e. “This is the first line\nAnd this is the second”
    Actual  text:
    This is the first line
    And this is the second
  • When you want a backslash in a string to be just a backslash:
    use \\ (two backslashes)

Example:

console.log(“A newline character is written like \”\\n\”.”)
// -> A newline character is written like “\n”.

  • Strings cannot be divided, multiplied, or subtracted
  • + operator used on strings to concatenate – combines two strings together

Example:

console.log(“con” + “cat” + “e” + “nate”)
// -> concatenate               [not enclosed by single quotes like in Python]

 

Unary Operators

unary operator: operator that takes\operates on one value

binary operator: operator that uses two values

ternary operator: operator that operates on three values

typeof: an unary operator that produces a string value naming the type of the value given to it

Example 1: 
console.log(typeof 4.5)
//-> number

Example 2:
console.log(typeof Infinity)
//-> number

Example 3:
console.log(typeof NaN)
//->number

Example 4:
console.log(typeof 3 > 2)
//-> false

Example 5:
console.log(typeof “x”)
//-> string

NB1: console.log() outputs a message to the Web Console (a way for us to see the result of evaluating something)

NB2: The minus operator (-) can be used as both a binary and an unary operator

Example 6: 
console.log(-(10-2))
//-> -8

 

Boolean Values

Distinguish between two possibilities i.e. yes and no, on and off, …

Boolean type: has two values — true and false

Comparisons

A way to produce Boolean values

Example 1: 
console.log(3 > 2)
//-> true                                     Indicates 3 is greater than 2

Example 2: 
console.log(3 < 2)
//-> false

 

Strings can be compared to each other :

  • strings are ordered alphabetically i.e. “a” < “z”
  • uppercase letters are “less” than lowercase letters i.e. “Z” < “a”
  • non-alphabetic characters (!, -, ?, etc.) are included in the ordering i.e. “.” > “!”,  “?” > “!”
  • comparison is based on the Unicode standard : assigns a number to every character ever needed, including characters from other languages i.e. Japanese, Arabic, Greek, …
  • comparing strings : Left to Right, compare numeric codes of characters one by one
  • other comparison operators:
    >=    greater than or equal to 
    <=    less than or equal to
    ==    equal to
    !=     not equal to
  • one value in JS is not equal to itself : NaN (“not a number”)

Example: 
console.log(NaN == NaN)
//-> false

NB: NaN denotes the result of a nonsensical computation; therefore it isn’t equal to the result of other nonsensical computations.

 

Logical Operators

 Operators on Boolean values

and, or, not
used to “reason” about Booleans 

 

&& represents logical and 
-a binary operator
-its result is true iff both values given to it are true

Example 1:
console.log(true && false)
//-> false

Example 2: 
console.log(true && true)
//-> true

|| represents logical or
-a binary operator
– proudces true if either of the values given to it is true

Example 1:
console.log(false || true)
//-> true

Example 2:
console.log(false || false)
//-> false

! represents not 
-an unary operator
-flips the value given to it

Example 1: 
console.log(!true)
//-> false

Example 2: 
console.log(!false)
//-> true

 

Order of Precedence 

Arithmetic operators (highest)
Comparison operators
&&
|| (lowest)

NB: This order minimizes the use of parentheses.

Example:
console.log(1+1 == 2 && 10*10 > 50)
// 2 == 2 && 100 > 50
// true && true
//-> true

<<value1>> ? <<value2>> : <<value3>>
-represents the conditional/ternary operator
– a ternary operator
-written with a question mark and a colon
– The first value “picks” which of the other two values will come out :
-if true, the second value is chosen
-if false, the third value is chosen

NB: << … >> just represents that a value is written; <<…>> itself is not included in the value

Example 1:
console.log(true ? 1 : 2)
//-> 1

Example 2: 
console.log(false ? 1 : 2)
//-> 2

Undefined Values

Two special values:

null

undefined

represent the absence of a meaningful value (carry no information)

NB1: operations that don’t produce a meaningful value yield undefined because they have to yield some value

NB2:
-there is a difference in meaning between undefined and null (but it doesn’t matter most of the time)
-this is an accident of JS’ design
-treat them as interchangeable (for now)

Automatic Type Conversion

Here we’ll see how JS accepts almost any program given to it, even if they are odd.

type coercion:
– an operator is applied to the “wrong” type of value i.e. “three” + 3
-JS converts that value to the type it wants
-JS uses a set of unpredictable rules to do this

Example 1: 
console.log(8*null)
//-> 0                             null becomes 0

Example 2: 
console.log(“5” – 1)
//-> 4                             string -> number ; “5” becomes 5

Example 3: 
console.log(“5” + 1)
//-> 51                     + tries string concatenation before numeric addition; 1 converted to “1”

Example 4:
console.log(“five” * 2)
//-> NaN

Example 5:
console.log(false == 0)
//-> true

Regarding Ex. 4: When something that doesn’t map to a number i.e. “five”, “undefined”, is converted to a number, the value NaN is produced.

NB: Further arithmetic operations on NaN keep producing NaN.

 

Comparing values of different types using == 

  • most cases: JS converts one of the values to the other value’s type
  • For true to be produced —
    if null is on one side, undefined must be on the other and vice versa

Example 1:
console.log(null == undefined)
//-> true

Example 2: 
console.log(undefined == null)
//-> true

Example 3: 
console.log(null == 0)
//-> false

Example 4:
console.log(undefined == 1)
//-> false

NB: to test whether a value has a real value instead of null or undefined, compare it to null with the == or != operator.

QUESTION: Can you compare it to undefined too?

 

Rules for converting strings and numbers to Boolean values:

  • 0, NaN, the empty string (“”) count as false
  • all other values count as true

Ex. 1: 
console.log(0 == false)
//-> true

Ex. 2: 
console.log(“” == false)
//-> true

For these cases, automatic type conversion is unwanted.

To test whether something refers to the precise value false: 

  • Use two extra operators:
=== 
!==

=== tests whether a value is precisely equal to the other

!== tests whether a value is not precisely equal to the other

Ex: 
console.log(“” === false)
//-> false

In this example, “” counts as false, but it is not precisely equal to the value false.

NB: Use the three-character comparison operators to make certain that both sides are the same type.

QUESTION: Because automatic type conversion could change the type of a value in the comparison?  

 

Short Circuiting of Logical Operators

  • Logical operators && and || handle values of different types strangely
  • They will convert the value on their left side to Boolean type (to decide what to do)
  • Depending on the operator and the result of that conversion, either the original LH-value or RH-value is returned

|| operator
– returns the value to its left when that can be converted to true
-returns RH-value otherwise

Ex. 1:
console.log(null || “user”)
//-> user

Ex. 2
console.log(“Karl” || “user”)
Karl

NB: Therefore || operator can be used as a way to fall back on a default value i.e. give it an expression that might produce an empty value on the left, the value on the right will be used as a replacement

&& operator
– works the other way around
-when LH-value is something that converts to false, it returns that original LH-value
-otherwise, RH-value is returned

Property of && and || operators:
Short-circuit evaluation: expression on right evaluated only when necessary

Ex. 1: true || X
-LH-value is true so the result is true
-X is never evaluated, no what X is

Ex. 2: false && X
-result is false
-X is ignored

Conditional operator
-works similarly
-first expression is always evaluated
-second or third value (the one not picked) is ignored {?}

 

Summary

We made some values and applied operators to them to get new values.

  • Went through four types of JS values: numbers, strings, Booleans, undefined values
  • Values are created by typing in their name (true, false, null, undefined) or value (“abc”, 13)
  • Can combine and transform values with operators
  • Binary operators for
    -arithmetic (+, -, *, /, %)
    -string concatenation (+)
    -comparison (==, !=, ===, !==, <, >, <=, >=)
    -logic (&&, ||)
  • Unary operators:
    -(!) to negate logically
    -(-) to negate a number
    -(typeof) to find a value’s type
  • Ternary operator:
    ( ? : ) – to pick one of two values based on a third value
  • NaN (“not a number”) is the only JS value not equal to itself, because the result of a nonsensical computation cannot equal the result of another nonsensical computation

 

Progress: We can now use JS as a pocket calculator. LOL FML.

 

Eloquent Javascript: Intro – What is Javascript? ;Rough Notes

Resource: Eloquent Javascript, 2nd Edition by Marijn Haverbeke

What is Javascript?

  •  JavaScript (henceforth JS) created in 1995 to add programs to web pages in the Netscape Navigator browser
  • Major graphical web browsers have since adopted JS
  • JS has made modern web applications possible
  • “Modern web applications = applications with which you can interact directly without doing a reload for every action”
  • Also used in websites to provide interactivity

NB: Netscape – a series of web browsers produced by Netscape Communications Corporation (now a subsidiary of AOL); original browser once the dominant browser in terms of usage share (proportion of visitors to web sites that use a certain web browser), but lost to Internet Explorer in the first browser war (competition for dominance in the usage share of web browsers) (first war — Microsoft’s Internet Explorer vs. Netscape’s Navigator)
—Wikipedia: Netscape (web browser)

  • ECMAScript standard : a standard document that describes the way JS should work to ensure that software claiming to support JS really does support JS ; named after Ecma International, the organization that did the standardization
  • ECMAScript and JS can be used interchangeably (two names for the same language)

Disadvantages of JS

  • JS is “ridiculously liberal in what it allows” — almost any command is accepted, but is then interpreted differently
  • Idea behind this design: make programming in JS easier for beginners
  • Reality: Makes finding program errors harder because the system will not point them out to you

Advantages of JS

  • Flexibility allows for many techniques that are impossible in more rigid languages

Different versions

  • Version 3 — widely supported version btwn ~ 2000-2010, the time of JS’s ascent to dominance
  • Version 4 — “changing a living, widely used language … turned out to be politically difficult” — work abandoned in 2008
  • Version 5 — came out in 2009
  • Version 5.1 — 2011 — Editorial changes —w3schools
  • Version 6 — 2015 —  Added classes and modules —w3schools
  • Version 7 — 2016 — added exponential operator (**); added Array.prototype.includes –w3schools
  • This book’s edition came out in 2014 so it will focus on Version 5, which all major browsers support; we should focus on using Version 6, which all major browsers are in the process of supporting

 

  • Platforms on which JS is used: Web browsers, databases i.e. MongoDB, CouchDB (use JS as their scripting and query language)
  • Several platforms for desktop and server programming i.e. notably, Node.js, provides a powerful environment for programming JS outside of the browser