Caminho de uma estrada coberta de neve em volta

ES6: arrow functions em 5 minutos

As arrow functions a princípio podem parecer confusas (experiência própria (◕︵◕)), mas depois de um tempo, é possível entender sua sintaxe mais curta e a mágica do escopo do this.

Vários parâmetros

Sem arrow functions.

var oldWay = function(name, nickname) {
  return 'My name is ' + nickname + ', ' + name;
};

console.log( oldWay('James Bond', 'Bond') );
// My name is Bond, James Bond

Com arrow functions.

let newWay = (name, nickname) => {
  return 'My name is ' + nickname + ', ' + name;
};

console.log( newWay('James Bond', 'Bond') );
// My name is Bond, James Bond

Ou de uma maneira um pouco mais curta.

let newWay2 = (name, nickname) => 'My name is ' + nickname + ', ' + name;

console.log( newWay2('James Bond', 'Bond') );
// My name is Bond, James Bond

Apenas um parâmetro

Sem arrow functions.

var one = function(what) {
  return 'I ' + what + ' you';
};

console.log( one('hate') );
// I hate you

Com arrow functions.

var oneNew = what => 'I ' + what + ' you';

console.log( oneNew('hate') );
// I hate you

Escopo

Sem arrow functions.

var sandwich = {
  bread: 'integral',
  cheese: 'white',
  
  prepare: function() {
    return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese';
  },
  
  make: function() {
    var that = this; // (◕︵◕)
    window.setTimeout( function () {
      console.log( that.prepare() );
    }, 100 );
  }
  
};

// sandwich.make();
// I want a sandwich with integral bread and white cheese

Com arrow functions.

let newSandwich = {
  bread: 'integral',
  cheese: 'white',
  
  prepare: function() {
    return 'I want a sandwich with ' + this.bread + ' bread and ' + this.cheese + ' cheese';
  },
  
  make: function() {
    window.setTimeout( () => console.log(this.prepare()), 100 );
  }
  
};

// newSandwich.make();
// I want a sandwich with integral bread and white cheese

Exemplo com map

Sem arrow functions.

var sample = [1, 2, 3, 4, 5];

var double = sample.map(function(item) {
  return item * 2;
});

// console.log(double);
// [2, 4, 6, 8, 10]

Com arrow functions.

let sample = [1, 2, 3, 4, 5];

let newDouble = sample.map(item => item * 2);

// console.log(newDouble);
// [2, 4, 6, 8, 10]

Aqui você encontra um JS Bin com os exemplos acima.

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue mencionando o post e vamos conversar.

See all posts...