Первое отличие: название
Если вы создаёте функцию с названием, то вам необходимо объявить функцию. В функциональных выражениях же название не обязательно.
Объявление функции:
function doStuff() {};
Функциональное выражение:
const doStuff = function() {}
Анонимные функции (без названия) выглядят в ES6 вот таким образом:
const doStuff = () => {}
Поднятие
Поднятие функций подразумевает то, что мы можем использовать функции в коде до того, как в программе встретится сама функция. Они создаются во время компиляции программы и доступны внутри вашей программы вне зависимости от места объявления в коде.
Объявленные функции могут подниматься, в отличии от выражений.
Рассмотрим пример:
doStuff();
function doStuff() {};Код выше запустится без ошибок, в отличии от того, что ниже:
doStuff();
const doStuff = () => {};Когда использовать функциональные выражения?
Возможно, сейчас вам кажется, что объявление функций гораздо полезнее функциональных выражений, и вторые можно просто не использовать. На самом деле, выбор того или иного метода определяется областью необходимости функции. Задайте себе вопрос: что в вашем коде должно знать об этой функции?
Функциональные выражения нужны для того, чтобы не засорять глобальную область видимости. Программе не нужно запоминать большое количество функций, используемых единожды. Она забывает их, как только они становятся ненужными.
Самовызывающиеся функции (IIFE)
Название говорит само за себя. Если функция создаётся тогда же, когда и вызывается, то можно использовать самовызывающуюся функцию:
(function() => {})()
или:
(() => {})()
Обратный вызов
Передача функции в качестве аргумента другой функции в JavaScript называется обратным вызовом. Например:
function mapAction(item) {
// do stuff to an item
}
array.map(mapAction)Проблема в том, что функция mapAction будет видна во всём коде и будет занимать память, хотя понадобится она лишь один раз. Если же мы используем функциональное выражение, оно будет доступным только внутри функции map и займёт память стека функции.
array.map(item => { //do stuff to an item })
или:
const mapAction = function(item) {
// do stuff to an item
}
array.map(mapAction)В последнем случае функция mapAction будет видимой только после её инициализации.
Заключение
Объявлять функции следует тогда, когда вы хотите создать функцию в глобальной области видимости и сделать её доступной во всём коде. Если же необходимая область видимости функции ограничена, используйте функциональные выражения. Сохраняйте свой код чистым!
Перевод статьи Amber Wilkie: When to use a function declaration vs. a function expression
Читайте также:
