Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

README title links #83

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

README title links #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e91b24
Grammar suggestions. Long live the Oxford comma!
tpage99 Oct 13, 2018
3c64191
added multiple links in table to blog post
tpage99 Oct 13, 2018
50d842d
linked titles to blog urls
tpage99 Oct 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions 10 - When NOT to use an Arrow Function.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Before you start going absolutely bananas on using arrow functions everywhere, we need to chat. **Arrow functions don't replace regular functions**. Just like Flexbox and floats, pixels and rems, and anything else new that comes along, the older thing still retains lots of utility because it works differently than the new thing.

We talked about the benefits of ES6 Arrow Functions in earlier videos and blog posts but let's go through a couple examples of when you probably _don't want an arrow function_. All of these are just going to boil down to not having the keyword `this`, but there are also different use cases that you'd run into.
We talked about the benefits of ES6 Arrow Functions in earlier videos and blog posts, but let's go through a couple examples of when you probably _don't want an arrow function_. All of these are just going to boil down to not having the keyword `this`, but there are also different use cases that you'd run into.

### #1: Click Handlers

Expand Down Expand Up @@ -36,7 +36,7 @@ button.addEventListener('click', () => {
});
```

Remember: as we discussed with arrow functions, the keyword `this` is not bound to that element. If we use a regular function, the keyword `this` will be bound to the element we clicked!
Remember: as we discussed with arrow functions, the keyword `this` is not bound to that element. If we use a regular function, the keyword `this` will be bound to the element we clicked:

```js
const button = document.querySelector('#pushy');
Expand All @@ -46,11 +46,11 @@ button.addEventListener('click', function() {
});
```

In the console, `this` is now referring to our button, and our big yellow button is actually working. The sames rules apply with jQuery, Google Maps or any other DOM library you are using.
In the console, `this` is now referring to our button, and our big yellow button is actually working. The same rules apply with jQuery, Google Maps, or any other DOM library you are using.

### #2: Object Methods

Now, let's take a look at this next one, when we need a method to bind to an object.
Now, let's take a look at this next one, when we need a method to bind to an object:

```js
const person = {
Expand Down Expand Up @@ -80,11 +80,11 @@ const person = {
}
```

There we go. That will actually work, because that's a full on function, and not an arrow function.
There we go. That will actually work, because that's a full on function and not an arrow function.

### 3: Prototype Methods

As our third example, we'll talk about when we need to add a prototype method.
As our third example, we'll talk about when we need to add a prototype method:

```js
class Car {
Expand Down Expand Up @@ -118,9 +118,9 @@ Car.prototype.summarize = () => {
};
```

What that allows us to do is that, even after these cars have been created, we can add methods onto all of them. With our `Car.prototype.summarize` method set, let's type into the console: `subie.summarize`.
What that allows us to do is, even after these cars have been created, we can add methods onto all of them. With our `Car.prototype.summarize` method set, let's type into the console: `subie.summarize`.

If you're using Chrome's console, you'll see that it auto-completes the method, because it's available to you. Even though we added it after we created the `Car`, because I added it to the `prototype`, it's available in every object that has been created from there.
If you're using Chrome's console, you'll see that it auto-completes the method because it's available to you. Even though we added it after we created the `Car`, because I added it to the `prototype`, it's available in every object that has been created from there.

What this `prototype` does is it returns `this.make`, which is the make that we passed in, and `this.color` in a sentence.

Expand All @@ -138,7 +138,7 @@ Now, if we call `subie.summarize`, it says it's a white Subaru, and by calling `

Again, we must use a regular function for that.

### 4: When we need an arguments Object
### 4: When We Need an Arguments Object

For our last example, this is a little bit different:

Expand All @@ -162,7 +162,7 @@ As an example, let's type into the console `orderChildren('jill', 'wes', 'jenna'

This is because `arguments` is a keyword that we have in our `orderChildren`. That's going to give us an `Array` or array-ish value of everything that was passed in.

However, we do not get the `arguments` object if we use an arrow function. However, when we use a regular function, it is going to give us the actual content that we need.
However, we do not get the `arguments` object if we use an arrow function. However, when we use a regular function, it is going to give us the actual content that we need:

```js
const orderChildren = function() {
Expand All @@ -176,4 +176,4 @@ const orderChildren = function() {

**Note:** Another fix for this is to use a `...rest` param to collect all the arguments into an array. We will learn all about that in the rest videos and blog posts!

Again, to go through all those really quickly. Make sure that you aren't just using arrow functions willy-nilly. In general, if you do not need the `arguments` object or you do not need `this`, or you know that you will not need it in the future, then you can feel free to go ahead and use an arrow function on everything else.
Again, to go through all those really quickly. Make sure that you aren't just using arrow functions willy-nilly. In general, if you do not need the `arguments` object or you do not need `this`, or you know that you will not need it in the future, then you can feel free to go ahead and use an arrow function on everything else.
30 changes: 15 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,25 @@ _example:_
|----------|:-------------|:------:|:------:|
| 1 | [var Scoping Refresher](http://wesbos.com/javascript-scoping/) | X | X |
| 2 | [let VS const](http://wesbos.com/let-vs-const/) | X | X |
| 3 | let and const in the Real World | X | X |
| 4 | Temporal Dead Zone | X | X |
| 5 | Is var Dead? What should I use? | X | X |
| 6 | Arrow Functions Introduction | X | X |
| 7 | More Arrow Function Examples | X | X |
| 8 | Arrow Functions and `this` | X | X |
| 9 | Default Function Arguments | X | X |
| 10 | When NOT to use an Arrow Function | X | X |
| 3 | [let and const in the Real World](https://wesbos.com/let-vs-const/) | X | X |
| 4 | [Temporal Dead Zone](https://wesbos.com/temporal-dead-zone/) | X | X |
| 5 | [Is var Dead? What should I use?](https://wesbos.com/is-var-dead/) | X | X |
| 6 | [Arrow Functions Introduction](https://wesbos.com/arrow-functions/) | X | X |
| 7 | [More Arrow Function Examples](https://wesbos.com/arrow-function-examples/) | X | X |
| 8 | [Arrow Functions and `this`](https://wesbos.com/arrow-functions-this-javascript/) | X | X |
| 9 | [Default Function Arguments](https://wesbos.com/javascript-default-function-arguments/) | X | X |
| 10 | [When NOT to use an Arrow Function](https://wesbos.com/arrow-function-no-no/) | X | X |
| 11 | Arrow Functions Exercises | X | |
| 12 | Template Strings Introduction | X | X |
| 12 | [Template Strings Introduction](https://wesbos.com/javascript-template-strings/) | X | X |
| 13 | Creating HTML fragments with Template Literals | X | |
| 14 | Tagged Template Literals | X | |
| 14 | [Tagged Template Literals](https://wesbos.com/tagged-template-literals/) | X | |
| 15 | Tagged Templates Exercise | X | |
| 16 | Santizing User Data with Tagged Templates | X | |
| 17 | New String Methods | X | |
| 18 | Destructuring Objects | X | X |
| 16 | [Santizing User Data with Tagged Templates](https://wesbos.com/sanitize-html-es6-template-strings/) | X | |
| 17 | [New String Methods](https://wesbos.com/new-es6-string-methods/) | X | |
| 18 | [Destructuring Objects](https://wesbos.com/destructuring-objects/) | X | X |
| 19 | Destructing Arrays | X | X |
| 20 | Swapping Variables with Destructuring | X | X |
| 21 | Destructuring Functions - Multiple returns and named defaults | X | |
| 20 | [Swapping Variables with Destructuring](https://wesbos.com/destructuring-renaming/) | X | X |
| 21 | [Destructuring Functions - Multiple returns and named defaults](https://wesbos.com/destructuring-default-values/) | X | |
| 22 | The for of loop | X | |
| 23 | The for of Loop in Action | X | |
| 24 | Using for of with Objects | X | |
Expand Down