Функция - это блок кода, который выполняет определенную задачу.

Предположим, что нужно создать программу для создания круга и его раскрашивания. Для решения этой задачи можно создать две функции:

• функция для рисования круга
• функция для раскрашивания круга

Разделение сложной задачи на более мелкие части делает программу легкой для понимания и многократного использования.

Функции — это основные строительные блоки JavaScript, позволяющие создавать модульный и переиспользуемый код. Понимание параметров, объявления, возврата значений и переменных функций необходимо для написания эффективных приложений. Если вы хотите детальнее погрузиться в фундаментальные знания JavaScript, получить системное понимание языка и научиться применять его на практике — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

JavaScript также имеет огромное количество встроенных функций. Например, Math.sqrt() - это функция для вычисления квадратного корня из числа.

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

Синтаксис для объявления функции следующий:

function nameOfFunction() {
  // тело функции
}

• Функция объявляется с помощью ключевого слова function.
• Основные правила именования функции аналогичны именованию переменной. Лучше написать описательное имя для функции. Например, если функция используется для сложения двух чисел, можно назвать функцию add или addNumbers.
• Тело функции записывается внутри {}.

Например,

// объявление функции с именем greet()
function greet() {
  console.log('Привет!');
}

Вызов функции

В приведенной выше программе мы объявили функцию с именем greet(). Чтобы использовать эту функцию, нам нужно ее вызвать.

Вот как можно вызвать приведенную выше функцию greet().

// вызов функции
greet();

Пример 1: Вывод текста

// программа для вывода текста в консоль

// объявление функции
function greet() {
  console.log('Привет!');
}

// вызов функции
greet();

Вывод в консоль:

Привет!

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

Функция также может быть объявлена с параметрами. Параметр - это значение, которое передается при объявлении функции.

function greet(name) {
  // код
}

// вызов функции
greet(name);

Где name - это передаваемый параметр.

Пример 2: Функция с параметрами

// программа для вывода текста

// объявление функции
function greet(name) {
  console.log('Привет, ' + name + ':)');
}

// имя переменной может быть разным
let name = prompt('Введите имя: ');

// вызов функции
greet(name);

Вывод в консоль:

Введите имя: Илон
Привет, Илон :)

В приведенной выше программе функция greet объявлена с параметром name. Пользователю предлагается ввести имя. Затем при вызове функции в нее передается аргумент.

Примечание: Когда значение передается при объявлении функции, оно называется параметром. А когда функция вызывается, переданное значение называется аргументом.

Пример 3: Сложение двух чисел

// программа для сложения двух чисел с помощью функции

// объявление функции
function add(a, b) {
  console.log(a + b);
}

// вызов функций
add(3, 4);
add(2, 9);

Вывод в консоль:

7
11

В приведенной выше программе функция add используется для нахождения суммы двух чисел.

• Функция объявлена с двумя параметрами a и b.
• Функция вызывается, используя ее имя и передавая два аргумента 3 и 4 в одном и 2 и 9 в другом.

Вызывать функцию можно бесконечное множество раз. Можно написать одну функцию, а затем вызывать ее несколько раз с разными аргументами.

Возврат функции

Оператор return можно использовать для возврата значения вызова функции.

Оператор return означает, что функция завершилась. Любой код после return не выполняется.

Если ничего не возвращается, функция возвращает значение undefined.

function add(num1, num2) {
  // код
  return result; // возвращаем результат
}

// вызов функции
let x = add(a, b); // после вызова получаем резльтат выполнения функции
// код

Сумма двух чисел

// программа для сложения двух чисел

// объявление функции
function add(a, b) {
  return a + b;
}

// принимаем ввод от пользователя
let number1 = parseFloat(prompt('Введите первое число: '));
let number2 = parseFloat(prompt('Введите второе число: '));

// вызов функции
let result = add(number1, number2);

// вывод в консоль
console.log('Сумма: ' + result);

Вывод в консоль:

Введите первое число: 3.4
Введите второе число: 4
Сумма: 7.4

В приведенной выше программе сумма чисел возвращается функцией с помощью оператора return. И это значение сохраняется в переменной result.

Преимущества использования функции

• Функция делает код многоразовым. Можно объявить ее один раз и использовать несколько раз.
• Функция делает программу проще, так как каждая небольшая задача делится на функции.
• Функция повышает читабельность.

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

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

// программа для нахождения квадрата числа

// функция объявляется внутри переменной
let x = function (num) {
  return num * num;
};
console.log(x(4));

