JavaScript для начинающих: функции

Функции в JavaScript — это небольшие подпрограммы, содержащие определённый код. К ним можно неоднократно обращаться в течение выполнения программы, каждый раз выполняя содержащийся в них код. Это очень удобно, так как позволяет вынести повторяющийся код в одно место, избегая его многократного переписывания.

Что такое функции?

Мы уже неоднократно сталкивались с функциями. Например, в прошлом уроке рассматривались встроенные функции alert, confirm и prompt, позволяющие быстро создавать всплывающие окна с заданным текстом. Без функций для создания каждого всплывающего окна пришлось бы каждый раз прописывать весь необходимый код. Вместо этого, весь код находится внутри отдельной функции (например, alert), и для его выполнения достаточно обратиться к функции и передать ей аргументы (значения, передаваемые в круглых скобках).

Функции позволяют сократить код и вынести повторяющиеся участки в одно место. Для выполнения этого кода достаточно сослаться на функцию. Иногда функции называют методами. Методы — это функции, принадлежащие объектам (объекты будут изучены позже). В сущности, функция и метод — это одно и то же.

Создание собственной функции

Рассмотрим создание собственной функции. Для этого используется ключевое слово function. Имя функции может быть любым (без специальных символов). Например, создадим функцию info, которая выводит информацию на экран:

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

После имени функции указываются круглые скобки () и фигурные скобки {}, которые нельзя пропускать. Код внутри фигурных скобок — это тело функции, которое выполняется при каждом обращении к функции. Для выполнения функции нужно её вызвать:

info();

Обновление страницы покажет «Привет» и «!» в консоли. Функцию можно вызывать сколько угодно раз.

Параметры функций

Функции могут принимать параметры — переменные, получающие значения при вызове функции. Например, изменим функцию info:

function info(город) {
  console.log(город + "!");
}
info("Хеллоу");

Теперь функция принимает параметр город, и при вызове функции ему передаётся значение.

Пример функции: сложение чисел

Создадим функцию сумма, которая принимает два параметра и возвращает их сумму:

function сумма(a, b) {
  let c = a + b;
  console.log(c);
  info(c); // Вызов другой функции внутри функции
}
сумма(5, 7);

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

Пример функции: подсчёт суммы элементов массива

Создадим функцию сумма, которая принимает массив и подсчитывает сумму его элементов:

function сумма(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  console.log(sum);
  return sum; //Возвращение значения из функции
}

let arr1 = [6, 8, 1];
let arr2 = [3, 7, 90];
let arr3 = [10, 20, 30];

console.log(сумма(arr1));
console.log(сумма(arr2));
console.log(сумма(arr3));

В этом примере функция сумма использует цикл for для перебора элементов массива и подсчета их суммы. Результат выводится на экран.

Функция может возвращать значение с помощью ключевого слова return. Возвращаемое значение можно сохранить в переменной:

let result = сумма(arr1);
console.log(result);

Локальные и глобальные переменные

Локальная переменная: объявлена внутри функции, видна только внутри функции.
Глобальная переменная: объявлена вне функции, видна везде.

Пример:

let num = 10; // Глобальная переменная

function info() {
  let num = 20; // Локальная переменная
  console.log(num); 
}

console.log(num); // Выведет 10
info(); // Выведет 20
console.log(num); // Выведет 10

Внутри функции можно использовать глобальные переменные, но локальные переменные доступны только внутри функции, где они объявлены. Нельзя обращаться к локальной переменной извне функции.

Функции — мощный инструмент в JavaScript, позволяющий структурировать код, избегать повторений и создавать более читаемый и поддерживаемый код. Понимание работы с параметрами, возвращаемыми значениями и областью видимости переменных является важным навыком для любого JavaScript-разработчика.

JavaScript для начинающих: функции — урок 10