Главная2 курс UX/UI10 занятие. Основы JS: функции1. Что такое функция?
10 занятие

1. Что такое функция?

Функция в JavaScript — это блок кода, который выполняет определенную задачу и может быть повторно использован. Функции помогают структурировать код, избегать дублирования и делать программу более читаемой.

Типы функций и способы их создания

1. Function Declaration (Объявление функции)

Самый распространенный способ. Функция объявляется с помощью ключевого слова function.

// Синтаксис
function имяФункции(параметры) {
    // тело функции
    return результат; // необязательно
}

// Пример
function greet(name) {
    return "Привет, " + name + "!";
}

console.log(greet("Анна")); // "Привет, Анна!"

Особенности:

  • Можно вызывать до объявления
  • Имеют собственный контекст this

2. Function Expression (Функциональное выражение)

Функция создается как часть выражения, часто присваивается переменной.

// Синтаксис
const имяПеременной = function(параметры) {
    // тело функции
};

// Пример
const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(3, 4)); // 12

Особенности:

  • Нельзя вызвать до присваивания
  • Могут быть анонимными (без имени)

3. Стрелочные функции (Arrow Functions)

Современный краткий синтаксис, появившийся в ES6.

// Синтаксис
const имяПеременной = (параметры) => {
    // тело функции
};

// Примеры разных вариантов

// Один параметр - скобки можно опустить
const square = x => x * x;

// Несколько параметров
const sum = (a, b) => a + b;

// Без параметров
const sayHello = () => "Hello!";

// Многострочная функция
const checkAge = (age) => {
    if (age >= 18) {
        return "Совершеннолетний";
    } else {
        return "Несовершеннолетний";
    }
};

console.log(square(5)); // 25
console.log(sum(2, 3)); // 5
console.log(checkAge(20)); // "Совершеннолетний"

Особенности:

  • Не имеют собственного this (берут из окружающего контекста)
  • Не могут быть использованы как конструкторы
  • Более краткий синтаксис для простых операций

4. Методы объекта

Функции, которые являются свойствами объектов.

const calculator = {
    // Метод объекта
    add: function(a, b) {
        return a + b;
    },
    
    // Краткая запись метода (ES6)
    subtract(a, b) {
        return a - b;
    },
    
    // Стрелочная функция как метод (осторожно с this!)
    multiply: (a, b) => a * b
};

console.log(calculator.add(5, 3)); // 8
console.log(calculator.subtract(10, 4)); // 6

5. Конструктор функций (реже используется)

const divide = new Function('a', 'b', 'return a / b');
console.log(divide(10, 2)); // 5
Далее