// может использоваться как значение переменной для других переменных
let y = x(3);
console.log(y);

Вывод в консоль:

16
9

В приведенной выше программе переменная x используется для хранения функции. Здесь функция рассматривается как выражение. И функция вызывается с помощью имени переменной.

Приведенная выше функция называется анонимной функцией.

Примечание: В ES2015 выражения JavaScript записываются как стрелочные функции.

Scope переменных

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

В JavaScript переменная имеет два типа области видимости:

1. Глобальный
2. Локальный

Глобальный Scope

Переменная, объявленная в верхней части программы или вне функции, считается переменной глобальной области видимости.

Рассмотрим пример переменной глобальной области видимости:

// программа для вывода текста
let a = 'привет';

function greet() {
  console.log(a);
}

greet(); // привет

В приведенной выше программе переменная a объявлена в верхней части программы и является глобальной переменной. Это означает, что переменная a может быть использована в любом месте программы.

Значение глобальной переменной может быть изменено внутри функции. Например,

// программа, чтобы показать изменение глобальной переменной
let a = 'привет';

function greet() {
  a = 3;
}

// до вызова функции
console.log(a);

// после вызова функции
greet();
console.log(a); // 3

В приведенной выше программе переменная a является глобальной переменной. Значение переменной a равно привет. Затем к переменной a обращаются внутри функции, и ее значение меняется на 3.

Следовательно, значение a меняется после его изменения внутри функции.

Примечание: Следует избегать использования глобальных переменных, поскольку значение глобальной переменной может изменяться в различных областях программы. Это может привести к неожиданным результатам в программе.

В JavaScript переменную можно использовать и без ее объявления. Если переменная используется без объявления, она автоматически становится глобальной переменной.

Например,

function greet() {
  a = 'привет';
}

greet();

console.log(a); // привет

В приведенной выше программе переменная a является глобальной переменной.

Если бы переменная была объявлена с помощью let a = "hello", программа выдала бы ошибку.

Примечание: В JavaScript существует "strict mode";, в котором переменная не может быть использована без ее объявления.

локальный Scope

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

Пример 1: Переменная локальной области

// программа, показывающая локальную область видимости переменной
let a = 'привет, ';

function greet() {
  let b = 'мир';
  console.log(a + b);
}

greet();
console.log(a + b); // ошибка

Вывод в консоль:

привет, мир
Uncaught ReferenceError: b is not defined

В приведенной выше программе переменная a является глобальной переменной, а переменная b - локальной переменной. Доступ к переменной b возможен только внутри функции greet. Поэтому, когда мы пытаемся получить доступ к переменной b вне функции, возникает ошибка.

let имеет блочный scope

Ключевое слово let имеет блочную область видимости. Доступ к переменной возможен только в непосредственном блоке.

Пример 3: Блочная область видимости переменной

// программа, показывающая концепцию блочной области видимости

// глобальная переменная
let a = 'Привет';

function greet() {
  // локальная переменная
  let b = 'Мир';

  console.log(a + ' ' + b);

  if (b == 'Мир') {
    // переменная блочной видимости
    let c = 'привет';

    console.log(a + ' ' + b + ' ' + c);
  }

  // переменная c здесь недоступна
  console.log(a + ' ' + b + ' ' + c);
}

greet();

Вывод в консоль:

Привет Мир
Привет Мир привет
Uncaught ReferenceError: c is not defined

В приведенной выше программе переменная:

• a - это глобальная переменная. К ней можно обратиться в любом месте программы.
• b - это локальная переменная. Доступ к ней возможен только внутри функции greet.
• c - это переменная блочной scope. Доступ к ней возможен только внутри блока оператора if.

Поэтому в приведенной выше программе первые два console.log() работают без проблем.

Однако, когда мы пытаемся получить доступ к переменной c, с блочной scope, вне блока в третьей строке console.log(). Это приводит к ошибке.

Примечание: В JavaScript переменная var относится к функциональной scope, а let - к блочной scope. Если попытаться использовать var c = 'hello'; внутри оператора if в приведенной выше программе, вся программа будет работать, так как c будет рассматриваться как локальная переменная.

Умение создавать чистые, переиспользуемые и эффективные функции - признак опытного разработчика. Для этого необходимо понимать все аспекты работы функций в JavaScript, от способов объявления до области видимости переменных. На курсе JavaScript с нуля вы изучите различные способы объявления функций, особенности работы с параметрами и аргументами, использование ключевого слова return для возврата значений, а также область видимости переменных в функциях. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в JavaScript прямо сегодня.