JS функции основы

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

Зачем нужно

Функции — основа структурирования кода в JavaScript. Они позволяют избегать дублирования (DRY), инкапсулировать логику и создавать абстракции. Функции в JS являются объектами первого класса (first-class functions): их можно хранить в переменных, передавать как аргументы и возвращать из других функций — это основа функционального программирования, callback-паттерна и замыканий.

Где используется

  • Reusable логика: валидация, форматирование, вычисления
  • Callback-функции: обработчики событий, setTimeout, Array.map
  • Замыкания: приватные переменные, фабрики, мемоизация
  • Асинхронность: async-функции, Promise-обёртки
  • Функциональное программирование: map, filter, reduce, каррирование

Основной контент

Объявление функций

// Function Declaration — хоистится полностью, доступна до объявления
function greet(name) {
  return `Привет, ${name}!`;
}

// Function Expression — не хоистится (только объявление переменной)
const greetExpr = function(name) {
  return `Привет, ${name}!`;
};

// Arrow function — нет своего this, arguments; компактный синтаксис
const greetArrow = (name) => `Привет, ${name}!`;
const double = n => n * 2; // один параметр — скобки не обязательны
const getObj = () => ({ key: 'value' }); // объект нужно оборачивать в

Параметры функции

// Параметры по умолчанию (ES6)
function createUser(name, role = 'user', active = true) {
  return { name, role, active };
}
createUser('Иван');       // { name: 'Иван', role: 'user', active: true }
createUser('Мария', 'admin'); // { name: 'Мария', role: 'admin', active: true }

// Rest-параметры — собирают оставшиеся аргументы в массив
function sum(first, ...rest) {
  return rest.reduce((acc, n) => acc + n, first);
}
console.log(sum(1, 2, 3, 4)); // 10

// Деструктуризация в параметрах
function render({ title, body, tag = 'div' }) {
  return `<${tag}><h1>${title}</h1><p>${body}</p></${tag}>`;
}

Функции как объекты первого класса

// Хранение в переменной / массиве / объекте
const operations = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
};
console.log(operations.add(2, 3)); // 5

// Функция высшего порядка — принимает функцию как аргумент
function applyTwice(fn, value) {
  return fn(fn(value));
}
console.log(applyTwice(x => x * 2, 3)); // 12

// Возврат функции из функции
function multiplier(factor) {
  return (n) => n * factor;
}
const triple = multiplier(3);
console.log(triple(5)); // 15

Контекст вызова и this

// В обычной функции this зависит от контекста вызова
const obj = {
  name: 'Объект',
  getName: function {
    return this.name; // this = obj при вызове obj.getName
  }
};

// Стрелочная функция — this берётся из лексического окружения
function Timer() {
  this.count = 0;
  setInterval(() => {
    this.count++; // this === Timer, а не глобальный объект
  }, 1000);
}

// bind, call, apply — явное указание this
function greet(greeting) {
  return `${greeting}, ${this.name}`;
}
const user = { name: 'Иван' };
console.log(greet.call(user, 'Привет'));         // 'Привет, Иван'
console.log(greet.apply(user, ['Здравствуй'])); // 'Здравствуй, Иван'
const boundGreet = greet.bind(user);
console.log(boundGreet('Добрый день'));          // 'Добрый день, Иван'

Чистые функции

// Чистая функция: нет побочных эффектов, результат зависит только от аргументов
const pureAdd = (a, b) => a + b;

// Нечистая функция: изменяет внешнее состояние
let total = 0;
function impureAdd(n) {
  total += n; // побочный эффект
  return total;
}

Частые ошибки

  • Hoisting Function Expression: const fn = function {} — нельзя вызвать до объявления, будет ReferenceError.
  • Arrow function и this: стрелочная функция не имеет своего this — нельзя использовать как метод объекта или конструктор.
  • arguments недоступен в стрелочных функциях: вместо него используйте rest-параметры ...args.
  • Забыть return: функция без return возвращает undefined. В методах объекта это частая скрытая ошибка.

Связанные темы

Ресурсы

🎓 Источник: Функции, стрелочные функции, контексты, замыкания

  • 📅 2018-09-27 · YouTube · ID: pn5myCmpV2U
  • Тезисы:
    • Функция = объект первого класса: передаётся, возвращается, присваивается
    • Математическая функция — преобразователь величины (область определения → область значений)
    • Чистые функции — предсказуемы (sin, sort, uppercase)
    • Побочные эффекты возникают из-за контекстов: функция видит идентификаторы окружения
    • Функция не должна быть больше экрана; 30 строк — уже тяжело
    • 4 способа объявить функцию: declaration, expression, lambda, new Function
    • fn.name — имя; fn.length — число объявленных аргументов (без rest/default)
    • Декомпозиция: вместе мелкие функции длиннее, но проще читать и переиспользовать
  • Цитата: «Функция в JavaScript это так называемый объект первого класса. Он может передаваться как аргумент в другую функцию. Можно возвращать функцию как результат другой функции.»