professional proofread from Educative.io staff

Author: AlbertoMontalesi

ebook/01_var_let_const.md

@@ -6,7 +6,7 @@ With the introduction of `let` and `const` in **ES6**, we can now better define
 
 ## `Var`
 
-Variables declared with the `var` keyword are **function scoped**, which means that if we declare them inside a `for` loop (which is a **block** scope) they will be available even outside of it.
+Variables declared with the `var` keyword are **function scoped**, which means that if we declare them inside a `for` loop (which is a **block** scope), they will be available even outside of it.
 
 ```JavaScript
 for (var i = 0; i < 10; i++) {
@@ -26,7 +26,7 @@ console.log(functionScoped);
 // ReferenceError: functionScoped is not defined
 ```
 
-In the first example the value of the `var` leaked out of the block-scope and could be accessed from outside of it, whereas in the second example `var` was confined inside a function-scope and we could not access it from outside.
+In the first example the value of the `var` leaked out of the block-scope and could be accessed from outside of it, whereas in the second example `var` was confined inside a function-scope, and we could not access it from outside.
 
 &nbsp;
 
@@ -62,13 +62,13 @@ console.log(y);
 // expected output: block-scoped
 ```
 
-As you can see, when we assigned a new value to the variable declared with `let` inside our block-scope, it **did not** change its value in the outer scope. Whereas, when we did the same with the variable declared with var, it leaked outside of the block-scope and also changed it in the outer scope.
+As you can see, when we assigned a new value to the variable declared with `let` inside our block scope, it **did not** change its value in the outer scope. Whereas, when we did the same with the variable declared with var, it leaked outside of the block scope and also changed it in the outer scope.
 
 &nbsp;
 
 ## `Const`
 
-Similarly to `let`, variables declared with `const` are also **block-scoped**, but they differ in the fact that their value **can't change through re-assignment or can't be re-declared**.
+Similarly to `let`, variables declared with `const` are also **block scoped**, but they differ in the fact that their value **can't change through re-assignment and can't be re-declared**.
 
 ```JavaScript
 const constant = 'I am a constant';
@@ -82,7 +82,7 @@ This **does not** mean that variables declared with `const` are immutable.
 
 &nbsp;
 
-### The content of a `const` is an Object
+### The content of a `const` is an object
 
 ```JavaScript
 const person = {
@@ -95,11 +95,11 @@ console.log(person.age);
 // 26
 ```
 
-In this case we are not reassigning the whole variable but just one of its properties, which is perfectly fine.
+In this case we are not reassigning the whole variable but just one of its properties, which works fine fine.
 
 ---
 
->Note: We can still freeze the `const` object, which will not change the contents of the object (but trying to change the values of object `JavaScript` will not throw any error)
+>Note: We can still freeze the `const` object, which will not change the contents of the object (but trying to change the values of object `JavaScript` will not throw any error).
 
 ```JavaScript
 const person = {
@@ -123,7 +123,7 @@ console.log(person.age);
 
 ## The temporal dead zone
 
-Now we will have a look at a very important concept which may sound complicated from its name, but I assure you it is not.
+Now, we’ll have a look at a very important concept which may sound complicated because of its name, but I assure you it's not.
 
 First let's have a look at a simple example:
 
@@ -142,7 +142,7 @@ let j = "I am a let";
 `var` can be accessed **before** they are defined, but we can't access their **value**.
 `let` and `const` can't be accessed **before we define them**.
 
-Despite what you may read on other sources, both `var` and `let`(and `const`) are subject to **hoisting** which means that they are processed before any code is executed and lifted up to the top of their scope (whether it's global or block).
+Despite what you may read on other sources, both `var` and `let`(and `const`) are subject to **hoisting**, which means that they are processed before any code is executed and lifted up to the top of their scope (whether it's global or block).
 
 The main differences lie in the fact that `var` can still be accessed before they are defined. This causes the value to be `undefined`. While on the other hand, `let` lets the variables sit in a **temporal dead zone** until they are declared. And this causes an error when accessed before initialization, which makes it easier to debug code rather than having an `undefined` as the result.
 
@@ -151,7 +151,7 @@ The main differences lie in the fact that `var` can still be accessed before the
 
 ## When to use `Var`, `Let` and `Const`
 
-There is no rule stating where to use each of them and people have different opinions. Here I am going to present to you two opinions from popular developers in the `JavaScript` community.
+There is no rule stating where to use each of them, and people have different opinions. Here I am going to present to you two opinions from popular developers in the `JavaScript` community.
 
 The first opinion comes from [Mathias Bynes:](https://mathiasbynens.be/notes/es6-const)
 

ebook/02_arrow_functions.md

@@ -19,15 +19,15 @@ var greeting = (name) => {
 }
 ```
 
