Функции

Фукция, как ни странно, но она объект! Объект, способный выполнять инструкции, описанные в ее "теле".

Виды объявления (создания) функций

1. Function Expression (функциональное выражение)

2. Function Declaration

3. Arrow Function & Anonymous Arrow Function

4. IIFE (самовызываемая функция)

Структура любой функции при объявлении

1. Параметры - всегда в круглых скобках - ()

2. Тело - всегда в фигурных скобках - {}

3. Ключевое слово function или => для стрелочных и анонимных стрелочных функций

4. Переменная для функциональных выражений и стрелочных функций

Пример объявления одной и той же функции разными способами:

// Function Declaration
function getData(param) {
  return `This is param of my function: ${param}`
}

// Function Expression
const getData = function(param) {
  return `This is param of my function: ${param}`
}

// Arrow Function
const getData = (param) => {
  return `This is param of my function: ${param}`
}
// если в теле стрелочной функции всего одна инструкция, то можно сделать короткую запись
const getData = (param) => `This is param of my function: ${param}`

// Anonymous Arrow Function
(param) => {
  return `This is param of my function: ${param}`
}
// короткая запись
(param) => `This is param of my function: ${param}`

Количество параметров, которое может принимать функция при объявлении, не ограничено. Но иногда, если параметров много, стоит собрать их в объект или массив, а внутри тела функции деструктуризировать или перебрать.

Вызов функции

Вызов функции - обращение к объявленной функции с целью выполнения инструкций, описанных в ее теле.

При вызове мы должны передавать аргументы - значения для параметров, объявленных при объявлении функции.

Порядок передачи аргументов при вызове должен соответствовать порядку указанных параметров при объявлении. Как пальцы накладываются друг на друг, когда мы совмещаем ладони вместе. Если нарушить последовательность или пропустить передачу аргумента, то параметр получит не свое ожидаемое значение или undefined, если ему аргумент не пришел. Это может приводить к ошибкам исполнения функции. Во избежание проблем с получением аргументов часто используют дефолтные параметры (параметры по умолчанию). Их мы рассмотрим ниже.

Также можно собирать все аргументы при вызове функции с помощью:

• ключевого слова arguments (ES5)

• REST оператора (ES6)

Отличия в использовании функций:

1. Function Expression & Arrow Function нельзя вызывать в коде выше, чем они объявлены - это обусловлено стандартом ES5 использования переменных let & const.

2. Function Expression, объявленные через var, также нельзя вызывать до объявления, не смотря на то, что переменные, объявленные через ключевое слово var хостятся.

3. Function Declaration можно использовать до объявления, это удобно при работе с DOM.

4. Контекст исполнения функций с учетом и без use strict & type='module'

	FE & FD	AF
без 'use strict' & type='module'	this объекта, в котором объявлены или WINDOW при объявлении глобально	WINDOW
только 'use strict'	this объекта, в котором объявлены или undefined при объявлении глобально	WINDOW
только type='module'	this объекта, в котором объявлены или undefined при объявлении глобально	undefined

FE (Function Expression) & FD (Function Declaration) всегда ссылаются на контекст, внутри которого были объявлены.

А при объявлены глобально:

• без 'use strict' & type='module' будут ссылаться на глобальный объект WINDOW;

• с 'use strict' & type='module' - на undefined

AF (Arrow Function) всегда ссылаются на контекст, где находятся в момент вызова.

При этом:

• с и без 'use strict' будут ссылаться на глобальный объект WINDOW;

• и только с type='module' - на undefined

IIFE (Immediately Invoked Function Expression) || SEAF (Self-Executing Anonymous Function)

Самовызывающая функция совмещает в одной синтаксической записи определение и вызов сразу после определения.

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

(function () {
    statements
})();

Обратите внимание, что определение функции заключено в круглые скобки () - оператор группировки.

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

Таким образом глобальная область видимости не 'засоряется' переменными и не происходит конфликта имен.

Ниже представлен пример IIFE-функции, которая подключается к файлу html и работает с модальным окном.

(() => {
  const refs = {
    openModalBtn: document.querySelector('[data-modal-open]'),
    closeModalBtn: document.querySelector('[data-modal-close]'),
    modal: document.querySelector('[data-modal]'),
  };

  refs.openModalBtn.addEventListener('click', toggleModal);
  refs.closeModalBtn.addEventListener('click', toggleModal);

  function toggleModal() {
    refs.modal.classList.toggle('is-hidden');
  }
})();

А это пример подключаемой самовызывающейся функции для гамбургер-меню

 (() => {
  const menuBtnRef = document.querySelector("[data-menu-button]");
  const mobileMenuRef = document.querySelector("[data-menu]");

  menuBtnRef.addEventListener("click", () => {
    const expanded =
      menuBtnRef.getAttribute("aria-expanded") === "true" || false;

    menuBtnRef.classList.toggle("is-open");
    menuBtnRef.setAttribute("aria-expanded", !expanded);

    mobileMenuRef.classList.toggle("is-open");
  });
})();

Параметры по умолчанию