From 991aa79c9d50cd9a0db1a8d7a5f2f950c7202851 Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:28:05 +0200 Subject: [PATCH 1/7] reference blog post --- 18-3 - Destructuring Objects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/18-3 - Destructuring Objects.md b/18-3 - Destructuring Objects.md index f09055f..525a5c0 100644 --- a/18-3 - Destructuring Objects.md +++ b/18-3 - Destructuring Objects.md @@ -56,7 +56,7 @@ console.log(dogName) // what will it be? 0! ### Combining with Destructuring Renaming -In my last post we learned that we can destrucutre and rename varaibles at the same time with something like this: +[In my last post](http://wesbos.com/destructuring-renaming/) we learned that we can destrucutre and rename varaibles at the same time with something like this: ```js const person = { From 9f45739be044bc26e8554af808bb0d4a47cdc4b9 Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:33:27 +0200 Subject: [PATCH 2/7] fix typos and missing letters On line 40, tried to also improve the closing sentence. --- 19 - Destructing Arrays.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/19 - Destructing Arrays.md b/19 - Destructing Arrays.md index 00d3bf7..77683b1 100644 --- a/19 - Destructing Arrays.md +++ b/19 - Destructing Arrays.md @@ -2,7 +2,7 @@ Did you know Destructuring also works with arrays? -Sometimes we have data where it's based on its index - or it's place in the array. Let's say you want to get the first, the second and the third thing out of that array. +Sometimes we have data which is based on its index - or it's place in the array. Let's say you want to get the first, the second and the third thing out of that array. Traditionally we might be able to do something like this: @@ -37,7 +37,7 @@ const data = 'Basketball,Sports,90210,23'; ``` -That's the item name, the item category, the item SKU, and the item inventory left on hand. Problem is that it's just a string. That's not really helping us out. We do know that one thing that we can do if the data is perfectly separated by some sort of separator is we could use `data.split()` to split it up based on the comma. +That's the item name, the item category, the item SKU, and the item inventory left on hand. Problem is that it's just a string. That's not really helping us out. We do know that one thing we can do if the data is perfectly separated by some sort of separator is using `data.split()` to split it up based on the comma. ```js const [itemName, category, sku, inventory] = data.split(','); @@ -55,7 +55,7 @@ What happens to them when you destructure something that is not the same length ### A Look Ahead to ES6 Destructuring with ...rest -We're going to learn a more about the JavaScript ...rest in a future videos and blog posts, but There is a helpful use case in destructuring with using the rest. Let's say I have a team, and I want to know who's the **captain**, who's he **assisting captain**, and who is **the rest of the actual team**? I'm going to make myself a quick array here: +We're going to learn more about the JavaScript ...rest in a future videos and blog posts, but there is a helpful use case in destructuring with using the rest. Let's say I have a team, and I want to know who's the **captain**, who's the **assisting captain**, and who is in **the rest of the actual team**? I'm going to make myself a quick array here: ```js const team = ['Wes', 'Harry', 'Sarah', 'Keegan', 'Riker']; From b9346d7f399466c61166cec89f03bce960d7737b Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:39:38 +0200 Subject: [PATCH 3/7] fix capitalization, missing word On line 42, broke the phrases in two simpler sentences, which might help the reader's comprehension. --- 21.2 - Named arguments with ES6 Destrucuring.mdown | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/21.2 - Named arguments with ES6 Destrucuring.mdown b/21.2 - Named arguments with ES6 Destrucuring.mdown index d959cdf..6051f5d 100644 --- a/21.2 - Named arguments with ES6 Destrucuring.mdown +++ b/21.2 - Named arguments with ES6 Destrucuring.mdown @@ -10,7 +10,7 @@ function tipCalc(total, tip = 0.15, tax = 0.13) { } ``` -That works well, because we know that the first thing is going to be `total`, second thing is going to be `tip`... or was it `tax`? Then the third one was either `tip` or `tax`. You see, We're already getting confused as to the order. Which order should I actually put them in? I might end up tipping too much, or maybe not enough. +That works well, because we know that the first thing is going to be `total`, second thing is going to be `tip`... or was it `tax`? Then the third one was either `tip` or `tax`. You see, we're already getting confused as to the order. Which order should I actually put them in? I might end up tipping too much, or maybe not enough. There's some things we can do to make this order independent. @@ -22,7 +22,7 @@ function tipCalc({total, tip = 0.15, tax = 0.13}) { } ``` -You can see that we've wrapped the variables in `tipCalc` in curly brackets. Now, when we pass in a single object as the argument and it's going to destructure them into our three variables, `total`, `tip`, and `tax`. It's important to note that even though we are technically passing a single argument in the form of an object, it's not like we're going to have to use them like `options.total`, `options.tip`, and `options.tax`. +You can see that we've wrapped the variables in `tipCalc` in curly brackets. Now, when we pass in a single object as the argument, the function is going to destructure them into our three variables, `total`, `tip`, and `tax`. It's important to note that even though we are technically passing a single argument in the form of an object, it's not like we're going to have to use them like `options.total`, `options.tip`, and `options.tax`. _This function will destructure them into three variables available inside of the actual function._ @@ -39,7 +39,7 @@ console.log(bill); If we refresh, we'll see in the console that we've got $266 as our total `bill`. -But what is really important here is, first of all, I can leave things off, and we don't have to pass that undefined sort of hole-filler if it's in the middle like we used to: +But what is really important here is, first of all, I can leave things off. We don't have to pass that undefined sort of hole-filler if it's in the middle like we used to: ```js function tipCalc({total, tip = 0.15, tax = 0.13}) { @@ -61,7 +61,7 @@ const bill = tipCalc({tip: 0.20, total: 200}); console.log(bill); ``` -That still works just as we want because passing in an object here, and it's getting destructured. What's more is that if we leave the one out from the object that we pass in, the defaults are filling themselves in. +That still works just as we want because we are passing in an object here, and it's getting destructured. What's more is that if we leave the one out from the object that we pass in, the defaults are filling themselves in. One last thing is, if you ever are to just pass in nothing. Let's say if we put a default for the `total` be $100. This is maybe a common order and we would want to just run `tipCalc`: From f35349c169880e5bda8b19bfc8fc1f4da0e13b36 Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:45:51 +0200 Subject: [PATCH 4/7] new paragraph, avoid repetition On line 5, I propose a slight change to improve the flow of the sentence. On line 158, I am unsure as how to best describe the MooTools subordinate. --- 22 - The for of loop.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/22 - The for of loop.md b/22 - The for of loop.md index 5aeb81d..a731911 100644 --- a/22 - The for of loop.md +++ b/22 - The for of loop.md @@ -1,6 +1,8 @@ -We have a new type of loop in JavaScript, and that is the `for of loop` which is used to loop over any type of data that is an iterable. We're going to learn all about different types of iterables, and we're going to learn why this `for of` loop is so useful when we hit things like generators and maps and sets and so on. For now we want to get an idea as to how this loop actually works. +We have a new type of loop in JavaScript, and that is the `for of loop` which is used to loop over any type of data that is an iterable. -What is an iterable? An iterable is anything that can be looped over. If you have an array, you can loop over an array, or a string, or a map, or a set, or a generator. We're going to look at all kinds of different examples as to when you can do it, but let's get going with looking at some of the existing loops first, and see what are the shortcomings of our existing loops, and why does `for of` shine above all of them in a couple of use cases. +We're going to learn all about different types of iterables, and we're going to learn why this `for of` loop is so useful when we hit things like generators and maps and sets and so on. For now we want to get an idea as to how this loop actually works. + +What is an iterable? An iterable is anything that can be looped over. If you have an array, you can loop over an array, or a string, or a map, or a set, or a generator. We're going to look at all kinds of different examples as to when you can do it, but let's get going looking at some of the existing loops first, see what are their shortcomings, and why does `for of` shine above all of them in a couple of use cases. For the first one, we've got a survey right here, which is just a regular array with four items in it. @@ -153,7 +155,7 @@ You may say, "That's fine but I never do that," but there are a lot of libraries For example, MooTools is known for modifying the prototype here. -If I am on a website; I'm not even going to use MooTools here, but I'm going to make an array with `var` names, and I want to iterate over them. I would say: +If I am on a website, I'm not even going to use MooTools here, but I'm going to make an array with `var` names, and I want to iterate over them. I would say: ```js var names = ['wes', 'lux'] From 98cb36a8020ef4b750951e117c3f6ceca0284823 Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:54:16 +0200 Subject: [PATCH 5/7] several text fixes - remove unnecessary words - add missing words - include backticks around the `arguments` list - change the `querySelector()` method to `querySelectorAll()`, as the method ought to return _all_ paragraph elements --- 23 - The for of Loop in Action.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/23 - The for of Loop in Action.md b/23 - The for of Loop in Action.md index a4c8d55..6103cb5 100644 --- a/23 - The for of Loop in Action.md +++ b/23 - The for of Loop in Action.md @@ -36,7 +36,7 @@ Then `value: Array[2]`, and the first thing is going to be the index, `0`, and t If you click into another one, you'll find `Brisket`, `Shank`, and `Short Rib`, as well. -It tells us what the `index` does is and what the `Short Rib` is. Why would this be useful to us with `for of`? Because what you can do is iterate over not just the plain array, but we can also iterate over the `arrayIterator` which is `cuts.entries`, which will return our cuts with their index, `0`, `1`, `2`, and so on with their value as an array. +It tells us what the `index` is and what the `Short Rib` is. Why would this be useful to us with `for of`? Because what you can do is iterate over not just the plain array, but we can also iterate over the `arrayIterator` which is `cuts.entries`, which will return our cuts with their index, `0`, `1`, `2`, and so on with their value as an array. ### A Dash of Destructuring @@ -58,11 +58,11 @@ Go ahead and run that, and you'll see `Chuck is the 1 item`, `Brisket is the 2 i What are we doing here? We're using `cuts.entries()` to bring us an iterator. What's great about `for of` is that it can handle almost anything that you throw at it. -You don't have to think, "What kind of data is this? Which of mine like `for in` or different loops that I have available to me should I use?" +You don't have to think, "What kind of data is this? Which syntax of mine like `for in` or different loops that I have available to me should I use?" In almost all cases, except for objects, you can just use your `for of`, and just throw anything at it, and the `for of` loop is going to just figure out how to handle that data for you. So here I've destructured the data as we actually go on in, and we're off and running with that. -## `for of` with `arguments +## `for of` with `arguments` Let's look at another example where `for of` is useful, and that is when you're trying to iterate over the `argument` objects. @@ -98,7 +98,7 @@ addUpNumbers(10,20,42,62,598); Now that is a special word and it's going to be in kind of an array-ish format where it will give us all of the actual arguments. -That arguments is now what looks to be an array, it's not exactly an array of everything that got passed in. Why I'm so bent up on saying it's array-ish is because if you open it up in your console, you'll see a couple of things right here. First of all, the `prototype` is not `array`. +That arguments is now what looks to be an array, it's not exactly an array of everything that got passed in. The reason I'm so bent up on saying it's array-ish is because if you open it up in your console, you'll see a couple of things right here. First of all, the `prototype` is not `array`. If you `console.log` a regular array and open it up in the console, you'll see that the `prototype` is `array`, and all the crazy array methods that we're used to, like `map` and `push` and everything we could possibly want, right? Because that has built up a proper array. @@ -126,11 +126,11 @@ addUpNumbers(10,20,42,62,598); ``` -What I'm going to do is I'm going to say `let total=0`, start with zero and then I'm going to loop over each of them. So I'm going to say for num in arguments total + = num then we should be able to return the total here. That should add them all up, let's see. I'm going to console.log total as well just so we can see it. +What I'm going to do is I'm going to say `let total = 0`, start with zero and then I'm going to loop over each of them. So I'm going to say for every `num` in `arguments` `total += num`, and then we should be able to return the total here. That should add them all up, let's see. I'm going to console.log total as well just so we can see it. -And we get our total, `267`, because I created a variable and it looped through it and it updated every single one of them. Now, if I ever want to call add up numbers, we can just pass in any numbers we like by calling `addUpNumbers(10,10)` or `addUpNumbers(20,20)` or whatever we want. That is one example of what you could loop over it. +And we get our total, `267`, because I created a variable and it looped through it and updated every single one of them. Now, if I ever want to call add up numbers, we can just pass in any numbers we like by calling `addUpNumbers(10,10)` or `addUpNumbers(20,20)` or whatever we want. That is one example of what you could loop over it. -You do not need to convert to a true array, you can just use the `for of` to iterate over it. +You do not need to convert `arguments` to a true array, you can just use the `for of` to iterate over it. ### `for of` with Strings @@ -147,7 +147,7 @@ As a note, you have make sure you put a `const`, `let`, or `var` in front of you ### `for of` with NodeLists and HTMLCollections -Finally, you can also loop over DOM collections without having to convert to a true array. DOM collections, or `NodeList` collections, or HTML collections, whatever you're going to call them, they are being changed so that you will have all of your `.forEach`, and `.map`, and all of those array methods that you're used to. However, in most browsers they are not a true array, so we could use the `for of`, no problem there. +Finally, you can also loop over DOM collections without having to convert them to a true array. DOM collections, or `NodeList` collections, or HTML collections, whatever you're going to call them, they are being changed so that you will have all of your `.forEach`, and `.map`, and all of those array methods that you're used to. However, in most browsers they are not a true array, so we could use the `for of`, no problem there. ```html

