Функції

Frontend SELF UA
Рівень 35 , Лекція 2
Відкрита

3.1 Оголошення функцій

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

Оголошення функції — це спосіб створення іменованої функції, яку можна викликати пізніше. Такі функції «піднімаються» (hoisted) на верхівку їхньої області видимості, що дозволяє викликати їх до оголошення у коді.

Синтаксис:

    
      function name (arguments) {
        // function body
      }
    
  

Приклад використання:

JavaScript
    
      // Оголошення функції
      function greet(name) {
        return `Привіт, ${name}!`;
      }

      // Виклик функції
      console.log(greet('Аліса')); // Виведе: Привіт, Аліса!
    
  

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

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

Синтаксис:

    
      const name = function (arguments) {
        // function body
      }
    
  

Приклад використання:

JavaScript
    
      // Вираз функції

      const greet = function(name) {
        return `Привіт, ${name}!`;
      };

      // Виклик функції
      console.log(greet('Боб')); // Виведе: Привіт, Боб!
    
  

3.3 Стрілкові функції

Стрілкові функції (arrow functions) — це стислий спосіб оголошення функцій, який також зберігає контекст this із батьківської області видимості. У стрілкових функцій немає власного this, тому вони особливо корисні у обробниках подій та методах масивів.

Синтаксис:

    
      const name = (arguments) => {
        // function body
      }
    
  

Якщо функція приймає один параметр, круглі дужки можна опустити. Якщо функція повертає один вираз, можна опустити фігурні дужки і ключове слово return.

Приклад 1: Повний запис

JavaScript
    
      // Стрілкова функція

      const greet = (name) => {
        return `Привіт, ${name}!`;
      };

      // Виклик функції
      console.log(greet('Чарлі')); // Виведе: Привіт, Чарлі!
    
  

Приклад 2: Скорочений запис

JavaScript
    
      // Стрілкова функція з одним параметром та одним виразом
      const greet = name => `Привіт, ${name}!`;

      // Виклик функції
      console.log(greet('Дана')); // Виведе: Привіт, Дана!
    
  

3.4 Порівняння способів оголошення функцій

Підйом (hoisting):

  • Оголошення функцій: функції піднімаються, що дозволяє викликати їх до оголошення
  • Вирази функцій та Стрілкові функції: не піднімаються, їх можна викликати лише після оголошення

Контекст this:

  • Оголошення функцій та Вирази функцій: мають власний контекст this
  • Стрілкові функції: не мають власного this, контекст успадковується із батьківської області видимості

Зручність запису:

  • Стрілкові функції: більш лаконічні і часто використовуються для коротких функцій та callback'ів
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