ES6 - Стрелочные функции

В этой серии мы познакомимся с фичами ecmascript 2015 или, как его называют, ecmascript 6. Соответственно es5 это обычный javascript, синтаксис который поддерживается везде. ecmascript 6 это более новый стандарт javascript, который лаконичнее, проще в использовании и большинство новых проектов люди пишут уже с новым стандартом.

В этом уроке мы познакомимся с стрелочными функциями из ес6. Итак как они выглядят и чем отличаются от старых обычных функций?

Давайте напишем обычную функцию getTrack, которая возращает исполнителя и название трека.

var getTrack = function (artist, track) {
  return artist + ' ' + track;
}
console.log(getTrack('Artist', 'Track'));

Если мы посмотрим в браузер, у нас вывелось Artist Track. Теперь давайте напишем эту же функцию с помощью стрелок.

var getTrack = (artist, track) => {
  return artist + ' ' + track;
}

Как мы видим, практически все у нас осталось без изменений. Единственное отличие, что мы убрали слово function, а теперь мы пишем вместо него стрелку с другой стороны. Код стал выглядеть лаконичнее и его проще читать.

Но мы можем упросить его этот код, сделав его однострочным

var getTrack = (artist, track) => artist + ' ' + track;

Это можно делать, когда у вас только одна операция. Тогда можно убрать return и написать то, что будет возвращать функция без скобок.

Если же у нас была бы функция только с одним параметром, то код можно было бы упростить еще больше.

var getTrack = track => track;

В этом случая мы убрали еще и скобки вокруг аргументов, так как они нужно только если у нас 2 и больше аргументов.

Единственный нюанс - это не забыть как будет выглядеть функция без параметров.

var getTrack = () => 'track';

Круглые скобки должны быть обязательно.

Это не единственные плюсы стрелочных функций. Они также не имеют своего контекста. В ес5 мы часто писали вот такой код.

function API () {
  this.url = 'http://google.com';

}

API.prototype.get = function () {
  return [1,2,3].map(function (number) {
    console.log('this', this);
    return number;
  })
}

var api = new API();
api.get();

Здесь у нас есть класс API, написанный на прототипах и в методе get мы хотим вернуть map функцию, внутри которой нам нужен this.url. This там будет неправильный. В нашем случае он undefined, так как мы используем webpack, который не дает нам доступа к window, а если вы выполните этот код напрямую в браузере например, то this будет window.

Для того, чтобы this был правильный обычно либо писали .bind(this)

API.prototype.get = function () {
  return [1,2,3].map(function (number) {
    console.log('this', this);
    return number;
  }.bind(this))
}

либо создавали локальную переменную

API.prototype.get = function () {
  var self = this;
  return [1,2,3].map(function (number) {
    console.log('this', self);
    return this;
  });
}

И тот и другой варианты уменьшают читаемость и забывая так делать, вы получаете баги.

Используя стрелочные функции у вас такой проблемы не будет, так как они не имеют контекста. То есть у них будет внутри такой же контект, как и до захода в функцию. Давайте изменим map на стрелочную функцию

API.prototype.get = function () {
  return [1,2,3].map(number => {
    console.log('this', this);
  });
}

Как мы видим, все работает как и до этого, но код стал лаконичнее.

Еще одна вещь, которую убрали в стрелочных функциях кроме this, это arguments. В обычных функциях мы можем вывести arguments и посмотреть, чему равны наши аргументы.

var getTrack = function (artist, track) {
  console.log(arguments);
  return artist + ' ' + track;
}

console.log(getTrack('Artist', 'Track'));

В es6 это можно сделать с помощью оператора spread. Как аргумент функции он возвращает все оставшиеся аргументы. Если он указан один, то он вернет все аргументы, как раньше возвращала arguments. Выглядит это так

var getTrack = function (...args) {
  console.log(args);
  return args[0] + ' ' + args[1];
}

О нем мы поговорим подробнее в следующих уроках.

В этом уроке мы с вами познакомились с стрелочными функциями, узнали чем они лучше функций из es5 и увидели насколько чище и лаконичнее получается код.

Если у вас возникли какие-то вопросы, пишите их прямо под этим видео.

#1 ES6 - Стрелочные функции