1. Объявление функции
Функция — это именованный (или безымянный) блок кода, который можно вызвать в любой момент, сколько угодно раз, и (при желании) передать ему какие-то значения для обработки. В жизни функции похожи на бытовые приборы: вы кладёте хлеб в тостер (входные данные), нажимаете кнопку (вызываете функцию), через пару минут получаете тост (результат работы функции).
Зачем нужны функции?
- Чтобы не писать один и тот же код много раз.
- Чтобы разбивать программу на понятные части (каждая отвечает за свою задачу).
- Чтобы удобно тестировать и переиспользовать куски кода.
- Чтобы не сойти с ума, когда программа становится больше 10 строк.
Самый классический способ создать функцию в JavaScript — это Function Declaration (объявление функции). Такой способ знаком даже тем, кто не знаком с программированием — просто объявляем функцию с помощью ключевого слова function:
function sayHello() {
console.log('Привет, мир!');
}
Теперь у нас есть функция с именем sayHello. Чтобы она сработала, нужно её вызвать:
sayHello(); // Выведет: Привет, мир!
⚡ Важно: Функция не выполнится сама по себе! Она лишь определена в памяти, пока вы её не вызовете.
Пример: функция для приветствия пользователя
Давайте интегрируем это в ваше учебное приложение. Пусть у нас есть функция, которая приветствует пользователя по имени:
function greetUser(name) {
console.log('Привет, ' + name + '!');
}
greetUser('Оля'); // Привет, Оля!
greetUser('Василий'); // Привет, Василий!
2. Параметры функции: как передавать данные внутрь
Параметры — это переменные, которые объявляются в скобках при создании функции. Они позволяют передавать значения в функцию при её вызове.
function add(a, b) {
console.log(a + b);
}
add(2, 3); // 5
add(10, -4); // 6
Важный момент:
Количество переданных аргументов может не совпадать с количеством параметров! Если передать меньше — недостающие параметры будут undefined:
function showParams(a, b, c) {
console.log(a, b, c);
}
showParams(1, 2); // 1 2 undefined
showParams(); // undefined undefined undefined
Значения по умолчанию
Можно задать значения по умолчанию для параметров:
function greet(name = 'Гость') {
console.log('Привет, ' + name + '!');
}
greet(); // Привет, Гость!
greet('Иван'); // Привет, Иван!
3. Возвращаемое значение: return
Иногда функция должна не просто что-то сделать, но и вернуть результат. Для этого используется ключевое слово return.
function sum(a, b) {
return a + b;
}
let result = sum(5, 7); // result теперь равен 12
console.log(result); // 12
Что происходит:
- Функция sum возвращает сумму двух чисел.
- Ключевое слово return завершает выполнение функции и "отдаёт" результат наружу.
- После return функция прекращает работу — всё, что ниже, не выполнится.
function testReturn() {
return 42;
console.log('Этот код никогда не выполнится!');
}
Возврат без значения
Если функция не возвращает явно значение, она возвращает undefined:
function doNothing() {}
let x = doNothing();
console.log(x); // undefined
4. Function Expression: функция как значение
В JavaScript функции — это "граждане первого класса": их можно присваивать переменным, передавать как аргументы, возвращать из других функций. Такой способ объявления называется Function Expression (функциональное выражение):
const multiply = function (a, b) {
return a * b;
};
console.log(multiply(3, 4)); // 12
Отличие от Function Declaration:
- Function Declaration "всплывает" (hoisting) — её можно вызвать до объявления.
- Function Expression — нельзя: переменная пока не определена.
foo(); // Работает, функция объявлена через declaration
function foo() { console.log('foo!'); }
bar(); // Ошибка! bar еще не определён
const bar = function() { console.log('bar!'); };
Анонимные функции
Function Expression часто бывают анонимными (без имени), например, при передаче в другие функции:
setTimeout(function() {
console.log('Время вышло!');
}, 1000);
5. Практика: функции в вашем приложении
Давайте добавим к вашему учебному приложению (например, калькулятору) новые функции.
Пример 1: Суммирование массива
function sumArray(arr) {
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
let numbers = [1, 2, 3, 4, 5];
console.log(sumArray(numbers)); // 15
Пример 2: Проверка, является ли число чётным
function isEven(n) {
return n % 2 === 0;
}
console.log(isEven(4)); // true
console.log(isEven(7)); // false
Пример 3: Использование функции внутри цикла
for (let i = 1; i <= 10; i++) {
if (isEven(i)) {
console.log(i + ' — чётное');
} else {
console.log(i + ' — нечётное');
}
}
6. Типичные ошибки при работе с функциями
Ошибка №1: забыли вызвать функцию
function hello() {
console.log('Hi!');
}
hello; // Ничего не произойдёт! Нужно hello();
Часто новички путают имя функции и её вызов. Без скобок функция просто лежит в памяти.
Ошибка №2: забыли return
function add(a, b) {
a + b; // Ой! Нет return — функция всегда возвращает undefined
}
console.log(add(2, 3)); // undefined
Ошибка №3: return после console.log
function printSum(a, b) {
console.log(a + b);
return;
}
let result = printSum(1, 2); // result будет undefined, а не 3!
console.log просто выводит, но не возвращает значение. Если хотите использовать результат — используйте return.
Ошибка №4: вызов функции до объявления (Function Expression)
multiply(2, 3); // Ошибка!
const multiply = function(a, b) { return a * b; };
Function Expression нельзя вызывать до её объявления.
Ошибка №5: неправильное количество аргументов
function greet(name, surname) {
console.log('Привет, ' + name + ' ' + surname);
}
greet('Иван'); // Привет, Иван undefined
Если не передать все параметры, они будут undefined.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