Hi I'm p 01

@@ -160,7 +160,7 @@ Finally, you can also loop over DOM collections without having to convert to a t We've now got a whole bunch of paragraphs on the page here, and we want to select them: ```js -const ps = document.querySelector('p'); +const ps = document.querySelectorAll('p'); console.log(ps); ``` @@ -169,7 +169,7 @@ If you open pen it up in the console, you can see that it's not a true array, it Let's loop over them: ```js -const ps = document.querySelector('p'); +const ps = document.querySelectorAll('p'); for (const paragraph of ps) { console.log(paragraph); } @@ -178,7 +178,7 @@ for (const paragraph of ps) { You see that you'll get each one here, and that's useful if you want to do something like an `addEventListener` to show the contents of your `

` tag: ```js -const ps = document.querySelector('p'); +const ps = document.querySelectorAll('p'); for (const paragraph of ps) { paragraph.addEventListener('click', function() { console.log(this.textContent); From 3b6037b82b4ee4ca921749b487266f1dea42914c Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:56:28 +0200 Subject: [PATCH 6/7] change the text referencing the single polyfill --- 24 - Using for of with Objects.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/24 - Using for of with Objects.md b/24 - Using for of with Objects.md index 68aeb77..1d75f4d 100644 --- a/24 - Using for of with Objects.md +++ b/24 - Using for of with Objects.md @@ -23,7 +23,7 @@ for (const prop of apple.entries()){ } ``` -We don't have this quite yet, but if you take a look at the [TC39 proposal on GitHub](https://github.com/tc39/proposal-object-values-entries), we'll see that `Object.values` and `Object.entries` and will be included in ES2017, and you can already [polyfill it](https://github.com/es-shims/Object.entries). We'll talk a lot more about polyfilling, but if you would like to use that simple solution, you can go ahead and you can use `.entries`. +We don't have this quite yet, but if you take a look at the [TC39 proposal on GitHub](https://github.com/tc39/proposal-object-values-entries), we'll see that `Object.values` and `Object.entries` and will be included in ES2017, and you can already [polyfill `Object.entries`](https://github.com/es-shims/Object.entries). We'll talk a lot more about polyfilling, but if you would like to use that simple solution, you can go ahead and you can use `.entries`. If you cannot use a polyfill, let's take a look at some of our other options here. From 84e8096227d40b3d46b416b96ae4371b05a44bc6 Mon Sep 17 00:00:00 2001 From: Gabriele Corti <33316703+borntofrappe@users.noreply.github.com> Date: Thu, 11 Oct 2018 15:58:45 +0200 Subject: [PATCH 7/7] change query method, add backticks --- 25 - Array.from() and Array.of().md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/25 - Array.from() and Array.of().md b/25 - Array.from() and Array.of().md index 5d51c89..2b25bca 100644 --- a/25 - Array.from() and Array.of().md +++ b/25 - Array.from() and Array.of().md @@ -15,14 +15,14 @@ What do these do? `Array.from` will take something that is array-ish and turn it Let's go ahead and select and `console.log` all the people: ```js -const people = document.querySelector('.people p'); +const people = document.querySelectorAll('.people p'); console.log(people); ``` But what if I wanted just an array of the people's names? I could use `.map`: ```js -const people = document.querySelector('.people p'); +const people = document.querySelectorAll('.people p'); const names = people.map(person => person.textContent); ``` @@ -36,7 +36,7 @@ What do we need to do in order to make this map work? We simply would have to ma ```js -const people = document.querySelector('.people p'); +const people = document.querySelectorAll('.people p'); const peopleArray = Array.from(people); console.log(peopleArray); ``` @@ -46,7 +46,7 @@ If we open `peopleArray` in the inspector, its prototype is now `Array`, and you You can call `Array.from` onto it: ```js -const people = document.querySelector('.people p'); +const people = document.querySelectorAll('.people p'); const peopleArray = Array.from(people); console.log(peopleArray); const names = peopleArray.map(person => person.textContent); @@ -68,9 +68,9 @@ const peopleArray = Array.from(people, person => person.textContent); console.log(peopleArray); ``` -### Converting Arguments Object to an Array +### Converting the `arguments` Object to an Array -Another use case is that if we want to convert the arguments object into an actual array. +Another use case is that if we want to convert the `arguments` object into an actual array. ```js function sumAll() {