Различные роли функций JavaScript

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

Знание различных способов выражения и определения функций открывает возможность реализации логики более оптимальным способом в JavaScript. Кроме того, вы сможете легче отвечать на вопросы интервью.
Функциональные выражения
Когда вы просто заявляете функцию с ключевым словом function, необязательными параметрами и телом кода, это функция декларация,

Поместите это объявление в выражение JavaScript (как в присваивании или арифметическом выражении), оно становится функцией выражение,
// Объявление функции
function function_name () {};
// выражение функции
var function_name = function () {};

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Все объявления JavaScript поднимаются (перемещаются в области видимости) во время оценки. Следовательно, запись вызова функции до объявления функции в порядке (поскольку объявление в любом случае будет перемещено вверх).
function_name (); // вызов функции[WORKS]
function function_name () {};

Однако выражения функций не поднимаются, поскольку функции становятся частью выражений и не являются самостоятельными объявлениями.
function_name (); // вызов функции[WON’T WORK]
var function_name = function () {};

Выражение немедленного вызова функции (IIFE)
Это функциональное выражение, код которого выполняется немедленно (только один раз, когда он вычисляется). Вы можете создать его, просто добавив () (синтаксис, используемый для вызова функции) сразу после выражения функции. Они могут быть анонимными (без имени, чтобы называть это).

Ниже приведены два наиболее распространенных синтаксиса для создания IIFE:
(function option_function_name () {
// тело
} ());

а также
(function option_function_name () {
// тело
}) ();

Скобки вокруг объявления функции преобразуют его в выражение, а затем добавляют () после вызова функции. Вы можете использовать другие способы для создания IIFE до тех пор, пока вы добавляете () после выражения функции (как показано ниже), но предпочтительными являются два вышеуказанных метода.
// Некоторые способы создания IIFE
! function () {/ * … * /} ();
+ function () {/ * … * /} ();
новая функция () {/ * … * /};

IIFE идеально подходит для написания кода, который должен выполняться только один раз, пространства имен, создания замыканий, создания частных переменных и многого другого. Ниже приведен пример использования IIFE.
var page_language = (function () {
  вар ланг;
  // Код для получения языка страницы
  возвратный язык;
}) ();

Код для получения языка страницы выполняется только один раз (желательно после загрузки страницы). Результат сохраняется в page_language для дальнейшего использования.
методы
Когда функция является свойством объекта, она называется методом. Поскольку функция также является объектом, функция внутри другой функции также является методом. Ниже приведен пример метода внутри объекта.
var calc = {
add: function (a, b) {return a + b},
sub: function (a, b) {return a-b}
}
console.log (calc.add (1,2)); // 3
console.log (calc.sub (80,2)); // 78

Функции add и sub являются методами объекта calc.

Теперь для функции в примере функции:
функция добавить (а) {
return function (b) {return a + b;}
}
console.log (надстройка (1) (2)); // Вывод 3

Возвращаемая анонимная функция является методом функции add.

Примечание. Поскольку параметр (a) функции add в приведенном выше примере доступен для вызова следующей функции, этот тип процесса называется каррированием.
Конструкторы
Когда вы добавляете новое ключевое слово перед функцией и вызываете ее, она становится конструктором, который создает экземпляры. Ниже приведен пример, где конструкторы используются для создания экземпляров Fruit, а значения добавляются в свойства каждого Fruit.
function Fruit () {
  имя вар, фамилия; // Научное имя и семья
  this.getName = function () {return name;};
  this.setName = function (value) {name = value};
  this.getFamily = function () {return family;};
  this.setFamily = function (value) {family = value};
}

вар яблоко = новый фрукт ();
apple.setName (“Malus domestica”);
apple.setFamily ( “Rosaceae”);

var orange = новый фрукт ();
orange.setName («Цитрусовые sin Â € sinensis»);
orange.setFamily (“Рутовые”);

console.log (orange.getName ()); // “Цитрусовые sin Â € Â sinensis”
console.log (apple.getName ()); // “Malus domestica”
console.log (orange.getFamily ()); // “Рутовые”

Функции стрелок (стандарт ES6) [Only in Firefox]
Новое определение функции из стандарта ES6 обеспечивает более короткий синтаксис для выражения функции. Синтаксис
() => {/ * body * /}

Эта функция образца:
var sing = function () {
console.log ( ‘пение …’)
};

такой же как:
var sing = () => {
console.log ( ‘пение …’)
};

Функции стрелок являются анонимными и не имеют своего собственного значения this, оно внутри будет таким же, как и во вложенном коде. Кроме того, вы не можете изменить его на конструктор с новым ключевым словом.

Они полезны, когда вы хотите, чтобы это внутри функции было таким же, как и снаружи, а более короткий синтаксис делает код для написания функции внутри функции кратким (как показано ниже)
setInterval (function () {
console.log ( ‘сообщение’)
}, 1000);

в
setInterval (() => console.log (‘message’), 1000);

Функции генератора (стандарт ES6) [Only in Firefox]
Еще одно новое определение функции из стандарта ES6 – это функция генератора. Функции генератора способны останавливать и продолжать его выполнение. Его синтаксис:
function * function_name () {}

или
function * function_name () {}

Функции генератора создают итераторы. Следующий метод итератора затем используется для выполнения кода внутри функции генератора, пока не будет достигнуто ключевое слово yield. После этого повторяемое значение, идентифицированное ключевым словом yield, возвращается функцией-генератором, и выполнение останавливается.

Функция генератора снова выполняется, когда вызывается следующий метод, пока не будет достигнуто следующее ключевое слово yield. После того, как все выражения yield выполнены, полученное значение возвращает неопределенное значение.

Ниже приведен простой пример:
function * generator_func (count) {
  for (var i = 0; i <count; i ++) {
    выход i + 1;
  }
}

Вот еще один пример:
function * randomIncrement (i) {
выход i + 3;
выход i + 5;
выход i + 10;
выход i + 6;
}
var itr = randomIncrement (4);
console.log (itr.next () значение.); // 7
console.log (itr.next () значение.); // 9
console.log (itr.next () значение.); // 14

Также есть выражение yield *, которое передает значение в другую функцию генератора.
функция * фрукты (фрукты) {
урожай * овощи (фрукты);
урожай “Виноград”;
}

функция * овощи (фрукты) {
урожай фруктов + “и шпинат”;
урожай фруктов + “и брокколи”;
урожай фруктов + “и огурец”;
}

var itr = фрукты («яблоко»);
console.log (itr.next () значение.); // “Яблоко и Шпинат”
console.log (itr.next () значение.); // “Яблоко и Брокколи”
console.log (itr.next () значение.); // “Яблоко и огурец”
console.log (itr.next () значение.); // «Виноград»
console.log (itr.next () значение.); // не определено

Функции генератора полезны, если вы хотите просматривать значения по одному в выбранной вами точке кода, останавливая его, а не за один проход, как при циклическом перемещении по массиву.
Вывод
Я включил список ссылок ниже, где вы найдете ссылки на ссылки и статьи, которые подробно посвящены различным темам. Обе стандартные функции ES6 в настоящий момент будут работать только в Firefox.
Ссылки