ES6 - ECMASCRIPT 2015

es6.js

/////////////////////////////////////////
 // Let e const sao block scoped
 {
 let a = 2;
 const b = "Hey";

 console.log(a,b);
 }

 /////////////////////////////////////////
 // Template literals
 let firstName = "John";
 let lastName = "Doe";

 const yearOfBirth = 1996;
 function calcAge(year) {
 return 2017 - year;
 }

 console.log(`This is ${firstName} ${lastName} he was born in ${yearOfBirth} and is ${calcAge(yearOfBirth)} years old`);

 // Novos metodos de strings
 const n = `${firstName} ${lastName}`;
 console.log(n.startsWith("J"));
 console.log(n.endsWith("oe"));
 console.log(n.includes(" "));
 console.log(`${firstName} `.repeat(5));

/////////////////////////////////////////
// Destructuring
// Transformar arrays/objectos em variaveis.

// ES5
/*
var john = ['John',26];
var name = john[0];
var age = john[1];
*/

// ES6
// Arrays para variaveis
const [name,year] = ['John',26];
console.log(name,year);

// Objeto para variaveis
const obj = {
  firstName :'John',
  lastName : 'Doe'
};

const {firstName,lastName} = obj;
console.log(firstName,lastName);

// Se nao quisermos que o nome das variaveis sejam iguais aos das keys
const {firstName:a,lastName:b} = obj;
console.log(a,b);

// Exemplos de aplicação:
function calcAgeRetir(year){
  const retirAge = 65;
  const age = new Date().getFullYear() - year;
  return [age,retirAge-age];
}

const[age,retirement] = calcAgeRetir(1996);
console.log(`If you have ${age} years you will retire within ${retirement} years`);

//////////////////////////////////
// Usando com function constructors

// ES5
var Person = function(name){
  this.name = name;
}
Person.prototype.friends = function(friends){
  var arr = friends.map(function(value){
    return this.name + ' is friends with ' + value;
  }.bind(this));
  console.log(arr);
};
var friends = ['Alberta','Joaquina','Maria','Bucha','Rafaela'];
new Person('Manel').friends(friends);

// ES6
class Person {
  constructor(name){
    this.name = name;
  }
  friends(friendsArr) {
    let friends = friendsArr.map(value => `${value} is friends with ${this.name}`);
    console.log(friends);
  }
}
let friends = ['Alberta','Joaquina','Maria','Bucha','Rafaela'];
new Person('Manel').friends(friends);

/////////////////////////////////////////
// Funções de setas / Arrow functions

const years = [1990, 1995, 1996, 2000];

// ES5
var ages5 = years.map(function (value) {
  return 2016 - value;
});

console.log(ages5);

//ES6
let ages6 = years.map(value => 2016 - value);
console.log(ages6);

// Return keyword esta implicita se tiver apenas uma linha
ages6 = years.map((value,index) => `Age element ${index+1}: ${2016-value}`);
console.log(ages6);

// Com mais linhas é necessario usar blocks e return
ages6 = years.map((value,index)=> {
  const now = new Date().getFullYear();
  const age = now - value;
  return `Age element ${index}: ${age}`;
});
console.log(ages6);

// Nao tem uma this keyword, tem uma lexical this keyword -> usam a this keyword do seu redor
const box6 = {
  color:'green',
  position: 1,
  clickMe() {
    document.querySelector('.green').addEventListener('click',() => {
      let str = `This is box number ${this.position} and it is ${this.color}`
      alert(str);
    })
  },
};

box6.clickMe();
/////////////////////////////////////////
// Arrays

const boxes = document.querySelectorAll('.box');

// ES5
/*
Array.prototype.slice.call(boxes);

boxes.forEach(function(value){
  value.style.backgroundColor = "Blue";
});

*/

// ES6
let arr6 = Array.from(boxes);
arr6.forEach(val=>val.style.backgroundColor='dodgerblue');

// Para usar break e continue nao podemos usar forEach ou map
for(let val of arr6){
  if(val.className.includes('blue')) {continue;}
  val.textContent = 'I changed to blue';
}

// Outros metodos das arrays

//ES5
var ages = [12,15,18,14,16,11];


var full = ages.map(function(value){
  return value >= 18;
});
console.log(full);
console.log(full.indexOf(true));
console.log(ages[full.indexOf(true)]);


//ES6
const ages = [12,15,18,14,16,11];
// Encontrar o index facilmente
console.log(ages.findIndex(value=>value>=18));
// Encontra o valor
console.log(ages.find(cur=>cur>=18));