Что такое функция в JavaScript?

Question

claude-haiku-4.5 · Accepted Answer

## Функции в JavaScript

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

## Определение функции

В JavaScript есть несколько способов определить функцию:

```javascript
// 1. FUNCTION DECLARATION (объявление функции)
function greet(name) {
  return `Hello, ${name}!`;
}

greet('Alice'); // 'Hello, Alice!'

// Особенность: можно вызвать ДО объявления (hoisting)
sayHi(); // работает, выведет 'Hi!'
function sayHi() {
  console.log('Hi!');
}

// 2. FUNCTION EXPRESSION (функциональное выражение)
const greet = function(name) {
  return `Hello, ${name}!`;
};

greet('Bob'); // 'Hello, Bob!'

// Отличие от function declaration: нельзя вызвать до определения
sayGoodbye(); // ReferenceError
const sayGoodbye = function() {
  console.log('Goodbye!');
};

// 3. ARROW FUNCTION (стрелочная функция, ES6+)
const greet = (name) => {
  return `Hello, ${name}!`;
};

// Или ещё короче:
const greet = (name) => `Hello, ${name}!`;

// С одним параметром скобки не нужны:
const square = (num) => num * num;

// Без параметров:
const getRandom = () => Math.random();
```

## Параметры и аргументы

```javascript
// ПАРАМЕТРЫ — что указано при определении функции
// АРГУМЕНТЫ — что передано при вызове функции

function add(a, b) {  // a, b — параметры
  return a + b;
}

add(5, 3);  // 5, 3 — аргументы

// ДЕФОЛТНЫЕ ПАРАМЕТРЫ
function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

greet();        // 'Hello, Guest!'
greet('Alice'); // 'Hello, Alice!'

// REST ПАРАМЕТРЫ (...)
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4, 5); // 15

// ДЕСТРУКТУРИЗАЦИЯ ПАРАМЕТРОВ
function displayUser({ name, age, city }) {
  console.log(`${name}, ${age} years old, from ${city}`);
}

displayUser({ name: 'John', age: 30, city: 'New York' });
// John, 30 years old, from New York
```

## Возвращаемое значение

```javascript
// RETURN — возвращает значение и выходит из функции

function divide(a, b) {
  if (b === 0) {
    return 'Cannot divide by zero'; // раннее возвращение
  }
  return a / b;
}

divide(10, 2); // 5
divide(10, 0); // 'Cannot divide by zero'

// Если нет return — функция возвращает undefined
function noReturn() {
  console.log('This returns nothing');
}

const result = noReturn(); // undefined

// Функция может возвращать что угодно: число, строку, объект, функцию
const getUser = () => ({
  name: 'Alice',
  age: 25,
  greet: () => console.log('Hi!')
});

const user = getUser();
user.greet(); // 'Hi!'
```

## Scope (область видимости)

```javascript
// ГЛОБАЛЬНЫЙ SCOPE — видно везде
const globalVar = 'I am global';

function myFunc() {
  console.log(globalVar); // 'I am global' ✓
}

// ЛОКАЛЬНЫЙ SCOPE — видно только внутри функции
function localFunc() {
  const localVar = 'I am local';
  console.log(localVar); // 'I am local' ✓
}

console.log(localVar); // ReferenceError: localVar is not defined

// ВЛОЖЕННЫЙ SCOPE — доступ к внешней области
function outer() {
  const outerVar = 'outer';

function inner() {
    const innerVar = 'inner';
    console.log(outerVar); // ✓ доступна переменная outer
    console.log(innerVar); // ✓ доступна своя переменная
  }

inner();
  console.log(innerVar); // ReferenceError — не доступна
}

outer();

// БЛОЧНЫЙ SCOPE (let, const)
if (true) {
  const blockVar = 'inside block';
  console.log(blockVar); // ✓
}

console.log(blockVar); // ReferenceError — не доступна за пределами блока
```

## Замыкание (Closure)

Это один из самых важных концептов в JavaScript:

```javascript
// Замыкание — это функция, которая имеет доступ к переменным внешней функции

function counter() {
  let count = 0; // переменная "запоминается" в замыкании

return function() {
    count++;
    console.log(count);
  };
}

const myCounter = counter();
myCounter(); // 1
myCounter(); // 2
myCounter(); // 3

// Каждый вызов counter() создаёт НОВОЕ замыкание
const counter2 = counter();
counter2(); // 1 (новый отсчёт)

// ПРАКТИЧЕСКИЙ ПРИМЕР: создать функцию с настройкой
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

double(5); // 10
triple(5); // 15

// В React это очень важно:
function useCounter(initialValue) {
  const [count, setCount] = React.useState(initialValue);

return {
    count,
    increment: () => setCount(c => c + 1), // замыкание над count
  };
}
```

## Объекты-функции (this контекст)

