Параметры функций в JavaScript
Введение
Что такое функция и параметр функции?
Функция — это блок кода, который выполняет определённую задачу. Представьте её как
робота-помощника, который умеет делать конкретные действия.
Параметр функции — это значение, которое передаётся в функцию для настройки её поведения.
Аналогии
- Механизм: Параметр — как настройка на пульте управления (скорость, мощность).
- Крокодил: Если дать крокодилу яблоко — он будет танцевать. Если грушу — просто ходить. Без
фрукта он ходит как обычно.
Зачем нужны параметры?
Основные преимущества
- Избегание дублирования кода (
принцип DRY — Don't Repeat Yourself)
- Гибкость и универсальность
- Настройка поведения функции
Пример без параметров
// Плохой код — много повторов
function showFirstName() {
console.log(firstNameElement.value)
console.log(firstNameElement.className)
}
function showLastName() {
console.log(lastNameElement.value)
console.log(lastNameElement.className)
}
Пример с параметрами
// Хороший код — универсальный
function showInfo(element) {
console.log(element.value)
console.log(element.className)
}
showInfo(firstNameElement) // Передаем нужный элемент
showInfo(lastNameElement) // Используем ту же функцию
Объявление и вызов функций
Синтаксис
// Объявление функции
function имяФункции(параметр1, параметр2) {
// код функции
}
// Вызов функции
имяФункции(значение1, значение2)
Пример
// Объявление
function greet(name) {
console.log("Привет, " + name)
}
// Вызов
greet("Анна") // Результат: "Привет, Анна"
greet("Иван") // Результат: "Привет, Иван"
Область видимости параметров
- Параметры —
локальные переменные
- Доступны только внутри функции
- Не конфликтуют с глобальными переменными
let name = "Глобальная"
function showName(name) {
console.log(name)
}
showName("Локальная") // Выведет "Локальная"
console.log(name) // Выведет "Глобальная"
💡
console.log(name) внутри функции возьмёт значение из параметров функции showName, которые
попадут туда при её вызове
Параметры и объекты
Важное правило
Все объекты, передаваемые в функцию, должны иметь одинаковый набор свойств.
// Пример объекта
const user = {
name: "Анна",
age: 25,
}
function showUserInfo(user) {
console.log(user.name)
console.log(user.age)
}
showUserInfo(user) // выведет два сообщения "Анна" и 25
Практические примеры
Встроенные функции
- document.getElementById() — ищет элемент по ID
- console.log() — выводит сообщение в консоль
- alert() — показывает диалоговое окно
// Примеры использования
const element = document.getElementById("randomId")
console.log("Сообщение")
alert("Внимание!")
Что будет, если не передать параметр?
function multiply(a, b) {
return a * b
}
console.log(multiply(5)) // Ошибка! Не хватает второго параметра
💡
На заметку: В современном синтаксисе JavaScript можно задать параметры функции по умолчанию
function multiply(a = 1, b = 2) {
// 1 и 2 параметры по умолчанию (если не передать параметры при вызове функции,
// то будут использованы эти значения
return a * b
}
console.log(multiply(5)) // Выведет 10
console.log(multiply(3)) // Выведет 6
console.log(multiply()) // Выведет 2
Простые примеры из жизни (для лучшего понимания)
Представьте, что функция — это ваша мультиварка.
Без параметров: Вы говорите ей: "Приготовь завтрак!". Она каждый раз готовит одно и то же — яичницу.
function makeBreakfast() {
console.log("Готовлю яичницу")
}
makeBreakfast() // Всегда "Готовлю яичницу"
С параметрами: Вы говорите: "Приготовь завтрак из яиц и бекона!". А на следующий день: "Приготовь
завтрак из овсянки и ягод!". Параметры (ingredients1, ingredients2) позволяют каждый раз
настраивать команду.
function makeBreakfast(ingredient1, ingredient2) {
console.log("Готовлю завтрак из " + ingredient1 + " и " + ingredient2)
}
makeBreakfast("яиц", "бекона") // "Готовлю завтрак из яиц и бекона"
makeBreakfast("овсянки", "ягод") // "Готовлю завтрак из овсянки и ягод"
Схема работы функции с параметрами
🏠 Задания для практики
Задание 1: Приветствие
Создайте функцию greetUser, которая принимает два параметра: userName и timeOfDay (время
суток), и выводит приветственное сообщение.
function greetUser(userName, timeOfDay) {
// Ваш код здесь
// Нужно собрать строку вида: "Добрый вечер, Анна!"
// Используйте для этого сложение строк (конкатенацию) через знак +
}
// Примеры использования. Должны работать вот так:
greetUser("Анна", "вечер") // Должно вывести "Добрый вечер, Анна!"
greetUser("Иван", "день") // Должно вывести "Добрый день, Иван!"
Задание 2: Простой расчёт
Создайте функцию multiplyByTwo, которая принимает один параметр number, умножает это число на 2 и
выводит результат в консоль.
function multiplyByTwo(number) {
// Ваш код здесь
}
// Примеры использования:
multiplyByTwo(5) // Должно вывести 10
multiplyByTwo(10) // Должно вывести 20
multiplyByTwo(-3) // Должно вывести -6
