Enough Modern JavaScript

  • No need to use ; to end the line
  • {} objects [] arrays
  • if () { ... } else { ... }
  • null is a value missing intentionally
  • undefined is a value missing unintentionally
  • === to compare things
  • Arithmetic on undefined returns NaN
  • Operation on a NaN returns NaN
  • isNaN(undefined) is true
  • Number.isNaN is the fixed version of isNaN Disallow specific global variables
  • Regular functions: function f() { ... }.
  • Arrow functions: const f = () => { ... }. (no this, will find nearest function)
  • Regular Expression

Debugging

Debug with debugger, console.log(), console.trace().

Searching DOM

  • document.querySelector
  • document.getElementById

Node

  • node.getAttribute

DOM Manipulation

  • insertAdjacentHTML to add HTML beforebegin/afterbegin/beforeend/afterend to any element

Turn on Strict mode

'use strict' turn on the Stricit mode.

  • Octal literals not allowed.
  • Cannot introduce global variable.
  • delete can only remove key from object.

Explicit Return

The return value of function must use return:

function identity(x) {
  return x
}

Object

Object.keys to list all keys of given object.

Retrive value

const object = {a: 1, b: 2, c: 3, d: 4}

object.a
1

object['a']
1

Computed Property

const name = 'Juanito'
const loginCounts = {[name]: 5}

loginCounts.Juanito
5
const users = [
  { name: 'Juanito', age: 15 },
  { name: 'Bella', age: 16 },
]

function age(user) {
  return { [user.name]: user.age }
}

age(users[0])

Shorthand syntaxes

const name = 'Juanito'
const age = 36
const user = {name, age};

[user.name, user.age]
['Juanito', 36]

Getter function

const user = {
  get name() { return 'Juanito' }
}

user.name
'Juanito'

Setter function

const user = {
  realName: 'Juan',
  set name(newName) { this.realName = newName }
}

user.name = 'Juanito'
user.realName
'Juanito'

let and var

Dont use var, use let (can change) and const (cannot change).

let is properly scoped inside block of code { ... }.
const variable cannot be redefined. But you can still mutate the variable elements. E.g. change the elements of const-defined array
const will find the nearest definitions.

On let vs const.

Array

  • Use push to add an element to array
  • Use join to join elements of array
  • Use flat to flatten one level; flat(Infinity) to flat recursively Source

Array‘s type is 'object' instead of 'array'.

const obj = {a: 1, b: 2}
const keys = []
for (const key in obj) {
  keys.push(key)
}

typeof keys
=> 'object'

Array looks like an implcity object where key is the index:

Object.keys(['a', 'b', 'c'])
['0', '1', '2']

Prefer of over in of for loop

ESLint rule: Require Guarding for-in (guard-for-in)

for (.. in ..) {} iterates over keys in array

Skips undefined and null elements.

const keys = []
const letters = []
letters[1] = 'a'
for (const key in letters) {
  keys.push(key)
}

keys
['1']

for (.. of ..) {} iterates over values in array

Returns undefined for undefined or null elements.

const keys = []
const letters = []
letters[1] = 'a'
for (const key in letters) {
  keys.push(key)
}

keys
[undefined, '1']

Strings

'str'
"str"
`str` // template literals

str can do interpolation:

`1+1=${1+1}`

${1+1} calls toString()

template literals can have newline:

const signoff = `
  Best,
  Juanito
`

dedent can remove leading whitespaces.

toString()

[1, 2].toString()
'1,2'


({a: 1}).toString()
'[object Object]'

Function

Example of sum:

function sum(...numbers) {
  return numbers.reduce((x, y) => x + y, 0)
}

Rest arguments

Officially called spread operator.

Must come last and only used once in function signature, comes after positional arguments.

f(...args) {

}

Pass in rest args to function

function add(x, y) {
  return x+y
}

const numbers = [1, 9]
add(...numbers)

func generators

The * says numbers function is a generator.

function* numbers() {
  yield 1
  yield 2
}

for (const n of numbers) {
  console.log(n)
}

Array.from(numbers)
=> [1, 2]

Deconstruct Array

const letters = ['a', 'b']
const [a, b] = letters

// Skip value
const letters = ['a', 'b', 'c']
const [a, , c] = letters
['a', 'c']

// Supply value when missing
const letters = ['a', 'b']
const [a, b, c='C'] = letters
['a', 'b', 'C']

// Deconstruct over Supplied value
const letters = ['a', 'b', 'c']
const [a, b, c='C'] = letters
['a', 'b', 'c']

// String can also be deconstructed
const letters = 'xy'
const [x, y] = letters
x
// => 'x'