Getting Started with ES6 and ES7 JavaScript
-
- Class 1
-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 -- -
-
-
- Command Line Interface (your preference)-
-
-
- Terminal, cmd, X11, Git Bash, etc. -
- -
- Text Editor (your preference) --
-
-
- Atom, SublimeText, WebStorm, etc. - -
-
Optional Activity
- - - --
-
- Login to http://codepen.io (it's free!) -
- For each CodePen exercise, click
Edit on CodePen
- - Click the
Forkbutton at the top
- - Edit away! Your changes will save to a new pen in your CodePen account -
See the Pen Block-scoping: ES5 (Before) by Liz Shaw (@anythingcodes) on CodePen.
- - -Modern JavaScript ES6 and beyond
+
+ Class 1
+Course Format
+-
+
- In-Class Activities +
- At-Home Challenges +
- Slides: + https://github.com/gdiseattle/gdi-es6-javascript + +
+
+ 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 ++ +
+
-
+ + Command Line Interface (your preference) ++
-
+
- + Terminal, + cmd, + X11, + Git Bash, etc. +
+ -
+ + Text Editor (your preference) ++
-
+
- + Visual Studio Code, + Atom, + + SublimeText + , + + WebStorm + , etc. + +
+
Optional Activity
++ +
+ + +-
+
- Login to + http://codepen.io (it's free!) +
- For each CodePen exercise, click
+
Edit on CodePen+
+ - Click the
+
Forkbutton at the top
+ - Edit away! Your changes will save to a new pen in your CodePen account +
See the Pen + Block-scoping: ES5 (Before) by Liz Shaw ( + @anythingcodes) on + CodePen.
+ + +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 -
- 
-
+
✍ Implementation:
-
+
- + JavaScript is one implementation of the + ECMAScript standard +
+
- 📝 We'll implement the new features from versions 6 and 7 of ECMAScript using JavaScript -
History
+
+ 
+
-
+
- + June 2015: + ES6 / ES2015 + (ECMAScript 6 features) + +
- + June 2016: + ES7 / ES2016 + (Array.prototype.includes, ** operator) + +
- + June 2017: + ES8 / ES2017 + (async / await, Object values / entries, etc.) + +
- + expected in 2018: + ES9 / ES2018 + (async iteration, etc.) + +
- + ES.Next: + Next version of ECMAScript coming out, right now it's + ES9 + + +
- + The Complete ES2015-ES2017 guide + +
Transpiling = Transformation + Compiling
-+
Today's Topics
+-
+
- Transpiling +
- Let & Const +
- Linters +
- Template Strings +
- Enhanced Object Literals +
- Classes + +
Transpiling
++ Transpiling = Source-to-source compiling
++
- Before: ES6
-const getMessage = () => 'Hello World';After: ES5
-Waiting...Before: ES6
+const getMessage = () => 'Hello World';- - +
After: ES5
+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.
+
+ 
+
Let & Const
+ +Scopes 🔬
+-
+
-
+ Until ES6 JavaScript only had global and function level scope
+
+function func() { + // function required +}
+ -
+
+
+
+ var
+ only respects function scopes
+
Scopes 🔬
+-
+
-
+ Block Scopes (a.k.a. lexical scopes):
+
-{ + // block is anything within { } that isn't a function or a declaration of an object } - -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. -
- - Examples:
-
- 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 » +
+ + + + ++ Let and + Const keywords
+-
+
- Block-scoped
+
{ }, unlike the function-scoped +var+
+
+ -
+
Let+ can be reassigned +-
+
- New way to declare variables +
+ -
+
Const+ cannot be reassigned +-
+
- Const stands for constant +
- Must be initialized on declaration +
- But... Complex values can be changed
+
+
+
+
+
+
Instructions can be found by editing the below pen on CodePen. Be sure to fork the pen first if you'd like to save your work to your account!
-Activity 2
-See the Pen Block-scoping with let (Before) by Liz Shaw (@anythingcodes) on CodePen.
- View Solution -Activity
+ +Instructions can be found by editing the below pen on CodePen. Be sure to fork the pen first if you'd like to save your + work to your account!
+Activity 1
+See the Pen + Block-scoping by Liz Shaw ( + @anythingcodes) on + CodePen.
+ View SolutionActivity 2
+See the Pen + Block-scoping with let (Before) by Liz Shaw ( + @anythingcodes) on + CodePen.
+ View Solution +Do you still need
+ var?
+ -
+
- Most popular answer is no, but how do you decide? +
- Use your team's style guide +
- Use a popular style like like
+ Airbnb:
+
-
+
- avoid var +
- use const unless you need to reassign +
+
Linters
+What is a linter?
+-
+
- Parser that analyzes your code and looks for mistakes +
- Can help you:
+
-
+
- Develop faster +
- Keep your code organized +
- Make fewer syntax errors +
+ - Enforces your team's coding style and makes your code easier to read +
ESLint Demo
+String Helpers
-Template Strings
+Template Strings
-Allow multi-line strings
-Great for use with HTML templates
-ES5:
-'' +
+
+ Template Strings
+ Allow multi-line strings
+ Great for use with HTML
+ templates
+
+
+
+ ES5:
+ '' +
'Hello ' + str + '!
' +
'';
- becomes
-
-
- ES6:
- `
+ becomes
+
+
+ ES6:
+ `
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`;
+
+
+
+
+ Activity
+ Refactor this code to use template strings.
+
+ See the Pen
+ Template Strings Activity by Liz Shaw (
+ @anythingcodes) on
+ CodePen.
+
+ View Solution
+
+
+
+
+ Enhanced Object Literals
+
+
+
+
+ Property Initializer Shorthand
+ When an object property name is the same as the local variable name, you can include the name without a colon and value
+
+
+ ES5:
+ function saveData(url, data){
+ $.ajax({ method: 'POST', url: url, data: data });
+}
+ becomes
+
+
+ ES6:
+ function saveData(url, data){
+ $.ajax({ url, data, method: 'POST' });
+}
+
+
+ Sometimes referred to as
+ enhanced literal notation
+
+
+
+
+
+ Concise methods
+ Object methods no longer need
+ : function
+
+
+
+ ES5:
+ var dog = {
+ name: 'Boo',
+ bark: function() {
+ console.log('yip!');
+ }
+};
+dog.bark(); // yip!
+ becomes
+
+
+ ES6:
+ const dog = {
+ name: 'Boo',
+ bark() {
+ console.log('yip!');
+ }
+};
+dog.bark(); // yip!
+
+
+
+
-
- Using Template Strings
- const message = `User ${name} scored ${score} on the exam`;
-
+
+ Activity
+ Using Enhanced Object Syntax
+
+ See the Pen
+ Object Syntax by Liz Shaw (
+ @anythingcodes) on
+ CodePen.
+
+ View Solution
+
+
+
+
+ Classes
+
+
+
+
+ Classes
+
+
+ ES5:
+ function Vehicle(type) {
+ this.type = type;
+}
+
+Vehicle.prototype.logType = function() {
+ console.log(this.type);
+};
+
+var car = new Vehicle('car');
+car.logType(); // 'car'
+
+console.log(car instanceof Vehicle); // true
+console.log(car instanceof Object); // true
+
+
+
+ ES6:
+ class Vehicle {
+ constructor(type) {
+ this.type = type;
+ }
+
+ logType() {
+ console.log(this.type);
+ }
+}
+const car = new Vehicle('car');
+car.logType(); // 'car'
+
+console.log(car instanceof Vehicle); // true
+console.log(car instanceof Object); // true
+
+
+
+
+ You don't need commas between the elements of a class
+
+
+
+
+
+
+ Derived Classes
+
+ Derived classes: Classes that inherit from other classes
+ Within the derived class's
+ class {} definition, use the
+ extends keyword to specify the base class. Then access the base class constructor by calling
+ super().
+ class Rectangle {
+ constructor(length, width) {
+ this.length = length;
+ this.width = width;
+ }
+
+ getArea() {
+ return this.length * this.width;
+ }
+}
+
+ class Square extends Rectangle {
+ constructor(length) {
+ super(length, length); // calls the base class constructor
+ }
+}
-
- Activity
- Refactor this code to use template strings.
-
- See the Pen Template Strings Activity by Liz Shaw (@anythingcodes) on CodePen.
+const square = new Square(5);
+console.log(square.getArea()); // 25
+
+
+
+
+
+ Activity
+ Classes and Derived Classes
+
+
+ Activity 1
+ See the Pen
+ Classes by Liz Shaw (
+ @anythingcodes) on
+ CodePen.
+
+ View Solution
+
- View Solution
-
-
+
+ Activity 2
+ See the Pen
+ Shop Activity - Classes and Derived Classes by Liz Shaw (
+ @anythingcodes) on
+ CodePen.
+ View Solution
+
+
+
+
+
+ Optional Activity
+ Practice Test Driven Development with http://es6katas.org/
+
-
- At-Home Challenge
- Fruit Basket
-
-
- var fruit = 'apple';
+
+ At-Home Challenge
+ Fruit Basket
+
+
+ var fruit = 'apple';
(function basket(){
var fruit = 'banana';
@@ -598,76 +1027,82 @@ Fruit Basket
fruitBasket.getFruit();
console.log(fruit);
-
-
- What would the following output to the console and why?
-
-
-
-
-
-
-
-
+
+
+
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+