What is JavaScript?

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

About JavaScript

Created in 1995 by Brendan Eich as LiveScript.
Renamed JavaScript due to the popularity of you-know-what.
Runs in every browser.
Node.js runs on servers.
Standardized as ECMAScript since 1997.
Douglas Cockroft “JavaScript: The Good Parts” 2008
ECMAScript 6, solid OO, modules, many other useful features 2015
Now at ECMAScript 2019.
Old JavaScript: Some great ideas, lots of cruft.
Modern JavaScript: Great ideas alive and kicking, cruft (is gone|can be avoided).

Running JavaScript

Run in an HTML file.

<html>
   <head>
      <title>My First JavaScript Program</title>
      <script type="text/javascript">
         const a = 6
         const b = 7
         window.alert(a * b)
      </script>
   </head>
   <body></body>
</html>

Run in the browser console.
- Open the development tools and the console tab.
Run with Node.js
- Download from https://nodejs.org/ and install.

Running JavaScript - Demo

Types and Variables

JavaScript Types

Numbers
The Boolean values false and true
The special values null and undefined
Strings
Symbols
- All of the above are primitive types.
Objects
typeof operator yields string describing type:
```
typeof 42 // Yields 'number'
```

Variable Declarations

let counter = 0
const PI = 3.141592653589793

Variables don't have types:
```
counter = 'zero'
```

A const array or object can be mutated:

const numbers = [1, 2, 7, 9]
numbers[2] = 4 // Ok

Prefer const over let
Don't use var
Semicolons are optional.

node

Strict Mode

Use “strict mode” to eliminate obsolete/dangerous features.
Without strict mode, undefined variables are automatically created in “global” scope:
```
coutner = 1
```
In strict mode, using an undeclared variable throws ReferenceError
Add 'use strict' at the top of each source file.
For REPL, start node with --use-strict command line option.
In this video course, I always use strict mode.
Note: Safe to use typeof with an undeclared variable:
```
typeof coutner // Yields 'undefined'
```

node

`null`, `undefined`, `NaN`

Three “bottom” values!
An uninitialized variable is undefined.
A function returns undefined if it exits without a return statement.
The null value denotes an “intentionally” absent value.
Is this a useful distinction?
My suggestion: Don't use null
The number NaN denotes “Not a number”.
Caution: Inside a function, you can declare a local variable named undefined (or NaN).

Numbers

Numbers are double-precision floating-point numbers.
Can use integers between Number.MIN_SAFE_INTEGER (-2⁵³+1 or -9,007,199,254,740,991) and Number.MAX_SAFE_INTEGER (2⁵³-1 or 9,007,199,254,740,991).
Some roundoff is unavoidable: 0.1 + 0.2 is 0.30000000000000004
The parseInt and parseFloat functions convert strings to numbers:

const notQuitePi = parseFloat('3.14')

Note that JavaScript has both functions (parseFloat) and methods (console.log).
Special number values Infinity, -Infinity, NaN.
parseFloat('pie') is NaN.
BigInt have suffix n: 18889465931478580854784n

node

Arithmetic Operators

Usual operators + - * /
The / operator always yields a floating-point result: 1 / 2 is 0.5
% produces the remainder: 42 % 10 is 2, 1.1 % 0.3 is 0.2
** raises to a power: 2 ** 10 is 1024, 2 ** 0.5 is 1.4142135623730951
If an operand is NaN, so is the result: 10 * NaN is NaN
Combine operator and assignment:
```
counter += 10
```

Increment and decrement operators:

counter++
const enigma = --counter // No longer considered good style

Don't mix operand types: '3' * true

+ concatenates strings:

'Agent ' + counter // Non-string argument is converted to string

Type Conversions

Quick, what is ([] + [3]) * true?
Don't ask such questions.

Value	To Number	To String
A number	Itself	A string containing the digits of the number
A string containing the digits of a number	The number value	Itself
The empty string `''`	`0`	`''`
Any other string	`NaN`	Itself
`false`	`0`	`'false'`
`true`	`1`	`'true'`
`null`	`0`	`'null'`
`undefined`	`NaN`	`'undefined'`
The empty array `[]`	0	`''`
An array containing a single number	The number	A string containing the digits of the number
Other arrays	`NaN`	The elements as strings, joined by commas
Objects	Generally, `NaN`, but can be customized	Generally, `'[object Object]'`, but can be customized

Strings

String Literals

Delimiters are single or double quotes: 'Hello' or "Hello"
Backslash escapes: '\\\'\'\\\n' contains \''\ and newline.
Strings can contain arbitrary Unicode:
```
const greeting = 'Hello 🌐'
```
If you must keep your source files in ASCII, use \u{...} for code points:
```
const greeting = 'Hello \u{1F310}'
```
Strings are encoded in UTF-16.

Caution: Unicode code points > U+FFFF require two code units.

greeting.length // 8
greeting[6] // Half of the UTF-16 code for 🌐

Template Literals

Backtick delimiters, embedded expressions:

const destination = 'world'
const greeting = `Hello, ${destination.toUpperCase()}!` // 'Hello, WORLD!'

Can nest templates inside ${...}:

greeting = `Hello, ${firstname.length > 0 ? `${firstname[0]}. ` : '' } ${lastname}`

Multiline strings:

greeting = `<div>Hello</div>
<div>${destination}</div>
`

Escape ` $ \ with backslashes.
In a raw string, \ only escape ` $:
```
path = String.raw`C:\Windows\System`
```

Objects and Arrays

Objects

JavaScript object = set of properties:

const harry = { name: 'Harry Smith', age: 42 }

