Ideas for JS quick bytes

A few ideas for quick videos on some JS and programming fundamentals.

* **Spread operator** - The spread operator has proven to be really useful in a pretty wide range of programming, especially when working with arrays. Instead of looking up whether you want `slice` or `splice` for the 800th time on MDN, you can just spread your inner array `['head', ...otherParts, 'toes']`. Similarly, you don't have to remember all the caveats for `function.apply()`! You can just call it with a spread `someFunc(...myValues)`.
* **Optional Chaining** - Tired of old fashioned `&&` operators making your `if` statements huge? Get `Cannot find property x on undefined` every other time you run your code? *Optional chaining* to the rescue! Instead of writing a bunch of logical operators for each level of an object, you can use a `?` for any property that doesn't exist `user?.images?.small?.url`.
* **`for...of revisit`** - I know there is already a `for...of` loop video on coding train, but `for...of` has a bunch more uses than just arrays! You can use `for...of` to loop over any iterable, including strings, `Map`s `Set`s and even generator functions (crazy). Not only that, but if you want to go way into the deep end, you can do `for await...of` which allows you to iterate over async iterables like async generators and streams.
* **Proxy Objects** - I feel like proxy objects haven't gotten enough love from the community. A proxy object lets you make an object that can stand in for another object (OBJECTCEPTION! ) The big difference with proxies is that you can control what properties are accessible, and how they can be changed. The usage of proxies is pretty subtle, but some simple examples include object field validation (`{age: 10000} is not a valid age`) and simple immutability `imm = new Proxy(obj, {set: function () {return null;})`
* **Currying / Partial** - There are lots of times when I know something about the function I want to call before I'm ready to call it, in these cases it's useful to be able to partially apply that function. For example, I may decide that I want a rectangle to be at position <200, 100>, but I don't know how big it should be. With PFA, I can do something like `myRect = partial(rect, 200, 100)`. Then when I know the size I can just use `myRect(100, 320)`. The implementation in JS can wind up being a little awkward, but for simple partial application you can use `fn.bind(null, ...args)` or something like
```js
function partial (fn, ...args) {
return (...pArgs) => {
return fn(...args, ...pArgs);
}
}
```
* **Memoization** - Memoization is a handy speedup when you have a bunch of calculations that you want to do where some of those calculations may repeat. By recording previous results, you don't need to recompute long calculations or do unnecessary async requests. This can sometimes wind up giving a decent speed boost to particle simulations where the result of `a->b` is the same as `b->a` so you can wind up halving the number of computations needed. Again there isn't really a native implementation in JS, but memoization can be really simple:
```js
function memo(fn) {
const cache = {};
return (n) => {
if (cache[n]) return cache[n];
const result = fn(n);
cache[n] = result;
return result;
}
}
```
* **Getters / Setters** - Getters and setters are a neat trick where you can stealthily manipulate how values are assigned and retrieved from an object. As an example, we may have something like `user = {firstName: 'Dan', lastName: 'Shiffman', get fullName () {return this.firstName + ' ' + this.lastName}}`. Now we have `user.fullName` that will always return the first and last names, and cannot be overridden. Same idea for setters, just in reverse.
* **Default Params** - Default parameters is a really quick one where you can always provide a default value to a parameter just by assigning it in the function declaration. `function myRect(x = 100, y = 100, w = 20, h = 20) {rect(x, y, w, h)}` This allows you to do something similar to partial application above, just more hard-coded

Aside / extension
+ If you're going to go into template literals, it may be worth taking a trip into tagged template literals since there are some really neat tagged template libraries out there including [styled-components](https://styled-components.com/), [graphQL-tag](https://github.com/apollographql/graphql-tag), [htm](https://github.com/developit/htm), and many others. Tagged templates are also relatively easy to build on your own to do crazy things including making network requests and executing regular expressions.