Объявление функций в JavaScript: function и стрелочные функции

Функции – это как повара в ресторане: они берут ингредиенты (аргументы), выполняют магию (код) и выдают готовое блюдо (результат). В JavaScript есть два главных повара: традиционные функции и стрелочные функции. Разберём их со всеми секретами и щепоткой юмора

Обычные функции (function) – проверенный временем рецепт

Обычные функции в JavaScript можно объявлять разными способами, но основной – через function.

1. Обычное объявление функции

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

console.log(greet("Вася")); // Привет, Вася!

Здесь name – это как ингредиент. Мы передаём его в функцию, и она выдаёт готовый результат.

2. Функция с несколькими аргументами

function sum(a, b) {
    return a + b;
}

console.log(sum(5, 10)); // 15

Функция берёт два числа, складывает их и отдаёт результат. Как калькулятор, но без рекламы микрозаймов.

3. Функция без `return`

function logMessage() {
    console.log("Это сообщение просто выводится в консоль.");
}

logMessage();

Такие функции просто что-то делают, но ничего не возвращают, как нерадивые студенты.

Функциональное выражение – когда функция инкогнито

Функцию можно хранить в переменной и передавать как аргумент.

const multiply = function (x, y) {
    return x * y;
};

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

Стрелочные функции – JavaScript на минималках

Стрелочные функции – это современный способ объявления функций. Они короче и лаконичнее.

1. Базовый вариант

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

console.log(greet("Петя"));

2. Короткая запись (если одно выражение, фигурные скобки и `return` можно опустить)

const sum = (a, b) => a + b;

console.log(sum(5, 5)); // 10

Минимум кода – максимум пользы.

3. Если один аргумент – можно без скобок

const double = x => x * 2;

console.log(double(4)); // 8

4. Если аргументов нет, нужны пустые скобки

const sayHello = () => "Привет, мир!";

console.log(sayHello());

Отличия стрелочных функций от обычных

this ведёт себя иначе – в стрелочных функциях this берётся из контекста, в котором они объявлены.

const person = {
    name: "Иван",
    sayName: function() {
        console.log(this.name);
    },
    arrowSayName: () => {
        console.log(this.name);
    }
};

person.sayName(); // Иван
person.arrowSayName(); // undefined (так как `this` – глобальный объект)

Нельзя использовать arguments – в стрелочных функциях его нет.

function showArgs() {
    console.log(arguments);
}

showArgs(1, 2, 3); // [1, 2, 3]

const arrowShowArgs = () => {
    console.log(arguments);
};

arrowShowArgs(1, 2, 3); // Ошибка!

Итоги

function – классика жанра, работает везде и всегда.
Стрелочные функции – компактные, удобные, но со своими особенностями.
this ведёт себя по-разному в обычных и стрелочных функциях.
Функции – это мощь и магия JavaScript, без них никуда!

Так что кодьте, создавайте свои функции и пусть ваш код будет красивым и без багов!