JavaRush /Курсы /Модуль 1: Web Core /Функции в JavaScript: объявление, параметры, return

Функции в JavaScript: объявление, параметры, return

Модуль 1: Web Core
21 уровень , 7 лекция
Открыта

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.

1
Задача
Модуль 1: Web Core, 21 уровень, 7 лекция
Недоступна
Уведомление о сохранении
Уведомление о сохранении
1
Задача
Модуль 1: Web Core, 21 уровень, 7 лекция
Недоступна
Обновление текста
Обновление текста
Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