Arrow Functions

    Resumo/Informações
    • Easier return statment

      • ** Lembrando que map cria um novo array com os resultados de sua função.

      const years = [1990, 1965, 1982, 1937];

      ES 5
      var ages5 = years.map(fcuntion(el) {
      return 2019 - el;
      });
      console.log(ages5); [26, 51, 34, 79]

      ES 6
      1) One Argument
      let ages6 = years.map(el => 2019 - el); [26, 51, 34, 79]
      el element
      => arrow function
      2019 - el the return

      2) Two arguments
      ages6 = years.map((el, index) => `Age element ${index + 1}: ${2019 - el}.`);
      console.log(ages6); {"Age element 1: 26.", "Age element 2: 51.", ...}
      Utilizado 2 argumentos, portanto dois parenteses.

      3) Two or more arguments
      ages6 = years.map((el, index) => {
        const now = new
        Date().getFullYear();
        const age = now - el;
        return `Age element ${index + 1}: ${age}.`
      });
      console.log(ages6); {"Age element 1: 26.", "Age element 2: 51.", ...}

    • Arrow functions do not have a this keyword.

      • They use the this keyword of the function they are written in and for this we say it has a lexical this variable.

    • Arrow Functions - This keyword
      • ES 5
      Quando houver uma função com outra função dentro, essa segunda função tem sua this keyword apontando para o global object, não tendo acesso
      var box5 = {
      color: 'green',
      position: 1,
      clickMe: function() {

      var self = this; Utilizada pois como a função abaixo não é um objeto, o this dela irá apontar para o global, onde no caso de this.position e this.color, o this estaria apontando para o Global Object e não funcionaria.
      Portanto, nesse caso a self aponta para a this da function do object, obtendo as informações.

        document.querySelector('.green').addEventListener('click', function() {
        var str = 'This is box number ' + self.position + ' and it is ' + self.color;
        alert(str);
       });
      }
      }
      //box5.clickMe();

      // ES6
      const box6 = {
      color: 'green',
      position: 1,
      clickMe: function() {
        document.querySelector('.green').addEventListener('click', () => {
        var str = 'This is box number ' + this.position + ' and it is ' + this.color;
         alert(str);
       });
      }
      }
      box6.clickMe();
      Nesse caso, a this keyword foi utilizada normalmente, porque the arrow function shares the lexical this keyword of it's sorroundings.
      Geralmente usa-se Arrow Functions para isso, preservar o valor da this keyword.

      Situation:
      const box66 = {
      color: 'green',
      position: 1,
      clickMe: () => {
        document.querySelector('.green').addEventListener('click', () => {
        var str = 'This is box number ' + this.position + ' and it is ' + this.color;
        alert(str);
       });
      }
      }
      box66.clickMe();
      Aqui, ao clicar na box verde, position e color estariam como Undefined, visto que a function Click está com a this keyword apontando para o global object, portanto para o window object, que não possui position ou color e portanto fica como undefined.

    • This Keyword - Sorroundings


      • function Person(name) {
      this.name = name;
      }

      ES5
      Person.prototype.myFriends5 = function(friends) {

      var arr = friends.map(function(el) { esse aqui é o array que será criado, com Jessica + nomeAmigo.
      return this.name + ' is friends with ' + el; el = element
      }.bind(this));

      console.log(arr);
      }

      var friends = ['Harvey', 'Mike', 'Louis'];
      new Person('Jessica').myFriends5(friends);

      ** Nesse caso, como temos uma função dentro da outra, o array criado com o friends.map não teria acesso ao o nome Jessica, visto que ele é uma função dentro de outra função, fazendo com que o seu this aponte para o Global Scope, onde não se tem a informação "name".
      ** Com isso, foi adicionado o bind(), utilizada para passar um valor para a this keyword de uma função, e nesse caso estará recebendo a this keyword da function Person, que possui a informação this.name = Jessica.

      ES6
      Person.prototype.myFriends6 = function(friends) {

      var arr = friends.map(el => `${this.name} is friends with ${el}`);

      console.log(arr);
      }

      var friends = ['Harvey', 'Mike', 'Louis'];
      new Person('Jessica').myFriends6(friends);

      ** This will work because the this keyword will point to the sorroundings.