Зачем нужны функции
В прошлом уроке мы создавали переменные и выводили их в консоль. Но каждый раз писали одно и то же: console.log(). Представьте, что нужно приветствовать пользователей. Пишете одну строку для одного имени, другую для другого. Код становится длинным и повторяющимся.
Функции решают эту проблему. Функция это готовая команда, которую пишете один раз и используете многократно. Как кнопка на пульте. Нажимаете, происходит действие. Не нужно каждый раз объяснять телевизору, что такое «увеличить громкость». Просто нажимаете кнопку.
Посмотрите на сайт ADC. В футере видите иконки соцсетей? Кликаете на Telegram, открывается ссылка. Кликаете на VK, открывается другая ссылка. Одно и то же действие «открыть ссылку», но с разными данными. Это идеальный случай для функции.
Создание первой функции
Создайте первую функцию. Откройте script.js:
function greet() {
console.log('Добро пожаловать в ADC!');
}Ключевое слово function создаёт функцию. greet — это имя функции. Круглые скобки () — это место для параметров, пока пустые. Фигурные скобки {} содержат код, который выполнится.
Вызов функции
Функция создана, но не выполнилась. Функция — это как рецепт в кулинарной книге. Рецепт существует, но пока не готовите, ничего не происходит. Нужно вызвать функцию:
function greet() {
console.log('Добро пожаловать в ADC!');
}
greet();Сохраните. Обновите страницу. Откройте консоль. Видите «Добро пожаловать в ADC!»? Функция выполнилась. Можете вызвать её несколько раз:
function greet() {
console.log('Добро пожаловать в ADC!');
}
greet();
greet();
greet();Три одинаковых сообщения в консоли. Написали функцию один раз, использовали три раза. Это переиспользование кода.
Параметры функций
Но функция приветствует всех одинаково. Что если нужно персональное приветствие? Для этого существуют параметры. Параметры — это данные, которые передаёте функции:
function greet(name) {
console.log('Привет, ' + name + '!');
}
greet('Анна');
greet('Дмитрий');
greet('Мария');name — это параметр. При вызове greet('Анна') параметр name получает значение «Анна». Функция подставляет его в текст. Три вызова, три разных имени, три разных приветствия.
Можете добавить несколько параметров:
function showEvent(title, year) {
console.log('Мероприятие: ' + title);
console.log('Год: ' + year);
}
showEvent('ADC Meetup', 2024);
showEvent('Creative Hub', 2025);Два параметра title и year. При вызове передаёте два значения. Функция использует оба. Порядок важен: первое значение идёт в первый параметр, второе во второй.
Возврат значений с return
Функции могут возвращать результат. До сих пор функции выводили в консоль, но не возвращали значение. Ключевое слово return возвращает результат:
function calculateTotal(price, quantity) {
let total = price * quantity;
return total;
}
let cost = calculateTotal(500, 3);
console.log('Итого: ' + cost + ' рублей');Функция вычисляет сумму и возвращает её. Вы сохраняете результат в переменную cost и используете дальше. Как калькулятор: вводите числа, получаете результат.
Посмотрите на дизайн сайта ADC. Видите текст про образовательную инициативу? Представьте функцию, которая формирует описание мероприятия:
function createEventDescription(name, location, date) {
let description = 'Мероприятие "' + name + '" пройдёт в ' + location + ' ' + date;
return description;
}
let event1 = createEventDescription('ADC Meetup', 'Creative Hub', '15 марта');
let event2 = createEventDescription('Design Workshop', 'Школа дизайна', '22 марта');
console.log(event1);
console.log(event2);Одна функция, разные данные, разные описания. Это мощь функций: пишете логику один раз, применяете везде.
Способы создания функций
Функции можно создавать разными способами. Первый способ function declaration, объявление функции:
function sayHello() {
console.log('Привет!');
}Второй способ function expression, функциональное выражение:
const sayHello = function() {
console.log('Привет!');
};Функция сохраняется в переменную. Вызываете через имя переменной: sayHello(). Работает так же.
Третий способ arrow function, стрелочная функция:
const sayHello = () => {
console.log('Привет!');
};Современный короткий синтаксис. Стрелка => заменяет слово function. Если функция короткая, можете писать в одну строку:
const double = (num) => num * 2;
console.log(double(5)); // 10Все три способа создают функцию. Выбирайте, что удобнее. Для начала используйте обычное объявление function, оно понятнее.
Практический пример
Создайте набор функций для сайта ADC:
// Приветствие пользователя
function welcomeUser(name) {
return 'Добро пожаловать, ' + name + '!';
}
// Расчёт количества участников
function getTotalAttendees(online, offline) {
return online + offline;
}
// Форматирование адреса
function formatAddress(street, building) {
return 'Адрес: ' + street + ', ' + building;
}
// Проверка активности мероприятия
function isEventActive(status) {
return status === 'active';
}
// Использование функций
console.log(welcomeUser('Анна'));
console.log('Всего участников: ' + getTotalAttendees(50, 30));
console.log(formatAddress('Пантелеевская', '53'));
console.log('Событие активно: ' + isEventActive('active'));Сохраните. Обновите страницу. Откройте консоль. Видите результаты всех функций? Каждая делает своё дело. Вместе они составляют функциональность сайта.
Заключение
Запомните главное. Функция создаётся через function имя() {}. Параметры в круглых скобках. Код в фигурных скобках. return возвращает результат. Вызов функции через имя и круглые скобки: имя().
Когда видите повторяющийся код, выносите его в функцию. Нужно несколько раз поприветствовать пользователей? Функция. Нужно рассчитать что-то по формуле? Функция. Нужно отформатировать текст одинаково? Функция. Это делает код чище и короче.
Что делает ключевое слово return в функции?
Как правильно вызвать функцию с именем showMessage?
Что такое параметры функции?
Стрелочные функции — статья на MDN