<aside> 👉 Функции – это набор простых инструкций, сгруппированных для определенной цели. Язык программирования, как конструктор, позволяет нам собирать что-то из кубиков и сохранять инструкции по сборке.
</aside>
Функции нужны, когда нам нужно собрать по смыслу набор каких-то инструкций, чтобы потом несколько раз воспользоваться этим набором. Акцентирую ваше внимание словах “воспользоваться несколько раз”, ведь если набор инструкций нужен лишь для единичного действия, то и особой надобности в создании функции нет.
<aside>
👉 Есть два вида функций:
1️⃣ Обычные (создаётся с ключевым словом function)
2️⃣ Стрелочные (создаются с помощью специального синтаксиса () => {})
</aside>
<aside> 👉 Обычную функцию можно создать двумя способами: 1️⃣ Function Declaration (Объявление функции) 2️⃣ Function Expression (Функциональное выражение)
</aside>
Сперва поговорим об обычных функциях.
// Бесполезный, но наглядный пример: создадим функцию с вычислениями
// (функции в JS принято называть кэмелКейсом, то есть с маленькой буквы,
// слитно, и каждое новое слово с большой буквы
function calculateAndLogNumber() {
let x = 5;
x = x + 100;
x = x / 5;
console.log(x);
}
// теперь всякий раз, когда нам потребуется провести эти вычисления и вывести
// результат в консоль, нам нужно просто вызвать функцию
// Делается это с помощью имени функции и круглых скобок после него:
calculateAndLogNumber();
// Причем мы можем вызывать функцию сколько угодно раз
calculateAndLogNumber();
calculateAndLogNumber();
calculateAndLogNumber();
В реальной разработке нам не особо нужно выводить что-то в консоль, зато нам часто нужно куда-то сохранять полученный результат.
Поменяем название функции на calculateNumber и воспользуемся умением функции возвращать значения, полученные в результате выполнения. Для этого нам потребуется ключевое слово return :
function calculateNumber() {
let x = 5;
x = x + 100;
x = x / 5;
return x;
}
const result = calculateNumber();
console.log(result)
Таким образом мы можем вычислять это значение сколько угодно раз, сохраняя в разные переменные результат. А если вдруг нам потребуется внести изменения в вычисления, то сделать это нужно будет лишь один раз – в теле функции. Никакого повторяющегося кода.
<aside>
❗ return не только возвращает значение из функции, но и завершает её выполнение. Иными словами, строки после return выполнены уже не будут.
</aside>
Чтобы вычислять значения в зависимости от каких-то переменных, при этом используя одни и те же инструкции, существуют параметры функции:
// Вместо того, чтобы задавать изначальное значение x напрямую в теле
// функции, мы можем передавать его в функцию в виде параметра. Вот так:
function calculateNumber(initialValue) {
let x = initialValue;
x = x + 100;
x = x / 5;
return x;
}
// Теперь то, что мы передадим при вызове функции, будет присвоено иксу
// А далее выполнятся всё те же операции. Например:
const res = calculateNumber(5);
console.log(res); // 21
const res1 = calculateNumber(10);
console.log(res1); // 22
<aside> 👉 Функция может принимать сколько угодно параметров. Для этого нам нужно придумать им название и перечислить в круглых скобках через запятую при создании.
</aside>
<aside> ❗ Обратите внимание: очень важен порядок записи параметров. В том же порядке нужно будет передавать и аргументы при вызове функции!
</aside>
В обычных функциях (созданных с помощью ключевого слова function) есть особая переменная: arguments