-We can go further, if we only have one parameter we can drop the parenthesis and write:
+We can go further if we only have one parameter. We can drop the parentheses and write:
 
 ```JavaScript
 var greeting = name => {
   return `hello ${name}`;
 }
 ```
 
-If we have no parameter at all we need to write empty parenthesis like this:
+If we have no parameters at all, we need to write empty parenthesis like this:
 
 ```JavaScript
 var greeting = () => {
@@ -39,7 +39,7 @@ var greeting = () => {
 
 ## Implicitly return
 
-With arrow functions we can skip the explicit `return` and return like this:
+With arrow functions, we can skip the explicit `return` and return like this:
 
 ```JavaScript
 const greeting = name => `hello ${name}`;
@@ -64,7 +64,7 @@ const arrowFunction = (name) => {
 }
 ```
 
-Let's say we want to implicitly return an **object literal**, we would do it like this:
+Let’s say we want to implicitly return an object literal. We’d do it like this:
 
 ```JavaScript
 const race = "100m dash";
@@ -78,9 +78,9 @@ console.log(results);
 // {name: "Asafa Powell", race: "100m dash", place: 3}]
 ```
 
-In this example, we are using the `map` function to iterate over the array `runners`. The first argument is the current item in the array and the `i` is the index of it. For each item in the array we are then adding into `results` an Object containing the properties `name`, `race`, and `place`.
+In this example, we're using the `map` function to iterate over the array `runners`. The first argument is the current item in the array, and the `i` is the index of it. For each item in the array we are then adding into `results` an Object containing the properties `name`, `race`, and `place`.
 
-To tell `JavaScript` what's inside the curly braces is an **object literal** we want to implicitly return, we need to wrap everything inside parenthesis.
+To tell `JavaScript` what's inside the curly braces is an **object literal** we want to implicitly return,  so we need to wrap everything inside parentheses. Writing `race` or `race: race` is the same.
 
 Writing `race` or `race: race` is the same.
 
@@ -157,7 +157,7 @@ box.addEventListener("click", function() {
 
 Here, the second `this` will inherit from its parent, and will be set to the `const` box.
 
-Running the example code you should see our `div` turning red for just half a second.
+Running the example code, you should see our `div` turning red for just half a second.
 
  
 
@@ -205,7 +205,7 @@ const person2 = {
 person2.grow();
 ```
 
-Another difference between Arrow functions and normal functions is the access to the `arguments object`.
+Another difference between arrow functions and normal functions is the access to the `arguments object`.
 The `arguments object` is an array-like object that we can access from inside functions and contains the values of the arguments passed to that function.
 
 A quick example:
@@ -221,7 +221,7 @@ example(1,2,3);
 
 As you can see we accessed the first argument using an array notation `arguments[0]`.
 
-Similarly to what we saw with the `this` keyword, Arrow functions inherit the value of the `arguments object` from their parent scope.
+Similarly to what we saw with the `this` keyword, arrow functions inherit the value of the `arguments object` from their parent scope.
 
 Let's have a look at this example with our previous list of runners:
 
@@ -240,7 +240,7 @@ This code will return:
 ReferenceError: arguments is not defined
 ```
 
-To access all the arguments passed to the function we can either use the old function notation or the spread syntax(which we will discuss more in Chapter 9)
+To access all the arguments passed to the function we can either use the old function notation or the spread syntax (which we will discuss more in Chapter 9)
 
 Remember that `arguments` is just a keyword, it's not a variable name.
 

ebook/03_default_function_arguments.md

@@ -20,7 +20,7 @@ getLocation('Paris','France')
 // Europe France Paris
 ```
 
-As you can see our function takes three arguments, a city, a country and a continent. In the function body we are checking if either country or continent are `undefined` and in that case we are giving them a **default value**.
+As you can see, our function takes three arguments: a city, a country and a continent. In the function body we are checking if either country or continent are `undefined` and in that case, we are giving them a **default value**.
 
 When calling `getLocation('Milan')` the second and third parameter (country and continent) are undefined and get replaced by the default values of our functions.
 
