Modern JavaScript

[coryhouse]

Modern JavaScript

• The history and future of JS
• Primitives vs reference types
• Var, let, const
  • let example on MDN. <-Change that MDN example to use var and note the different behavior. let/const = block scope.
  • Const default or not? Note that object can be mutated. Will show how to freeze in immutable section.
• Template strings
• Default arguments - and note that it must be undefined to apply
• Destructuring
  • Object destructuring
  • Array destructuring
  • Alias in destructuring
  • Destructure in func signature
  • Defaults
  • Nested destructuring, possible, but can be hard to read (see example in advanced link below)
  • Conditionally add a property to an object
  • Advanced destructuring examples
• Enhanced object literals
  • Object shorthand
  • Function shorthand
• Object.keys / Object.values
• Object Rest/spread
  • Value vs reference types
  • Extract properties that aren't already extracted
  • Remove unwanted items by extracting (via destructuring) what you don't want. Spread will contain the remaining items. Example
  • Other tricks
• Classes
• Arrow functions
  • Solid overview with examples of lexical binding
  • Function expressions and arrows
• The this keyword
  • Refers to the object that invoked the function. That means we can rely on these things.
  • Function expressions and arrows
• Properties
• Nullish coalescing operator - Compare to logical or (||) and logical and (&&) aka short-circuit operator
• Optional chaining - Use to avoid null reference on nested properties

ES Modules

• ES modules vs CommonJS Simple example - Video
• Imports
  • Named imports
  • Wildcard imports
  • Aliasing imports via as
  • Dynamic import
• Exports
  • Default exports
  • Export * from a module
  • Exporting multiple functions at the bottom of the file (looks like an object, but technically isn't).
• Barrel pattern
• Show what these look like in Babel
• ES modules must be statically analyzable (for tree shaking, autocomplete, and compile-time checks like eslint-plugin-import 👍)

Debugging

• Use debugger to pause
• console.table to display object in table
• console.timer/console.timerEnd to check perf
• console.assert to log a specific message to the console if an expected value isn't true
• console.count/console.countReset to count the number of times a certain string has been logged.
• Visual examples of the console features above

Native iterators

Don't confuse these!

• for...of - Loop over iterables (arrays, strings, and array-like arguments.
• for...in - Iterate over object properties

Functional Approaches

• Functional approaches and immutable data - Multiple examples in a gist
• Avoid mutators like pop, push
• Write pure functions Examples and justifications. More examples
• Built in array functions
• find
• map
• reduce - Note, you can express map and filter, and more using reduce
• filter
• some (contains at least one) - Like a foreach that you can break out of early since once a true is found it will return early.
• every (all match the predicate)
• concat
• array.includes (determines whether an array includes a certain element). Only does a reference check for equality.
• array.entries and array.keys - (useful for iterating over an array keys or entries)
• reject
• Map (key/val pairs - aka dictionary)
• Set (unique values) Also, MDN REPL for Set
• Partial application
  • Codesandbox example

Copying Objects and Immutable data Structures

• Object.assign
• Object Spread
• Object.freeze
  • Frozen enum pattern
  • Symbols
• Tools
  • Immer
  • Seamless immutable
  • ImmutableJS
  • Ramda
  • LoDash FP

Async Patterns

• Async patterns
  • Callbacks
  • Promises - A promise is a container that you get immediately for a value that you get eventually. Objects that represent the outcome of an event that may not yet have occurred.
    • Promise.all
    • Promise.race - Useful for timing out requests after x seconds.
    • Declare catch or it may swallow exceptions!
    • finally was added in ES2018 - always runs, regardless of resolve or rejection.
  • allSettled - Like promises.all, but the .then runs after all promises are settled, regardless of resolved or rejected.
  • Async/Await
• Async cheatsheet
  • Syntax sugar over promises - can mix and match with promises. Can use .then to handle response from an async func. And can use .catch to catch an error thrown from an async func.
  • Error handling via try/catch
    • Tip: Must await each promise. If you return, the rejected promise will be unhandled.
  • On arrows, put async keyword in front of arg list
  • Generators

Regex

• Regex named captures

Other Patterns

• Required parameters

Summary

• Features in ES2016, 2017, 2018
• Functional Programming Fundamentals
• Summary of modern JS features used in React
• Coding challenge