14. Функции JavaScript
В JavaScript функции и методы являются ключевыми элементами, обеспечивающими выполнение операций и логики в коде.
Функции в JavaScript
Функции — это блоки кода, которые выполняют определённые действия. Они могут принимать аргументы (входные данные) и возвращать значения. Функции являются основой функционального программирования и переиспользования кода.
1. Объявление функции
Функцию можно объявить несколькими способами:
1.1. Функциональное объявление (Function Declaration):
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Hello, Alice!1.2. Функциональное выражение (Function Expression):
const greet = function (name) {
return `Hello, ${name}!`;
};
console.log(greet("Bob")); // Hello, Bob!1.3. Стрелочная функция (Arrow Function):
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Charlie")); // Hello, Charlie!2. Аргументы функции
Функция может принимать один или несколько аргументов. Если аргументы не переданы, их значение будет undefined.
function sum(a, b) {
return a + b;
}
console.log(sum(5, 3)); // 8
console.log(sum(5)); // NaN (undefined + 5)Аргументы по умолчанию:
function sum(a = 0, b = 0) {
return a + b;
}
console.log(sum(5)); // 5 (5 + 0)Использование arguments:
Функции имеют встроенный объект arguments, который содержит все переданные аргументы.
function showArgs() {
return arguments[0] + arguments[1];
}
console.log(showArgs(3, 7)); // 103. Возврат значения
Функции могут возвращать значения с помощью return.
function square(num) {
return num * num;
}
console.log(square(4)); // 16Если return отсутствует, функция возвращает undefined.
4. Рекурсия
Функции могут вызывать сами себя.
function factorial(n) {
if (n === 0) return 1;
return n * factorial(n - 1);
}
console.log(factorial(5)); // 120Методы в JavaScript
Методы — это функции, которые принадлежат объекту и вызываются через него. Методы используются для работы с объектами, массивами, строками и другими структурами.
1. Методы объекта
Метод — это просто функция, добавленная в объект.
const user = {
name: "Alice",
greet() {
return `Hello, ${this.name}!`;
},
};
console.log(user.greet()); // Hello, Alice!Ключевое слово this в методе ссылается на текущий объект.
2. Методы массивов
Массивы имеют встроенные методы для работы с данными.
Примеры методов массивов:
const numbers = [1, 2, 3, 4, 5];
// forEach
numbers.forEach(num => console.log(num)); // 1 2 3 4 5
// map
const squares = numbers.map(num => num * num);
console.log(squares); // [1, 4, 9, 16, 25]
// filter
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
// reduce
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 153. Методы строк
Строки в JavaScript имеют множество встроенных методов для работы с текстом.
Примеры методов строк:
const text = "Hello, JavaScript!";
// length
console.log(text.length); // 18
// toUpperCase и toLowerCase
console.log(text.toUpperCase()); // HELLO, JAVASCRIPT!
console.log(text.toLowerCase()); // hello, javascript!
// slice
console.log(text.slice(7, 17)); // JavaScript
// includes
console.log(text.includes("Java")); // true
// replace
console.log(text.replace("JavaScript", "World")); // Hello, World!4. Методы работы с объектами
Объекты также имеют встроенные методы.
Примеры:
const user = { name: "Alice", age: 25 };
// Object.keys
console.log(Object.keys(user)); // ['name', 'age']
// Object.values
console.log(Object.values(user)); // ['Alice', 25]
// Object.entries
console.log(Object.entries(user)); // [['name', 'Alice'], ['age', 25]]Различия между функциями и методами
| Функция | Метод |
|---|---|
| Независима от объектов. | Привязана к объекту. |
Вызывается просто по имени (func()). |
Вызывается через объект (obj.method()). |
| Может быть использована где угодно. | Используется для взаимодействия с объектом. |
Заключение
Функции и методы являются основными строительными блоками в JavaScript, обеспечивая повторное использование кода, обработку данных и взаимодействие с объектами. Разница между ними в том, что методы всегда связаны с объектами, а функции — независимы.
Задание
- Выделить повторяющиеся части программы (например, расчет суммы, среднего, максимума и вывод результата) в отдельные функции.
- Создать универсальную функцию для обработки набора чисел (сумма, среднее, максимум) и вызовы этой функции для каждого набора.
- Упростить и структурировать код, сохраняя его функциональность.
Программа с повторяющимся кодом:
// Получение первого набора чисел от пользователя
let input1 = prompt("Введите первый список чисел через запятую:");
let numbers1 = input1.split(",").map(num => parseFloat(num));
let sum1 = 0;
for (let i = 0; i < numbers1.length; i++) {
sum1 += numbers1[i];
}
let avg1 = sum1 / numbers1.length;
let max1 = Math.max(...numbers1);
console.log("Первый набор:");
console.log("Сумма:", sum1);
console.log("Среднее:", avg1);
console.log("Максимум:", max1);
// Получение второго набора чисел от пользователя
let input2 = prompt("Введите второй список чисел через запятую:");
let numbers2 = input2.split(",").map(num => parseFloat(num));
let sum2 = 0;
for (let i = 0; i < numbers2.length; i++) {
sum2 += numbers2[i];
}
let avg2 = sum2 / numbers2.length;
let max2 = Math.max(...numbers2);
console.log("Второй набор:");
console.log("Сумма:", sum2);
console.log("Среднее:", avg2);
console.log("Максимум:", max2);
// Получение третьего набора чисел от пользователя
let input3 = prompt("Введите третий список чисел через запятую:");
let numbers3 = input3.split(",").map(num => parseFloat(num));
let sum3 = 0;
for (let i = 0; i < numbers3.length; i++) {
sum3 += numbers3[i];
}
let avg3 = sum3 / numbers3.length;
let max3 = Math.max(...numbers3);
console.log("Третий набор:");
console.log("Сумма:", sum3);
console.log("Среднее:", avg3);
console.log("Максимум:", max3);Почему это полезно:
- Меньше повторений: Читабельность, оптимизация времени при разработки и отладки.
- Модульность: Повторное использование заготовленного блока, оптимизация расчётом - кеширование действий процессора, быстрая отладка.
- Практика рефакторинга: Ускорение работы и последующих обновлений.