Quick and Easy ES6 stuff to use

es6.js

// ARROWS

[1, 2, 3].map(function (num) { return num * 2 }) // <- [2, 4, 6]
// IS NOW:
[1, 2, 3].map(num => num * 2) // <- [2, 4, 6]


// BACKTICK STRINGS! ````````
// String interpolation
var name = "Bob", time = "today";

// Remember this?
"Hello " + name + ", how are you " + time +"?";
// Now its:
`Hello ${name}, how are you ${time}?`;

// Multi line strings
`Hey this is cool
and totally valid
to use`



// DEFAULT VALUES:
function f(x, y=12) {
  // y is 12 if not passed (or passed as undefined)
  return x + y;
}
console.log(f(3) === 15);

var link = function(height = 500, color = 'red', url = 'http://generalassemb.ly') {
  // and then u do nifty things
}


// ASSIGNMENT:
[a, b] = [0, 1]; // yields {a: 0} and {b: 1}


// LET
// let allows you to declare variables that are limited in scope to the block, statement, or expression on which
// it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function
// regardless of block scope.

var list = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
  let item = document.createElement("li");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
}


// CONSTANTS
// Constants can be uppercase or lowercase, but
// convention is to use all-uppercase letters.

// define MY_FAV as a constant and give it the value 7
const MY_FAV = 7;

// these will all fail:
MY_FAV = 20;
const MY_FAV = 20;
var MY_FAV = 20;

// MY_FAV is still 7
console.log("my favorite number is " + MY_FAV);

// const also works on objects
const MY_OBJECT = {"key": "value"};


// FETCH - make a simple GET request:
fetch(url);


// PROMISES
// use promises against to perform something afterwards:
var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…
  if (x === y) {
    resolve(/*"Stuff worked!"*/);
  }
  else {
    reject(/*"It broke"*/));
  }
});

promise.then(function(result) {
  console.log(result); // "Yay!"
}, function(err) {
  console.log(err); // Error: "Oh no!"
});

// throw it all together

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function() {
  console.log("Booo");
})


// BUUUUUT IT COULD BE LIKE this

fetch(url).then(r => r.json())
  .then(data => console.log(data))
  .catch(e => console.log("Booo"))

// You can even chain promises so that everything fires in the order you want:

var wait1000 =  () => new Promise((res, err) => {setTimeout(res, 1000)})

wait1000()
    .then(function() {
        console.log('Wooo!')
        return wait1000()
    })
    .then(function() {
        console.log('Aw yeah')
    });

// (They can sort of function like a callback that has both a "went well", and "went bad" option)