ES 2015

Also known as ECMAScript 2015 or ES6

Alternative - Modules / import

A javascript module is a piece of resuable code that can be reused in other files.
Provides an alternative to CommonJS

// before 
var React = require('react')  

// after 
import * as React from 'react'  

New - export

The keyword 'export' can be used to export objects and types.

export default OnlyOneType 

export default can be used in place of export when you wish to export only one type.

New - let and const

var myVar1; 
let myVar2; 
const myVar3; 

var declarations are function scoped when declared inside a function and globally scoped when declared outside
let declarations are block scoped.
const declarations are block scoped.

Alternative - Method Definitions

Provides an alternative to using the 'function' keyword

// before 
var myObject = { 
   myMethod: function() {} 
} 

// after 
var myObject = { 
   myMethod() {} 
} 

New - Arrow Functions

Functions > Arrow Functions
Arrow functions allow you to create a function without using the "function" keyword.
Arrow functions (in some situations) allow you to return a value without using the "return" keyword. They have an "implicit return".

// before 
const myFunction = function() { 
} 

// after 
const myFunction = () => { 
} 

New - Fetch API

The Async Patterns > Fetch API, provides a global window.fetch() method for making asynchronous requests to REST APIs.
Before asynchronous requests could be performed using XMLHttpRequest.

// before 
let xhr = new XMLHttpRequest(); 
xhr.open('get', 'https://bettersolutions.com/getsomething/1'); 
xhr.send(); 
xhr.onload = function() { 
    console.log(xhr.response); 
}; 

New - Classes

Classes
inheritance
static methods
private methods
get and set

New - Map Collections

A new data structure to enable mapping a key to a value.
Arrays > Collections > Maps

New - Set Collection

A new data structure which is an ordered collection of unique values.
Arrays > Collections > Sets

this keyword

Functions > this Keyword
when used inside an object method
(declared using without arrow functions)
this refers to the object
When used in combination with arrow functions 'this' will be undefined
For this reason do not use arrow functions inside objects

New - Promises

Async Patterns > Promises
They provide one way to deal with asynchronous code

New - Generator Functions

Yield keyword
Generators can be used for both synchronous and asynchronous purposes, but it's important to understand that they are the foundation on which the more popular async/await syntax is built on
A generator function is a function that can return multiple values, through intermediate "returns" marked by the keyword yield.
Generator functions are declared by adding an asterisk after the function keyword.

function* numberGenerator() { 
   yield 3; 
   yield 5; 
   yield 7; 
   return 9; 
} 

Object Destructuring

var myObject = { 
   prop1: "Monday", 
   prop2: "Tuesday", 
   prop3: "Wednesday" 
} 
var { prop1, prop3 } = myObject 
console.log(prop1, prop2) 

Object Literal Enhancement

This is the opposite to destructuring, often called "Restructuring".
We can create objects from global variables.

var Variable1 = "Better"; 
var Variable2 = "Solutions"; 
var myObject = { Variable1, Variable2 }; 
console.log(myObject);   // { Variable1: "Better", Variable2: "Solutions" } 

We can create object methods from function expressions.

var Variable3 = function() { 
   console.log("Function: " + this.Variable1; 
} 
var myObject = { Variable1, Variable2, Variable3 }; 
myObject.Variable3();    // "Function: Better" 

New - Spread Operator

The spread operator is three dots (...) that can perform several different tasks.
It can be used with arrays.
We can use it to combine multiple arrays into one single larger array.

const a = [1,2,3] 
const b = [...a, 4,5,6] 

When we use the spread operator we do not have to mutate the original array.
It can be used with objects.

??? 

Arrays

Array.find -
Array.findIndex -

Array Destructuring

var myArray = ["Monday", "Tuesday", "Wednesday"]; 
var { firstItem } = myArray 
console.log(firstItem);      // Monday 

We can pass over unwanted values by using commas.

var { ,,thirdItem } = myArray 
console.log(thirdItem);      // Wednesday 

Array Rest Elements

This is an improved way to handle function parameters.
The rest parameter represents an indefinite number of arguments as an array.

Strings - Template Literals

Strings & Characters > Template Literals
The syntax uses backticks instead of single or double quotes.

const mystring = `text` 

Template Tags

In styled components, template tags are used to define CSS strings

const Button = styled.button 
   font-size : 1.5em 
   color : white 

Interpolation

Functions - Default Arguments

Functions > Optional Arguments
Default arguments can be any type.

function methodOne( a = 10, b = 20) { 
   console.log(a + b); 
} 

Functions - Destructuring Arguments

Instead of using dot notation to dig into objects, we can destructure the values we need.

var myObject = { 
   prop1: "Monday", 
   prop2: "Tuesday" 
} 
var myFunction = function( object1 ) { 
   console.log("Property Value: " + object1.prop1); 
} 
myFunction(myObject);       // "Property Value: Monday" 

The function could be changed to implement destructuring

var myFunction = function( {prop1} ) { 
   console.log("Property Value: " + prop1); 
} 

Numbers

Number.MIN_SAFE_INTEGER
Number.MAX_SAFE_INTEGER
Number.EPSILON
Number.IsInteger -
Number.IsSafeInteger -

New Global Methods

isFinite()
isNaN()