Функции в JS

В этой статье вы познакмитесь с функциями и функциональными выражениями в JavaScript.  

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

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

1. функцию, которая будет рисовать круг;
2. функцию, которая раскрашивает круг.

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

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

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

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

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

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

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

Например, 

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

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

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

Вот, как вызвать функцию greet():

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

Как это работает

Пример 1. Функция для вывода текста в консоль

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

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

Вывод

Привет!

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

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

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

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

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

// значение переменной name будет меняться в зависимости от введенных данных
let name = prompt("Введите имя: ");

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

Вывод

Введите имя: Андрей
Привет, Андрей!

В этой программе функция 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 не выполняется.

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

Как это работает

Пример 4. Функция для сложения двух чисел

// объявление функции
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 выражения записываются как стрелочные функции. Вы узнаете о них в следующих статьях.