Not like an OO object: No encapsulation, no behavior.
Access property value with dot notation:
```
harry.age = 39
```
Can add and remove properties:
```
harry.salary = 90000
delete harry.age
```
Accessing a nonexistent property yields undefined:
```
const boss = harry.supervisor // undefined
```

Property names can be computed:

const field = 'Age'
const harrysAge = harry[field.toLowerCase()]

Object Literal Syntax

If value is omitted, variable with the same name is used:

const age = 42
const harry = { name: 'Harry Smith', age } // Same as age: age

Use string literals for property names that aren't identifiers:

const harry = { name: 'Harry Smith', 'favorite beer': 'IPA' }
harry['favorite beer'] = 'Lager' // Can't use dot notation to access property

Use brackets for computed property names:

const harry = { name: 'Harry Smith', [field.toLowercase()] : 42 }

Ok to have trailing comma: { name: 'Harry Smith', age: 42, }

Caution: Sometimes, a { is parsed as the beginning of a block statement, not an object literal:

{} - 1 // An empty block statement, followed by -1
1 - {} // 1 - an empty object, yielding NaN

Arrays

Array = object with property names '0', '1', '2', and so on.

Array literal:

const numbers = [1, 2, 3, 'many'] // Element types need not match

Need to use bracket notation to access elements:

numbers['2'] // 3
numbers[2] // Also 3—bracket operand is converted to string

Can leave some elements undefined:

const someNumbers = [, 2, , 9] // someNumbers[0] is undefined

Trailing comma does not denote an undefined element:

const developers = [
  'Harry Smith',
  'Sally Lee',
  // Add more elements above
]

length is one more than the highest index: someNumbers.length is 4.

More About Arrays

Arrays are objects, so you can add arbitrary properties:
```
numbers.lucky = true
```
typeof returns 'object' for arrays.
Use Array.isArray(obj) to test whether obj is an array.
When an array is converted to a string, all elements are joined with commas:
```
'' + [1, 2, 3] // Yields '1,2,3'
```

Use arrays of arrays for multi-dimensional arrays:

const melancholyMagicSquare = [
  [16, 3, 2, 13],
  [5, 10, 11, 8],
  [9, 6, 7, 12],
  [4, 15, 14, 1]
]

Use two bracket pairs to access an element:

melancholyMagicSquare[1][2] // Yields 11

JSON

JSON (JavaScript object notation): Text format for exchanging object data between applications.

Example:

{ "name": "Harry Smith", "age": 42, "lucky numbers": [17, 29], "lucky": false }

Recipient applications don't have to be written in JavaScript.
Property names enclosed in double quotes.
Property values are numbers, strings, true, false, null, arrays, and objects.
No trailing commas, skipped elements, undefined values.
Library functions JSON.stringify(obj), JSON.parse(str)

Sometimes used for logging:

console.log(`harry=${JSON.stringify(harry)}`)
  // console.log(`harry=${harry}`) yields useless  harry=[object Object]

Simpler remedy:

console.log('harry=', harry)
console.log({harry})

Destructuring

Destructuring Arrays

Convenient syntax for fetching multiple elements:
```
let [first, second] = numbers
```
Declares and initializes two variables, first and second

Shortcut for:

let first = numbers[0]
let second = numbers[1]

Without let, can set existing variables:
```
[second, first] = numbers 
```
Can swap two variables as:
```
[x, y] = [y, x]
```
Right hand side is an array literal, left hand side is “syntactic sugar”.

Capture remaining elements with “rest” operator:

[first, second, ...others] = numbers // others is an array holding the rest

If numbers is [42], second is undefined and others is []

Destructuring Objects

Use property names instead of array positions:

const harry = { name: 'Harry', age: 42 }
let { name: harrysName, age: harrysAge } = harry
  // harrysName is harry.name, harrysAge is harry.age

Declares and initializes two variables harrysName, harrysAge
Left hand side is not an object literal—syntactic sugar.
Common case—variable name = property name:
```
let { name, age } = harry
```
Declares and initializes two variables name, age
Rest operator captures remaining properties into an object:
```
let { name, ...rest } = harry
```

Destructuring with Defaults

Default is used if there is no matching property, or its value is undefined:

let { nickname = 'None' } = harry
  // Sets nickname to 'None' since harry has no nickname property

The default expressions can make use of previously set variables:

let { name, nickname = name } = harry
  // Both name and nickname are set to harry.name

Typical application: Defaults for configuration.

const config = ... // For example { separator: '; ' }
const { separator = ',', leftDelimiter = '[', rightDelimiter = ']' } = config

Much more concise than looking up each property and using the default if it is absent.

Complex Destructuring

Caution: If you destructure into existing variables, use parentheses:

({ name, age }) = sally // Without (...), the { would start a block

Computed property names are supported:

const field = 'Age'
{ [field.toLowerCase()]: value } = harry
  // Sets value to harry[field.toLowerCase()]

You can destructure nested objects:

const harry = { name: 'Harry', birthday: { day: 14, month: 3, year: 2000 } }
const { birthday: { year: harrysBirthYear } } = harry
  // Declares the variable harrysBirthYear and initializes it to 2000

Destructuring syntax is entirely optional—don't use it if it is too confusing.

What is JavaScript?

About JavaScript

Running JavaScript

Running JavaScript - Demo

Types and Variables

JavaScript Types

Variable Declarations

node

Strict Mode

node

null, undefined, NaN

Numbers

Numbers

node

Arithmetic Operators

Type Conversions

Strings

String Literals

Template Literals

Objects and Arrays

Objects

Object Literal Syntax

Arrays

More About Arrays

JSON

Destructuring

Destructuring Arrays

Destructuring Objects

Destructuring with Defaults

Complex Destructuring

`null`, `undefined`, `NaN`