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

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

Определение и вызов функции

Объявление функции начинается с ключевого слова function, за которым следует имя функции, которую вы хотите создать, после чего круглые скобки, т.е. (), и, наконец, код вашей функции, заключенный в фигурные скобки {}. Вот основной синтаксис для объявления функции:

function functionName() {
    // Code to be executed
}

Вот простой пример функции, которая покажет приветственное сообщение:

// Функция
function sayHello() {
    alert("Hello, welcome to this website!");
}
 
// Вызов функции
sayHello(); // Выводит: Hello, welcome to this website!

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

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

Добавление параметров в функции

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

Параметры задаются в первой строке функции внутри круглых скобок, например:

function functionName(parameter1, parameter2, parameter3) {
    // Code to be executed
}

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

// Функция
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Вызов функции
displaySum(6, 20); // Выводит: 26
displaySum(-5, 17); // Выводит: 12

Вы можете определить столько параметров, сколько хотите. Однако для каждого указанного параметра необходимо передать соответствующий аргумент функции при его вызове, в противном случае его значение становится undefined. Давайте рассмотрим следующий пример:

// Функция
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Вызов функции
showFullname("Clark", "Kent"); // Выводит: Clark Kent
showFullname("John"); // Выводит: John undefined

Значения по умолчанию для параметров функции

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

function sayHello(name = 'Guest') {
    alert('Hello, ' + name);
}

sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, John

Хотя до ES6, чтобы добиться того же, нам пришлось написать что-то вроде этого:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Hello, ' + name);
}

sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, John

Чтобы узнать о других функциях ES6, ознакомьтесь с Руководством по функциям ES6 в JavaScript.

Возвращение значений из функции

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

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

// Функция
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Отображение возвращенного значения
alert(getSum(6, 20)); // Выводит: 26
alert(getSum(-5, 17)); // Выводит: 12

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

// Функция
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Сохраняем возвращаемое значение в переменной
var all = divideNumbers(10, 2);
 
// Отображение отдельных значений
alert(all[0]); // Выводит: 10
alert(all[1]); // Выводит: 2
alert(all[2]); // Выводит: 5

Работа с выражениями функций

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

// Объявление функции
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Выражение функции
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};

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

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // Выводит: 15
 
var sum = getSum(7, 25);
alert(sum); // Выводит: 32

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

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

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

declaration(); // Выводит: Hi, I'm a function declaration!
function declaration() {
    alert("Hi, I'm a function declaration!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Hi, I'm a function expression!");
};

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

ES6 ввел еще более короткий синтаксис для написания выражения функции, которое называется arrow-функцией. См. Руководство по функциям ES6 в JavaScript.

Область действия переменной

Вы можете объявлять переменные в любом месте JavaScript. Но расположение объявления определяет степень доступности переменной в программе JavaScript, т.е. где переменная может использоваться. Эта доступность называется областью действия переменной (variable scope).

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

// Функция
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Выводит: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined

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

var greet = "Hello World!";
 
// Функция
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Выводит: Hello World!
 
alert(greet); // Выводит: Hello World!

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

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

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.