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

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

В этой серии мы познакомимся с фичами 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год назад назад
Спасибо за уроки
monsterlessons
1год назад назад
На здоровье)
Александр Гуньков
1год назад назад
Спасибо за уроки. Отключил для сайта адблок и расшарил по соц. сетям )
monsterlessons
1год назад назад
На здоровье. Спасибо большое. Оо на этом сайте никогда в жизни не было рекламы и я не знаю, как у меня плохо должны пойти дела, чтобы я ее включил))
Tpulli
2 лет назад
Спасиб! Очень полезное видео, особенно для меня, только начинающей разбираться во всем.