@@ -44,7 +44,7 @@ getLocation(undefined,'Paris','France')
 // Europe Paris France
 ```
 
-If we want to replace any of the first arguments with our default we need to pass them as `undefined`, not really a nice looking solution. Luckily ES6 came to the rescue with default function arguments.
+If we want to replace any of the first arguments with our default we need to pass them as `undefined`, which is not the nicest looking solution. Luckily, ES6 came to the rescue with default function arguments.
 
  
 
@@ -91,7 +91,7 @@ const bill = calculatePrice({ tip: 0.15, total:150 });
 
 We made the argument of our function an Object. When calling the function, we don’t even have to worry about the order of the parameters because they are matched based on their key.
 
-In the example above the default value for *tip* was 0.05 and we overwrote it with 0.15 but we didn't give a value to tax which remained the default 0.1.
+In the example above, the default value for *tip* was 0.05, and we overwrote it with 0.15. But we didn’t give a value to tax which remained the default 0.1.
 
 Notice this detail:
 
@@ -103,7 +103,7 @@ Notice this detail:
 } = {}
 ```
 
-If we don't default our argument Object to an empty Object, and we were to try and run `calculatePrice()` we would get:
+If we don't default our argument Object to an empty Object, and we were to try and run `calculatePrice()`, we would get:
 
 ```JavaScript
 Cannot destructure property `total` of 'undefined' or 'null'.

ebook/04_template_literals.md

@@ -1,12 +1,12 @@
 # Chapter 4: Template literals
 
-Prior to ES6 they were called *template strings*, now we call them  *template literals*. Let's have a look at what changed in the way we interpolate strings in ES6.
+*Template literals* were called *template strings prior* to ES6.. Let’s have a look at what’s changed in the way we interpolate strings in ES6.
 
  
 
 ## Interpolating strings
 
-In ES5 we used to write this, in order to interpolate strings:
+We used to write the following in ES5 in order to interpolate strings:
 
 ```JavaScript
 var name = "Alberto";
@@ -16,7 +16,7 @@ console.log(greeting);
 // Hello my name is Alberto
 ```
 
-In ES6 we can use backticks to make our lives easier.
+In ES6m we can use backticks to make our lives easier.
 
 ```JavaScript
 let name  = "Alberto";
@@ -40,7 +40,7 @@ console.log('1 * 10 is ' + ( a * b));
 
 ```
 
-In ES6 we can use backticks to reduce our typing:
+In ES6 we simply have to wrap everything inside backticks, so backslashes on each line aren’t needed anymore.
 
 ```JavaScript
 var a = 1;
@@ -100,7 +100,7 @@ console.log(markup);
 // </ul>
 ```
 
-Here we are using the `map` function to loop over each of our `people` and display a `li` tag containing the `name` of the person.
+Here, we're using the `map` function to loop over each of our `people` and display a `li` tag containing the `name` of the person.
 
 &nbsp;
 
@@ -120,7 +120,7 @@ getPrice();
 // $20
 ```
 
