Функции

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

Зачем нужны функции

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

• переиспользование кода — написать один раз, вызывать много раз;
• структурирование — разбить большую программу на маленькие понятные кусочки.

Объявление и вызов функции

Самый базовый способ объявить функцию — function declaration (объявление функции):

function greet() {
  console.log('Добро пожаловать в Санкт-Петербург!');
}
js

Само по себе объявление ничего не делает — функция просто существует в памяти. Чтобы код внутри выполнился, функцию нужно вызвать — написать её имя со скобками:

greet(); // Добро пожаловать в Санкт-Петербург!
greet(); // можно вызывать сколько угодно раз
js

Параметры и возвращаемое значение

Функции могут принимать входные данные через параметры и возвращать результат через return:

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

const result = add(3, 5);
console.log(result); // 8
js

Здесь a и b — параметры функции. При вызове add(3, 5) мы передаём конкретные значения — аргументы. Функция складывает их и возвращает результат через return.

Как только интерпретатор встречает return — выполнение функции прекращается, даже если после него есть ещё код. Если return не указан, функция вернёт undefined.

Функции — это объекты

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

Это означает, что с функцией можно делать всё то же самое, что с любым другим значением:

Присвоить переменной:

function sayHello() {
  console.log('Привет!');
}

const hi = sayHello; // присваиваем функцию переменной (без скобок!)
hi(); // Привет!
js

Передать как аргумент в другую функцию:

function runTwice(fn) {
  fn();
  fn();
}

runTwice(greet); // вызовет greet два раза
js

Вернуть из функции:

function createGreeter(name) {
  return function() {
    console.log(`Привет, ${name}!`);
  };
}

const greetIvan = createGreeter('Иван');
greetIvan(); // Привет, Иван!
js

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

Способы записи функций

В JavaScript существует несколько способов записать одно и то же — функцию. Давайте разберём основные.

Function declaration (объявление функции)

Мы уже видели этот вариант. Особенность: такую функцию можно вызвать до её объявления в коде — интерпретатор «поднимает» объявления функций наверх до выполнения:

greet(); // работает, несмотря на то что объявление ниже

function greet() {
  console.log('Привет!');
}
js

Function expression (функциональное выражение)

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

const greet = function() {
  console.log('Привет!');
};

greet(); // Привет!
js

Стрелочная функция (arrow function)

Более короткая запись, появившаяся в современном стандарте JS:

const greet = () => {
  console.log('Привет!');
};

// Если тело функции — одно выражение, можно записать ещё короче:
const add = (a, b) => a + b;

console.log(add(3, 5)); // 8
js

Стрелочные функции не только короче — они ведут себя немного иначе в части обращения к this, но это тема для отдельного изучения. На начальном этапе просто знайте, что такой синтаксис существует и широко используется в современном коде.

Итого

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

• функция объявляется один раз, вызывается сколько угодно раз;
• функции могут принимать параметры и возвращать значение через return;
• функции — это объекты, их можно передавать как значения;
• существуют разные способы записи: declaration, expression, стрелочные функции.

В следующих уроках мы применим всё изученное на практике и начнём работать с браузером напрямую.