Markdown 28 45

31 - Spreading into a function.md

@@ -1,4 +1,4 @@
-A really great use case for spreads is when you spread into a function. Now, let's take a look at this example. I've got my inventors array right here, and I want to take the items from newInventors and put them into Inventors. I don't want a third array. I don't want to overwrite the entire array. I just want to tack them onto the end.
+A really great use case for spreads is when you spread arguments into a function. Now, let's take a look at this example. I've got my `inventors` array right here, and I want to take the items from `newInventors` and put them into `inventors`. I don't want a third array. I don't want to overwrite the entire array. I just want to tack them onto the end.
 
 ```js
 const inventors = ['Einstein', 'Newton', 'Galileo'];
@@ -45,7 +45,7 @@ Now we don't have to worry about any of that apply, or this, or any of these thi
 
 We simply just spread right into the functions. We've been spreading into arrays, but you can also spread into a function where every single item of the array is going to be used as an argument. 
 
-Let's build another example ourselves where we have a function that says in an alert "Hey there first last." 
+Let's build another example ourselves where we have a function that says in an alert "Hey there " followed by two variables labeled `first` and `last`. 
 
 ```js
 const name = ['Wes', 'Bos'];

32 - The ...rest param in Functions and destructuring.md

@@ -1,15 +1,14 @@
-Whenever you see three little dots, it's not just a spread. It could also be what's called a rest param. Even though it looks to be the exact same thing, it's actually the exact opposite thing. Let's think about that for a second.
+Whenever you see three little dots, it's not just a spread. It could also be what's called a **rest param**. Even though it looks to be the exact same thing, it's actually the exact opposite thing. Let's think about that for a second.
 
 If the **spread** param takes one thing, which is an array, and **unpacks it into multiple items**, or takes a string and unpacks it into multiple items of an array, the **rest** param does the exact opposite. It takes multiple things and **packs it into a single array**.
 
-There's two places where you'll use a rest param. That is first in a function, and second in a destructuring situation. 
-
+There are two places where you'll use a rest param. That is first in a function, and second in a destructuring situation. 
 
 Let's say we have a function called `convertCurrency`, and it takes two things: a `rate` which is known, but it's also going to take a unknown amount of currency. Here we don't really know how many the person is going to pass. 
 
 Now you might be saying, "That's fine, don't pass any arguments there, and use the arguments object." The problem here is that we actually want the first thing to be the `rate`, and then the rest of them to be the amounts that the person would like to convert. 
 
-Let's say we're going to convert currency, and we want to convert at $1.54 per dollar. Then we want to pass a whole bunch of dollar values that we have. Before now, there wasn't really a great way to do that, but now we have the rest param, which can pack the rest of them into an array:
+Let's say we're going to convert currency, and we want to convert at $1.56 per dollar. Then we want to pass a whole bunch of dollar values that we have. Before now, there wasn't really a great way to do that, but now we have the rest param, which can pack the rest of them into an array:
 
 ```js
 function convertCurrecnty(rate, ...amounts){
@@ -47,11 +46,11 @@ We should be able to get an array of all of those converted currency values.
 You can use as many arguments as you need. If you had `rate`, and `tax`, and `tip`, and then amounts, what that would give us is three things. Let's take a look here:
 
 ```js
