JavaScript: стрелочные функции

Стрелочные функции были введены в ES6 / ECMAScript 2015, и с момента их появления они навсегда изменили то, как код JavaScript выглядит (и работает).

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

Визуально это простое и долгожданное изменение, которое позволяет вам писать функции с более коротким синтаксисом:

const myFunction = function() {
 //...
}

в

const myFunction = () => {
 //...
}

Если тело функции содержит только одну инструкцию, вы можете опустить скобки и записать все в одну строку:

const myFunction = () => doSomething()

Параметры передаются в скобках:

const myFunction = (param1, param2) => doSomething(param1, param2)

Если у вас есть один (и только один) параметр, вы можете полностью опустить скобки:

const myFunction = param => doSomething(param)

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

Неявный возврат

Стрелочные функции позволяют получить неявный возврат: значения возвращаются без использования ключевого слова return.

Это работает, когда в теле функции есть однострочный оператор:

const myFunction = () => 'test'
myFunction() //'test'

Другой пример, при возврате объекта, не забудьте заключить фигурные скобки в круглые:

const myFunction = () => ({ value: 'test' })
myFunction() //{value: 'test'}

Как работает this в стрелочной функции

this это концепция, которую сложно понять, так как она сильно варьируется в зависимости от контекста, а также зависит от режима JavaScript (strict режима или нет).

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

Когда определяется как метод объекта, в обычной функции this ссылается на объект, так что вы можете сделать:

const car = {
 model: 'Fiesta',
 manufacturer: 'Ford',
 fullName: function() {
   return `${this.manufacturer} ${this.model}`
 }
}

Вызов car.fullName() вернет "Ford Fiesta".

this в стрелочной функции наследуются от контекста исполнения. Стрелочная функция вообще не связывается с this, поэтому ее значение будет найдено в стеке вызовов, поэтому в этом коде car.fullName() не будет работать и вернет строку "undefined undefined":

const car = {
 model: 'Fiesta',
 manufacturer: 'Ford',
 fullName: () => {
   return `${this.manufacturer} ${this.model}`
 }
}

Из-за этого стрелочные функции не подходят в качестве методов объекта.

Эти функции также нельзя использовать в качестве конструкторов, так как создание экземпляра объекта вызовет ошибку TypeError.

Это также может стать проблемой при обработке событий. Слушатели событий DOM устанавливаются this в качестве целевого элемента, и, если вы полагаетесь на this в обработчике событий, необходима обычная функция:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
 // this === window
})

const link = document.querySelector('#link')
link.addEventListener('click', function() {
 // this === link
})