Различия

Показаны различия между двумя версиями страницы.

--- objavlenie_funkcii [2023/11/11 19:12]
tro
+++ objavlenie_funkcii [2023/11/20 21:20] (текущий)
tro [Виклик функціхї]
@@ Строка 5: / Строка 5: @@
-**--------------------Объявление функции стандарт (можно визивать до ее обявления) --------------**
+===== Объявление функции (стандарт можно визивать до ее обявления) =====
 <code>
 function a(){
@@ Строка 13: / Строка 14: @@
 </code>
-**--------------------Обявление фунционального виражения 1 (нельзя визивать до ее обявления)--------------**
+===== Обявление фунционального виражения 1 (нельзя визивать до ее обявления) =====
   * через константу щоб її потім випадково не змінили
 <code>
@@ Строка 20: / Строка 22: @@
 }
 </code>
-**--------------------Обявление фунционального виражения 2 (нельзя визивать до ее обявления)--------------**
+===== Обявление фунционального виражения 2 (нельзя визивать до ее обявления) =====
   * через константу щоб її потім випадково не змінили
 <code>
@@ Строка 27: / Строка 30: @@
 };
 </code>
-<code>
+===== Обявление функции анонимной (для коллБека) =====
-</code>
-**--------------------Обявление функции анонимной (для коллБека--------------**
 <code>
 const myFuncrion = function(a,b){
@@ Строка 41: / Строка 42: @@
 </code>
-**--------------------Обявление стрелочной функции--------------**
+===== Обявление стрелочной функции (Неявне повернення) =====
 <code>
-const myFunc=(a,b)=>{
+// Звичайне оголошення функції
-let c
+function classicAdd(a, b, c) {
-return c}
+  return a + b + c;
+}
+// Те саме стрілочною функцією
+const arrowAdd = (a, b, c) => {
+  return a + b + c;
+};
 </code>
+Якщо параметр один, його можна оголошувати без круглих дужок.
 <code>
-al=>console.log(el * 2)
+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>
@@ Строка 82: / Строка 115: @@
 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") {
@@ Строка 91: / Строка 137: @@
 ===== Получение аргументов в функции =====
 ==== arguments ====
+=== Для звичайної функції ===
 змінна (псевдомасив) за замовченням куди будуть передаватись усі передані аргументи
 <code>
@@ Строка 104: / Строка 151: @@
 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 може бути люба назва. Головне синтаксис.
 **Використовуєтся при описі функції**.
@@ Строка 117: / Строка 176: @@
 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 ====
@@ Строка 125: / Строка 193: @@
 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.