This repository has been archived by the owner on Nov 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathes6.html
358 lines (346 loc) · 20.4 KB
/
es6.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html>
<head>
<title>ES6travaganza!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=BioRhyme:800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700" rel="stylesheet">
<link rel='stylesheet' type='text/css' href="../css/reset.css">
<link rel='stylesheet' type='text/css' href="../css/prism.css">
<link rel='stylesheet' type='text/css' href="../css/styles.css">
</head>
<body>
<header>
<pre id='ascii-title' style='font-size:4.5vw; line-height:0.8em; letter-spacing: 0.001em; font-weight:700;'>
`7MM"""YMM .M"""bgd .6*"
MM `7 ,MI "Y ,M'
MM d `MMb. ,Mbmmm.
MMmmMM `YMMNq. 6M' `Mb.
MM Y , . `MM MI M8
MM ,M Mb dM WM. ,M9
.JMMmmmmMMM P"Ybmmd" WMbmmd9
</pre>
<h2 class='date'> October 6th, 2018</h2>
</header>
<article>
<section id="todo">
<h1>To-Do's:</h1>
<ul>
<li>Administrivia</li>
<li>ES5 Warm-Up</li>
<li>Const/Let and Template Literals</li>
<li>Array Methods and Arrow Functions</li>
<li>Destructuring and Object Notation</li>
<li>Import</li>
<li>Transpilers</li>
<li>Classes</li>
</ul>
</section>
<section>
<h1>Administrivia</h1>
<p>Good morning, all! Today's class marks the beginning of something you've all be waiting for:
<span class="bold">React week</span>! However, we have to rein it in a little to talk about something we've briefly used before:
ES6. In React, you'll absolutely <span class="italic">need</span> to understand ES6, and not just arrow functions and template strings.
For this class, you are no longer using ES6 as a suggestion—it is a requirement. What does this mean for you?</p>
<p>For starters, it means cleaner, easier-to-read code. Incidentally, this is what can make you stand out as a top contender
for JavaScript-heavy jobs. Once you start using ES6 (and some ES7 features too!), you'll be primed and ready for React.
</p>
</section>
<section>
<h1>ES5 Warm-Up</h1>
<p class="no-letter">Today's class begins with an activity to review functional scope. This is a good segue into how we'll be thinking about scope for the
rest of the class.
</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>ES5 Warm-Up</h3>
<p>Check out <span class="mono">101-Stu_ES5Warmup</span>. Go over this file either alone or with a partner and discuss what you
expect the value to be at each line <span class="italic">without running it in your browser</span>.</p>
<p><span class="mono">console.log</span> has been replaced with a similar method that logs the line of code for each function call.</p>
</div>
<div class="review">
<h2>ES5 Warm-Up Review</h2>
<p>Let's take a look at this file and get individual answers to why each stop logs the line it does.</p>
</div>
<p>Here's a reminder about the concept of functional scoping: variables are hoisted to the top of and available only in the scope of the containing
function (or globally, if there exists no containing function). Functional scoping can be confusing, and knowing what the value of a variable is at
any point can require a significant amount of thought.</p>
<p>Two big problems with functionally scoped variables:</p>
<ol>
<li>You can use variables before their definition, which can lead to unexpected or confusing behavior.</li>
<li><span class="mono">for</span> loop iterator variables are functionally scoped, which means they can't be specific to a single loop iteration,
making it harder for things like nested asynchronous functions to use the iterator variable (since that variable will
be the value of the last iteration of that loop)</li>
</ol>
<p><span class="mono">var</span>s are difficult to deal with sometimes, and we don't use them very much in React. Instead,
we'll use two classic keywords from a while back...</p>
</section>
<section>
<h1>Const/Let</h1>
<p>Believe it or not, <span class="mono">const</span> and <span class="mono">let</span> are actually ES6 keywords. These two keywords
help us declare block-scoped variables such that they are specific to the containing block statement, i.e. anything in curly braces.
You may have noticed that when I convert examples to ES6, I use <span class="mono">const</span> for required code and <span class="mono">let</span>
within <code class="language-javascript">for(let i in obj)</code> loops. Why?</p>
<p>Constants are just that: they remain constant and are unchanging. This is great for included middlewares, numeric and string values.
<span class="mono">const</span> implicitly tells readers of your code that these values are never going to be reassigned. From here on out,
you should default to <span class="mono">const</span> unless you're certain that the value is going to change.
</p>
<p>In contrast, <span class="mono">let</span> signals clearly to the reader that the variable is likely to be reassigned (especially if you follow default to using
<span class="mono">const</span> if it won't change). This lets the reader know immediately that this value is going to change. Great care should be
taken when replacing instances of <span class="mono">var</span> with <span class="mono">let</span>. They do behave differently and can change
your code's behavior.</p>
<p>If you recall our fun with scoping from a while ago, you'll recall the value and convenience of block-scoped variables.
It's easy to declare variables closer to where they are used in the code, improving readability. Stylistically, you're
saying "don't use the variable anywhere but right here."
</p>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Convert Warm-Up ES5 → ES6 Const/Let</h3>
<p>Check out <span class="mono">103-Stu_RedoWarmup/Unsolved/function-scoped.js</span>, which is a simplified version of the warmup. Go
through it and convert all of the variables to be appropriately block-scoped.</p>
<p>Does the code still work the same way as it did before your refactor?</p>
</div>
<div class="review">
<h2>ES5 → ES6 Review</h2>
<p>You should have noticed that the biggest difference in behavior is that
<span class="mono">setTimeout</span>'s callback function actually prints <span class="mono">i</span>
as expected. Also, the iterator variable throws reference errors if you try to use it outside of the for loop.</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Debugging ES5</h3>
<p>Open up <span class="mono">104-Stu_ES5Debug/Unsolved</span>. Work with a partner to identify and
resolve an issue in an example using ES5 code. <span class="mono">const</span> and <span class="mono">let</span>
will be useful here.</p>
</div>
<div class="review">
<h2>Bug squashing!</h2>
<p>What was the bug? What's the fix?</p>
<hr>
<p>Everyone was eating the same number of tacos in the buggy version. If you're anything like me,
<span class="italic">you're eating much, much more</span> than everyone else. To get proper representation
for those with voracious appetites, using the loop iterator variable to count the number of tacos each person ate
is problematic when using <span class="mono">var</span>s instead of block-scoped variables.
</p>
</div>
<h2>Template Literals</h2>
<p>By now, everyone should be familiar with string template literals. As a refresher:</p>
<pre><code class="language-javascript">// Boooooring. And tedious, too!
"Hello "+username+".\n\nToday is a boring day to learn ES5."
// This is what we want! No \n or concats
`What's good, ${username}?
Today's a perfect day for some ES6!`
// Another good example
`Your balance is ${balance < 100 ? 'looking kinda low...' : 'a-okay!'}`</code></pre>
<p>It should be noted that within the template, you can put <span class="note">any</span> valid JavaScript inside.
When we start React, a very common paradigm is to use conditionally-rendered content, like the above.</p>
<p>We also have a few convenient methods:
<span class="mono">startsWith</span>, <span class="mono">endsWith</span>, and
<span class="mono">includes</span>. These methods are exactly what they say on the tin.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Template Literals and String methods</h3>
<p>Crack open <span class="mono">105-Stu_GameOfStrings/Unsolved</span>.</p>
<p>In this activity, you will convert an application to use string template literals and string methods.</p>
<p>Convert the <span class="mono">game-of-strings.js</span> into ES6 using what we've learned so far.
This activity is simply converting the code over to ES6. It isn't necessary to understand every line of code to know
where improvements can be made. Use <span class="mono">startsWith</span>,
<span class="mono">endsWith</span>, and <span class="mono">includes</span> where appropriate.</p>
</div>
<div class="review">
<h2>Template Literals and String methods Review</h2>
<p>Let's go over these changes.</p>
</div>
</section>
<div class="page-break">
<h1>Break time!</h1>
</div>
<section>
<h1>Array Methods and Arrow Functions</h1>
<p>In the past, I've mentioned <span class="mono">Array.map</span>,
<span class="mono">Array.fiter</span> and <span class="mono">Array.reduce</span>. Without giving you a review of these methods, I'd like
for you to go over these methods by yourselves in the following activity...</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>New Array Methods</h3>
<p>Open up 106-Stu_Arrays/Unsolved. You'll be using the new array methods to accomplish given tasks.</p>
</div>
<div class="review">
<h2>Array Methods Review</h2>
<p>Let's go over each array method in detail.</p>
<p>Think about how much easier they make things as opposed to for loops.</p>
</div>
<h2>Arrow Functions</h2>
<p>As all of you know, I'm not particularly fond of writing <span class="mono">function</span> over and over and over and over ad nauseum.
<span class="note">Arrow functions</span> allow us to significantly clean up our code, and not just by removing the function keyword.</p>
<pre><code class="language-javascript">// old school
function foobar(foo, bar){
return foo+bar;
}
// Arrow function, but we can do better.
const foobar = (foo, bar) => {
return foo+bar;
}
// Arrow functions without brackets are implicit returns
const foobar = (foo, bar) => ( foo + bar );</code></pre>
<p>You might recall that arrow functions have different usage and use the <span class="note">lexical <span class="mono">this</span></span>.
Let's look at a couple of examples in <span class="mono">107-Ins_ArrowExample</span>.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Convert to Arrow Functions</h3>
<p>Open up <span class="mono">108-Stu_ArrowArrays/Unsolved</span>.</p>
<p>Go back through the previous example and convert it to use
arrow functions. Going forward, you will <span class="note">not
be using ES5 functions by default</span>. Arrow functions will
become the norm.
</span>
</p>
</div>
<div class="review">
<h2>Example Arrow Function Review</h2>
<p>Let's go over this quickly.</p>
</div>
</section>
<section>
<h1>Destructuring and Object Notation</h1>
<p>In addition to array and function changes, there are also object
changes. I've talked about them briefly, but just as a refresher,
<span class="note">object destructuring</span> allows us to pull properties
out of objects into new variables with less code. It looks like the following:
</p>
<pre><code class="language-javascript">// object declaration
const obj = { foo: 42, bar: 'foobar' };
// object destructuring
const { foo, bar } = obj;
// we have our own foo and bar now!
console.log(foo); //42
console.log(bar); //foobar</code></pre>
<p>It doesn't seem like it yet, but this becomes <span class="italic">absurdly</span>
useful in React, especially with imports.</p>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Object Destructuring Example</h3>
<p>Open up <span class="mono">109-Stu_ObjDestruct/Unsolved</span>.
You'll be updating a JS file to utilize object destructuring.</p>
</div>
<div class="review">
<h2>Object Destructuring Review</h2>
<p>Let's go over this quickly.</p>
</div>
</section>
<section>
<h1>Import</h1>
<p>In addition to the new syntax and functionality we've looked at, ES6 introduces new ways to organize and think about
the architecture of your code. Everyone is familiar with CommonJS modules available in Node, specifically
<span class="mono">module.exports</span> and <span class="mono">require()</span> to share code
between files. ES6 uses <span class="note">ES2015 modules</span> to make sharing code
between files a cinch. Let's open up <span class="mono">111-Ins_ES2015Modules</span> and then run it with
<span class="mono">babel-node</span>.</p>
<p>Things to keep in mind: how <span class="mono">import</span> differs depending on whether the export is a default export or a named export,
only one <span class="mono">default</span> export per module, object destructuring when getting multiple modules from multiple named exports.</p>
<p>ES2015 modules also take advantage of <a href="https://webpack.js.org/guides/tree-shaking/" target="_blank">tree shaking</a>.
Tree shaking is a term commonly used in the JavaScript context for dead code elimination.
When working with CommonJS modules, whenever we require <span class="italic">anything</span> from another JavaScript file, the entire file is
essentially loaded, even if parts of the code aren't actually being used. On the server, this isn't normally a problem.
But as we begin working with React we'll be using modules in our front-end code and bundle size will definitely matter.</p>
<p class="accent">Larger bundle size? Slower load times.</p>
<p>When working with ES2015 modules, we can configure our project to take advantage of tree shaking and effectively not
import any more code than we mean to into our final project. While ES2015 modules are awesome, they are new to JavaScript and not currently supported inside of Node out of the box.
In order to take advantage of them, we'll need a JavaScript transpiler!</p>
</section>
<section>
<h1>Transpilers</h1>
<p>Not every environment supports all of these new features. While much of what we've covered so far has decent support on
relatively modern browsers, many of the features we'll use moving forward won't have as widespread usage or support.
We can see a table of what works and what doesn't at
<a href="http://kangax.github.io/compat-table/es6/" target="_blank">http://kangax.github.io/compat-table/es6/</a>.</p>
<p>For our code to work in every environment, we'll use a tool called <span class="note">Babel</span>
to convert our spottily-supported ES6 code to good old fashioned ES5 code. This process of transforming and compiling ES6 to
ES5 is called "transpiling". We are translating our new ES6 code
(that not every environment can parse) into something that they can still understand.</p>
<p>Let's open the <a target="_blank"
href="https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYewdgzgLgBAEgUQDJIPIwLwwERwKYA2BIMA6iAE4EAmAhNgNxA&debug=false&circleciRepo=&evaluate=true&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0">
Babel REPL - babeljs.io/repl
</a> to convert ES6 to ES5 in real-time. There's also a babel-repl extension in VS Code you can use.</p>
<p>Babel has a ton of additional presets and extensions that allow you to take advantage of even newer ECMAScript features
- ES2015 and beyond. We'll touch on this again when we use React. The biggest takeaway is that this allows us to use the newer
(even not yet officially approved) JavaScript features everywhere today, even ES7 and ES8 features.</p>
<h2>Babel Install</h2>
<p>All you have to do is the following:</p>
<pre><code class="language-bash">npm i -g babel-cli</code></pre>
<p>To use it, all you need is this:</p>
<pre><code class="language-bash">babel-node script.js</code></pre>
<p>It really is <span class="bold">that</span> easy. Create a simple JS file and run:</p>
<pre><code class="language-bash">babel-node script.js</code></pre>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>Discuss ES2015 Modules</h3>
<p>Pop open <span class="mono">112-Stu_ES2015Modules/Unsolved</span>.
Your task is to correctly utilize ES2015 module syntax in order to pass data around a small JavaScript application.</p>
</div>
<div class="review">
<h2>ES2015 Modules Review</h2>
<p>The most important thing you have to understand between exports and default exports:</p>
<ul>
<li>A file can have multiple named exports and multiple values can be exported from a single file.</li>
<li>A file may <span class="italic">only</span> have one default export. This is the default value imported if no named import is specified.</li>
</ul>
</div>
</section>
<section>
<h1>Classes</h1>
<p>Remember constructor functions?
They're special JavaScript functions that can be used as a blueprint to create multiple instances of the same type of object.
When was the last time you used one?</p>
<p>Object inheritance works differently in JavaScript than it does for other object oriented languages. Other programming
languages have the concept of classes, which are written more or less the same way across languages. Classes don't
really exist in JavaScript, what we use instead are constructor functions. Compared to classes in other programming languages, the syntax for writing constructor functions, prototypes and
reusing code across constructors can be confusing. This is a common source of frustration for both for brand new
developers and seasoned veterans.</p>
<p>With ES6, we finally have support for classes in JavaScript!</p>
<pre><code class="language-javascript">// basic syntax
class foo {
constructor(){
bar = 42;
foobar = 'foobar';
}
func(){
console.log(this.bar);
}
// etc. etc....
}</code></pre>
<p>Let's open up <span class="mono">113-Ins_Classes</span> and run <span class="mono">Vehicle.js</span>, then we'll go through it.</p>
<hr>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>From Constructors to Classes</h3>
<p>Open up <span class="mono">114-Stu_ConstructorsToClasses/Unsolved</span>. You'll be converting what was previously a
constructor into new ES6 syntax.</p>
</div>
<div class="review">
<h2>Constructors to Classes Review</h2>
<p>Let's go over this activity.</p>
</div>
<div class="student-activity">
<h2>Student activity!</h2>
<h3>SpaceX Example</h3>
<p>Open up <span class="mono">115-Stu_SpaceX/Unsolved</span>. For our final activity, you'll be SpaceX developers.
You'll be using a SpaceX API to report on launch failures. Check out the README for instructions.</p>
</div>
<div class="review">
<h2>SpaceX Review</h2>
Let's go over this code line-by-line.
</div>
</section>
<div class="page-break">
<h1>That's all for today, see you Monday!</h1>
</div>
</article>
</body>
<!-- Script to make code pretty -->
<script type='text/javascript' src="../js/prism.js"></script>
</html>