-  function convertCurrecnty(rate, tax, tip, ...amounts){
+  function convertCurrency(rate, tax, tip, ...amounts){
      console.log(rate, tax, tip, amounts); 
-     return amounts.map(amount => amount * rate);
+     return amounts.map(amount => (amount + amount * tax + amount * tip) * rate);
   }
-const amounts = convertCurrecnty(1.56, 10, 23, 52, 1, 56);
+const amounts = convertCurrecnty(1.56, 0.13, 0.15 10, 23, 52, 1, 56);
 ``` 
 In the console we can see that we get our `rate`, `tax`, and `tip`, and if you open it in your inspector you'll see that it's a true array, not an arguments object, or anything weird and array-ish. It's a true array.
 
@@ -96,4 +95,4 @@ We looked at another example earlier, where we had a team array. The first perso
 ```
 So if we run that, we'll get `Wes`, and `Kait`, and because we used the rest param, we get an array of players, with `Lux`, `Sheena` and `Kelly`.
 
-The rest param might not something you're going to use all the time, but it really helps you when you don't have to do any splicing or counting on indexes. You can just say, "Just give me the rest," for either a function definition, or for when you're destructuring an array.
+The rest param might not be something you're going to use all the time, but it really helps you when you don't have to do any splicing or counting on indexes. You can just say, "Just give me the rest," for either a function definition, or for when you're destructuring an array.

34 - Promises.md

@@ -4,7 +4,7 @@ First of all, `promise`s are often used when you're fetching a JSON API and doin
 
 Secondly, I'm going to be using a thing called `fetch` to be able to `fetch` in this JSON API. It's not a library, it's actually something built right into the browser. It returns a `promise`.
 
-If you haven't heard of `fetch` before, it's very similar to `$.getJSON', if you've used jquery before, or '$.ajax', or any of these other AJAX libraries. Except, rather than having to load an external library, it's going to be built right into the browser.
+If you haven't heard of `fetch` before, it's very similar to `$.getJSON`, if you've used jquery before, or `$.ajax`, or any of these other AJAX libraries. Except, rather than having to load an external library, it's going to be built right into the browser.
 
 Knowing that, let's jump into some examples of what a `promise` is. 
 
@@ -34,7 +34,6 @@ Let's take a look at a different example, but first a quick refresher about call
 ```js
 $('a').on('click',function() {
     alert('hey');
-
 })
 ```
 
@@ -68,9 +67,7 @@ So let's fix that. We could probably just do an implicit return like the first p
 ```js
 const postPromise = fetch('http://wesbos.com/wp-json/wp/v2/posts');
 
-postPromise.then(data => data.json()).then(data => {console.log(data)}
-
-)
+postPromise.then(data => data.json()).then(data => {console.log(data)})
 ```
 
 If we open it up in the console, we have the actual data that comes back from our blog. You see there's the content, excerpt, id, Wordpress slug, and all that stuff. 
@@ -90,7 +87,7 @@ postPromise
 
 Often people will put a `then` on its own line, just for readability's sake, but I've also added a `catch` function. 
 
-Remember, our `then` will only fire when the promise successfully comes back. If there is an error with the data that comes back, `catch` runs. Generally in your function, you'll have all of the `thens` that we need, it might be one, it might be four, but if we have a `catch` on the end, that will just catch any errors that happen anywhere along the way. 
+Remember, our `then` will only fire when the promise successfully comes back. If there is an error with the data that comes back, `catch` runs. In your function, you'll generally have all of the `then`s that we need, it might be one, it might be four, but if we have a `catch` on the end, that will just catch any errors that happen anywhere along the way. 
 
 So let's pass some broken code, like a typo:
 
@@ -107,4 +104,4 @@ postPromise
 
 In the console, we see our error here, along with some other errors that happened. But the `TypeError` gets thrown by this catch block here, which reports that it failed to `fetch` anything.
 
-That's `fetch` at a very high level.
+That's `fetch` at a very high level.

35 - Building your own Promises.md

@@ -3,7 +3,7 @@ A `promise` is built into a lot of things in the browser like, `fetch` and `getU
 To create your own `promise`, you create a variable, and you store a new `promise` inside of it. A `promise` constructor takes one function here, which passes you `resolve` and `reject`...
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
 
 });
 ```
@@ -19,11 +19,11 @@ Both `resove` and `reject` are called when you are ready to finish this `promise
 I'm going to call one immediately, and we're going to pass a string like "Wes is cool," because that's the data for this `promise`, and try to log that to the console using `.then`.
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
    resolve('Wes is cool') 
 });
 
