Урок 9: Функции в JavaScript’e

Функции это «строительные блоки» кода. Они помогают структурировать программу, избегать повторений и делать код понятным. Если представить, что программа это завод, то функции это конвейеры, которые выполняют конкретные задачи: собирают детали, красят их или упаковывают. Давайте научимся создавать такие конвейеры.

Объявление функций

Функции в JavaScript можно объявлять несколькими способами. Разберем основные.

1. Объявление функции

Самый простой способ создать функцию использовать function declaration.
Синтаксис:

function имяФункции() {
  // Код, который выполняется при вызове функции
}

Пример:

function greet() {
  console.log("Привет, мир!");
}

// Вызов функции
greet(); // Выведет: "Привет, мир!"

Особенности:

• Функции, объявленные через function declaration, можно вызывать до их объявления благодаря механизму всплытия (hoisting).
• Имя функции обязательно.

2. Функциональное выражение

Здесь функция создается внутри выражения, например, при присваивании переменной:

const greet = function() {
  console.log("Привет, мир!");
};

greet(); // Вызов

Отличия от function declaration:

• Такие функции не всплывают, поэтому их нельзя вызвать до объявления.
• Часто используются для создания анонимных функций (без имени).

3. Стрелочные функции

Стрелочные функции появились в ES6. Они короче и удобны для простых операций.
Синтаксис:

const имяФункции = () => {
  // Тело функции
};

Пример:

const greet = () => {
  console.log("Привет, мир!");
};

greet();

Особенности:

• Не имеют своего this (подробнее в уроках про объекты и контекст).
• Если тело функции состоит из одной строки, можно опустить {} и return:
  javascript

  const sum = (a, b) => a + b;
  console.log(sum(2, 3)); // 5

Параметры и аргументы

Функции становятся по-настоящему мощными, когда умеют работать с входными данными. Для этого используются параметры и аргументы.

1. Параметры

Параметры это переменные, указанные в скобках при объявлении функции. Они локальны внутри функции.

Пример:

function greet(name) {
  console.log(`Привет, ${name}!`);
}

greet("Анна"); // Привет, Анна!

Здесь name — параметр.

2. Аргументы

Аргументы это конкретные значения, передаваемые в функцию при вызове. В примере выше "Анна" — аргумент.

3. Несколько параметров

Функция может принимать несколько параметров:

function introduce(name, age) {
  console.log(`Меня зовут ${name}, мне ${age} лет.`);
}

introduce("Максим", 30); // Меня зовут Максим, мне 30 лет.

4. Значения по умолчанию

Если аргумент не передан, параметр становится undefined. Чтобы избежать этого, задайте значения по умолчанию:

function greet(name = "Гость") {
  console.log(`Привет, ${name}!`);
}

greet(); // Привет, Гость!

5. Псевдомассив arguments

Внутри функции доступен объект arguments, содержащий все переданные аргументы:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(2, 3, 5)); // 10

Но лучше использовать современный синтаксис с остаточными параметрами (…rest):

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(2, 3, 5)); // 10

Возврат значений (return)

Функции могут не только выполнять код, но и возвращать результат. Для этого используется ключевое слово return.

1. Как работает return

• return завершает выполнение функции и возвращает указанное значение.
• Если return отсутствует, функция вернет undefined.

Пример:

function sum(a, b) {
  return a + b;
}

const result = sum(4, 5);
console.log(result); // 9

2. Возврат объектов и выражений

Функции могут возвращать любые типы данных:

function createUser(name, age) {
  return {
    name: name,
    age: age,
  };
}

const user = createUser("Максим", 30);
console.log(user); // { name: 'Максим', age: 30 }

Стрелочная функция с возвратом объекта:

const createUser = (name, age) => ({ name, age });

3. Прерывание выполнения

return немедленно завершает функцию:

function checkAge(age) {
  if (age < 18) {
    return "Доступ запрещен!";
  }
  return "Добро пожаловать!";
}

console.log(checkAge(20)); // "Добро пожаловать!"

Практические задачи

Попробуйте решить задачи самостоятельно, прежде чем смотреть решение.

Задача 1: Функция умножения

Напишите функцию multiply, которая принимает два числа и возвращает их произведение.

Решение:

function multiply(a, b) {
  return a * b;
}

console.log(multiply(3, 7)); // 21

Задача 2: Проверка на четность

Создайте функцию isEven, которая возвращает true, если число четное, и false — если нечетное.

Решение:

const isEven = (num) => num % 2 === 0;

console.log(isEven(4)); // true
console.log(isEven(7)); // false

Задача 3: Поиск максимального числа

Напишите функцию findMax, которая принимает три числа и возвращает наибольшее из них.

Решение:

function findMax(a, b, c) {
  return Math.max(a, b, c);
}

// Или без Math.max:
function findMax(a, b, c) {
  let max = a;
  if (b > max) max = b;
  if (c > max) max = c;
  return max;
}

console.log(findMax(5, 10, 3)); // 10

Задача 4: Генератор случайного пароля

Создайте функцию generatePassword, которая генерирует пароль из 8 символов (буквы и цифры).

Решение:

function generatePassword() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let password = '';
  for (let i = 0; i < 8; i++) {
    const index = Math.floor(Math.random() * chars.length);
    password += chars[index];
  }
  return password;
}

console.log(generatePassword()); // Например: "x3hG8pL2"

Заключение

Сегодня мы разобрали как объявлять функции, работать с параметрами и возвращать результаты. Это база, которая пригодится в любом проекте.

Главное запомнить:

• Функции помогают избегать дублирования кода.
• Параметры делают функции гибкими, а return возвращает результат.
• Стрелочные функции удобны для коротких операций.

Потренируйтесь на задачах и экспериментируйте, это лучший способ закрепить знания!

Полный курс «JavaScript для начинающих» доступен здесь — https://max-gabov.ru/javascript-dlya-nachinaushih