JavaScript: Создание (определение) функций

До этого момента мы использовали только готовые функции: console.log(), Math.pow() и другие. Но в JavaScript можно создавать свои собственные функции, и пришла пора научиться это делать.

Зачем определять функции

Допустим, у нас есть несколько похожих участков кода:

console.log('Hello, Hexlet!');
console.log('Hello, world!');
console.log('Hello, JavaScript!');

Чтобы не повторять один и тот же шаблон, его можно оформить в виде своей функции, которая принимает параметр и печатает нужную строку:

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

Теперь её можно вызывать с разными аргументами:

sayHello('Hexlet');     // => Hello, Hexlet!
sayHello('world');      // => Hello, world!
sayHello('JavaScript'); // => Hello, JavaScript!

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

Синтаксис определения

function имяФункции(параметры) {
  тело
}

function greet(name) {           ← ключевое слово, имя и параметр
  return 'Hello, ' + name;       ← тело функции
}

Определение начинается с ключевого слова function, затем идёт имя функции (по тем же правилам, что и у переменных), в скобках — список параметров через запятую, а тело функции заключается в фигурные скобки {}.

Определить функцию — не значит вызвать её

Определение функции не запускает её код. Тело выполнится только при вызове. Посмотрите на пример:

function sayHi() {
  console.log('Hi!');
}

console.log('Программа продолжается…');

Здесь функция sayHi() определена, но её тело не выполняется — на экран попадёт только Программа продолжается…. Чтобы sayHi() сработала, её нужно явно вызвать:

function sayHi() {
  console.log('Hi!');
}

sayHi(); // => Hi!
console.log('Программа продолжается…');

Пример: функция для печати среднего арифметического

Реализуем функцию, которая вычисляет и печатает среднее арифметическое двух чисел. Среднее арифметическое — это сумма чисел, делённая на их количество. Например, среднее от 6 и 4: (6 + 4) / 2 = 5.

function printAverage(a, b) {
  const total = a + b;
  const average = total / 2;
  console.log(average);
}

printAverage(6, 4); // => 5

Здесь a и b — входные параметры, total содержит их сумму, average получается делением суммы на 2, а console.log() выводит результат.

Имена и порядок параметров

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

function getLastChar(str) {
  return str[str.length - 1];
}

// Внутри функции str будет равна 'Winter is coming'.
// Имя переменной снаружи не связано с именем параметра
const text = 'Winter is coming';
console.log(getLastChar(text)); // => g

Когда параметров два и больше, для большинства функций становится важен порядок их передачи. Если его поменять, функция отработает по-другому:

// Первый параметр — что ищем, второй — на что меняем
console.log('google'.replace('go', 'mo')); // => moogle

// Ничего не заменилось: внутри 'google' нет 'mo'
console.log('google'.replace('mo', 'go')); // => google

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

Переиспользование и читаемость

Функции помогают избегать дублирования и делают программы понятнее. Само название функции говорит, что она делает. Это особенно важно в больших проектах, где код читают другие программисты (или вы сами через месяц).

Сайт выводит приветствие для каждого посетителя. Реализуйте функцию sayHello(), которая выводит на экран фразу Hello, World!.

sayHello(); // => Hello, World!

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

Примечание: в файле уже есть строка export default … — она служебная, нужна системе проверки; что такое экспорт, разберём в уроке про модули.