-p
+myPromise
   .then(data => {
       console.log(data);
   })
@@ -32,21 +32,21 @@ p
 
 If we load this, we'll immediately we see "Wes is cool" in the console. This is because we created a `promise`, and then immediately resolved it by passing "Wes is cool" back to us. 
 
-It's really not that useful, but what you can probably see is that if we wanted to resolve something after some amount of time, maybe after some processing has been done. Maybe you wanted to do some processing on the background that's really intensive, like an AJAX request for data. There's a whole bunch of different use cases for when you would want to use a `promise`.
+It's really not that useful, but what you can probably see is that if we wanted to resolve something after some amount of time, maybe after some processing has been done, we can use promises. Maybe you wanted to do some processing on the background that's really intensive, like an AJAX request for data. There's a whole bunch of different use cases for when you would want to use a `promise`.
 
 Essentially it all boils down to "I don't want to stop JavaScript from running, I just want to start this thing, and then when it comes back I'll deal with the actual result."
 
 Let's see what happens when we put a setTimeout on here for one second. 
 
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve('Wes is cool')
     }, 1000); 
 });
 
-p
+myPromise
   .then(data => {
       console.log(data);
   })
@@ -57,13 +57,13 @@ If we load this, you'll notice that it doesn't pop up immediately.
 Similarly, we could also call `reject` on it:
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
        reject('Err Wes isn\'t cool');
     }, 1000); 
 });
 
-p
+myPromise
   .then(data => {
       console.log(data);
   })
@@ -74,13 +74,13 @@ But if we run that, you'll see that we get an error: "Uncaught (in promise) "Err
 Why is that uncaught in promise? Because we didn't `catch` it, right? We should `catch` the error, using `catch` and `console.error`. 
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
        reject('Err Wes isn\'t cool');
     }, 1000); 
 });
 
-p
+myPromise
   .then(data => {
       console.log(data);
   })
