Modern JavaScript

# Modern JavaScript

- [ ] [The history and future of JS](https://en.wikipedia.org/wiki/ECMAScript)
- [ ] [Primitives vs reference types](https://blog.bitsrc.io/understanding-javascript-mutation-and-pure-functions-7231cc2180d3)
- [ ] [Var, let, const](https://javascript.info/var)
- [ ] [let example on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let). <-Change that MDN example to use `var` and note the different behavior. `let/const` = block scope.
- [ ] [Const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) default or not? Note that object can be mutated. Will show how to freeze in immutable section.
- [ ] [Template strings](https://babeljs.io/learn-es2015/#ecmascript-2015-features-template-strings)
- [ ] Default arguments - and note that [it must be undefined to apply](https://twitter.com/juancarlito88/status/1002114827647635456)
- [ ] [Destructuring](https://babeljs.io/docs/en/learn/#destructuring)
- [ ] Object destructuring
- [ ] Array destructuring
- [ ] Alias in destructuring
- [ ] Destructure in func signature
- [ ] [Defaults](https://twitter.com/housecor/status/1088413032185765888)
- [ ] Nested destructuring, possible, but can be hard to read (see example in advanced link below)
- [ ] [Conditionally add a property to an object](https://twitter.com/housecor/status/1111710454362054656?s=21)
- [ ] [Advanced destructuring examples](http://blog.jakoblind.no/next-level-es6-react/)
- [ ] [Enhanced object literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer)
- [ ] Object shorthand
- [ ] Function shorthand
- [ ] Object.keys / Object.values
- [ ] [Object Rest/spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
- [ ] [Value vs reference types](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0)
- 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](https://cdn-images-1.medium.com/max/1600/1*43kFc4JJy8DSQiA_zQXZZA.png)
- [ ] [Other tricks](https://blog.bitsrc.io/6-tricks-with-resting-and-spreading-javascript-objects-68d585bdc83)
- [ ] [Classes](https://babeljs.io/learn-es2015/#ecmascript-2015-features-classes)
- [ ] [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [ ] [Solid overview with examples of lexical binding](https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26)
- [ ] [Function expressions and arrows](https://javascript.info/function-expressions-arrows)
- [ ] The `this` keyword
- [ ] Refers to the object that invoked the function. That means we can rely on [these things](https://twitter.com/projshift/status/1182698798260326400?s=21).
- [ ] [Function expressions and arrows](https://javascript.info/function-expressions-arrows)
- [ ] [Properties](http://babeljs.io/docs/plugins/transform-class-properties/)
- [ ] [Nullish coalescing operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) - Compare to logical or (||) and logical and (&&) aka short-circuit operator
- [ ] [Optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) - Use to avoid null reference on nested properties

## ES Modules

- [ ] [ES modules](https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules) vs [CommonJS](https://nodejs.org/docs/latest/api/modules.html) [Simple example](https://stackoverflow.com/a/16522990/26180) - [Video](https://www.youtube.com/watch?v=kTlcu16rSLc&index=23&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
- [ ] Imports
- [ ] Named imports
- [ ] Wildcard imports
- [ ] Aliasing imports via `as`
- [ ] [Dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/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](https://levelup.gitconnected.com/moving-beyond-console-log-8-console-methods-you-should-use-when-debugging-javascript-and-node-25f6ac840ada)

## Native iterators

[Don't confuse these](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)!
- [ ] [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) - Loop over iterables (arrays, strings, and array-like arguments.
- [ ] [for...in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) - Iterate over object properties

## Functional Approaches

- [ ] Functional approaches and immutable data - [Multiple examples in a gist](https://gist.github.com/coryhouse/866d30b20766d662707431436234d2f5)
- [ ] Avoid mutators like [pop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop), [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
- [ ] [Write pure functions](https://en.wikipedia.org/wiki/Pure_function) [Examples and justifications](https://medium.com/dailyjs/functional-js-2-functions-duh-70bf22f87bb8). [More examples](https://medium.com/dailyjs/functional-js-3-state-89d8cc9ebc9e)
- [ ] [Built in array functions](https://www.quora.com/What-is-a-simple-explanation-of-higher-order-functions-and-callbacks-in-JavaScript/answer/Mattias-Petter-Johansson)
- [ ] [find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
- [ ] [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- [ ] [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) - Note, you can [express map and filter, and more using reduce](https://twitter.com/JonathanZWhite/status/997926969646792705)
- [ ] [filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
- [ ] [some](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every) (all match the predicate)
- [ ] [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
- [ ] [array.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) (determines whether an array includes a certain element). Only does a reference check for equality.
- [ ] [array.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries) and [array.keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys) - (useful for iterating over an array keys or entries)
- [ ] [reject](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reject)
- [ ] [Map (key/val pairs - aka dictionary)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#)
- [ ] [Set (unique values)](https://babeljs.io/docs/en/learn/#map-set-weakmap-weakset) Also, [MDN REPL for Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
- [ ] [Partial application](https://medium.com/@rossmichaelm/functional-techniques-with-react-509ea3c52ea)
- [ ] [Codesandbox example](https://codesandbox.io/s/wizardly-curie-8v2xo)

## Copying Objects and Immutable data Structures

- [ ] [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
- [ ] Object Spread
- [ ] [Object.freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
- [ ] [Frozen enum pattern](https://twitter.com/housecor/status/1095718479666270208)
- [ ] [Symbols](https://babeljs.io/docs/en/learn/#symbols)
- [ ] Tools
- [ ] [Immer](https://github.com/mweststrate/immer)
- [ ] [Seamless immutable](https://github.com/rtfeldman/seamless-immutable)
- [ ] [ImmutableJS](https://immutable-js.github.io/immutable-js/)
- [ ] [Ramda](http://ramdajs.com)
- [ ] [LoDash FP](https://github.com/lodash/lodash/wiki/FP-Guide)

## Async Patterns

- [ ] [Async patterns](https://stackify.com/async-javascript-approaches/)
- [ ] [Callbacks](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
- [ ] [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
- [ ] [Promise.race](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race) - Useful for timing out requests after x seconds.
- [ ] Declare catch or it may swallow exceptions!
- [ ] [finally](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally) was added in ES2018 - always runs, regardless of resolve or rejection.
- [ ] [allSettled](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) - Like promises.all, but the `.then` runs after all promises are settled, regardless of resolved or rejected.
- [ ] [Async/Await](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9)
- [ ] [Async cheatsheet](https://frontarm.com/async-cheatsheet.pdf)
- [ ] 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](http://thecodebarbarian.com/async-await-error-handling-in-javascript.htm)
- [ ] Tip: Must await each promise. [If you return, the rejected promise will be unhandled](https://codesandbox.io/s/snowy-flower-ivybc).
- [ ] On arrows, put `async` keyword in front of arg list
- [ ] Generators

## Regex
- [ ] Regex [named captures](https://twitter.com/housecor/status/960153700206510082)

## Other Patterns
- [ ] [Required parameters](https://buttondown.email/kentcdodds/archive/7bb455de-c579-41e9-a972-2897f07af48f)

## Summary
- [ ] [Features in ES2016, 2017, 2018](https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e)
- [ ] [Functional Programming Fundamentals](https://www.matthewgerstman.com/functional-programming-fundamentals/)
- [ ] [Summary of modern JS features used in React](https://www.robinwieruch.de/javascript-fundamentals-react-requirements/)
- [ ] [Coding challenge](https://codesandbox.io/s/kykzj9m93)