objavlenie_funkcii [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
  * **Стрелочная функція** - неявно завжди повертає значения
  * **Анонимная функція \ функціональний вираз** - треба добавляти return

====== Объявление функції ======


===== Объявление функции (стандарт можно визивать до ее обявления) =====

<code>
function a(){
    console.log('assgbfxv')
return ('this is to return'+'data')
}
</code>

===== Обявление фунционального виражения 1 (нельзя визивать до ее обявления) =====

  * через константу щоб її потім випадково не змінили
<code>
const a=()=> {
    console.log('Hey there')
}
</code>
===== Обявление фунционального виражения 2 (нельзя визивать до ее обявления) =====

  * через константу щоб її потім випадково не змінили
<code>
const multiply = function (x, y, z) {
  console.log(x * y * z);
};
</code>
===== Обявление функции анонимной (для коллБека) =====

<code>
const myFuncrion = function(a,b){
    let c
    a=a+1
    c=a+b
    return c
}
myFuncrion (5,6)
</code>

===== Обявление стрелочной функции (Неявне повернення) =====

<code>
// Звичайне оголошення функції
function classicAdd(a, b, c) {
  return a + b + c;
}

// Те саме стрілочною функцією
const arrowAdd = (a, b, c) => {
  return a + b + c;
};
</code>

Якщо параметр один, його можна оголошувати без круглих дужок.
<code>
const add = a => {
  return a + 5;
};
</code>

Якщо параметри відсутні, то обов'язково повинні бути порожні круглі дужки.
<code>
const greet = () => {
  console.log("Hello!");
};
</code>
<code>
// До
function classicAdd(a, b, c) {
  return a + b + c;
}

// Після
const arrowAdd = (a, b, c) => a + b + c;
</code>
===== Обявление коллбєк функції =====

<code>
//funcWithCallback - просто функція
//callbackfunc- змінна куди будемо передавати посисалання на функцию (тільки посилання а не виклик самої функції)

function funcWithCallback (callbackfunc) {
    callbackfunc()
}

//описуємо функцию що буде у нас як коллбек та її функціонал
function prinnn(){
    console.log('fdgdbfb')
}

//А теперь визиваємо просто функцію у котру у якості параметра передаємо іньшу функцію, а в середині ця функція буде визиватись і виконуватись
funcWithCallback(prinnn)
</code>

**  - коротка стрілочна функція**
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map(elementOfMassiv=>elementOfMassiv*3)
</code>
**  - повна стрілочна функція**
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map((elementOfMassiv)=>{
return elementOfMassiv*3
})
</code>
**  - анонімний функціональний вираз**
<code>
const myArray   =  [1, 2, 3]
const myArray2 = myArray.map(function (elementOfMassiv){
return elementOfMassiv*3
})
</code>
**Приклад: Функція має повертати масив імен усіх користувачів (властивість name) із масиву users.**
<code>
const getUserNames = (array) => {
  const newArray = [];

  array.forEach(element => {
    newArray.push(element.name);
  });

  return newArray;
};
</code>
===== Встановлення значення параметру за-замовчанням =====

<code>
function greet(username = "Guest") {
  console.log(`Hello, ${username}!`);
}
</code>
===== Получение аргументов в функции =====
==== arguments ====
=== Для звичайної функції ===
змінна (псевдомасив) за замовченням куди будуть передаватись усі передані аргументи
<code>
function multiply() {
  let total = 1;

  for (const arg of arguments) {
    total *= arg;
  }

  return total;
}

console.log(multiply(1, 2, 3)); //  6
</code>

=== Для стрілочної функції ===
У стрілочних функцій немає локальної змінної arguments, що містить усі аргументи. Якщо необхідно зібрати всі аргументи в масив, використовується операція rest.
<code>
const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // [1, 2, 3]
</code>
==== rest ====
=== Для звичайної функції ===

(...rest). Це спеціальний синтаксис, який дозволяє зібрати групу незалежних елементів у **масив**. Тих що не попали у очикувані параметри. Замість rest може бути люба назва. Головне синтаксис.
**Використовуєтся при описі функції**.
<code>
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]

</code>
=== Для стрілочної функції ===
У стрілочних функцій немає локальної змінної arguments, що містить усі аргументи. Якщо необхідно зібрати всі аргументи в масив, використовується операція rest.
<code>
const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // [1, 2, 3]
</code>
==== spread ====
(...spread) оператор розпилення. Коли функціонал використовується **при виклику функції**, він перетворює масив на **список аргументів**.
<code>
const temps = [14, -4, 25, 8, 11];
console.log(...temps); // 14 -4 25 8 11  набір окремих чисел 
console.log(Math.max(...temps)); // 25
</code>
==== Виклик функції ====
=== Створення функції як методу змінної-обїекта ===
<code>
const user = {
  username: "Poly",
  showThis() {
    console.log(this);
  }
};

user.showThis(); // {username: "Poly", showThis: ƒ}
</code>
=== Створення фунції і присвоєння її до властивості обїекту ===
 присвоюємо цю функцію властивості об'єкта і викликаємо її як метод цього об'єкта.
<code>
"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"
</code>
===== Вказання контексту виклику функції =====
==== call ====
<code>
foo.call(thisArg, arg1, arg2, ...)
</code>
  * thisArg — об'єкт, який ми хочемо встановити як контекст (значення this) для функції
  * arg1, arg2, ... — необов'язкові аргументи, які будуть передані функції
Метод call викликає функцію foo так, що значення this у функції буде посилатися на об'єкт thisArg, і також передає їй аргументи arg1, arg2 тощо.
==== apply ====
Метод apply є аналогом методу call. Відмінність у тому, що в методі apply() синтаксис передачі аргументів вимагає масиву, навіть якщо аргументи функції — це окремі значення.
<code>
foo.apply(thisArg, [arg1, arg2, ...])
</code>
==== bind ====
Метод bind створює і повертає нову функцію, яка має заздалегідь встановлений контекст, і ця нова функція може бути викликана пізніше з будь-якими аргументами.
<code>
const boundFoo = foo.bind(thisArg, arg1, arg2, ...)
</code>
Приклад
<code>
"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!"
</code>
Коли ми використовуємо bind(), ми створюємо нову функцію greet. Ця нова функція завжди матиме правильний контекст і може використовувати властивість username об'єкта customer.