Moving to ES6

Welcome!

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 version 6 of ECMAScript using JavaScript

What ES6 can do for you

1. Fix scoping problems
2. Write cleaner, easier-to-understand code
3. New functionality for working with arrays and objects
4. A built-in helper for making AJAX requests
5. Encourage the ✨powers✨ of object-oriented programming

( 1 )Fix scoping problems

Scopes 🔬

Why is this a problem?

Unpredictable and hard to control

CodePen Example »

How does ES6 fix block scoping?

Use let and const instead of var

• const is for constants
• let is for variables whose value will change (Example »)
• Use const by default, but change to let when you need to change the value

CodePen Example »

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

How does ES6 help with function scope issues?

• With arrow functions: =>
• Usually used to fix issues with the this keyword

var getMessage = function(name) {
  return 'Hello ' + name;
}

const getMessage = name => 'Hello ' + name;

The this keyword

The this keyword determines context

const obj = {
  name: 'Zeta',
  getName: function() {
    console.log(this.name);
  }
};
			
obj.getName(); // Zeta

There's this One Problem

Binding and changing this in functions is one of the most common JavaScript errors

var self = this;

var _this = this;

var that = this;

What is this problem?

Let's take a look

Can arrow functions help?

• Arrow functions do not have a this 🌟
• The value of this is lexically fetched from the scope the arrow function sits inside

( 2 )Write cleaner, easier-to-understand code

Template Strings

Allow multi-line strings

Great for use with HTML templates

var html = '
' +
  '
Hello ' + str + '!
' +
'
';

const html = `

  
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`;

Default Parameter Values

Using ES5, we could establish default parameter values, but there were some flaws
View CodePen »

ES5:

function makeRequest(url, timeout, callback) {
  timeout = timeout || 2000;
  // what if timeout is 0?
  callback = callback || function() {};
  callback();
}

becomes

function makeRequest(url, timeout, callback) {
  timeout = (typeof timeout !== 'undefined') ? timeout : 2000;
  callback = (typeof callback !== 'undefined') ? callback || function() {};
  callback();
}

ES6:

function makeRequest(url, timeout = 2000, callback = () => {}) {
  callback();
}

It's beautiful

Calling functions with default parameters

Given the following function:

function makeRequest(url, timeout = 2000, callback = () => {}) {
  callback();
}

makeRequest('/api');
				
makeRequest('/api', 500);

makeRequest('/api', 0, requestData => updateDatabase(requestData));

makeRequest('/api', undefined, requestData => updateDatabase(requestData));

( 3 )New functionality for working with arrays and objects

Destructuring Objects

Unpack properties from objects into distinct variables

var person = {
  name: 'Whitney',
  age: 38
};
		
var name = person.name;
var age = person.age;
		
console.log(name, age); // Whitney 38

const person = {
  name: 'Whitney',
  age: 38
};
		
const { name, age } = person;
console.log(name, age); // Whitney 38

• Left-hand side of the equal sign (=)
  A comma-separated list of the object's keys you'd like to unpack, wrapped in { }
• Right-hand side of the equal sign (=)
  The object you're destructuring

Destructuring Arrays

Array destructuring operates on positions within an array rather than any named properties

var colors = ['red', 'green', 'blue'];
		
var first = colors[0];
var second = colors[1];
var third = colors[2];
		
console.log(first, second, third);
// red green blue

const colors = ['red', 'green', 'blue'];
		
const [ first, second, third ] = colors;
		
console.log(first, second, third);
// red green blue

• Left-hand side of the equal sign (=)
  A comma-separated list of the values you'd like to unpack, wrapped in []
• Right-hand side of the equal sign (=)
  The array you're destructuring

Array Helpers

Tons of new methods that can be applied to arrays

Array Helpers

Moving away from for loops

• Easier for other devs to immediately read and understand
• Encourage functional programming
• More compact — why write more code?
• More maintainable and scalable

forEach

var names = ['Morgan', 'Taylor', 'Lesley'];

for (var i = 0; i < names.length; i++) {
  console.log(names[i]);
}

const names = ['Morgan', 'Taylor', 'Lesley'];

names.forEach(function(name, index, array) {
  console.log(name);
});

forEach

const numbers = [123, 500, -50, 82, 8];
  numbers.forEach(function(number, index, array) {
  console.log(number > 50); // can you get this on one line?
});

map

You can assign the resulting array to a variable:
const modifiedArr = arr.map(iteratorFunction);

var numbers = [2, 6, 10];
var halvedNumbers = [];

for (var i = 0; i < numbers.length; i++) {
  halvedNumbers.push(numbers[i] / 2);
}

console.log(halvedNumbers); // 1, 3, 5

const numbers = [2, 6, 10];

const halvedNumbers = numbers.map(number => number / 2);

console.log(halvedNumbers); // 1, 3, 5

No need to create an empty array first! 🎉

map

const numbers = [123, 500, -50, 82, 8];
const decrementedNumbers = numbers.map(number => number - 1);
console.log(decrementedNumbers); // [ 122, 499, -51, 81, 7 ]

find

const matchingObject = arr.find(iteratorFunction);

var jobs = [
  { title: 'Electrician' },
  { title: 'Developer' },
  { title: 'Barista' }
];
var devJob;
for (var i = 0; i < jobs.length; i++) {
  if (jobs[i].title === 'Developer') {
    devJob = jobs[i];
	break;
  }
}
console.log(devJob); // { title: 'Developer' }

const jobs = [
  { title: 'Electrician' },
  { title: 'Developer' },
  { title: 'Barista' }
];
const devJob = jobs.find(job => job.title === 'Developer');
console.log(devJob); // { title: 'Developer' }

find

arr.find(iteratorFunction)

const jobs = [
  { title: 'Electrician' },
  { title: 'Developer' },
  { title: 'Barista' }
];
const devJob = jobs.find(job => job.title === 'Developer');
console.log(devJob); // { title: 'Developer' }

find() Practical Example

Single-page web apps

reduce

const reducedValue = arr.reduce(iteratorFunction, initialValue);

var numbers = [2, 6, 10];

var sum = 0;
for (var i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum); // 18

const numbers = [2, 6, 10];

const sum = numbers.reduce(function(currentSum, number) {
  return currentSum + number;
}, 0);

console.log(sum); // 18

reduce in action

arr.reduce(iteratorFunction, initialValue);

const numbers = [1, 5, 10];

const sum = numbers.reduce(function(calculatedValue, number) {
  return calculatedValue + number;
}, 0); // 0 is the initialValue

console.log(sum); // 16

Let's take a look »

Map and Reduce

A Sandwich Metaphor

( 4 )A built-in helper for making AJAX requests

Fetch

The fetch() helper is used for AJAX requests

The initial return value is the Response object; use chaining and the .json() method to get the JSON you need

fetch('http://json.com')
  .then(serverResponse => serverResponse.json())
  .then(json => console.log(json))
  .catch(err => console.log(err));

( 5 )Encourage the ✨powers✨ of object-oriented programming

Classes

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

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
  }
}
			
const square = new Square(5);
console.log(square.getArea()); // 25

Additional Resources

Transpiling = Transformation + Compiling

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

Waiting...

• Setting Up an ES6 Project Using Babel for Beginners »
  (Note: use babel-preset-env instead of babel-preset-latest)
• Transpiling ES6 using Gulp »
  (Note: use babel-preset-env instead of babel-preset-es2015)
• Official Babel Setup Docs »

Additional Resources