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

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

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

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

В случае если мы взглянем в браузер, у нас вывелось Averages 2018. Ныне давайте напишем данную же функцию с поддержкой стрелок.

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

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

 ReactWarriors | Профессиональные онлайн-курсы по ReactJS

Это возможно создавать, когда у вас лишь только 1 операция. За это время возможно прибрать return и составить то, собственно что станет отдавать функция без скобок. В случае если же у нас была бы функция лишь только с одним параметром, то код возможно было бы облегчить ещё более.

ES6 - Стрелочные функции - ReactWarriors | Профессиональные онлайн-курсы по ReactJS

В данном варианта мы убрали ещё и скобки кругом аргументов. Так как скобки только надо, в случае если у нас 2 и более аргументов. Но есть один нюанс - это помнить как будет смотреться функция без параметров.

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

Круглые скобки должны быть обязательно. Есть и другие плюсы стрелочных функций. У них нет своего контекста. В es5 мы нередко писали вот подобный код.

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

На примере написаного класса API, который написан на прототипах и в методе get мы хотим вернуть map функцию, внутри етой функции нам нужен this.url. This там будет неправильный. This - undefined, так как мы используем webpack, который не дает нам доступа к window, а если вы выполните этот код напрямую в браузере например, то this станет window. Для такого, чтобы this был верный как правило или писали .bind(this)

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

или делали локальную переменную

ES6

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

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

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

ES6 - Стрелочные функции - ReactWarriors | Профессиональные онлайн-курсы по ReactJS

С помощью оператора spread в es6 у нас появилась такая возможность. Spread возвращает все оставшиеся аргументы. Если spread указан 1, то он вернет все аргументы, как раньше возвращала arguments. Например

Spread es6

Также если вы учили раньше javascript, css, html или проходили курсы у вас есть возможность посмотреть курс по react на нашем youtube канале ReactWarriors

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

Поделись знаниями: