wesbos / es6-articles

Blog Posts from Wes Bos. If you make an edit to one of these posts, my blog will automatically update.

ES6 Articles

Blog posts and articles about ES6. These posts are derived from the video course available at ES6.io.

Professional transcripts of the videos are being made available. From those we are creating easy to reference blog posts that will live on Wesbos.com.

Anyone is welcome to convert transcripts to blog posts as a means of solidifying their ES6 knowledge. Reviews, spelling corrections and re-wording is also welcome.

Naming Conventions

Prefix each article with the video number. Use a single leading zero for articles 1-9. The title should just use spaces as it shows in the video. Note the use of - in between the video number and the title.

example:

• 12 - Article Name.md
• 02 - I sure love Pizza.md

WIP Status

	Article Name	Captions	Blog Post
1	var Scoping Refresher	X	X
2	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
11	Arrow Functions Exercises	X
12	Template Strings Introduction	X	X
13	Creating HTML fragments with Template Literals	X
14	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
19	Destructing Arrays	X	X
20	Swapping Variables with Destructuring	X	X
21	Destructuring Functions - Multiple returns and named defaults	X
22	The for of loop	X
23	The for of Loop in Action	X
24	Using for of with Objects	X
25	Array.from() and Array.of()	X
26	Array. find() and .findIndex()	X
27	Array .some() and .every()	X
28	Spread Operator Introduction	X
29	Spread Exercise	X
30	More Spread Examples	X
31	Spreading into a function	X
32	The ...rest param in Functions and destructuring	X
33	Object Literal Upgrades	X	X
34	Promises	X
35	Building your own Promises	X
36	Chaining Promises + Flow Control	X
37	Working with Multiple Promises	X
38	All About Symbols	X	X
39	Getting Started with ESLint	X
40	Airbnb ESLint Settings	X
41	Line and File Specific Settings	X
42	ESLint Plugins	X
43	ESLint inside Atom and Sublime Text	X
44	Only Allow ESLint Passing Code into your git repos	X
45	JavaScript Modules and WebPack 2 Tooling Setup	X
46	Creating your own Modules	X
47	More ES6 Module Practice	X
48	Tool-Free Modules with SystemJS (+bonus BrowserSync setup)	X
49	All About Babel + npm scripts	X
50	Polyfilling ES6 for Older Browsers	X
51	Prototypal Inheritance Review	X
52	Say Hello to Classes	X
53	Extending Classes and using super()	X
54	Extending Arrays with Classes for Custom Collections	X
55	Introducing Generators	X
56	Using Generators for Ajax Flow Control	X
57	Looping Generators with for of	X
58	What are Proxies?	X
59	Another Proxy Example	X
60	Using Proxies to combat silly errors	X
61	Sets	X
62	Understanding Sets with Brunch	X
63	WeakSets	X
64	Maps	X
65	Map Metadata with DOM Node Keys	X
66	WeakMap and Garbage Collection	X

es6-articles's Issues

Linked titles in WIP table

README file
I noticed that there were only a couple of titles linked to the actual blog in the WIP table. I started to work on this after doing a pull request for just grammar edit suggestions, but thought this might also be good for other folks for #hacktoberfest if this is something you're wanting.

I made it through close to 20 before I thought to open it up as an issue. I'm a noob so I'm obviously not skilled enough to review posts based on the technical piece and thought this might be a simple one for other noobs trying to participate in the event.

Extending Arrays examples throw errors

Chapter 54:

Extending Arrays with Classes for Custom Collections.md

...throws an error in latest Chrome (76.0.3809.100 as of writing):

movies.add is not a function

Misleading statement in regards to Javascript

Promises article in Repo
Issue: The following statement is incorrect or misleading

In order to understand this, we need to be reminded that JavaScript is almost entirely asynchronous,, which means that if we take some code here...

Sources:
stackoverflow
medium

This statement can also be found in the Wes Bos ES6 Paid course

Review Articles

Any article that hasn't had a commit in ~2 years has never been reviewed.

Read through an article, submit any corrections related to code examples or spelling/grammar, submit a PR.

There are about 35 articles like this right now so plenty of space for Hacktoberfest

Stray push method in Spread Operator post.

Hi Wes,

I reached your Spread Operator Introduction post from here because it was listed as an external resource.

However, I encountered a stray push method in one of the code examples. I know it's not a big deal but beginners looking through might have a hard time going past that error.

It's right after the 9th paragraph.

let pizzas =  [];
pizzas = pizzas.concat(featured);
pizzas = push('veg');
pizzas = pizzas.concat(specialty);
console.log(pizzas);

I believe the third line should be pizzas.push('veg'). I can send in a PR for it if you'd like.

Regards.

All about Symbols error

In the ES6 paid video course it is said :

There is seventh primitive type that has been added to Javascript

There are only 6 primitive types in Javascript
You go on to say that an object is a primitive type, which is incorrect

Source: MDN Primitive

A similar error can be found in the es6-article: All About Symbols

ES6 has added a seventh primitive to JavaScript called a Symbol.

Add warning about modifying array's contructor

I suggest you add a word of warning to article 54 - Extending Arrays with Classes for Custom Collection. If you modify constructor signature of extended array, you will have bad time when trying to use .map(), .slice() or any other method that returns new instance of array. Javascript calls constructor each time it .map() is ran and that constructor is called with length of original array. Since you modified constructor signature, new copy of array won't be what you expected it to be.

Fix example for `new Set()`

The example in the article 61 - Sets and WeakSets.md says:

If you want to declare the set with the values in it while you make it, you can pass it just like you would array.
const students = new Set('Wes', 'Kara', 'Tony');

But the constructor for Set takes an iterable as a param, not a list of primitive values. When you do const students = new Set('Wes', 'Kara', 'Tony');, it will coerce the first string into an array and use it create the set and this will result in student = {"w", "e", "s"} and the remaining arguments will be ignored.
More on MDN.

The correct code should be const students = new Set(['Wes', 'Kara', 'Tony']);. We should always pass an iterable as an argument to the Set constructor if we want to initialize it with some values.

I'll make that change and raise a pull request.