Day 27: ECMAScript 6

Thursday, July 7, 2016

Topics

Exploring ES6

A free eBook with tons of information about the new version of JavaScript. A good place to start is Chapter 4 - First steps with ECMAScript 6

New features of ECMAScript 6 used in class

Block scoping - Great article here

• let for block-scoped variables without hoisting
• const for immutable variables
• Block-scoped functions - no need for IIFE’s!

Arrow functions

// Old way
numbers.map(function(x) { return x + 1; });

// ES6 way
numbers.map(x => { x + 1 })

Lexical scoping of this - article here

// Old way
this.nums.forEach(function(x) {
  if (x === 1)
    this.ary.push(x);
}.bind(this));

// ES6 way
this.nums.forEach(x => {
  if (x === 1)
    this.ary.push(x)
})

String interpolation

// Old way
var message = "Hello, " + person.name + ",\n" +
"It is " + destination.distance + " miles to " + destination.place + "."

// ES6 way
let message = `Hello, ${person.name},
It is ${destination.distance} miles to ${destination.place}.`

Object property shorthand

// Old way
obj = { x: x, y: y };

// ES6 way
obj = { x, y }

Classes

class Example {
  constructor (a, b) {
    this.a = a
    this.b = b
  }
  otherFunction (x) {
    return x * 5
  }
}

Projects

Meganote: Morning | Afternoon

Meganote-server: Source

Homework

Modify your Meganote Server to allow it to create users

Base Requirement:

Save users without passwords

Super Mega Bonus Credit:

Verify that the password and password confirmation match before saving the user (still don’t save the password, though)

Super Mega Bonus Credit Hyperfighting:

Store encrypted passwords using bcryptjs