- Стрелочная функція - неявно завжди повертає значения
- Анонимная функція \ функціональний вираз - треба добавляти return
Объявление функції
Объявление функции (стандарт можно визивать до ее обявления)
function a(){ console.log('assgbfxv') return ('this is to return'+'data') }
Обявление фунционального виражения 1 (нельзя визивать до ее обявления)
- через константу щоб її потім випадково не змінили
const a=()=> { console.log('Hey there') }
Обявление фунционального виражения 2 (нельзя визивать до ее обявления)
- через константу щоб її потім випадково не змінили
const multiply = function (x, y, z) { console.log(x * y * z); };
Обявление функции анонимной (для коллБека)
const myFuncrion = function(a,b){ let c a=a+1 c=a+b return c } myFuncrion (5,6)
Обявление стрелочной функции (Неявне повернення)
// Звичайне оголошення функції function classicAdd(a, b, c) { return a + b + c; } // Те саме стрілочною функцією const arrowAdd = (a, b, c) => { return a + b + c; };
Якщо параметр один, його можна оголошувати без круглих дужок.
const add = a => { return a + 5; };
Якщо параметри відсутні, то обов'язково повинні бути порожні круглі дужки.
const greet = () => { console.log("Hello!"); };
// До function classicAdd(a, b, c) { return a + b + c; } // Після const arrowAdd = (a, b, c) => a + b + c;
Обявление коллбєк функції
//funcWithCallback - просто функція //callbackfunc- змінна куди будемо передавати посисалання на функцию (тільки посилання а не виклик самої функції) function funcWithCallback (callbackfunc) { callbackfunc() } //описуємо функцию що буде у нас як коллбек та її функціонал function prinnn(){ console.log('fdgdbfb') } //А теперь визиваємо просто функцію у котру у якості параметра передаємо іньшу функцію, а в середині ця функція буде визиватись і виконуватись funcWithCallback(prinnn)
- коротка стрілочна функція
const myArray = [1, 2, 3] const myArray2 = myArray.map(elementOfMassiv=>elementOfMassiv*3)
- повна стрілочна функція
const myArray = [1, 2, 3] const myArray2 = myArray.map((elementOfMassiv)=>{ return elementOfMassiv*3 })
- анонімний функціональний вираз
const myArray = [1, 2, 3] const myArray2 = myArray.map(function (elementOfMassiv){ return elementOfMassiv*3 })
Приклад: Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.
const getUserNames = (array) => { const newArray = []; array.forEach(element => { newArray.push(element.name); }); return newArray; };
Встановлення значення параметру за-замовчанням
function greet(username = "Guest") { console.log(`Hello, ${username}!`); }
Получение аргументов в функции
arguments
Для звичайної функції
змінна (псевдомасив) за замовченням куди будуть передаватись усі передані аргументи
function multiply() { let total = 1; for (const arg of arguments) { total *= arg; } return total; } console.log(multiply(1, 2, 3)); // 6
Для стрілочної функції
У стрілочних функцій немає локальної змінної arguments, що містить усі аргументи. Якщо необхідно зібрати всі аргументи в масив, використовується операція rest.
const add = (...args) => { console.log(args); }; add(1, 2, 3); // [1, 2, 3]
rest
Для звичайної функції
(…rest). Це спеціальний синтаксис, який дозволяє зібрати групу незалежних елементів у масив. Тих що не попали у очикувані параметри. Замість rest може бути люба назва. Головне синтаксис. Використовуєтся при описі функції.
function multiply(first, second, ...args) { console.log(first, second, args); } multiply(1, 2); // 1 2 multiply(1, 2, 3); // 1 2 [3] multiply(1, 2, 3, 4); // 1 2 [3, 4]
Для стрілочної функції
У стрілочних функцій немає локальної змінної arguments, що містить усі аргументи. Якщо необхідно зібрати всі аргументи в масив, використовується операція rest.
const add = (...args) => { console.log(args); }; add(1, 2, 3); // [1, 2, 3]
spread
(…spread) оператор розпилення. Коли функціонал використовується при виклику функції, він перетворює масив на список аргументів.
const temps = [14, -4, 25, 8, 11]; console.log(...temps); // 14 -4 25 8 11 набір окремих чисел console.log(Math.max(...temps)); // 25
Виклик функції
Створення функції як методу змінної-обїекта
const user = { username: "Poly", showThis() { console.log(this); } }; user.showThis(); // {username: "Poly", showThis: ƒ}
Створення фунції і присвоєння її до властивості обїекту
присвоюємо цю функцію властивості об'єкта і викликаємо її як метод цього об'єкта.
"use strict"; function showThis() { console.log("this in showThis: ", this); } const user = { username: "Poly", }; user.showContext = showThis; // Викликаємо в контексті об'єкта user.showContext(); // this in showThis: {username: "Poly", showContext: ƒ} // Викликаємо в глобальному контексті showThis(); // "this in showThis: undefined"
Вказання контексту виклику функції
call
foo.call(thisArg, arg1, arg2, ...)
- thisArg — об'єкт, який ми хочемо встановити як контекст (значення this) для функції
- arg1, arg2, … — необов'язкові аргументи, які будуть передані функції
Метод call викликає функцію foo так, що значення this у функції буде посилатися на об'єкт thisArg, і також передає їй аргументи arg1, arg2 тощо.
apply
Метод apply є аналогом методу call. Відмінність у тому, що в методі apply() синтаксис передачі аргументів вимагає масиву, навіть якщо аргументи функції — це окремі значення.
foo.apply(thisArg, [arg1, arg2, ...])
bind
Метод bind створює і повертає нову функцію, яка має заздалегідь встановлений контекст, і ця нова функція може бути викликана пізніше з будь-якими аргументами.
const boundFoo = foo.bind(thisArg, arg1, arg2, ...)
Приклад
"use strict"; const customer = { username: "Jacob", sayHello() { console.log(`Hello, ${this.username}!`); } }; customer.sayHello(); // "Hello, Jacob!" const greet = customer.sayHello.bind(customer); greet(); // "Hello, Jacob!"
Коли ми використовуємо bind(), ми створюємо нову функцію greet. Ця нова функція завжди матиме правильний контекст і може використовувати властивість username об'єкта customer.