Ask if everyone was able to download everything. If not, no big deal. download now. CodePen recommended if they want to fork the practice exercises and save for later (will review on next slide). WebStorm is the only paid program on this list, but it's super useful if you plan on doing a ton of large JavaScript app development in future.

Show students how to fork a CodePen and save their work for each exercise.

Background

What is ES6?

📄 Standard:

ECMAScript, abbreviated ES

Describes features, syntax, and behavior of all implementations

Think of it as a ruleset or blueprint

✍ Implementation:

JavaScript, the implementation of the ECMAScript standard

Implementations track standards

📝 We'll implement the new features from versions 6 and 7 of ECMAScript using JavaScript

ECMAScript and ES terms are interchangeable

There are plenty of other implementations of ECMAScript, including ActionScript

Why use ES6?

Sure, there are handy new methods, syntax, and easier-to-read code, but...

Top JavaScript libraries will be written in ES6. If you aren't familiar with ES6, you'll be at a disadvantage when trying to read documentation and build new features.

Backwards compatible

Integrates nicely with modern build tools

🌟 Above all, it's the new standard. This means that, in the near future, ES6 will be standard in each browser.

Bigger leap than what existed in previous standards

Everything relevant going forward will use ES6

Today's Topics

Transpiling

Scopes & Variables

String Helpers

Transpiling

Transpiling = Transformation + Compiling

Before: ES6

const getMessage = () => 'Hello World';

After: ES5

Waiting...

Point out how this code block is being transpiled to that via Babel. Break the ES6 code as an example. Ask who's seen a src and dist folder. Both of these are creating a function that returns 'Hello World'. You and your team can focus on writing readable, less error-prone code in fewer lines. Enforces good coding practices behind the scenes ('use strict';). Allows you to focus on writing readable code in less lines. Build tools (e.g. WebPack) integrate nicely with this workflow and can be used to minify the ES5 result, add linting, add prefixes to CSS automatically, etc. [[[Browsers don’t yet implement natively a lot of ES6+ features, and developers want to innovate on what JavaScript is. This means they’ve built tools like Babel that implement futuristic JavaScript features and compile down to ES5.]]]

Benefits to Transpiling

Browser support

No need to wait for browsers/engines to catch up with the ECMAScript specification

Focus on writing clean, easy-to-read code — compile it to a cross-browser-compatible format

JavaScript will continue to evolve constantly; without transpilation, you'll miss out on innovations that make JavaScript more effective, efficient, and robust

Transpiling Setup

You can set this up on your machine using Node.js. For now, CodePen can use Babel to transpile ES6 for us.

Scopes & Variables

Can someone tell me what scope means in the context of programming in general?

Modifying Complex Values

Although you can't reassign a const's value, contents of complex values (objects & arrays) can be modified

The variable doesn't hold a constant array/object. Rather, it holds a constant reference to the array/object. The array/object itself is freely mutable. A const binding that references an object can’t later reference a different value, but the underlying object can indeed mutate.

Modifying Complex Values

Examples

The variable doesn't hold a constant array/object. Rather, it holds a constant reference to the array/object. The array/object itself is freely mutable.

Do you still need var?

No 😊

Only one potential case: If you have code that should be available from the global object (window in browsers), e.g. if you need to access code across frames or windows

👆 This is rare and should generally be avoided

Reality is that ES6 has brought much-needed functionality to the table. Block-scoping is a game-changer. Huge benefit to const/let is that they do not pollute your global scope (window in browsers). Much safer.

Activity

Complete activities 1 and 2 in CodePen. Be sure to fork the pen first if you'd like to save your work to your account!

Case sensitivity still matters. We aren't going to do any exercises around these, but they're included for reference. Good to be aware of. The only thing to note is how the index is handled in endsWith()

Template Strings

Allow multi-line strings

Great for use with HTML templates

ES5:

'

' +
'

Hello ' + str + '!

' +
'

';

becomes

ES6:

`

Hello ${str}!

`;

Ask who's used the ES5 version and gotten confused about plus signs, quotation marks, etc. when adding variables

Using Template Strings

const message = `User ${name} scored ${score} on the exam`;

Use backticks (` `) around the string

Use ${ } around any variable or expression

Work well with ternary operators, for example${ userIsYoungerThan21 ? serveGrapeJuice() : serveWine() }