```javascript
// this — это контекст выполнения функции

const user = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet(); // 'Hello, I'm Alice' — this указывает на user

// ПРОБЛЕМА: если вызвать функцию отдельно, this будет undefined или window
const greetFn = user.greet;
greetFn(); // undefined или 'Hello, I'm undefined' (в strict mode это undefined)

// РЕШЕНИЕ 1: bind()
const boundGreet = user.greet.bind(user);
boundGreet(); // ✓ 'Hello, I'm Alice'

// РЕШЕНИЕ 2: arrow function (наследует this)
const user2 = {
  name: 'Bob',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

// РЕШЕНИЕ 3: вызвать с call или apply
user.greet.call(user); // явно указать контекст
user.greet.apply(user); // то же самое

// В React обычно используют:
class Counter extends React.Component {
  constructor(props) {
    super(props);
    // bind в конструкторе
    this.increment = this.increment.bind(this);
  }

increment() {
    this.setState(s => ({ count: s.count + 1 }));
  }
}

// Или arrow function в классе
class Counter2 extends React.Component {
  increment = () => {
    this.setState(s => ({ count: s.count + 1 }));
  };
}
```

## Higher-Order Functions (HOF)

Функции, которые принимают функции как аргументы или возвращают функции:

```javascript
// ПРИНИМАЕТ ФУНКЦИЮ КАК АРГУМЕНТ
function executeCallback(callback, value) {
  return callback(value);
}

executeCallback(x => x * 2, 5); // 10

// RETURNS FUNCTION
function createMultiplier(factor) {
  return (x) => x * factor;
}

const double = createMultiplier(2);
double(5); // 10

// ПРАКТИЧЕСКИЙ ПРИМЕР: debounce (частый паттерн)
function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
}

const handleSearch = debounce((query) => {
  console.log('Searching for:', query);
}, 300);

// Вызов несколько раз быстро
handleSearch('a');
handleSearch('ab');
handleSearch('abc');
// Выполнится только последний вызов после 300ms: 'Searching for: abc'

// ДРУГОЙ ПРИМЕР: map, filter, reduce
const numbers = [1, 2, 3, 4, 5];

numbers.map(x => x * 2);    // [2, 4, 6, 8, 10]
numbers.filter(x => x > 2); // [3, 4, 5]
numbers.reduce((a, b) => a + b, 0); // 15
```

## Чистые функции (Pure Functions)

```javascript
// ЧИСТАЯ ФУНКЦИЯ — нет побочных эффектов, один вход = один выход

// ХОРОШО: чистая функция
function add(a, b) {
  return a + b;
}

// ПЛОХО: не чистая функция (зависит от внешней переменной)
let total = 0;
function addToTotal(a, b) {
  total = a + b; // модифицирует внешнее состояние
  return total;
}

// ПЛОХО: побочный эффект
function fetchUser(id) {
  const user = API.get(`/users/${id}`); // сетевой запрос
  console.log(user); // консоль (побочный эффект)
  return user;
}

// ХОРОШО: чистая функция + обработка эффектов отдельно
function getUser(data, id) {
  return data.find(u => u.id === id); // чистая
}

// Побочные эффекты отделены:
async function loadAndPrintUser(id) {
  const user = await API.get(`/users/${id}`);
  console.log(user);
  return user;
}
```

## Асинхронные функции

```javascript
// ОБЫЧНАЯ ФУНКЦИЯ — выполняется синхронно
function getValue() {
  return 42;
}

const result = getValue(); // сразу 42

// АСИНХРОННАЯ ФУНКЦИЯ — работает с Promise
async function getValueAsync() {
  return 42; // автоматически оборачивается в Promise
}

getValueAsync().then(result => console.log(result)); // 42

// С ожиданием
async function fetchUserData(id) {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data; // возвращает Promise
}

fetchUserData(1).then(user => console.log(user));

// Обработка ошибок
async function safeFetch(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error('Not found');
    return await response.json();
  } catch (error) {
    console.error('Error:', error.message);
    return null;
  }
}
```

## Итог: что нужно знать о функциях

```javascript
// ОСНОВНОЕ:
// 1. Функции — это объекты первого класса (first-class objects)
// 2. Можно передавать как аргументы и возвращать из функций
// 3. Имеют scope и замыкания
// 4. Могут быть синхронные и асинхронные
// 5. Чистые функции лучше для тестирования
// 6. this зависит от способа вызова

// ТИПИЧНОЕ ИСПОЛЬЗОВАНИЕ:
// - Разделение логики на переиспользуемые части
// - Обработка событий
// - Преобразование данных
// - Асинхронные операции (fetch, таймеры)

// В React функции критичны:
// - Компоненты — это функции
// - Хуки — это функции
// - Callbacks — функции
// - useEffect, useMemo, useCallback — все основаны на функциях
```

Что такое функция в JavaScript?

Комментарии (1)

Функции в JavaScript

Определение функции

Параметры и аргументы

Возвращаемое значение

Scope (область видимости)

Замыкание (Closure)

Объекты-функции (this контекст)

Higher-Order Functions (HOF)

Чистые функции (Pure Functions)

Асинхронные функции

Итог: что нужно знать о функциях