Функції JavaScript

Функції JavaScript здатні більше, ніж просто включати купу кодів під час очікування виконання виклику. Функції розвивалися з часом, що призвело до нових визначень, методів виконання та синтаксисів. Ця посада охоплює деякі з існуючих ролей, які функціі JavaScript відтворювалися до цих пір.

Знання різних способів вираження і визначення функцій відкриває можливість реалізації логіки більш оптимальним чином у JavaScript. Крім того, ви зможете легше відповідати на питання інтерв'ю.

Вирази функцій

Коли ви просто вкажете функцію з функції ключове слово, додаткові параметри та тіло коду, це a функції декларації.

Помістіть цю декларацію у вираз JavaScript (як у присвоєнні або арифметичному вираженні), вона стає a функції вираз.

// Функція оголошення функції function_name () ; // Вираз функції var function_name = function () ; 

Під час оцінки всі декларації JavaScript піднімаються (переміщуються в області). Тому написання виклику функції перед оголошенням функції буде нормальним (оскільки декларація буде все одно переміщено).

function_name (); // функція виклику [WORKS] функції function_name () ; 

Однак вирази функцій не піднімаються, оскільки функції стають частиною виразів і не є автономними деклараціями.

function_name (); // виклик функції [WON'T WORK] var function_name = function () ; 

Відразу виклик функції виклику (IIFE)

Це вираз функції, код якого виконується негайно (тільки один раз при його оцінці). Ви можете створити його, просто додавши () (синтаксис, який використовується для виклику функції) відразу після виразу функції. Вони можуть бути анонімними (без імені для дзвінка).

Нижче наведено два найбільш поширених синтаксису для створення IIFE:

(функція optional_function_name () // body ()); 

і

(функція optional_function_name () // body) (); 

Дужки навколо оголошення функції перетворюють його у вираз, а потім додають () після виклику функції. Можна використовувати інші способи створення IIFE до тих пір, поки ви додасте () після виразу функції (як нижче), але переважними методами є вищезазначені два.

// Деякі способи створення функції IIFEs! () / *… * / (); + function () / *… * / (); new function () / *… * /; 

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

var page_language = (function () var lang; // Код для отримання мови повернення сторінки lang;) (); 

Код для отримання мови сторінки виконується тільки один раз (бажано після завантаження сторінки). Результат зберігається в page_language для подальшого використання.

Методи

Коли функція є властивістю об'єкта, вона називається методом. Оскільки функція є також об'єктом, функція всередині іншої функції також є методом. Нижче наведено приклад методу всередині об'єкта.

var calc = add: функція (a, b) return a + b, sub: функція (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78 

The add і sub функції є методами calc об'єкт.

Тепер для функції у прикладі функції:

Функція add (a) функція повернення (b) return a + b; console.log (add (1) (2)); // Вихід 3 

Повернута анонімна функція є методом функції add.

Примітка: починаючи з параметра (a) функції add У наведеному вище прикладі доступний наступний виклик функції, цей тип процесу називається каррінг.

Конструктори

Коли ви додаєте новий ключове слово перед функцією і викликати його, він стає конструктором, який створює екземпляри. Нижче наведено приклад, коли конструктори використовуються для створення примірників Фрукти і значення додаються до кожного ФруктиВластивості.

функція Fruit () var name, сім'я; // Наукова назва & сім'я this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = функція (значення) family = value;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setСім'я ("Rosaceae"); var orange = new Fruit (); orange.setName ("Citrus")¢Â ?? orange.setFamily ("Рутові"); console.log (orange.getName ());¢Â ?? // "Malus domestica" console.log (orange.getFamily ()); // "Rutaceae" 

Функції стрілки (стандарт ES6) [тільки в Firefox]

Нове визначення функції з ES6 Standard забезпечує більш короткий синтаксис для виразу функції. Синтаксис

() => / * тіло * / 

Ця функція вибірки:

var sing = function () console.log ('співає…'); 

таке ж, як:

var sing = () => console.log ('співає ...'); 

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

Вони корисні, коли ви хочете це всередині функції, яка є такою ж, як і зовні, а її коротший синтаксис робить код для функції запису в короткій функції (як нижче)

setInterval (function () console.log ('message'), 1000); 

в

setInterval (() => console.log ('message'), 1000); 

Функції генератора (стандарт ES6) [тільки в Firefox]

Ще одним новим визначенням функції з ES6 Standard є функція генератора. Функції генератора здатні зупинити і продовжити його виконання. Його синтаксис:

function * function_name ()  

або

function * function_name ()  

Функції генератора створюють ітератори. Ітератор далі Метод потім використовується для виконання коду всередині функції генератора доти врожайність досягається ключове слово. Після цього ітераційне значення ідентифікується врожайність ключове слово повертається функцією генератора і виконання призупинено.

Функція генератора знову виконується, коли далі Метод викликається до наступного врожайність досягається ключове слово. Одного разу все врожайність Виконуються вирази, повертаються отримані значення undefined.

Нижче наведено простий приклад:

функція * generator_func (count) для (var i = 0; i 
Ось ще один приклад:
 
функція * randomIncrement (i) вихід i + 3; вихід i + 5; вихід i + 10; вихід i + 6;  var itr = randomIncrement (4); console.log (itr.next (). value); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Там також a вихід * вираз, який передає значення іншій функції генератора
 
функція * фрукти (фрукти) урожайність * овочі (фрукти); вихід "Виноград";  функція * veggies (фрукти) приносити фрукти + "і шпинат"; дають плоди + "і брокколі"; дають плоди + "і огірок";  var itr = фрукти ("Apple"); console.log (itr.next (). value); // "Apple і шпинат" console.log (itr.next (). Value); // "Apple і брокколі" console.log (itr.next (). Value); // "Apple і огірок" console.log (itr.next (). Value); // "Виноград" console.log (itr.next (). Value); // undefined 
 
Функції генератора корисні, якщо ви хочете переходити значення один за одним у потрібну точку коду, призупиняючи його, а не за один раз, як при циклічному переході до масиву.
 
Висновок
 
Я включив список посилань нижче, де ви знайдете посилання на посилання та статті, які поглиблено розглядаються на різні теми окремо. Обидві стандартні функції ES6 працюватимуть лише у Firefox.
 
Список літератури
 
Мова ECMAScript: Функції та класи
 
Негайно виклик функціонального виразу (IIFE)
 
Основи генераторів ES6
 
Функції стрілки
 
Функція - Мережа розробників Mozilla