3 способа объявить функцию в JavaScript

Функции в JavaScript можно объявить тремя способами: через декларативное объявление, функциональное выражение или с помощью стрелок. Звучит сложно, но на самом деле всё совсем не так.

Декларативное объявление

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

Синтаксис и пример использования:

function имяФункции(параметры ) {
  // Тело функции
};

// Пример декларативного объявления
function greet(name) {
  console.log("Привет, " + name + "!");
};

Мы сначала указываем ключевое слово function. За ним идёт имя функции — в нашем случае greet. В круглых скобках пишем параметры, если они есть. Если параметров нет, оставляем просто — (). В фигурных скобках содержится код, который будет выполняться при вызове функции.

Плюсы:

• Простой и понятный синтаксис.
• Функцию можно использовать в любом месте в коде, даже до её объявления. Это называется «всплытием функции» (function hoisting).

Что такое всплытие?

Минусы:

• Такую функцию нельзя присвоить переменной или передать в качестве аргумента другой функции.
• Функцию можно использовать до её объявления — преимущество легко превращается в недостаток, потому что код сложнее читать и про функцию можно забыть.

Функциональное выражение

Для чего использовать: для функции, которую нужно записать в переменную. А ещё способ полезен, когда функция должна быть доступна только после её объявления.

Синтаксис и пример использования:

const имяПеременной = function(параметры) {
  // Код функции
};

// Пример функционального выражения
const greet = function(name) {
  console.log("Привет, " + name + "!");
};

Сначала мы объявляем переменную — у нас это greet. Затем присваиваем ей значение — функцию. Эта функция пишется так же, как и при декларативном объявлении. Но в отличие от него здесь имя функции чаще всего опускается — то есть она является анонимной.

Плюсы:

• Так как функция присваивается переменной, её легко передавать в другие функции.
• Можно создавать функции, которые используются только внутри определённого контекста.

Минусы:

• Нельзя использовать функцию до её объявления, если она анонимна — а так чаще всего и есть.

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

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

Что такое this. Контекст выполнения функций

Синтаксис и пример использования:

const имяФункции = (параметры) => {
  // Код функции
};

// Пример стрелочной функции
const sum = (a, b) => {
  return a + b;
};

Стрелочные функции компактны. У них нет имени и ключевого слова function. Вместо них в круглых скобках сразу же пишутся параметры — (a, b), за которыми идёт стрелка =>, а после неё — фигурные скобки с телом функции.

Стрелочную функцию можно записать ещё короче. Если её тело состоит из одного выражения (действия), фигурные скобки и ключевое слово return не нужны:

// Этот пример...
const sum = (a, b) => {
  return a + b;
};

// ...можно сократить до одной строки
const sum = (a, b) => a + b;

// А этот пример сократить нельзя — здесь уже несколько действий
const sum = (a, b) => {
  let c = 0;
  if (a > b) {
    c = a + b;
  }
  return c;
};

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

// Этот пример...
const square = (a) => {
  return a * a;
};

//...можно сократить до одной строки

const square = a => a * 2;

Но так лучше не делать — скобки визуально отделяют параметры от тела функции и с ними код читать проще. А ещё теряется единообразие в коде, так как это единственный случай, когда скобки можно раскрыть:

const sum = (a, b) => a + b;
const square = a => a * 2;
const multiplication = () => 2 * 2;

Плюсы:

• Компактный синтаксис.

Минусы:

• Порой из-за сокращения ухудшается читаемость кода.
• Не подходит для использования в качестве методов объектов или конструкторов объектов.
• Нельзя использовать функцию до её объявления.

Что использовать

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

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

Время создания

• Декларативное объявление: функция создаётся и доступна в любом месте кода до её объявления.
• Функциональное выражение и стрелочная функция: создаётся в момент выполнения кода. Если вызвать до объявления, появится ошибка.

Присваивание переменной

• Декларативное объявление: функция не присваивается переменной. Её нельзя передать другой функции в качестве аргумента.
• Функциональное выражение и стрелочная функция: создаётся и сразу присваивается переменной. Эту переменную можно использовать, чтобы вызывать функцию или передавать в другие функции.

Видимость

• Декларативное объявление: функция становится видимой внутри текущего и будущих блоков кода (функции, циклы, условные операторы и так далее). Это означает, что функцию можно вызывать из любого места внутри блока.
• Функциональное выражение и стрелочная функция: видимость функции ограничена областью видимости переменной, которой она присвоена. Функцию можно вызывать только после присваивания её переменной.

Материалы по теме

• Типы данных в JavaScript. Инструкция для новичков
• Тернарный оператор в JavaScript
• Введение в колбэк-функции в JavaScript
• Как правильно называть переменные
• 9 книг по JavaScript для начинающих

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.