First Things First

Course Format

• In-Class Activities
• At-Home Challenges
• Course Website: http://anything.codes
• Slides: http://tiny.cc/gdies6

Need help?
Note the resources on the whiteboard

Thank you to our wonderful TAs!

Get Started: Tools

We'll be using the following tools in class:

• Environment
  • An optional CodePen account
  • Node.js (version 6 or higher)
• Command Line Interface (your preference)
  • Terminal, cmd, X11, Git Bash, etc.
• Text Editor (your preference)
  • Atom, SublimeText, WebStorm, etc.

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

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.

Today's Topics

1. Transpiling
2. Scopes & Variables
3. String Helpers

Transpiling

Transpiling = Transformation + Compiling

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

Waiting...

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

Scopes 🔬

1. Block Scopes (a.k.a. lexical scopes):

   {
     // anything within { } that isn't a function
   }
   
   if (isPhiladelphia) {
     var alwaysSunny = true;
   }

   • Examples: { }, if () { }, for() {}, while() { }, etc.
   • Purpose: Declare variables as close as possible, as local as possible, to where they will be used.
2. Function Scopes:

   function func() {
     // function required
   }

   • Purpose: Code wrapped in a function effectively "hides" any enclosed variable or function declarations from the outside scope.

var only respects function scopes

Function vs. Block Scope »

Function Scope Problems

var variables are function-scoped.
They ignore block scoping.

To fake block scoping, an immediately-invoked function expression (IIFE) is often used

The let Declaration

• Block-scoped { }, unlike the function-scoped var
• Value can be reassigned

Way easier than using an IIFE! 🏆

The const Declaration

• Block-scoped, like let
• Value cannot be reassigned
  • const stands for constant
• Must be initialized on declaration
• Communicates your variable's intent to other devs
• Helps catch unintended changes
• No more

  var PLZ_DONT_CHANGE = 42;

  🎉

Modifying Complex Values

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

Modifying Complex Values

Examples

See the Pen Updating the contents of const values by Liz Shaw (@anythingcodes) on CodePen.

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

String Helpers

String Helper Methods

Step aside, indexOf() — there are now easier ways to identify substrings:

1. includes() returns true or false depending on if the given text is found anywhere within the string
2. startsWith() returns true or false depending on if the given text is found at the beginning of the string
3. endsWith() returns true or false depending on if the given text is found at the end of the string

String Helper Methods

Each method accepts two arguments:

1. the text to search for
2. an optional index from which to start the search
   • includes() and startsWith() include the character at that index, while endsWith() excludes the character at that index

Template Strings

Allow multi-line strings

Great for use with HTML templates

'
' +
  '
Hello ' + str + '!
' +
'
';

`

  
Hello ${str}!
`;

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() }

const message = `User ${name} ${score >= 60 ? 'passed' : 'failed'} the exam`;