@@ -95,13 +95,13 @@ Ideally what you do is you throw in an error object, not just a string, like thi
 
 
 ```js
-const p = new Promise((resolve, reject) => {
+const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
        reject(Error('Err Wes isn\'t cool'));
     }, 1000); 
 });
 
-p
+myPromise
   .then(data => {
       console.log(data);
   })

36 - Chaining Promises + Flow Control.md

@@ -1,4 +1,4 @@
-Another useful case for `Promise` is when you need some sort of flow control. This is an example where you would probably find out on a back end and maybe something like Node.js, when you are querying a database.
+Another useful case for `Promise` is when you need some sort of flow control. This is an example you would probably find on a back end project and maybe with something like Node.js, when you are querying a database.
 
 ```js
 const posts = [
@@ -22,17 +22,16 @@ We are going to use these two arrays to simulate a connection to a database that
 
 What we're going to do is we're going to create two separate functions that both going to return a `Promise` each, and then we are going to chain them together.
 
+In setting up our function, we want it to look up in our database for the post with an `id` of 1.
+
 ```js
 function getPostById(id) {
 
-
 }
 getPostById(1)
 ```
 
-In setting up our function, we want it to look up in our database for the post with an `id` of 1.
-
-The first thing we need is a `Promise`, because we cannot access it from our database immediately. It has to do a round trip around back and forth to the database:
+The first thing we need is a `Promise`, because we cannot access it from our database immediately. It has to do a round trip to the database:
 
 ```js
 function getPostById(id) {
@@ -53,15 +52,15 @@ getPostById(1)
 
 We are going to loop over every single post. Then, when the `id` matches what we want in our function, 1, we're going to find the `post` there for our control flow. The `if` is looking for a  `post` matching the `id`. Once it does, it will `resolve` and give the `promise` to `post`, otherwise we are going to `reject` and say `'No Post Was Found!'`.
 
-In order to simulate this, so it takes time, what we can do is as you can just wrap this in a `SetTimeOut`, which will sort of simulate the taking 200 ms round trip. 
+In order to simulate this, so it takes time, what we can do is as you can just wrap this in a `setTimeout`, which will sort of simulate the taking 200ms round trip. 
 
 If you like to run it instantly, you don't have to do this, but it's totally up to you.
 
 ```js
 function getPostById(id) {
     // create a new promise
    return new Promise((resolve, reject) => {
-       // using a settimeout to mimic a database
+       // using setTimeout to mimic a database
        setTimeout(() => {
        //find the post we want
             const post = posts.find(post => post.id === id);
@@ -81,17 +80,17 @@ getPostById(1)
     })
 ```
 
-There we go. If we run this, we'll see there is a post immediately as an Object.. We get `postById(1)`'s result, my post. 
+There we go. If we run this, we'll see there is a post immediately as an Object. We get `postById(1)`'s result, my post. 
 
-We want to do this thing that I like to call 'hydrating'. In our `posts` array,  where the author of this post is just a string, `'Wes Bos'`, but I want to replace it with the the `author` object, which has my name as well as my twitter and bio.
+We want to do this thing that I like to call 'hydrating'. In our `posts` array,  where the author of this post is just a string, `'Wes Bos'`. I want to replace it with the the `author`'s object, which has values for the author's `name` as well as `twitter` and `bio`.
 
 I'm going to create a new function called `hydrateAuthor`, which is going to take in the post, and then return in our getPostbyId function as a `Promise`. What's great about that is that if we return a `Promise` inside of a `.then`, we're allowed to chain another `.then` on to the next line. The whole thing looks something like this: 
 
 ```js
 function getPostById(id) {
     // create a new promise
    return new Promise((resolve, reject) => {
-       // using a settimeout to mimic a database
+       // using setTimeout to mimic a database
        setTimeout(() => {
        //find the post we want
             const post = posts.find(post => post.id === id);
@@ -112,7 +111,7 @@ function hydrateAuthor(post) {
         const authorDetails = authors.find(person => person.name === post.author);
         if(authorDetails) {
             // "hydrate" the post object with the author object
-            post.author = author.Details;
+            post.author = authorDetails;
             resolve(post);
         } else {
             reject(Error('Can not find the author'));
@@ -122,10 +121,10 @@ function hydrateAuthor(post) {
 
 getPostById(1)
     .then(post => {
-        console.log(post);
         return hydrateAuthor(post);
     })
     .then(post => {
+        console.log(post);
     })
     .catch(err => {
         console.error(err);
@@ -134,11 +133,11 @@ getPostById(1)
 
 Let's step through all of that new code. 
 
-We create our `hydrateAuthor` function that takes in the `post`. We create a new `Promise`, where we find the `author`. If there is an `author`, then we `hydrateAuthor` on our post object, which adds the `author` object to the `post`. Otherwise, it's rejected.
+We create our `hydrateAuthor` function that takes in the `post`. We create a new `Promise`, where we find the `author`. If there is an `author`, then we `hydrateAuthor` on our post object, which adds the `author` object to the `post`. Otherwise, the promise is rejected.
 
 On the end of the function, I've removed the initial `console.log`, because we don't really need it anymore, We're also going to see a `catch` for error handling. If there is an error thrown in anytime, we should be able to show the error, and allow us to debug it.
 
-If we run that in the console, you'll see that we get the is `hydrateAuthor` version of the post. Our `author` is an object that contains the `bio`, `name`, and `twitter` for whichever author wrote the post.
+If we run that in the console, you'll see that we get the `hydrateAuthor` version of the post. Our `author` is an object that contains the `bio`, `name`, and `twitter` for whichever author wrote the post.
 
 The `catch` allows us to find errors, too. If we run `getPostById`, we'll see an error that no post was found. Similarily, if we have a typo for an author's name, we get the error, 'Cannot find the author'.