-If the condition before the `?` can be converted to `true` then the first value is returned, else it's the value after the `:` that gets returned.
+If the condition before the `?` can be converted to `true` then the first value is returned. Otherwise, it's the value after the `:` that gets returned.
 
 ```javascript
 // create an artist with name and age
@@ -155,7 +155,7 @@ const artist = {
 
 ## Pass a function inside a template literal
 
-Similarly to the example above (line 10 of the code), if we want to, we can pass a function inside a template literal.
+Similarly to the example above (line 10 of the code), we can pass a function inside a template literal.
 
 ```javascript
 const groceries = {
@@ -197,16 +197,16 @@ const markup = `
 //   <div>
 ```
 
-Inside of the last `p` tag we are calling our function `groceryList` passing it all the `others` groceries as an argument.
-Inside of the function we are returning a `p` tag and we are using `map` to loop over each of our items in the grocery list returning an Array of `span` tags containing each grocery. We are then using `.join('\n')` to add a new line after each of those span. 
+Inside of the last `p` tag, we're calling our function `groceryList` and passing it all the `others` groceries as an argument.
+Inside of the function, we're returning a `p` tag and are using `map` to loop over each of our items in the grocery list. This includes returning an array of `span` tags containing each grocery. We're then using `.join('\n')` to add a new line after each of those spans.
 
 &nbsp;
 
 ## Tagged template literals
 
-By tagging a function to a template literal we can run the template literal through the function, providing it with everything that's inside of the template.
+By tagging a function to a template literal, we can run the template literal through the function, providing it with everything that's inside of the template.
 
-The way it works is very simple: you just take the name of your function and put it in front of the template that you want to run it against.
+The way it works is very simple: you take the name of your function and put it in front of the template that you want to run it against.
 
 ```javascript
 let person = "Alberto";
@@ -227,9 +227,9 @@ console.log(sentence);
 ```
 
 We captured the value of the variable age and used a ternary operator to decide what to print.
-`strings` will take all the strings of our `let` sentence whilst the other parameters will hold the variables.
+`strings` will take all the strings of our `let` sentence, while the other parameters will hold the variables.
 
-In our example our string is divided in 3 pieces: `${person}`, `is a` and `${age}`.
+In our example the string is divided into 3 pieces: `${person}`, `is a` and `${age}`.
 We use array notation to access the string in the middle like this:
 
 ```javascript

ebook/05_additional_string_methods.md

@@ -42,7 +42,7 @@ str.toLowerCase()
 // Output: "i ate an apple"
 ```
 
-There are many more methods; these were just a few as a reminder. Check the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#) for a more in-depth description on the above methods.
+There are many more methods- these were just a few as a reminder. Check the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#) for a more in-depth description of the above methods.
 
  
 
@@ -85,7 +85,7 @@ code.startsWith("DEF",3);
 
 ### `endsWith()`
 
-Similarly to `startsWith()` this new method will check if the string ends with the value we pass in:
+Similarly to `startsWith()`, this new method will check if the string ends with the value we pass in:
 
 ```javascript
 const code = "ABCDEF";

ebook/06_destructuring.md

@@ -33,7 +33,7 @@ const person = {
 const { first, last } = person;
 ```
 
-Since our `const` variable, `person`, have the same name as the properties we want to grab, we don't have to specify `person.first` and `person.last` anymore.
+Since our `const` variable- `person`-  has the same name as the properties we want to grab, we don't have to specify `person.first` and `person.last` anymore.
 
 The same applies even when we have nested data, such as what we could get from an API.
 
@@ -52,7 +52,7 @@ const person = {
 const { facebook } = person.links.social;
 ```
 
-We are not limited to name our variable the same as the property of the object. We can also rename as the following:
+We're not limited to name our variables the same as the property of the object. We can also rename as the following:
 
 ```javascript
 const { facebook:fb } = person.links.social;
@@ -61,7 +61,7 @@ console.log(fb); // https://www.facebook.com/alberto.montalesi
 console.log(facebook); //ReferenceError: facebook is not defined
 ```
 
-We are using the syntax `const { facebook:fb }` to specify that we want to target the property `facebook` of the Object `person.links.social` and we want the `const` variable to be called `fb`.
+We're using the syntax `const { facebook:fb }` to specify that we want to target the property `facebook` of the object `person.links.social`, and that we want the `const` variable to be called `fb`.
 That is why when we try to log `facebook` we get an error.
 
 We can also pass in **default values** like this:
@@ -75,7 +75,7 @@ const { facebook:fb = "https://www.facebook.com"} = person.links.social;
 
 ## Destructuring Arrays
 
-The first difference we notice when **destructuring arrays** is that we are going to use `[]` and not `{}`.
+The first difference we notice when **destructuring arrays** is that we're going to use `[]` and not `{}`.
 
 ```javascript
 const person = ["Alberto","Montalesi",25];
@@ -93,7 +93,7 @@ console.log(name,surname);
 // Alberto Montalesi
 ```
 
-Let's say we want to grab all the other values remaining, we can use the **rest operator**:
+Let's say we want to grab all the other values remaining. We can use the **rest operator** for that:
 
 ```javascript
 const person = ["Alberto", "Montalesi", "pizza", "ice cream", "cheese cake"];
@@ -103,7 +103,7 @@ console.log(food);
 // Array [ "pizza", "ice cream", "cheese cake" ]
 ```
 
-In the example above the first two values of the array were bound to `name` and `surname` while the rest (that's why it's called the **rest operator**) get assigned to `food`
+In the example above, the first two values of the array were bound to `name` and `surname`, while the rest (that's why it's called the **rest operator**) get assigned to `food`
 
 The `...` is the syntax for the **rest operator**.